diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2021-12-03 09:19:37 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-12-03 09:19:37 -0500 |
| commit | 583459d0b6476fc79b351648c0db3c2869edfa12 (patch) | |
| tree | 271f2050a79f07ed0928e97da2f5c140e1a2af35 | |
| parent | 4c44467668045733b4e5c3bbed8a1bde2ba421de (diff) | |
| download | astro-583459d0b6476fc79b351648c0db3c2869edfa12.tar.gz astro-583459d0b6476fc79b351648c0db3c2869edfa12.tar.zst astro-583459d0b6476fc79b351648c0db3c2869edfa12.zip | |
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 <github-action@users.noreply.github.com>
5 files changed, 19 insertions, 2 deletions
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'; --- <html> @@ -37,6 +39,7 @@ import ReactDynamic from '../components/ReactDynamic.jsx'; <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}> <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.scss')}> <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.sass')}> + <link rel="stylesheet" type="text/css" href={importedUrl}> </head> <body> <div class="wrapper"> 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); |