Optimize generated CSS output (#14873)
This PR improves the generated CSS by running it through Lightning CSS twice.Right now Lightning CSS merges adjacent at-rules and at the end flattens the nesting. This means that after the nesting is flattened, the at-rules that are adjacent and could be merged together will not be merged. This PR improves our output by running Lightning CSS twice on the generated CSS which will make sure to merge adjacent at-rules after the nesting is flattened. Note: in the diff output you'll notice that some properties are duplicated. These need some fixes in Lightning CSS itself but they don't break anything for us right now. Related PR in Lightning CSS for the double `-webkit-backdrop-filter` can be found here: https://github.com/parcel-bundler/lightningcss/pull/850 --------- Co-authored-by: Philipp Spiess <hello@philippspiess.com>
This commit is contained in:
parent
d099f8bda6
commit
c5b6df2a27
11 changed files with 224 additions and 1365 deletions
|
|
@ -410,22 +410,28 @@ function optimizeCss(
|
|||
input: string,
|
||||
{ file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
|
||||
) {
|
||||
return transform({
|
||||
filename: file,
|
||||
code: Buffer.from(input),
|
||||
minify,
|
||||
sourceMap: false,
|
||||
drafts: {
|
||||
customMedia: true,
|
||||
},
|
||||
nonStandard: {
|
||||
deepSelectorCombinator: true,
|
||||
},
|
||||
include: Features.Nesting,
|
||||
exclude: Features.LogicalProperties,
|
||||
targets: {
|
||||
safari: (16 << 16) | (4 << 8),
|
||||
},
|
||||
errorRecovery: true,
|
||||
}).code.toString()
|
||||
function optimize(code: Buffer | Uint8Array) {
|
||||
return transform({
|
||||
filename: file,
|
||||
code,
|
||||
minify,
|
||||
sourceMap: false,
|
||||
drafts: {
|
||||
customMedia: true,
|
||||
},
|
||||
nonStandard: {
|
||||
deepSelectorCombinator: true,
|
||||
},
|
||||
include: Features.Nesting,
|
||||
exclude: Features.LogicalProperties,
|
||||
targets: {
|
||||
safari: (16 << 16) | (4 << 8),
|
||||
},
|
||||
errorRecovery: true,
|
||||
}).code
|
||||
}
|
||||
|
||||
// Running Lightning CSS twice to ensure that adjacent rules are merged after
|
||||
// nesting is applied. This creates a more optimized output.
|
||||
return optimize(optimize(Buffer.from(input))).toString()
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue