Skip to content

Commit

Permalink
fix: backport to 5.2 (#17411)
Browse files Browse the repository at this point in the history
Co-authored-by: Mikhail Avdeev <[email protected]>
Co-authored-by: 翠 / green <[email protected]>
  • Loading branch information
3 people authored Jun 7, 2024
1 parent e861168 commit e6913d1
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 4 deletions.
50 changes: 50 additions & 0 deletions packages/vite/src/node/__tests__/plugins/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
cssUrlRE,
getEmptyChunkReplacer,
hoistAtRules,
preprocessCSS,
} from '../../plugins/css'

describe('search css url function', () => {
Expand Down Expand Up @@ -65,6 +66,7 @@ background: #f0f;
}`,
},
{
configFile: false,
resolve: {
alias: [
{
Expand Down Expand Up @@ -101,6 +103,7 @@ position: fixed;

test('custom generateScopedName', async () => {
const { transform, resetMock } = await createCssPluginTransform(undefined, {
configFile: false,
css: {
modules: {
generateScopedName: 'custom__[hash:base64:5]',
Expand Down Expand Up @@ -338,3 +341,50 @@ require("other-module");`
)
})
})

describe('preprocessCSS', () => {
test('works', async () => {
const resolvedConfig = await resolveConfig({ configFile: false }, 'serve')
const result = await preprocessCSS(
`\
.foo {
color:red;
background: url(./foo.png);
}`,
'foo.css',
resolvedConfig,
)
expect(result.code).toMatchInlineSnapshot(`
".foo {
color:red;
background: url(./foo.png);
}"
`)
})

test('works with lightningcss', async () => {
const resolvedConfig = await resolveConfig(
{
configFile: false,
css: { transformer: 'lightningcss' },
},
'serve',
)
const result = await preprocessCSS(
`\
.foo {
color: red;
background: url(./foo.png);
}`,
'foo.css',
resolvedConfig,
)
expect(result.code).toMatchInlineSnapshot(`
".foo {
color: red;
background: url("./foo.png");
}
"
`)
})
})
11 changes: 8 additions & 3 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ import {
import type { ESBuildOptions } from './esbuild'
import { getChunkOriginalFileName } from './manifest'

const decoder = new TextDecoder()
// const debug = createDebugger('vite:css')

export interface CSSOptions {
Expand Down Expand Up @@ -1808,8 +1809,12 @@ async function minifyCSS(
),
)
}

// NodeJS res.code = Buffer
// Deno res.code = Uint8Array
// For correct decode compiled css need to use TextDecoder
// LightningCSS output does not return a linebreak at the end
return code.toString() + (inlined ? '' : '\n')
return decoder.decode(code) + (inlined ? '' : '\n')
}
try {
const { code, warnings } = await transform(css, {
Expand Down Expand Up @@ -2698,8 +2703,6 @@ function isPreProcessor(lang: any): lang is PreprocessLang {
}

const importLightningCSS = createCachedImport(() => import('lightningcss'))

const decoder = new TextDecoder()
async function compileLightningCSS(
id: string,
src: string,
Expand Down Expand Up @@ -2780,6 +2783,8 @@ async function compileLightningCSS(
if (urlReplacer) {
const replaceUrl = await urlReplacer(dep.url, id)
css = css.replace(dep.placeholder, () => replaceUrl)
} else {
css = css.replace(dep.placeholder, () => dep.url)
}
break
default:
Expand Down
59 changes: 58 additions & 1 deletion packages/vite/src/node/plugins/importAnalysisBuild.ts
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,64 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
},

generateBundle({ format }, bundle) {
if (format !== 'es' || ssr || isWorker) {
if (format !== 'es') {
return
}

if (ssr || isWorker) {
const removedPureCssFiles = removedPureCssFilesCache.get(config)
if (removedPureCssFiles && removedPureCssFiles.size > 0) {
for (const file in bundle) {
const chunk = bundle[file]
if (chunk.type === 'chunk' && chunk.code.includes('import')) {
const code = chunk.code
let imports!: ImportSpecifier[]
try {
imports = parseImports(code)[0].filter((i) => i.d > -1)
} catch (e: any) {
const loc = numberToPos(code, e.idx)
this.error({
name: e.name,
message: e.message,
stack: e.stack,
cause: e.cause,
pos: e.idx,
loc: { ...loc, file: chunk.fileName },
frame: generateCodeFrame(code, loc),
})
}

for (const imp of imports) {
const {
n: name,
s: start,
e: end,
ss: expStart,
se: expEnd,
} = imp
let url = name
if (!url) {
const rawUrl = code.slice(start, end)
if (rawUrl[0] === `"` && rawUrl[rawUrl.length - 1] === `"`)
url = rawUrl.slice(1, -1)
}
if (!url) continue

const normalizedFile = path.posix.join(
path.posix.dirname(chunk.fileName),
url,
)
if (removedPureCssFiles.has(normalizedFile)) {
// remove with Promise.resolve({}) while preserving source map location
chunk.code =
chunk.code.slice(0, expStart) +
`Promise.resolve({${''.padEnd(expEnd - expStart - 19, ' ')}})` +
chunk.code.slice(expEnd)
}
}
}
}
}
return
}

Expand Down

0 comments on commit e6913d1

Please sign in to comment.