From 68de7cbd33a942168d2a74c244ba1c4300c6d31b Mon Sep 17 00:00:00 2001
From: stygian-desolator <73412177+stygian-desolator@users.noreply.github.com>
Date: Sun, 26 Dec 2021 15:54:08 +0800
Subject: [PATCH 1/3] feat: support importing css with ?raw
---
packages/playground/assets/__tests__/assets.spec.ts | 10 ++++++++++
packages/playground/assets/index.html | 6 ++++++
packages/playground/css/__tests__/css.spec.ts | 8 ++++++++
packages/playground/css/index.html | 3 +++
packages/playground/css/main.js | 3 +++
packages/playground/css/raw-imported.css | 3 +++
packages/vite/src/node/plugins/css.ts | 10 +++++++---
7 files changed, 40 insertions(+), 3 deletions(-)
create mode 100644 packages/playground/css/raw-imported.css
diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index c51bb4094b7b8c..8c66588d50716d 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -189,6 +189,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')
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index f3b9a0b372a608..66753240c8a54e 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -133,6 +133,9 @@ ?raw import
?url import
?url import with css
+new URL('...', import.meta.url)
![]()
@import
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)
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index f1eb66e097ad86..bc2cbfe6a1b57a 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -356,3 +356,11 @@ test('minify css', async () => {
expect(cssFile).toMatch('rgba(')
expect(cssFile).not.toMatch('#ffff00b3')
})
+
+test('?raw', async () => {
+ const rawImportCss = await page.$('.raw-imported-css')
+
+ expect(await rawImportCss.textContent()).toBe(
+ require('fs').readFileSync(require.resolve('../raw-imported.css'), 'utf-8')
+ )
+})
diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 7a79bb1629f989..427bbc437866a5 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -104,6 +104,9 @@ CSS
Inlined import - this should NOT be red.
+
+ Raw Support
+
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 24a278c8687940..df3563a9d73906 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -12,6 +12,9 @@ text('.imported-less', less)
import stylus from './stylus.styl'
text('.imported-stylus', stylus)
+import rawCss from './raw-imported.css?raw'
+text('.raw-imported-css', rawCss)
+
import mod from './mod.module.css'
document.querySelector('.modules').classList.add(mod['apply-color'])
text('.modules-code', JSON.stringify(mod, null, 2))
diff --git a/packages/playground/css/raw-imported.css b/packages/playground/css/raw-imported.css
new file mode 100644
index 00000000000000..ac0aee96390c33
--- /dev/null
+++ b/packages/playground/css/raw-imported.css
@@ -0,0 +1,3 @@
+.raw-imported {
+ color: yellow;
+}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 280a4ed177983d..2a14dc638fc4ed 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -25,7 +25,7 @@ import type {
} from 'rollup'
import { dataToEsm } from '@rollup/pluginutils'
import colors from 'picocolors'
-import { CLIENT_PUBLIC_PATH } from '../constants'
+import { CLIENT_PUBLIC_PATH, SPECIAL_QUERY_RE } from '../constants'
import type { ResolveFn, ViteDevServer } from '../'
import {
getAssetFilename,
@@ -165,7 +165,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
},
async transform(raw, id, options) {
- if (!isCSSRequest(id) || commonjsProxyRE.test(id)) {
+ if (!isCSSRequest(id) || commonjsProxyRE.test(id) || SPECIAL_QUERY_RE.test(id)) {
return
}
const ssr = options?.ssr === true
@@ -282,7 +282,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
},
async transform(css, id, options) {
- if (!isCSSRequest(id) || commonjsProxyRE.test(id)) {
+ if (
+ !isCSSRequest(id) ||
+ commonjsProxyRE.test(id) ||
+ SPECIAL_QUERY_RE.test(id)
+ ) {
return
}
From a88234c56dfe50a61a1d8d534b886bc83b7f836a Mon Sep 17 00:00:00 2001
From: stygian-desolator <73412177+stygian-desolator@users.noreply.github.com>
Date: Tue, 15 Feb 2022 08:51:12 +0800
Subject: [PATCH 2/3] fix: fix lint error
---
packages/vite/src/node/plugins/css.ts | 47 +++++++++++++--------------
1 file changed, 23 insertions(+), 24 deletions(-)
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 2a14dc638fc4ed..59a0bd80a0b687 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -55,10 +55,10 @@ export interface CSSOptions {
modules?: CSSModulesOptions | false
preprocessorOptions?: Record
postcss?:
- | string
- | (Postcss.ProcessOptions & {
- plugins?: Postcss.Plugin[]
- })
+ | string
+ | (Postcss.ProcessOptions & {
+ plugins?: Postcss.Plugin[]
+ })
}
export interface CSSModulesOptions {
@@ -70,18 +70,18 @@ export interface CSSModulesOptions {
scopeBehaviour?: 'global' | 'local'
globalModulePaths?: RegExp[]
generateScopedName?:
- | string
- | ((name: string, filename: string, css: string) => string)
+ | string
+ | ((name: string, filename: string, css: string) => string)
hashPrefix?: string
/**
* default: null
*/
localsConvention?:
- | 'camelCase'
- | 'camelCaseOnly'
- | 'dashes'
- | 'dashesOnly'
- | null
+ | 'camelCase'
+ | 'camelCaseOnly'
+ | 'dashes'
+ | 'dashesOnly'
+ | null
}
const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
@@ -221,14 +221,14 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
isCSSRequest(file)
? moduleGraph.createFileOnlyEntry(file)
: await moduleGraph.ensureEntryFromUrl(
- (
- await fileToUrl(file, config, this)
- ).replace(
- (config.server?.origin ?? '') + config.base,
- '/'
- ),
- ssr
- )
+ (
+ await fileToUrl(file, config, this)
+ ).replace(
+ (config.server?.origin ?? '') + config.base,
+ '/'
+ ),
+ ssr
+ )
)
}
moduleGraph.updateModuleInfo(
@@ -314,9 +314,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
`const __vite__css = ${JSON.stringify(css)}`,
`__vite__updateStyle(__vite__id, __vite__css)`,
// css modules exports change on edit so it can't self accept
- `${
- modulesCode ||
- `import.meta.hot.accept()\nexport default __vite__css`
+ `${modulesCode ||
+ `import.meta.hot.accept()\nexport default __vite__css`
}`,
`import.meta.hot.prune(() => __vite__removeStyle(__vite__id))`
].join('\n')
@@ -347,8 +346,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
modulesCode ||
(usedRE.test(id)
? `export default ${JSON.stringify(
- inlined ? await minifyCSS(css, config) : css
- )}`
+ inlined ? await minifyCSS(css, config) : css
+ )}`
: `export default ''`),
map: { mappings: '' },
// avoid the css module from being tree-shaken so that we can retrieve
From a60c2912aeec248a2b1568402c224ef1fa26bcf3 Mon Sep 17 00:00:00 2001
From: stygian-desolator <73412177+stygian-desolator@users.noreply.github.com>
Date: Tue, 15 Feb 2022 09:19:58 +0800
Subject: [PATCH 3/3] fix: fix lint error
---
packages/vite/src/node/plugins/css.ts | 53 +++++++++++++++------------
1 file changed, 29 insertions(+), 24 deletions(-)
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 59a0bd80a0b687..698d07e9def025 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -55,10 +55,10 @@ export interface CSSOptions {
modules?: CSSModulesOptions | false
preprocessorOptions?: Record
postcss?:
- | string
- | (Postcss.ProcessOptions & {
- plugins?: Postcss.Plugin[]
- })
+ | string
+ | (Postcss.ProcessOptions & {
+ plugins?: Postcss.Plugin[]
+ })
}
export interface CSSModulesOptions {
@@ -70,18 +70,18 @@ export interface CSSModulesOptions {
scopeBehaviour?: 'global' | 'local'
globalModulePaths?: RegExp[]
generateScopedName?:
- | string
- | ((name: string, filename: string, css: string) => string)
+ | string
+ | ((name: string, filename: string, css: string) => string)
hashPrefix?: string
/**
* default: null
*/
localsConvention?:
- | 'camelCase'
- | 'camelCaseOnly'
- | 'dashes'
- | 'dashesOnly'
- | null
+ | 'camelCase'
+ | 'camelCaseOnly'
+ | 'dashes'
+ | 'dashesOnly'
+ | null
}
const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
@@ -165,7 +165,11 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
},
async transform(raw, id, options) {
- if (!isCSSRequest(id) || commonjsProxyRE.test(id) || SPECIAL_QUERY_RE.test(id)) {
+ if (
+ !isCSSRequest(id) ||
+ commonjsProxyRE.test(id) ||
+ SPECIAL_QUERY_RE.test(id)
+ ) {
return
}
const ssr = options?.ssr === true
@@ -221,14 +225,14 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
isCSSRequest(file)
? moduleGraph.createFileOnlyEntry(file)
: await moduleGraph.ensureEntryFromUrl(
- (
- await fileToUrl(file, config, this)
- ).replace(
- (config.server?.origin ?? '') + config.base,
- '/'
- ),
- ssr
- )
+ (
+ await fileToUrl(file, config, this)
+ ).replace(
+ (config.server?.origin ?? '') + config.base,
+ '/'
+ ),
+ ssr
+ )
)
}
moduleGraph.updateModuleInfo(
@@ -314,8 +318,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
`const __vite__css = ${JSON.stringify(css)}`,
`__vite__updateStyle(__vite__id, __vite__css)`,
// css modules exports change on edit so it can't self accept
- `${modulesCode ||
- `import.meta.hot.accept()\nexport default __vite__css`
+ `${
+ modulesCode ||
+ `import.meta.hot.accept()\nexport default __vite__css`
}`,
`import.meta.hot.prune(() => __vite__removeStyle(__vite__id))`
].join('\n')
@@ -346,8 +351,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
modulesCode ||
(usedRE.test(id)
? `export default ${JSON.stringify(
- inlined ? await minifyCSS(css, config) : css
- )}`
+ inlined ? await minifyCSS(css, config) : css
+ )}`
: `export default ''`),
map: { mappings: '' },
// avoid the css module from being tree-shaken so that we can retrieve