test/configCases/css/minimize-environment/style.css - main - githubmirror/webpack

test/configCases/css/minimize-environment/style.css

39 строк2 KB

Alexander Akait

feat(css): join adjacent rules and fold more value spellings (#21648)

10 авг 2026, 08:55

10 авг 2026, 08:553197f80

/* The `output.environment` CSS entries decide which newer spellings the minifier
   may reach for. This build sets all four false, so every case here keeps the
   form an engine without CSS Color 4 hex alpha, Media Queries 4 range syntax,
   the CSS Position 3 `inset` shorthand or CSS Images 4's two-position color stop
   can read. */

/*! the keyword stays a keyword */
.t01 { background-color: transparent }
/*! ...and the function stays the keyword, which every engine reads */
.t02 { background-color: rgba(0, 0, 0, 0) }
/*! ...including inside a gradient */
.t03 { background-image: linear-gradient(red, transparent) }
/*! an opaque color is not gated: it has no alpha to spell */
.t04 { color: rgb(0, 0, 0) }
/*! a source hex with alpha is the author's own, and is only shortened */
.t05 { color: #00000000 }
/*! a partly transparent color keeps its function: the hex would need the alpha */
.t08 { color: rgba(0, 0, 0, .5) }
/*! ...whatever the channels are */
.t09 { color: rgba(255, 0, 0, .2) }
/*! rounding and unit conversion are not gated — no engine reads one and not the
   other, so they apply here too */
.t10 { width: 16px; height: 33.33333333% }

/*! a media feature keeps the `min-`/`max-` spelling every engine reads */
@media (min-width: 1200px) { .t06 { color: red } }
/*! ...at any nesting depth */
@media ((min-width: 1px) and (max-height: 2px)) { .t07 { color: red } }
/*! the `inset` shorthand is newer than the four longhands it merges */
.t11 { top: 1px; right: 2px; bottom: 1px; left: 2px }
/*! ...unlike `margin`, whose shorthand is as old as its longhands */
.t12 { margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-left: 2px }
/*! ...and a source `inset` is the author's own, so it still collapses */
.t13 { inset: 1px 1px 1px 1px }
/*! a two-position color stop is CSS Images 4, so the two stops stay */
.t14 { background-image: linear-gradient(red 0%, red 50%, blue) }
/*! ...unlike the last stop's position, which CSS Images 3's own fix-up already
   puts there */
.t15 { background-image: linear-gradient(red, blue 100%) }