diff --git a/.changeset/gold-windows-sell.md b/.changeset/gold-windows-sell.md new file mode 100644 index 0000000000..aea9cdf42b --- /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 6e58dbe643..4387f2774d 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 ff7056c425..b3a02f5752 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 0000000000..aa84722bde --- /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 ea92bf449f..9365f132bd 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);