Ensure `appEntrypoint` is referenced in Vue components (#9490)

* fix(#6827): ensure `appEntrypoint` is referenced in Vue components

* chore: add test

* chore: add changeset

* fix: windows handling

* Update packages/integrations/vue/src/index.ts

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

* chore: address review feedback

* chore: update lockfile

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

9 files changed, 124 insertions, 0 deletions

diff --git a/packages/integrations/vue/test/app-entrypoint-css.test.js b/packages/integrations/vue/test/app-entrypoint-css.test.js
new file mode 100644
index 000000000..b629f1d25
--- /dev/null
+++ b/packages/integrations/vue/test/app-entrypoint-css.test.js
@@ -0,0 +1,67 @@
+import { loadFixture } from './test-utils.js';
+import { expect } from 'chai';
+import { load as cheerioLoad } from 'cheerio';
+
+describe('App Entrypoint CSS', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/app-entrypoint-css/',
+		});
+	})
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		})
+
+		it('injects styles referenced in appEntrypoint', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerioLoad(html);
+
+			// test 1: basic component renders
+			expect($('#foo > #bar').text()).to.eq('works');
+
+			// test 2: injects the global style on the page
+			expect($('style').first().text().trim()).to.eq(':root{background-color:red}');
+		});
+
+		it('does not inject styles to pages without a Vue component', async () => {
+			const html = await fixture.readFile('/unrelated/index.html');
+			const $ = cheerioLoad(html);
+
+			expect($('style').length).to.eq(0);
+			expect($('link[rel="stylesheet"]').length).to.eq(0);
+		});
+	})
+
+	describe('dev', () => {
+		let devServer;
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		})
+		after(async () => {
+			await devServer.stop();
+		})
+
+		it('loads during SSR', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerioLoad(html);
+			
+			// test 1: basic component renders
+			expect($('#foo > #bar').text()).to.eq('works');
+			// test 2: injects the global style on the page
+			expect($('style').first().text().replace(/\s+/g, '')).to.eq(':root{background-color:red;}');
+		});
+
+		it('does not inject styles to pages without a Vue component', async () => {
+			const html = await fixture.fetch('/unrelated').then((res) => res.text());
+			const $ = cheerioLoad(html);
+
+			expect($('style').length).to.eq(0);
+			expect($('link[rel="stylesheet"]').length).to.eq(0);
+		});
+	})
+});
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint-css/astro.config.mjs
new file mode 100644
index 000000000..c4a9f8f33
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+export default defineConfig({
+  integrations: [
+    vue({ appEntrypoint: '/src/app.ts' })
+  ],
+})
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint-css/package.json
new file mode 100644
index 000000000..b34b4b99c
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/vue-app-entrypoint-css",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/vue": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/app.ts b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/app.ts
new file mode 100644
index 000000000..05742cb89
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/app.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Bar from './components/Bar.vue'
+// Important! Test that styles here are injected to the page
+import '/src/main.css'
+
+
+export default function setup(app: App) {
+	app.component('Bar', Bar);
+}
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Bar.vue
new file mode 100644
index 000000000..9e690ea06
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Bar.vue
@@ -0,0 +1,3 @@
+<template>
+	<div id="bar">works</div>
+</template>
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Foo.vue
new file mode 100644
index 000000000..3e648808c
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Foo.vue
@@ -0,0 +1,5 @@
+<template>
+	<div id="foo">
+		<Bar />
+	</div>
+</template>
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/main.css b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/main.css
new file mode 100644
index 000000000..5c197d2cf
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/main.css
@@ -0,0 +1,3 @@
+:root {
+    background-color: red;
+}
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/index.astro
new file mode 100644
index 000000000..3240cbe0f
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+import Foo from '../components/Foo.vue';
+---
+
+<html>
+	<head>
+		<title>Vue App Entrypoint</title>
+	</head>
+	<body>
+		<Foo client:load />
+	</body>
+</html>
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/unrelated.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/unrelated.astro
new file mode 100644
index 000000000..0952e25a7
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/unrelated.astro
@@ -0,0 +1,8 @@
+<html>
+	<head>
+		<title>Unrelated page</title>
+	</head>
+	<body>
+		<h1>I shouldn't have styles</h1>
+	</body>
+</html>