diff options
6 files changed, 27 insertions, 2 deletions
diff --git a/.changeset/twelve-kings-rest.md b/.changeset/twelve-kings-rest.md new file mode 100644 index 000000000..8afe3df47 --- /dev/null +++ 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 index e10a7166e..5667f705c 100644 --- 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 index 073419a5e..e0f693feb 100644 --- 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 new file mode 100644 index 000000000..610502525 --- /dev/null +++ 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 new file mode 100644 index 000000000..87d21178a --- /dev/null +++ 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 new file mode 100644 index 000000000..c585b2035 --- /dev/null +++ b/packages/astro/test/fixtures/0-css/src/styles/partial-main.scss @@ -0,0 +1,2 @@ +@import './partial-1'; +@import './partial-2'; |