michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix support for ?url on CSS (#2106)

Browse source 
* Fix support for ?url on CSS

* Adds a changeset

* chore(lint): Prettier fix

Co-authored-by: GitHub Action <github-action@users.noreply.github.com>
This commit is contained in:
Matthew Phillips 2021-12-03 09:19:37 -05:00 committed by GitHub
parent 4c44467668
commit 583459d0b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/gold-windows-sell.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix for using ?url with CSS imports

5
packages/astro/test/0-css.test.js
View file

@ -277,6 +277,11 @@ describe('CSS', function () {
expect((await fixture.fetch(href)).status).to.equal(200); 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 () => { it('resolves Astro styles', async () => {
const style = $('style[astro-style]'); const style = $('style[astro-style]');
expect(style.length).to.not.equal(0); expect(style.length).to.not.equal(0);

3
packages/astro/test/fixtures/0-css/src/pages/index.astro vendored
View file

@ -18,6 +18,8 @@ import VueSass from '../components/VueSass.vue';
import VueScoped from '../components/VueScoped.vue'; import VueScoped from '../components/VueScoped.vue';
import VueScss from '../components/VueScss.vue'; import VueScss from '../components/VueScss.vue';
import ReactDynamic from '../components/ReactDynamic.jsx'; import ReactDynamic from '../components/ReactDynamic.jsx';
import importedUrl from '../styles/imported-url.css?url';
--- ---
<html> <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.css')}>
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.scss')}> <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={Astro.resolve('../styles/linked.sass')}>
<link rel="stylesheet" type="text/css" href={importedUrl}>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">

3
packages/astro/test/fixtures/0-css/src/styles/imported-url.css vendored Normal file
View file

@ -0,0 +1,3 @@
.imported {
color: gold;
}

5
packages/astro/vendor/vite/dist/node/chunks/dep-35df7f96.js vendored
View file

@ -5771,6 +5771,7 @@ const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g;
const assetUrlQuotedRE = /"__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?"/g; const assetUrlQuotedRE = /"__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?"/g;
const rawRE = /(\?|&)raw(?:&|$)/; const rawRE = /(\?|&)raw(?:&|$)/;
const urlRE = /(\?|&)url(?:&|$)/; const urlRE = /(\?|&)url(?:&|$)/;
const isURLRequest = (id) => urlRE.test(id)
const chunkToEmittedAssetsMap = new WeakMap(); const chunkToEmittedAssetsMap = new WeakMap();
const assetCache = new WeakMap(); const assetCache = new WeakMap();
const assetHashToFilenameMap = new WeakMap(); const assetHashToFilenameMap = new WeakMap();
@ -19848,7 +19849,7 @@ function cssPlugin(config) {
removedPureCssFilesCache.set(config, new Map()); removedPureCssFilesCache.set(config, new Map());
}, },
async transform(raw, id) { async transform(raw, id) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { if (!isCSSRequest(id) || commonjsProxyRE.test(id) || isURLRequest(id)) {
return; return;
} }
const urlReplacer = async (url, importer) => { const urlReplacer = async (url, importer) => {
@ -19929,7 +19930,7 @@ function cssPostPlugin(config) {
hasEmitted = false; hasEmitted = false;
}, },
async transform(css, id, ssr) { async transform(css, id, ssr) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id)) { if (!isCSSRequest(id) || commonjsProxyRE.test(id) || isURLRequest(id)) {
return; return;
} }
const inlined = inlineRE.test(id); const inlined = inlineRE.test(id);