Skip to content

Commit 60c0a02

Browse files
committed
feat: use lightningcss by default for cssMinify
1 parent 7b2a2dc commit 60c0a02

File tree

5 files changed

+57
-56
lines changed

5 files changed

+57
-56
lines changed

packages/vite/package.json

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
"dependencies": {
8888
"@oxc-project/runtime": "^0.53.0",
8989
"esbuild": "^0.25.0",
90+
"lightningcss": "^1.29.1",
9091
"postcss": "^8.5.3",
9192
"rolldown": "1.0.0-beta.3-commit.62fba31"
9293
},
@@ -124,7 +125,6 @@
124125
"etag": "^1.8.1",
125126
"http-proxy": "^1.18.1",
126127
"launch-editor-middleware": "^2.10.0",
127-
"lightningcss": "^1.29.1",
128128
"magic-string": "^0.30.17",
129129
"mlly": "^1.7.4",
130130
"mrmime": "^2.0.1",
@@ -160,7 +160,6 @@
160160
"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
161161
"jiti": ">=1.21.0",
162162
"less": "*",
163-
"lightningcss": "^1.21.0",
164163
"sass": "*",
165164
"sass-embedded": "*",
166165
"stylus": "*",
@@ -191,9 +190,6 @@
191190
"sugarss": {
192191
"optional": true
193192
},
194-
"lightningcss": {
195-
"optional": true
196-
},
197193
"terser": {
198194
"optional": true
199195
},

