Prevent inlining SCSS partials in dev (#5477)

withastro · Nov 28, 2022 · 5e693c2 · 5e693c2
1 parent c137752
commit 5e693c2
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/twelve-kings-rest.md b/.changeset/twelve-kings-rest.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent inlining SCSS partials in dev
diff --git a/packages/astro/src/core/render/dev/css.ts b/packages/astro/src/core/render/dev/css.ts
@@ -18,8 +18,15 @@ export async function getStylesForURL(
 	for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) {
 		const ext = path.extname(importedModule.url).toLowerCase();
 		if (STYLE_EXTENSIONS.has(ext)) {
-			// The SSR module is possibly not loaded. Load it if it's null.
-			const ssrModule = importedModule.ssrModule ?? (await loader.import(importedModule.url));
+			let ssrModule: Record<string, any>;
+			try {
+				// The SSR module is possibly not loaded. Load it if it's null.
+				ssrModule = importedModule.ssrModule ?? (await loader.import(importedModule.url));
+			} catch {
+				// The module may not be inline-able, e.g. SCSS partials. Skip it as it may already
+				// be inlined into other modules if it happens to be in the graph.
+				continue;
+			}
 			if (
 				mode === 'development' && // only inline in development
 				typeof ssrModule?.default === 'string' // ignore JS module styles

diff --git a/packages/astro/test/fixtures/0-css/src/pages/index.astro b/packages/astro/test/fixtures/0-css/src/pages/index.astro
@@ -49,6 +49,9 @@ import raw from '../styles/raw.css?raw'
 		<style lang="sass">
 			@import '../styles/linked.sass'
 		</style>
+    <style lang="scss">
+			@import '../styles/partial-main.scss';
+		</style>
   </head>
   <body>
     <div class="wrapper">

diff --git a/packages/astro/test/fixtures/0-css/src/styles/_partial-1.scss b/packages/astro/test/fixtures/0-css/src/styles/_partial-1.scss
@@ -0,0 +1,3 @@
+@mixin make-red {
+  color: red;
+}
diff --git a/packages/astro/test/fixtures/0-css/src/styles/_partial-2.scss b/packages/astro/test/fixtures/0-css/src/styles/_partial-2.scss
@@ -0,0 +1,5 @@
+// relies on partial-1. make sure astro don't inline this style.
+
+.partial-test {
+  @include make-red;
+}
diff --git a/packages/astro/test/fixtures/0-css/src/styles/partial-main.scss b/packages/astro/test/fixtures/0-css/src/styles/partial-main.scss
@@ -0,0 +1,2 @@
+@import './partial-1';
+@import './partial-2';