From 5e693c21438d3a4840cd1906a346d38f05fdb753 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Mon, 28 Nov 2022 22:29:05 +0800 Subject: [PATCH] Prevent inlining SCSS partials in dev (#5477) --- .changeset/twelve-kings-rest.md | 5 +++++ packages/astro/src/core/render/dev/css.ts | 11 +++++++++-- .../astro/test/fixtures/0-css/src/pages/index.astro | 3 +++ .../test/fixtures/0-css/src/styles/_partial-1.scss | 3 +++ .../test/fixtures/0-css/src/styles/_partial-2.scss | 5 +++++ .../test/fixtures/0-css/src/styles/partial-main.scss | 2 ++ 6 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 .changeset/twelve-kings-rest.md create mode 100644 packages/astro/test/fixtures/0-css/src/styles/_partial-1.scss create mode 100644 packages/astro/test/fixtures/0-css/src/styles/_partial-2.scss create mode 100644 packages/astro/test/fixtures/0-css/src/styles/partial-main.scss 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; + 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' +
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';