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>
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

View file

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

View file

@ -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);

View file

@ -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">

View file

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

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 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);