From 583459d0b6476fc79b351648c0db3c2869edfa12 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Fri, 3 Dec 2021 09:19:37 -0500 Subject: [PATCH] Fix support for ?url on CSS (#2106) * Fix support for ?url on CSS * Adds a changeset * chore(lint): Prettier fix Co-authored-by: GitHub Action --- .changeset/gold-windows-sell.md | 5 +++++ packages/astro/test/0-css.test.js | 5 +++++ packages/astro/test/fixtures/0-css/src/pages/index.astro | 3 +++ .../astro/test/fixtures/0-css/src/styles/imported-url.css | 3 +++ packages/astro/vendor/vite/dist/node/chunks/dep-35df7f96.js | 5 +++-- 5 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 .changeset/gold-windows-sell.md create mode 100644 packages/astro/test/fixtures/0-css/src/styles/imported-url.css diff --git a/.changeset/gold-windows-sell.md b/.changeset/gold-windows-sell.md new file mode 100644 index 000000000..aea9cdf42 --- /dev/null +++ b/.changeset/gold-windows-sell.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix for using ?url with CSS imports diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index 6e58dbe64..4387f2774 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -277,6 +277,11 @@ describe('CSS', function () { expect((await fixture.fetch(href)).status).to.equal(200); }); + it('resolved imported CSS with ?url', async () => { + const href = $('link[href$="imported-url.css"]').attr('href'); + expect((await fixture.fetch(href)).status).to.equal(200); + }); + it('resolves Astro styles', async () => { const style = $('style[astro-style]'); expect(style.length).to.not.equal(0); 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 ff7056c42..b3a02f575 100644 --- a/packages/astro/test/fixtures/0-css/src/pages/index.astro +++ b/packages/astro/test/fixtures/0-css/src/pages/index.astro @@ -18,6 +18,8 @@ import VueSass from '../components/VueSass.vue'; import VueScoped from '../components/VueScoped.vue'; import VueScss from '../components/VueScss.vue'; import ReactDynamic from '../components/ReactDynamic.jsx'; + +import importedUrl from '../styles/imported-url.css?url'; --- @@ -37,6 +39,7 @@ import ReactDynamic from '../components/ReactDynamic.jsx'; +
diff --git a/packages/astro/test/fixtures/0-css/src/styles/imported-url.css b/packages/astro/test/fixtures/0-css/src/styles/imported-url.css new file mode 100644 index 000000000..aa84722bd --- /dev/null +++ b/packages/astro/test/fixtures/0-css/src/styles/imported-url.css @@ -0,0 +1,3 @@ +.imported { + color: gold; +} diff --git a/packages/astro/vendor/vite/dist/node/chunks/dep-35df7f96.js b/packages/astro/vendor/vite/dist/node/chunks/dep-35df7f96.js index ea92bf449..9365f132b 100644 --- a/packages/astro/vendor/vite/dist/node/chunks/dep-35df7f96.js +++ b/packages/astro/vendor/vite/dist/node/chunks/dep-35df7f96.js @@ -5771,6 +5771,7 @@ const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g; const assetUrlQuotedRE = /"__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?"/g; const rawRE = /(\?|&)raw(?:&|$)/; const urlRE = /(\?|&)url(?:&|$)/; +const isURLRequest = (id) => urlRE.test(id) const chunkToEmittedAssetsMap = new WeakMap(); const assetCache = new WeakMap(); const assetHashToFilenameMap = new WeakMap(); @@ -19848,7 +19849,7 @@ function cssPlugin(config) { removedPureCssFilesCache.set(config, new Map()); }, async transform(raw, id) { - if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { + if (!isCSSRequest(id) || commonjsProxyRE.test(id) || isURLRequest(id)) { return; } const urlReplacer = async (url, importer) => { @@ -19929,7 +19930,7 @@ function cssPostPlugin(config) { hasEmitted = false; }, async transform(css, id, ssr) { - if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { + if (!isCSSRequest(id) || commonjsProxyRE.test(id) || isURLRequest(id)) { return; } const inlined = inlineRE.test(id);