Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: support importing css with ?url #5940

Closed
wants to merge 3 commits into from
Closed

fix: support importing css with ?url #5940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
403298c
fix: support importing css with ?url
matthewp Dec 2, 2021
57c9551
Ran prettier
matthewp Dec 2, 2021
4ffad87
Update the tests to work in the build
matthewp Dec 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/playground/assets/__tests__/assets.spec.ts
View file
Open in desktop
Expand Up @@ -183,6 +183,16 @@ test('?url import', async () => {
)
})

test('?url import on css', async () => {
const src = readFile('css/icons.css')
const txt = await page.textContent('.url-css')
expect(txt).toEqual(
isBuild
? `data:text/css;base64,${Buffer.from(src).toString('base64')}`
: '/foo/css/icons.css'
)
})

describe('unicode url', () => {
test('from js import', async () => {
const src = readFile('テスト-測試-white space.js')
Expand Down
6 changes: 6 additions & 0 deletions packages/playground/assets/index.html
View file
Open in desktop
Expand Up @@ -129,6 +129,9 @@ <h2>new URL('...', import.meta.url)</h2>
<img class="import-meta-url-img" />
<code class="import-meta-url"></code>

<h2>?url import with css</h2>
<code class="url-css"></code>

<h2>new URL(`./${dynamic}`, import.meta.url)</h2>
<p>
<img class="dynamic-import-meta-url-img-1" />
Expand Down Expand Up @@ -168,6 +171,9 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
import unicodeUrl from './テスト-測試-white space.js?url'
text('.unicode-url', unicodeUrl)

import cssUrl from './css/icons.css?url'
text('.url-css', cssUrl)

// const url = new URL('non_existent_file.png', import.meta.url)
const metaUrl = new URL('./nested/asset.png', import.meta.url)
text('.import-meta-url', metaUrl)
Expand Down
2 changes: 2 additions & 0 deletions packages/vite/src/node/plugins/asset.ts
View file
Open in desktop
Expand Up @@ -20,6 +20,8 @@ const assetUrlQuotedRE = /"__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?"/g
const rawRE = /(\?|&)raw(?:&|$)/
const urlRE = /(\?|&)url(?:&|$)/

export const isURLRequest = (id: string) => urlRE.test(id)

export const chunkToEmittedAssetsMap = new WeakMap<RenderedChunk, Set<string>>()

const assetCache = new WeakMap<ResolvedConfig, Map<string, string>>()
Expand Down
5 changes: 3 additions & 2 deletions packages/vite/src/node/plugins/css.ts
View file
Open in desktop
Expand Up @@ -29,6 +29,7 @@ import { ResolveFn, ViteDevServer } from '../'
import {
getAssetFilename,
assetUrlRE,
isURLRequest,
registerAssetToChunk,
fileToUrl,
checkPublicFile
Expand Down Expand Up @@ -161,7 +162,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
},

async transform(raw, id) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id)) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id) || isURLRequest(id)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we check using SPECIAL_QUERY_RE instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would capture things other than ?url

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the four queries (worker, sharedworker, raw, url) captured by the regex should all be skipped for the css plugin. The former two are handled by the workerPlugin, the latter two are by the assetPlugin. Pretty sure skipping raw would be fine here too, there's not much reason to transform a raw import. It might indirectly fix #5724.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Though if we want to scope the fix to ?url only, I'm fine with the current change too.

return
}

Expand Down Expand Up @@ -275,7 +276,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
},

async transform(css, id, options) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id)) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id) || isURLRequest(id)) {
return
}

Expand Down