Allow vite to refer to inlined CSS (#8351)

* fix(client build): keep inlined stylesheets

* add changesets

* appease linter

* eslint: allow variables beginning with an underscore to be unused

* remove eslint-ignore that's no longer needed

* ready for review

.changeset/chatty-walls-happen.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixed a case where dynamic imports tried to preload inlined stylesheets.

.changeset/fair-countries-admire.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+Removed vite warnings.

.eslintrc.cjs

@@ -13,7 +13,7 @@ module.exports = {
   rules: {
     // These off/configured-differently-by-default rules fit well for us
     '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
-    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: "^_", ignoreRestSiblings: true }],
     'no-only-tests/no-only-tests': 'error',
     '@typescript-eslint/no-shadow': ['error'],
     'no-console': 'warn',

packages/astro/src/core/app/index.ts

@@ -121,8 +121,6 @@ export class App {
 		}
 		return pathname;
 	}
-	// Disable no-unused-vars to avoid breaking signature change
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	match(request: Request, _opts: MatchOptions = {}): RouteData | undefined {
 		const url = new URL(request.url);
 		// ignore requests matching public assets

packages/astro/src/core/build/plugins/plugin-css.ts

@@ -200,7 +200,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 			const inlineConfig = settings.config.build.inlineStylesheets;
 			const { assetsInlineLimit = 4096 } = settings.config.vite?.build ?? {};
 
-			Object.entries(bundle).forEach(([id, stylesheet]) => {
+			Object.entries(bundle).forEach(([_, stylesheet]) => {
 				if (
 					stylesheet.type !== 'asset' ||
 					stylesheet.name?.endsWith('.css') !== true ||
@@ -217,8 +217,6 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 						? false
 						: assetSize <= assetsInlineLimit;
 
-				if (toBeInlined) delete bundle[id];
-
 				// there should be a single js object for each stylesheet,
 				// allowing the single reference to be shared and checked for duplicates
 				const sheet: StylesheetAsset = toBeInlined

packages/astro/test/css-dangling-references.test.js

@@ -0,0 +1,36 @@
+import { expect } from 'chai';
+import { loadFixture } from './test-utils.js';
+
+const cssAssetReferenceRegExp = /_astro\/[A-Za-z0-9\-]+\.[a0-9a-f]{8}\.css/g
+
+describe("When Vite's preloadModule polyfill is used", async () => {
+
+    let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+            root: './fixtures/css-dangling-references/'
+        });
+		await fixture.build();
+	});
+
+    it('there are no references to deleted CSS chunks', async () => {
+
+        const fileNames = await fixture.readdir('/_astro/')
+        const filePaths = fileNames.map(filename => '_astro/' + filename)
+
+        const expectations = 
+            filePaths
+            .filter(filePath => filePath.endsWith('js'))
+            .map(async filePath => {
+                const contents = await fixture.readFile(filePath)
+                const cssReferences = contents.match(cssAssetReferenceRegExp)
+
+                if (cssReferences === null) return
+
+                expect(filePaths).to.contain.members(cssReferences, filePath + ' contains a reference to a deleted css asset: ' + cssReferences)
+            })
+
+        await Promise.all(expectations)
+    })
+})

packages/astro/test/fixtures/css-dangling-references/astro.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+
+// https://astro.build/config
+export default defineConfig({
+    integrations: [svelte()],
+});
+

packages/astro/test/fixtures/css-dangling-references/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@test/css-dangling-references",
+    "version": "0.0.0",
+    "private": true,
+    "dependencies": {
+      "astro": "workspace:*",
+      "@astrojs/svelte": "workspace:*",
+      "svelte": "4"
+    }
+  }
+

packages/astro/test/fixtures/css-dangling-references/src/components/DynamicallyImportedComponent1.svelte

@@ -0,0 +1,6 @@
+<style>
+  h1 {
+    background-color: gold;
+  }
+</style>
+<h1>This sentence should have a gold background.</h1>

packages/astro/test/fixtures/css-dangling-references/src/components/DynamicallyImportedComponent2.svelte

@@ -0,0 +1,6 @@
+<style>
+  p {
+    background-color: lavender;
+  }
+</style>
+<p>This sentence should have a lavender background color.</p>

packages/astro/test/fixtures/css-dangling-references/src/components/Wrapper.svelte

@@ -0,0 +1,15 @@
+<script>
+
+  export let path
+  
+  const allAppModules = import.meta.glob('./*.svelte')  
+  
+  const AppModule = Object.entries(allAppModules).find(
+    ([key]) => key.includes(path)
+  )[1]
+
+</script>
+
+{#await AppModule() then Mod}
+    <Mod.default />
+{/await}

packages/astro/test/fixtures/css-dangling-references/src/pages/glob-import-1.astro

@@ -0,0 +1,4 @@
+---
+import Wrapper from "../components/Wrapper.svelte"
+---
+<Wrapper path="1" client:load/>

packages/astro/test/fixtures/css-dangling-references/src/pages/glob-import-2.astro

@@ -0,0 +1,5 @@
+---
+import Wrapper from "../components/Wrapper.svelte"
+---
+<Wrapper path="2" client:load/>
+

packages/astro/test/fixtures/css-inline-stylesheets/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@test/css-inline-stylesheets-always",
+  "name": "@test/css-inline-stylesheets",
   "version": "0.0.0",
   "private": true,
   "dependencies": {

packages/integrations/svelte/src/index.ts

@@ -17,7 +17,8 @@ async function svelteConfigHasPreprocess(root: URL) {
 	for (const file of svelteConfigFiles) {
 		const filePath = fileURLToPath(new URL(file, root));
 		try {
-			const config = (await import(filePath)).default;
+			// Suppress warnings by vite: "The above dynamic import cannot be analyzed by Vite."
+			const config = (await import(/* @vite-ignore */ filePath)).default;
 			return !!config.preprocess;
 		} catch {}
 	}