Skip to content

Commit 90431f2

Browse files
authoredMar 8, 2023
feat(css): add build.cssMinify (#12207)
1 parent dd7a2f1 commit 90431f2

File tree

7 files changed

+52
-3
lines changed

7 files changed

+52
-3
lines changed
 

‎docs/config/build-options.md

+7
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,13 @@ It should only be used when you are targeting a non-mainstream browser.
117117
One example is Android WeChat WebView, which supports most modern JavaScript features but not the [`#RGBA` hexadecimal color notation in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors).
118118
In this case, you need to set `build.cssTarget` to `chrome61` to prevent vite from transform `rgba()` colors into `#RGBA` hexadecimal notations.
119119
120+
## build.cssMinify
121+
122+
- **Type:** `boolean`
123+
- **Default:** the same as [`build.minify`](#build-minify)
124+
125+
This option allows users to override CSS minification specifically instead of defaulting to `build.minify`, so you can configure minification for JS and CSS separately. Vite uses `esbuild` to minify CSS.
126+
120127
## build.sourcemap
121128
122129
- **Type:** `boolean | 'inline' | 'hidden'`

‎packages/vite/src/node/build.ts

+10
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,12 @@ export interface BuildOptions {
127127
* @default target
128128
*/
129129
cssTarget?: TransformOptions['target'] | false
130+
/**
131+
* Override CSS minification specifically instead of defaulting to `build.minify`,
132+
* so you can configure minification for JS and CSS separately.
133+
* @default minify
134+
*/
135+
cssMinify?: boolean
130136
/**
131137
* If `true`, a separate sourcemap file will be created. If 'inline', the
132138
* sourcemap will be appended to the resulting output file as data URI.
@@ -409,6 +415,10 @@ export function resolveBuildOptions(
409415
resolved.minify = 'esbuild'
410416
}
411417

418+
if (resolved.cssMinify == null) {
419+
resolved.cssMinify = !!resolved.minify
420+
}
421+
412422
return resolved
413423
}
414424

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
437437
code = modulesCode
438438
} else {
439439
let content = css
440-
if (config.build.minify) {
440+
if (config.build.cssMinify) {
441441
content = await minifyCSS(content, config)
442442
}
443443
code = `export default ${JSON.stringify(content)}`
@@ -1124,7 +1124,7 @@ async function finalizeCss(
11241124
if (css.includes('@import') || css.includes('@charset')) {
11251125
css = await hoistAtRules(css)
11261126
}
1127-
if (minify && config.build.minify) {
1127+
if (minify && config.build.cssMinify) {
11281128
css = await minifyCSS(css, config)
11291129
}
11301130
return css
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { describe, expect, test } from 'vitest'
2+
import { findAssetFile, isBuild } from '~utils'
3+
4+
describe.runIf(isBuild)('no css minify', () => {
5+
test('js minified but css not minified', () => {
6+
expect(findAssetFile(/index-\w+\.js$/, 'no-css-minify')).not.toMatch(
7+
'(function polyfill() {',
8+
)
9+
expect(findAssetFile(/index-\w+\.css$/, 'no-css-minify')).toMatch(`\
10+
.test-minify {
11+
color: rgba(255, 255, 0, 0.7);
12+
}`)
13+
})
14+
})
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../vite.config-no-css-minify')

‎playground/css/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
"preview": "vite preview",
1010
"dev:relative-base": "vite --config ./vite.config-relative-base.js dev",
1111
"build:relative-base": "vite --config ./vite.config-relative-base.js build",
12-
"preview:relative-base": "vite --config ./vite.config-relative-base.js preview"
12+
"preview:relative-base": "vite --config ./vite.config-relative-base.js preview",
13+
"dev:no-css-minify": "vite --config ./vite.config-no-css-minify.js dev",
14+
"build:no-css-minify": "vite --config ./vite.config-no-css-minify.js build",
15+
"preview:no-css-minify": "vite --config ./vite.config-no-css-minify.js preview"
1316
},
1417
"devDependencies": {
1518
"@vitejs/test-css-dep": "link:./css-dep",
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const baseConfig = require('./vite.config.js')
2+
3+
/**
4+
* @type {import('vite').UserConfig}
5+
*/
6+
module.exports = {
7+
...baseConfig,
8+
build: {
9+
...baseConfig.build,
10+
outDir: 'dist/no-css-minify',
11+
minify: true,
12+
cssMinify: false,
13+
},
14+
}

0 commit comments

Comments
 (0)
Please sign in to comment.