packages/vite/src/node/build.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -161,9 +161,9 @@ export interface BuildEnvironmentOptions {
161161
/**
162162
* Override CSS minification specifically instead of defaulting to `build.minify`,
163163
* so you can configure minification for JS and CSS separately.
164-
* @default 'esbuild'
164+
* @default 'lightningcss'
165165
*/
166-
cssMinify?: boolean | 'esbuild' | 'lightningcss'
166+
cssMinify?: boolean | 'lightningcss' | 'esbuild'
167167
/**
168168
* If `true`, a separate sourcemap file will be created. If 'inline', the
169169
* sourcemap will be appended to the resulting output file as data URI.
@@ -457,7 +457,8 @@ export function resolveBuildEnvironmentOptions(
457457
...merged,
458458
cssTarget: merged.cssTarget ?? merged.target,
459459
cssMinify:
460-
merged.cssMinify ?? (consumer === 'server' ? 'esbuild' : !!merged.minify),
460+
merged.cssMinify ??
461+
(consumer === 'server' ? 'lightningcss' : !!merged.minify),
461462
// Resolve to false | object
462463
modulePreload:
463464
merged.modulePreload === false

packages/vite/src/node/plugins/css.ts

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2054,69 +2054,70 @@ async function minifyCSS(
20542054
// regular CSS assets do end with a linebreak.
20552055
// See https://github.com/vitejs/vite/pull/13893#issuecomment-1678628198
20562056

2057-
if (config.build.cssMinify === 'lightningcss') {
2057+
if (config.build.cssMinify === 'esbuild') {
20582058
try {
2059-
const { code, warnings } = (await importLightningCSS()).transform({
2060-
...config.css.lightningcss,
2061-
targets: convertTargets(config.build.cssTarget),
2062-
cssModules: undefined,
2063-
// TODO: Pass actual filename here, which can also be passed to esbuild's
2064-
// `sourcefile` option below to improve error messages
2065-
filename: defaultCssBundleName,
2066-
code: Buffer.from(css),
2067-
minify: true,
2059+
const { code, warnings } = await transform(css, {
2060+
loader: 'css',
2061+
target: config.build.cssTarget || undefined,
2062+
...resolveMinifyCssEsbuildOptions(config.esbuild || {}),
20682063
})
20692064
if (warnings.length) {
2070-
const messages = warnings.map(
2071-
(warning) =>
2072-
`${warning.message}\n` +
2073-
generateCodeFrame(css, {
2074-
line: warning.loc.line,
2075-
column: warning.loc.column - 1, // 1-based
2076-
}),
2077-
)
2065+
const msgs = await formatMessages(warnings, { kind: 'warning' })
20782066
config.logger.warn(
2079-
colors.yellow(`warnings when minifying css:\n${messages.join('\n')}`),
2067+
colors.yellow(`warnings when minifying css:\n${msgs.join('\n')}`),
20802068
)
20812069
}
2082-
2083-
// NodeJS res.code = Buffer
2084-
// Deno res.code = Uint8Array
2085-
// For correct decode compiled css need to use TextDecoder
2086-
// LightningCSS output does not return a linebreak at the end
2087-
return decoder.decode(code) + (inlined ? '' : '\n')
2070+
// esbuild output does return a linebreak at the end
2071+
return inlined ? code.trimEnd() : code
20882072
} catch (e) {
2089-
e.message = `[lightningcss minify] ${e.message}`
2090-
if (e.loc) {
2091-
e.loc = {
2092-
line: e.loc.line,
2093-
column: e.loc.column - 1, // 1-based
2094-
}
2095-
e.frame = generateCodeFrame(css, e.loc)
2073+
if (e.errors) {
2074+
e.message = '[esbuild css minify] ' + e.message
2075+
const msgs = await formatMessages(e.errors, { kind: 'error' })
2076+
e.frame = '\n' + msgs.join('\n')
2077+
e.loc = e.errors[0].location
20962078
}
20972079
throw e
20982080
}
20992081
}
2082+
21002083
try {
2101-
const { code, warnings } = await transform(css, {
2102-
loader: 'css',
2103-
target: config.build.cssTarget || undefined,
2104-
...resolveMinifyCssEsbuildOptions(config.esbuild || {}),
2084+
const { code, warnings } = (await importLightningCSS()).transform({
2085+
...config.css.lightningcss,
2086+
targets: convertTargets(config.build.cssTarget),
2087+
cssModules: undefined,
2088+
// TODO: Pass actual filename here, which can also be passed to esbuild's
2089+
// `sourcefile` option below to improve error messages
2090+
filename: defaultCssBundleName,
2091+
code: Buffer.from(css),
2092+
minify: true,
21052093
})
21062094
if (warnings.length) {
2107-
const msgs = await formatMessages(warnings, { kind: 'warning' })
2095+
const messages = warnings.map(
2096+
(warning) =>
2097+
`${warning.message}\n` +
2098+
generateCodeFrame(css, {
2099+
line: warning.loc.line,
2100+
column: warning.loc.column - 1, // 1-based
2101+
}),
2102+
)
21082103
config.logger.warn(
2109-
colors.yellow(`warnings when minifying css:\n${msgs.join('\n')}`),
2104+
colors.yellow(`warnings when minifying css:\n${messages.join('\n')}`),
21102105
)
21112106
}
2112-
// esbuild output does return a linebreak at the end
2113-
return inlined ? code.trimEnd() : code
2107+
2108+
// NodeJS res.code = Buffer
2109+
// Deno res.code = Uint8Array
2110+
// For correct decode compiled css need to use TextDecoder
2111+
// LightningCSS output does not return a linebreak at the end
2112+
return decoder.decode(code) + (inlined ? '' : '\n')
21142113
} catch (e) {
2115-
if (e.errors) {
2116-
e.message = '[esbuild css minify] ' + e.message
2117-
const msgs = await formatMessages(e.errors, { kind: 'error' })
2118-
e.frame = '\n' + msgs.join('\n')
2119-
e.loc = e.errors[0].location
2114+
e.message = `[lightningcss minify] ${e.message}`
2115+
if (e.loc) {
2116+
e.loc = {
2117+
line: e.loc.line,
2118+
column: e.loc.column - 1, // 1-based
2119+
}
2120+
e.frame = generateCodeFrame(css, e.loc)
21202121
}
21212122
throw e
21222123
}

playground/minify/vite.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,7 @@ export default defineConfig({
55
legalComments: 'none',
66
minifySyntax: false,
77
},
8+
build: {
9+
cssMinify: 'esbuild',
10+
},
811
})

pnpm-lock.yaml

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)