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

test/configCases/css/minimize-nesting/style.css
62 строки4 KB
Alexander Akait
feat(css): join adjacent rules and fold more value spellings (#21648)
10 авг 2026, 08:55
10 авг 2026, 08:553197f80
/* Every value and selector transform, made inside a nested rule rather than at
   the top level. `SyntaxBrowserEquivalence` hands this file and its minified
   form to Chromium, so each section is checked against the engine rather than
   against what the printer happens to emit. */

/*! join: adjacent nested rules printing the same block are the one rule they stand for */
.a { .n1 { color: red } .n2 > .n3 { color: red } }
/*! join: ...and `&` joins there, an engine that cannot read it losing the block either way */
.b { &.n4 { top: 0 } &.n5 { top: 0 } }
/*! join: ...including as a compound of its own */
.c { & .n6 { top: 0 } & .n7 { top: 0 } }
/*! declined: a nested rule of its own, whose `&` would become the joined list */
.d { .n8 { top: 0; i { top: 1px } } .n9 { top: 0; i { top: 1px } } }
/*! declined: a pseudo may be one the engine cannot parse */
.e { .n10:hover { top: 0 } .n11:hover { top: 0 } }
/*! values: a number, a time, a zero angle and a color all fold the same nested */
.f { .n12 { transition-duration: 0.5s; transform: rotate(0deg); color: #ffffff; width: calc(2px + 3px) } }
/*! shorthand: four sides merge into the one shorthand inside a nested rule */
.g { .n13 { margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-left: 2px } }
/*! shorthand: ...and a slot holding its own initial goes */
.h { .n14 { transition: opacity 1s ease 0s } }
/*! filter: an argument that is the amount an omitted one means says nothing */
.i { .n15 { filter: blur(0px) grayscale(100%) } }
/*! declaration: only the last of a set of identical ones can be read */
.j { .n16 { color: red; color: red } }
/*! declaration: ...whatever nested rule stands between them */
.k { color: red; .n17 { top: 0 } color: red }
/*! selector: the legacy one-colon spelling and an implied universal both go */
.l { *:before { top: 0 } .n18::first-line { top: 0 } }
/*! at-rule: a nested `@media` keeps its own block, and the rules in it join */
.m { @media (min-width: 100px) { .n19 { top: 0 } .n20 { top: 0 } } }
/*! empty: a nested rule that paints nothing is dropped, leaving its neighbours adjacent */
.o { .n21 { top: 0 } .n22 {} .n23 { top: 0 } }
/*! at-rule: two adjacent blocks of the same condition are the one block it opens,
   whose own rules then meet at the seam and join like any other pair */
@media (min-width: 200px) { .p1 { top: 0 } }
@media (min-width: 200px) { .p2 { top: 0 } }
/*! at-rule: ...and where both name one selector, the seam joins its blocks too */
@media (min-width: 250px) { .p3 { top: 0 } }
@media (min-width: 250px) { .p3 { left: 0 } }
/*! at-rule: ...at any depth, and `@supports` the same way */
.q { @supports (top: 0) { .q1 { top: 0 } } @supports (top: 0) { .q2 { top: 0 } } }
/*! declined: the conditions differ, so the two blocks are not one */
@media (min-width: 300px) { .r1 { top: 0 } }
@media (min-width: 400px) { .r2 { top: 0 } }
/*! declined: a later `@keyframes` of the same name replaces the earlier, so the
   two blocks are not one either */
@keyframes s { 0% { top: 0 } }
@keyframes s { 50% { top: 1px } }
/*! at-rule: a rule nested in one, holding a nested rule of its own */
@media (min-width: 500px) { .t1 { top: 0; & .t2 { top: 1px } } }
/*! declined: a rule stands between the two blocks */
@media (min-width: 600px) { .u1 { top: 0 } }
.u2 { top: 0 }
@media (min-width: 600px) { .u3 { top: 0 } }
/*! at-rule: ...and one condition is one however it is spelled, which `@supports`
   is the at-rule to say so — the engine hands its prelude back as written */
@supports ( top:0 ) { .z1 { top: 0 } }
@supports (top: 0) { .z1 { left: 0 } }
/*! declined: the whitespace between two conditions is the author's */
@supports (top:0) and (left:0) { .z2 { top: 0 } }
@supports (top:0)and (left:0) { .z2 { left: 0 } }