diff --git a/plugin-packs/postcss-preset-env/test/_tape.mjs b/plugin-packs/postcss-preset-env/test/_tape.mjs index 2b0d1c484..9834037f3 100644 --- a/plugin-packs/postcss-preset-env/test/_tape.mjs +++ b/plugin-packs/postcss-preset-env/test/_tape.mjs @@ -44,13 +44,6 @@ postcssTape(plugin)({ browsers: 'ie >= 10', }, }, - 'basic:ch88-ff78': { - message: 'uses :is pseudo for nesting with modern browsers { browsers: "chrome >= 88, firefox >= 78", stage: 0 }', - options: { - browsers: 'chrome >= 88, firefox >= 78', - stage: 0, - }, - }, 'basic:safari15': { message: 'supports { browsers: "safari >= 15" } usage', options: { @@ -64,25 +57,6 @@ postcssTape(plugin)({ browsers: 'op_mini all', }, }, - 'basic:ch88-ff78:no-is-pseudo': { - message: ':is pseudo for nesting can be disable with modern browsers { browsers: "chrome >= 88, firefox >= 78", stage: 0, features: { nesting-rules: { noIsPseudoSelector: true } } } usage', - options: { - browsers: 'chrome >= 88, firefox >= 78', - stage: 0, - features: { - 'nesting-rules': { - noIsPseudoSelector: true, - }, - }, - }, - }, - 'basic:ch88-ff78-saf10': { - message: 'does not use :is pseudo for nesting with an older browser { browsers: "chrome >= 88, firefox >= 78, safari >= 10", stage: 0 } usage', - options: { - browsers: 'chrome >= 88, firefox >= 78, safari >= 10', - stage: 0, - }, - }, 'basic:supports-query': { message: 'supports { browsers: "defaults and supports css-variables" } usage', options: { @@ -142,17 +116,6 @@ postcssTape(plugin)({ }, }, }, - 'basic:nesting:noIsPseudoSelector:false': { - message: 'supports { stage: false, features: { "nesting-rules": { "noIsPseudoSelector": false } } } usage', - options: { - stage: false, - features: { - 'nesting-rules': [true, { - noIsPseudoSelector: false, - }], - }, - }, - }, 'basic:nesting:false': { message: 'supports { stage: 0, features: { "nesting-rules": false } } usage', options: { diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 8cc68a0aa..235b2a4a2 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -43,25 +43,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index dc9dd535b..215e8f541 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -43,25 +43,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css index 8167e9f24..2d6f43954 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css @@ -44,25 +44,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index b37a2498c..43684c724 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -36,25 +36,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css deleted file mode 100644 index 4a30967ae..000000000 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ /dev/null @@ -1,609 +0,0 @@ -:root { - --order: 1; -} - -.test-custom-property-fallbacks { - --firebrick: rgb(179, 35, 35); -} - -.test-custom-properties { - order: var(--order); -} - -.test-image-set-function { - background-image: url(img/test.png); - background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - order: 2; -} - -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - -.test-image-set-function { - background-image: url(img/test-2x.png); -} -} - -.test-logical-properties-and-values { - margin-left: 1px; - margin-right: 2px; - order: 3; - padding-top: 4px; - padding-bottom: 4px; -} - -.test-logical-resize { - resize: horizontal; -} - -.test-logical-viewport-units { - width: calc(10vw + 5px); - width: calc(10vi + 5px); -} - -.test-nesting-rules { - order: 4; - - order: 6; -} - -.test-nesting-rules p { - order: 5; - } - -.test-nesting-rules, -#test-is-pseudo { - order: 7; - - order: 9; -} - -.test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { - order: 8; - } - -@media (max-width: 30em) { - .test-custom-media-queries { - order: 10; - } -} - -@media (min-width: 480px) and (max-width: 767.98px) { - .test-media-query-ranges { - order: 11; - } -} - -@media (prefers-color-scheme: dark) { - body { - background-color: black; - color: white; - } -} - -h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.does-not-exist), h3.test-custom-selectors:not(.does-not-exist), h4.test-custom-selectors:not(.does-not-exist), h5.test-custom-selectors:not(.does-not-exist), h6.test-custom-selectors:not(.does-not-exist), .test-custom-selectors.heading-7 { - order:12; -} - -.test-case-insensitive-attributes[frame=hsides i] { - order: 13; -} - -.test-rebeccapurple-color { - color: rebeccapurple; - order: 14; -} - -.test-hexadecimal-alpha-notation { - background-color: #f3f3f3f3; - color: #0003; - order: 15; -} - -.test-color-functional-notation { - color: rgba(179, 34, 34, 0.5); - order: 16; -} - -.test-lab-function { - background-color: rgb(179, 35, 35); - color: rgba(179, 34, 35, 0.5); - order: 17; -} - -.test-system-ui-font-family { - font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - order: 18; -} - -.test-font-variant-property { - font-feature-settings: "smcp"; - font-variant-caps: small-caps; - order: 19; -} - -.test-all-property { - all: initial; - order: 20; -} - -.test-matches-pseudo-class:matches(:first-child, .special) { - order: 21; -} - -.test-not-pseudo-class:not(:first-child):not(.special) { - order: 22; -} - -.test-any-link-pseudo-class:any-link { - order: 23; -} - -[dir="rtl"] .test-dir-pseudo-class { - order: 24; -} - -.test-overflow-wrap-property { - order: 25; - overflow-wrap: break-word; -} - -.test-focus-visible-pseudo-class:focus-visible { - order: 26; -} - -.test-double-position-gradients { - background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); - background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); -} - -.test-blank-pseudo-class:blank { - background-color: yellow; -} - -.test-has-pseudo-class:has(.inner-class) { - background-color: yellow; -} - -.a:focus, .a:hover, .b:focus, .b:hover { - order: 27; -} - -.a.c > .b + .d { - order: 28; -} - -.test-hwb-function { - background-color: rgba(0, 196, 255, 0.5); -} - -.test-opacity-percent { - opacity: 0.42; -} - -.clamp-same-unit { - width: max(10px, min(64px, 80px)); -} - -.complex-clamp { - width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); -} - -.clamp-different-units { - width: max(10%, min(2px, 4rem)); -} - -.mixed-clamp { - grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); - margin: max(1rem, min(2%, 3rem)) 4vh; -} - -.calc-clamp { - margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); -} - -.multiple-calc-clamp { - margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); -} - -.nested-clamp { - font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); -} - -@font-face { - font-family: 'A'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url(a) format("woff2"); -} - -.block-flow { - display: block; - display: block flow; -} - -.block-flow-root { - display: flow-root; - display: block flow-root; -} - -.inline-flow { - display: inline; - display: inline flow; -} - -.inline-flow-root { - display: inline-block; - display: inline flow-root; -} - -.run-in-flow { - display: run-in; - display: run-in flow; -} - -.list-item-block-flow { - display: list-item; - display: list-item block flow; -} - -.inline-flow-list-item { - display: inline list-item; - display: inline flow list-item; -} - -.block-flex { - display: flex; - display: block flex; -} - -.inline-flex { - display: inline-flex; - display: inline flex; -} - -.block-grid { - display: grid; - display: block grid; -} - -.inline-grid { - display: inline-grid; - display: inline grid; -} - -.inline-ruby { - display: ruby; - display: inline ruby; -} - -.block-table { - display: table; - display: block table; -} - -.inline-table { - display: inline-table; - display: inline table; -} - -.table-cell-flow { - display: table-cell; - display: table-cell flow; -} - -.table-caption-flow { - display: table-caption; - display: table-caption flow; -} - -.ruby-base-flow { - display: ruby-base; - display: ruby-base flow; -} - -.ruby-text-flow { - display: ruby-text; - display: ruby-text flow; -} - -.logical-float { - float: left; -} - -.color-function { - prop-1: rgb(0, 129, 96); - prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; - prop-3: rgb(7, 3, 1); - prop-4: rgb(7, 3, 1); - prop-5: color(display-p3 1 1 1 1); -} - -.oklab { - color-1: rgb(73, 71, 69); - color-2: rgb(121, 34, 67); - color-3: rgba(121, 34, 67, 0.5); - color-4: rgb(121, 34, 67); - color-5: rgba(121, 34, 67, 0.5); - color-6: rgb(177, 102, 126); - color-7: oklab(60% 0.1 0 foo); - color-8: rgb(125, 35, 41); - color-9: rgb(198, 93, 7); - color-10: rgb(157, 147, 24); - color-11: rgb(104, 166, 57); - color-12: rgb(98, 172, 239); -} - -.oklch { - color-1: rgb(126, 37, 15); - color-2: rgb(126, 37, 15); - color-3: rgba(126, 37, 15, 0.5); - color-4: rgb(126, 37, 15); - color-5: rgba(126, 37, 15, 0.5); - color-6: rgb(197, 84, 124); - - color-7: rgb(0, 149, 131); - color-8: rgb(0, 149, 131); - color-9: rgb(0, 149, 131); - color-10: rgb(0, 149, 131); - color-11: rgb(0, 149, 131); - - color-12: rgb(188, 101, 59); - color-13: rgb(188, 101, 59); - color-14: rgb(188, 101, 59); - color-15: rgb(188, 101, 59); - color-16: rgb(188, 101, 59); - color-17: oklch(60% 0.1250 0.785398unknown); -} - -@media (color-gamut: p3) { -.oklch { - - color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: color(display-p3 0.19244 0.58461 0.51559); -} -} - -.ic-unit { - --value-2ic: initial; - text-indent: 2em; - content: var(--value-2ic); - left: var(--non-existing, 2em); - width: calc(8em + 20px); - height: 10px; - margin: 0.5em 1em .2em; - padding: 2 ic; -} - -.unset { - clip: unset; -} - -.mod { - padding: 8px 3px 1px calc(3px + 50%); - transform: rotate(-50deg); - width: 2px; -} - -.rem { - padding: 8px 3px 1px calc(3px + 50%); - transform: rotate(-50deg); -} - -.round { - top: 3px; - right: 3px; - bottom: 3px; - left: 2px; - padding-left: 2px; -} - -.trigonometric { - left: 0.70711; - left: 0.70711; - left: 1; - left: 30deg; - left: 60deg; - left: 84.28941deg; - left: -45deg; - left: 90deg; - left: 135deg; - left: 0.99863; -} - -.trigonometric-ignore-not-a-function { - left: sin; - left: cos; - left: tan; - left: asin; - left: acos; - left: atan; - left: atan2; -} - -.trigonometric-ignore-no-arguments { - left: sin(); - left: cos(); - left: tan(); - left: asin(); - left: acos(); - left: atan(); - left: atan2(); -} - -[data-view-size=m] .view { - background: red; - } - -.nested-calc { - order: calc(1 * (8 / 3 + (5 * 10))); - order: calc(1 * calc(8 / 3 + calc(5 * 10))); -} - -.text-decoration-shorthand { - text-decoration: overline; - -webkit-text-decoration: overline wavy pink; - text-decoration: overline wavy pink; - text-decoration-thickness: 3px; - -webkit-text-decoration: 3px wavy pink overline; - text-decoration: 3px wavy pink overline; -} - -.stage__container { - left: var(--size, 1rem); -} - -:scope { - content: "plain :scope"; -} - -@scope (.foo) { - :scope { - content: ":scope in @scope"; - } -} - -:scope { - @scope (.foo) { - content: ":scope in @scope, but with nesting"; - } -} - -@media (min-aspect-ratio: 177/100) { - /* media query aspect ratio : */ -} - -.color-mix { - color-1: rgba(0, 0, 255, 0.65); - color-2: rgba(0, 0, 255, 0.65); - color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(121, 0, 181, 0.65); - color-5: rgba(148, 0, 122, 0.65); - color-6: rgba(179, 0, 255, 0.65); -} - -@media (color-gamut: p3) { -.color-mix { - color-4: color(display-p3 0.44 0 0.70096 / 0.65); - color-5: color(display-p3 0.54692 0 0.47541 / 0.65); -} -} - -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); -} - -@media (color-gamut: rec2020) { -.gradients-interpolation-method { - - background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); -} -} - -@supports (color: color(display-p3 0 0 0%)) { -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 182, 255), rgb(173, 195, 255), rgb(159, 205, 255), rgb(140, 215, 255), rgb(100, 228, 255), rgb(94, 237, 237) 100%); -} - -@media (color-gamut: rec2020) { -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); -} -} -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { -.gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} -} - -.test-css-color-5-interop { - color-1: rgb(196, 129, 72); - color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); - color-3: rgb(234, 133, 82); - color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); - color-5: rgb(179, 157, 51); - color-6: rgb(179, 35, 35); - color-7: rgb(163, 57, 39); - color-8: rgb(131, 27, 0); - color-9: rgb(126, 37, 0); -} - -@media (color-gamut: p3) { -.test-css-color-5-interop { - color-8: color(display-p3 0.4939 0.10676 0); - color-9: color(display-p3 0.47553 0.14324 0); -} -} - -.test-property-with-var { - --opacity: 1; - color: rgba(87, 107, 149, var(--opacity)); -} - -.exponential-functions { - width: 8px; -} - -.out-of-gamut { - --color: rgb(0, 247, 79); -} - -.issue-1244--a { - background-image: -ms-linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--b { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--c { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.dark { - --csstools-color-scheme--dark: initial; - color-scheme: dark; -} - -.light { - --csstools-color-scheme--dark: ; - color-scheme: light; -} - -.schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); - color: light-dark(rgb(131, 27, 0), magenta); -} - -@media (color-gamut: p3) { -.schemed-colors { - color: light-dark(color(display-p3 0.4939 0.10676 0), magenta); -} -} - -.schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); -} - -@supports (color: light-dark(red, red)) { -.schemed-prop { - --theme-color: light-dark(cyan, deepskyblue); -} -} - -.schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); -} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css deleted file mode 100644 index 5defa44eb..000000000 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ /dev/null @@ -1,603 +0,0 @@ -:root { - --order: 1; -} - -.test-custom-property-fallbacks { - --firebrick: rgb(179, 35, 35); -} - -.test-custom-properties { - order: var(--order); -} - -.test-image-set-function { - background-image: url(img/test.png); - background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - order: 2; -} - -@media (min-resolution: 192dpi) { - -.test-image-set-function { - background-image: url(img/test-2x.png); -} -} - -.test-logical-properties-and-values { - margin-left: 1px; - margin-right: 2px; - order: 3; - padding-top: 4px; - padding-bottom: 4px; -} - -.test-logical-resize { - resize: horizontal; -} - -.test-logical-viewport-units { - width: calc(10vw + 5px); - width: calc(10vi + 5px); -} - -.test-nesting-rules { - order: 4; - - order: 6; -} - -.test-nesting-rules p { - order: 5; - } - -.test-nesting-rules, -#test-is-pseudo { - order: 7; - - order: 9; -} - -.test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { - order: 8; - } - -@media (max-width: 30em) { - .test-custom-media-queries { - order: 10; - } -} - -@media (min-width: 480px) and (max-width: 767.98px) { - .test-media-query-ranges { - order: 11; - } -} - -@media (prefers-color-scheme: dark) { - body { - background-color: black; - color: white; - } -} - -h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.does-not-exist), h3.test-custom-selectors:not(.does-not-exist), h4.test-custom-selectors:not(.does-not-exist), h5.test-custom-selectors:not(.does-not-exist), h6.test-custom-selectors:not(.does-not-exist), .test-custom-selectors.heading-7 { - order:12; -} - -.test-case-insensitive-attributes[frame=hsides i] { - order: 13; -} - -.test-rebeccapurple-color { - color: rebeccapurple; - order: 14; -} - -.test-hexadecimal-alpha-notation { - background-color: #f3f3f3f3; - color: #0003; - order: 15; -} - -.test-color-functional-notation { - color: rgb(70% 13.5% 13.5% / 50%); - order: 16; -} - -.test-lab-function { - background-color: rgb(179, 35, 35); - color: rgba(179, 34, 35, 0.5); - order: 17; -} - -.test-system-ui-font-family { - font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - order: 18; -} - -.test-font-variant-property { - font-feature-settings: "smcp"; - font-variant-caps: small-caps; - order: 19; -} - -.test-all-property { - all: initial; - order: 20; -} - -.test-matches-pseudo-class:matches(:first-child, .special) { - order: 21; -} - -.test-not-pseudo-class:not(:first-child):not(.special) { - order: 22; -} - -.test-any-link-pseudo-class:any-link { - order: 23; -} - -[dir="rtl"] .test-dir-pseudo-class { - order: 24; -} - -.test-overflow-wrap-property { - order: 25; - overflow-wrap: break-word; -} - -.test-focus-visible-pseudo-class:focus-visible { - order: 26; -} - -.test-double-position-gradients { - background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); - background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); -} - -.test-blank-pseudo-class:blank { - background-color: yellow; -} - -.test-has-pseudo-class:has(.inner-class) { - background-color: yellow; -} - -.a:focus, .a:hover, .b:focus, .b:hover { - order: 27; -} - -.a.c > .b + .d { - order: 28; -} - -.test-hwb-function { - background-color: rgba(0, 196, 255, 0.5); -} - -.test-opacity-percent { - opacity: 42%; -} - -.clamp-same-unit { - width: clamp(10px, 64px, 80px); -} - -.complex-clamp { - width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); -} - -.clamp-different-units { - width: clamp(10%, 2px, 4rem); -} - -.mixed-clamp { - grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); - margin: clamp(1rem, 2%, 3rem) 4vh; -} - -.calc-clamp { - margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); -} - -.multiple-calc-clamp { - margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); -} - -.nested-clamp { - font-size: clamp(clamp(1rem, 2vw, 3rem), 4vw, 5rem); -} - -@font-face { - font-family: 'A'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url(a) format("woff2"); -} - -.block-flow { - display: block; - display: block flow; -} - -.block-flow-root { - display: flow-root; - display: block flow-root; -} - -.inline-flow { - display: inline; - display: inline flow; -} - -.inline-flow-root { - display: inline-block; - display: inline flow-root; -} - -.run-in-flow { - display: run-in; - display: run-in flow; -} - -.list-item-block-flow { - display: list-item; - display: list-item block flow; -} - -.inline-flow-list-item { - display: inline list-item; - display: inline flow list-item; -} - -.block-flex { - display: flex; - display: block flex; -} - -.inline-flex { - display: inline-flex; - display: inline flex; -} - -.block-grid { - display: grid; - display: block grid; -} - -.inline-grid { - display: inline-grid; - display: inline grid; -} - -.inline-ruby { - display: ruby; - display: inline ruby; -} - -.block-table { - display: table; - display: block table; -} - -.inline-table { - display: inline-table; - display: inline table; -} - -.table-cell-flow { - display: table-cell; - display: table-cell flow; -} - -.table-caption-flow { - display: table-caption; - display: table-caption flow; -} - -.ruby-base-flow { - display: ruby-base; - display: ruby-base flow; -} - -.ruby-text-flow { - display: ruby-text; - display: ruby-text flow; -} - -.logical-float { - float: left; -} - -.color-function { - prop-1: rgb(0, 129, 96); - prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; - prop-3: rgb(7, 3, 1); - prop-4: rgb(7, 3, 1); - prop-5: color(display-p3 1 1 1 1); -} - -.oklab { - color-1: rgb(73, 71, 69); - color-2: rgb(121, 34, 67); - color-3: rgba(121, 34, 67, 0.5); - color-4: rgb(121, 34, 67); - color-5: rgba(121, 34, 67, 0.5); - color-6: rgb(177, 102, 126); - color-7: oklab(60% 0.1 0 foo); - color-8: rgb(125, 35, 41); - color-9: rgb(198, 93, 7); - color-10: rgb(157, 147, 24); - color-11: rgb(104, 166, 57); - color-12: rgb(98, 172, 239); -} - -.oklch { - color-1: rgb(126, 37, 15); - color-2: rgb(126, 37, 15); - color-3: rgba(126, 37, 15, 0.5); - color-4: rgb(126, 37, 15); - color-5: rgba(126, 37, 15, 0.5); - color-6: rgb(197, 84, 124); - - color-7: rgb(0, 149, 131); - color-8: rgb(0, 149, 131); - color-9: rgb(0, 149, 131); - color-10: rgb(0, 149, 131); - color-11: rgb(0, 149, 131); - - color-12: rgb(188, 101, 59); - color-13: rgb(188, 101, 59); - color-14: rgb(188, 101, 59); - color-15: rgb(188, 101, 59); - color-16: rgb(188, 101, 59); - color-17: oklch(60% 0.1250 0.785398unknown); -} - -@media (color-gamut: p3) { -.oklch { - - color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: color(display-p3 0.19244 0.58461 0.51559); -} -} - -.ic-unit { - --value-2ic: initial; - text-indent: 2em; - content: var(--value-2ic); - left: var(--non-existing, 2em); - width: calc(8em + 20px); - height: 10px; - margin: 0.5em 1em .2em; - padding: 2 ic; -} - -.unset { - clip: unset; -} - -.mod { - padding: 8px 3px 1px calc(3px + 50%); - transform: rotate(-50deg); - width: 2px; -} - -.rem { - padding: 8px 3px 1px calc(3px + 50%); - transform: rotate(-50deg); -} - -.round { - top: 3px; - right: 3px; - bottom: 3px; - left: 2px; - padding-left: 2px; -} - -.trigonometric { - left: 0.70711; - left: 0.70711; - left: 1; - left: 30deg; - left: 60deg; - left: 84.28941deg; - left: -45deg; - left: 90deg; - left: 135deg; - left: 0.99863; -} - -.trigonometric-ignore-not-a-function { - left: sin; - left: cos; - left: tan; - left: asin; - left: acos; - left: atan; - left: atan2; -} - -.trigonometric-ignore-no-arguments { - left: sin(); - left: cos(); - left: tan(); - left: asin(); - left: acos(); - left: atan(); - left: atan2(); -} - -[data-view-size=m] .view { - background: red; - } - -.nested-calc { - order: calc(1 * calc(8 / 3 + calc(5 * 10))); -} - -.text-decoration-shorthand { - text-decoration: 3px wavy pink overline; -} - -.stage__container { - left: var(--size, 1rem); -} - -:scope { - content: "plain :scope"; -} - -@scope (.foo) { - :scope { - content: ":scope in @scope"; - } -} - -:scope { - @scope (.foo) { - content: ":scope in @scope, but with nesting"; - } -} - -@media (min-aspect-ratio: 177/100) { - /* media query aspect ratio : */ -} - -.color-mix { - color-1: rgba(0, 0, 255, 0.65); - color-2: rgba(0, 0, 255, 0.65); - color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(121, 0, 181, 0.65); - color-5: rgba(148, 0, 122, 0.65); - color-6: rgba(179, 0, 255, 0.65); -} - -@media (color-gamut: p3) { -.color-mix { - color-4: color(display-p3 0.44 0 0.70096 / 0.65); - color-5: color(display-p3 0.54692 0 0.47541 / 0.65); -} -} - -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); -} - -@media (color-gamut: rec2020) { -.gradients-interpolation-method { - - background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); -} -} - -@supports (color: color(display-p3 0 0 0%)) { -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 182, 255), rgb(173, 195, 255), rgb(159, 205, 255), rgb(140, 215, 255), rgb(100, 228, 255), rgb(94, 237, 237) 100%); -} - -@media (color-gamut: rec2020) { -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); -} -} -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { -.gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} -} - -.test-css-color-5-interop { - color-1: rgb(196, 129, 72); - color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); - color-3: rgb(234, 133, 82); - color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); - color-5: rgb(179, 157, 51); - color-6: rgb(179, 35, 35); - color-7: rgb(163, 57, 39); - color-8: rgb(131, 27, 0); - color-9: rgb(126, 37, 0); -} - -@media (color-gamut: p3) { -.test-css-color-5-interop { - color-8: color(display-p3 0.4939 0.10676 0); - color-9: color(display-p3 0.47553 0.14324 0); -} -} - -.test-property-with-var { - --opacity: 1; - color: rgba(87 107 149 / var(--opacity)); -} - -.exponential-functions { - width: 8px; -} - -.out-of-gamut { - --color: rgb(0, 247, 79); -} - -.issue-1244--a { - background-image: -ms-linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--b { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--c { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.dark { - --csstools-color-scheme--dark: initial; - color-scheme: dark; -} - -.light { - --csstools-color-scheme--dark: ; - color-scheme: light; -} - -.schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); - color: light-dark(rgb(131, 27, 0), magenta); -} - -@media (color-gamut: p3) { -.schemed-colors { - color: light-dark(color(display-p3 0.4939 0.10676 0), magenta); -} -} - -.schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); -} - -@supports (color: light-dark(red, red)) { -.schemed-prop { - --theme-color: light-dark(cyan, deepskyblue); -} -} - -.schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); -} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css deleted file mode 100644 index 6a79d9cd8..000000000 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ /dev/null @@ -1,603 +0,0 @@ -:root { - --order: 1; -} - -.test-custom-property-fallbacks { - --firebrick: rgb(179, 35, 35); -} - -.test-custom-properties { - order: var(--order); -} - -.test-image-set-function { - background-image: url(img/test.png); - background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - order: 2; -} - -@media (min-resolution: 192dpi) { - -.test-image-set-function { - background-image: url(img/test-2x.png); -} -} - -.test-logical-properties-and-values { - margin-left: 1px; - margin-right: 2px; - order: 3; - padding-top: 4px; - padding-bottom: 4px; -} - -.test-logical-resize { - resize: horizontal; -} - -.test-logical-viewport-units { - width: calc(10vw + 5px); - width: calc(10vi + 5px); -} - -.test-nesting-rules { - order: 4; - - order: 6; -} - -.test-nesting-rules p { - order: 5; - } - -.test-nesting-rules, -#test-is-pseudo { - order: 7; - - order: 9; -} - -.test-nesting-rules + p, #test-is-pseudo + p { - order: 8; - } - -@media (max-width: 30em) { - .test-custom-media-queries { - order: 10; - } -} - -@media (min-width: 480px) and (max-width: 767.98px) { - .test-media-query-ranges { - order: 11; - } -} - -@media (prefers-color-scheme: dark) { - body { - background-color: black; - color: white; - } -} - -h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.does-not-exist), h3.test-custom-selectors:not(.does-not-exist), h4.test-custom-selectors:not(.does-not-exist), h5.test-custom-selectors:not(.does-not-exist), h6.test-custom-selectors:not(.does-not-exist), .test-custom-selectors.heading-7 { - order:12; -} - -.test-case-insensitive-attributes[frame=hsides i] { - order: 13; -} - -.test-rebeccapurple-color { - color: rebeccapurple; - order: 14; -} - -.test-hexadecimal-alpha-notation { - background-color: #f3f3f3f3; - color: #0003; - order: 15; -} - -.test-color-functional-notation { - color: rgb(70% 13.5% 13.5% / 50%); - order: 16; -} - -.test-lab-function { - background-color: rgb(179, 35, 35); - color: rgba(179, 34, 35, 0.5); - order: 17; -} - -.test-system-ui-font-family { - font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - order: 18; -} - -.test-font-variant-property { - font-feature-settings: "smcp"; - font-variant-caps: small-caps; - order: 19; -} - -.test-all-property { - all: initial; - order: 20; -} - -.test-matches-pseudo-class:matches(:first-child, .special) { - order: 21; -} - -.test-not-pseudo-class:not(:first-child):not(.special) { - order: 22; -} - -.test-any-link-pseudo-class:any-link { - order: 23; -} - -[dir="rtl"] .test-dir-pseudo-class { - order: 24; -} - -.test-overflow-wrap-property { - order: 25; - overflow-wrap: break-word; -} - -.test-focus-visible-pseudo-class:focus-visible { - order: 26; -} - -.test-double-position-gradients { - background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); - background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); -} - -.test-blank-pseudo-class:blank { - background-color: yellow; -} - -.test-has-pseudo-class:has(.inner-class) { - background-color: yellow; -} - -.a:focus, .a:hover, .b:focus, .b:hover { - order: 27; -} - -.a.c > .b + .d { - order: 28; -} - -.test-hwb-function { - background-color: rgba(0, 196, 255, 0.5); -} - -.test-opacity-percent { - opacity: 42%; -} - -.clamp-same-unit { - width: clamp(10px, 64px, 80px); -} - -.complex-clamp { - width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); -} - -.clamp-different-units { - width: clamp(10%, 2px, 4rem); -} - -.mixed-clamp { - grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); - margin: clamp(1rem, 2%, 3rem) 4vh; -} - -.calc-clamp { - margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); -} - -.multiple-calc-clamp { - margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); -} - -.nested-clamp { - font-size: clamp(clamp(1rem, 2vw, 3rem), 4vw, 5rem); -} - -@font-face { - font-family: 'A'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url(a) format("woff2"); -} - -.block-flow { - display: block; - display: block flow; -} - -.block-flow-root { - display: flow-root; - display: block flow-root; -} - -.inline-flow { - display: inline; - display: inline flow; -} - -.inline-flow-root { - display: inline-block; - display: inline flow-root; -} - -.run-in-flow { - display: run-in; - display: run-in flow; -} - -.list-item-block-flow { - display: list-item; - display: list-item block flow; -} - -.inline-flow-list-item { - display: inline list-item; - display: inline flow list-item; -} - -.block-flex { - display: flex; - display: block flex; -} - -.inline-flex { - display: inline-flex; - display: inline flex; -} - -.block-grid { - display: grid; - display: block grid; -} - -.inline-grid { - display: inline-grid; - display: inline grid; -} - -.inline-ruby { - display: ruby; - display: inline ruby; -} - -.block-table { - display: table; - display: block table; -} - -.inline-table { - display: inline-table; - display: inline table; -} - -.table-cell-flow { - display: table-cell; - display: table-cell flow; -} - -.table-caption-flow { - display: table-caption; - display: table-caption flow; -} - -.ruby-base-flow { - display: ruby-base; - display: ruby-base flow; -} - -.ruby-text-flow { - display: ruby-text; - display: ruby-text flow; -} - -.logical-float { - float: left; -} - -.color-function { - prop-1: rgb(0, 129, 96); - prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; - prop-3: rgb(7, 3, 1); - prop-4: rgb(7, 3, 1); - prop-5: color(display-p3 1 1 1 1); -} - -.oklab { - color-1: rgb(73, 71, 69); - color-2: rgb(121, 34, 67); - color-3: rgba(121, 34, 67, 0.5); - color-4: rgb(121, 34, 67); - color-5: rgba(121, 34, 67, 0.5); - color-6: rgb(177, 102, 126); - color-7: oklab(60% 0.1 0 foo); - color-8: rgb(125, 35, 41); - color-9: rgb(198, 93, 7); - color-10: rgb(157, 147, 24); - color-11: rgb(104, 166, 57); - color-12: rgb(98, 172, 239); -} - -.oklch { - color-1: rgb(126, 37, 15); - color-2: rgb(126, 37, 15); - color-3: rgba(126, 37, 15, 0.5); - color-4: rgb(126, 37, 15); - color-5: rgba(126, 37, 15, 0.5); - color-6: rgb(197, 84, 124); - - color-7: rgb(0, 149, 131); - color-8: rgb(0, 149, 131); - color-9: rgb(0, 149, 131); - color-10: rgb(0, 149, 131); - color-11: rgb(0, 149, 131); - - color-12: rgb(188, 101, 59); - color-13: rgb(188, 101, 59); - color-14: rgb(188, 101, 59); - color-15: rgb(188, 101, 59); - color-16: rgb(188, 101, 59); - color-17: oklch(60% 0.1250 0.785398unknown); -} - -@media (color-gamut: p3) { -.oklch { - - color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: color(display-p3 0.19244 0.58461 0.51559); -} -} - -.ic-unit { - --value-2ic: initial; - text-indent: 2em; - content: var(--value-2ic); - left: var(--non-existing, 2em); - width: calc(8em + 20px); - height: 10px; - margin: 0.5em 1em .2em; - padding: 2 ic; -} - -.unset { - clip: unset; -} - -.mod { - padding: 8px 3px 1px calc(3px + 50%); - transform: rotate(-50deg); - width: 2px; -} - -.rem { - padding: 8px 3px 1px calc(3px + 50%); - transform: rotate(-50deg); -} - -.round { - top: 3px; - right: 3px; - bottom: 3px; - left: 2px; - padding-left: 2px; -} - -.trigonometric { - left: 0.70711; - left: 0.70711; - left: 1; - left: 30deg; - left: 60deg; - left: 84.28941deg; - left: -45deg; - left: 90deg; - left: 135deg; - left: 0.99863; -} - -.trigonometric-ignore-not-a-function { - left: sin; - left: cos; - left: tan; - left: asin; - left: acos; - left: atan; - left: atan2; -} - -.trigonometric-ignore-no-arguments { - left: sin(); - left: cos(); - left: tan(); - left: asin(); - left: acos(); - left: atan(); - left: atan2(); -} - -[data-view-size=m] .view { - background: red; - } - -.nested-calc { - order: calc(1 * calc(8 / 3 + calc(5 * 10))); -} - -.text-decoration-shorthand { - text-decoration: 3px wavy pink overline; -} - -.stage__container { - left: var(--size, 1rem); -} - -:scope { - content: "plain :scope"; -} - -@scope (.foo) { - :scope { - content: ":scope in @scope"; - } -} - -:scope { - @scope (.foo) { - content: ":scope in @scope, but with nesting"; - } -} - -@media (min-aspect-ratio: 177/100) { - /* media query aspect ratio : */ -} - -.color-mix { - color-1: rgba(0, 0, 255, 0.65); - color-2: rgba(0, 0, 255, 0.65); - color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(121, 0, 181, 0.65); - color-5: rgba(148, 0, 122, 0.65); - color-6: rgba(179, 0, 255, 0.65); -} - -@media (color-gamut: p3) { -.color-mix { - color-4: color(display-p3 0.44 0 0.70096 / 0.65); - color-5: color(display-p3 0.54692 0 0.47541 / 0.65); -} -} - -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115%, rgb(255, 71, 0) 0%, rgb(255, 103, 0), rgb(255, 137, 0), rgb(255, 169, 0), rgb(250, 199, 0), rgb(197, 225, 0), rgb(116, 246, 0), rgb(0, 255, 86), rgb(0, 255, 171), rgb(0, 255, 239), rgb(0, 255, 255) 100%); -} - -@media (color-gamut: rec2020) { -.gradients-interpolation-method { - - background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); -} -} - -@supports (color: color(display-p3 0 0 0%)) { -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 182, 255), rgb(173, 195, 255), rgb(159, 205, 255), rgb(140, 215, 255), rgb(100, 228, 255), rgb(94, 237, 237) 100%); -} - -@media (color-gamut: rec2020) { -.gradients-interpolation-method { - --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); -} -} -} - -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { -.gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} -} - -.test-css-color-5-interop { - color-1: rgb(196, 129, 72); - color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); - color-3: rgb(234, 133, 82); - color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); - color-5: rgb(179, 157, 51); - color-6: rgb(179, 35, 35); - color-7: rgb(163, 57, 39); - color-8: rgb(131, 27, 0); - color-9: rgb(126, 37, 0); -} - -@media (color-gamut: p3) { -.test-css-color-5-interop { - color-8: color(display-p3 0.4939 0.10676 0); - color-9: color(display-p3 0.47553 0.14324 0); -} -} - -.test-property-with-var { - --opacity: 1; - color: rgba(87 107 149 / var(--opacity)); -} - -.exponential-functions { - width: 8px; -} - -.out-of-gamut { - --color: rgb(0, 247, 79); -} - -.issue-1244--a { - background-image: -ms-linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--b { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--c { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.dark { - --csstools-color-scheme--dark: initial; - color-scheme: dark; -} - -.light { - --csstools-color-scheme--dark: ; - color-scheme: light; -} - -.schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); - color: light-dark(rgb(131, 27, 0), magenta); -} - -@media (color-gamut: p3) { -.schemed-colors { - color: light-dark(color(display-p3 0.4939 0.10676 0), magenta); -} -} - -.schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); -} - -@supports (color: light-dark(red, red)) { -.schemed-prop { - --theme-color: light-dark(cyan, deepskyblue); -} -} - -.schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); -} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index a1c62bf3e..00883a7fd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -44,25 +44,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index 4720f1b79..0c09ff9ea 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -42,25 +42,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index ea9761526..6f8d06cf8 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -41,25 +41,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css index ed264d8ec..7ea6bc473 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css @@ -32,25 +32,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } :is(.test-nesting-rules,#test-is-pseudo) + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css index 596601f5a..81b8bd559 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -44,25 +44,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index b310c6baf..1ddfff84f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -48,10 +48,6 @@ .test-nesting-rules { -ms-flex-order: 4; order: 4; - - -ms-flex-order: 6; - - order: 6; } .test-nesting-rules p { @@ -59,14 +55,17 @@ order: 5; } +.test-nesting-rules { + + -ms-flex-order: 6; + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { -ms-flex-order: 7; order: 7; - - -ms-flex-order: 9; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { @@ -74,6 +73,14 @@ order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + -ms-flex-order: 9; + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { -ms-flex-order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css deleted file mode 100644 index 818a9a613..000000000 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css +++ /dev/null @@ -1,512 +0,0 @@ -:root { - --order: 1; -} - -.test-custom-property-fallbacks { - --firebrick: lab(40% 56.6 39); -} - -.test-custom-properties { - order: var(--order); -} - -.test-image-set-function { - background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - order: 2; -} - -.test-logical-properties-and-values { - margin-inline-start: 1px; - margin-inline-end: 2px; - order: 3; - padding-block: 4px; -} - -.test-logical-resize { - resize: inline; -} - -.test-logical-viewport-units { - width: calc(10vi + 5px); -} - -.test-nesting-rules { - order: 4; - - order: 6; -} - -.test-nesting-rules p { - order: 5; - } - -.test-nesting-rules, -#test-is-pseudo { - order: 7; - - order: 9; -} - -:is(.test-nesting-rules,#test-is-pseudo) + p { - order: 8; - } - -@custom-media --narrow-window (max-width: 30em); - -@media (--narrow-window) { - .test-custom-media-queries { - order: 10; - } -} - -@media (480px <= width < 768px) { - .test-media-query-ranges { - order: 11; - } -} - -@custom-media --dark-mode (prefers-color-scheme: dark); - -@media (--dark-mode) { - body { - background-color: black; - color: white; - } -} - -@custom-selector :--heading h1, h2, h3, h4, h5, h6, .heading-7; - -.test-custom-selectors:--heading { - order:12; -} - -.test-case-insensitive-attributes[frame=hsides i] { - order: 13; -} - -.test-rebeccapurple-color { - color: rebeccapurple; - order: 14; -} - -.test-hexadecimal-alpha-notation { - background-color: #f3f3f3f3; - color: #0003; - order: 15; -} - -.test-color-functional-notation { - color: rgb(70% 13.5% 13.5% / 50%); - order: 16; -} - -.test-lab-function { - background-color: lab(40% 56.6 39); - color: lch(40% 68.8 34.5 / 50%); - order: 17; -} - -.test-system-ui-font-family { - font-family: system-ui; - order: 18; -} - -.test-font-variant-property { - font-variant-caps: small-caps; - order: 19; -} - -.test-all-property { - all: initial; - order: 20; -} - -.test-matches-pseudo-class:matches(:first-child, .special) { - order: 21; -} - -.test-not-pseudo-class:not(:first-child, .special) { - order: 22; -} - -.test-any-link-pseudo-class:-moz-any-link { - order: 23; -} - -.test-any-link-pseudo-class:any-link { - order: 23; -} - -.test-dir-pseudo-class:dir(rtl) { - order: 24; -} - -.test-overflow-wrap-property { - order: 25; - overflow-wrap: break-word; -} - -.test-focus-visible-pseudo-class:focus-visible { - order: 26; -} - -.test-double-position-gradients { - background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); -} - -.test-blank-pseudo-class:blank { - background-color: yellow; -} - -.test-has-pseudo-class:has(.inner-class) { - background-color: yellow; -} - -:is(.a, .b):is(:focus, :hover) { - order: 27; -} - -:is(.a > .b) + :is(.c > .d) { - order: 28; -} - -.test-hwb-function { - background-color: hwb(194 0% 0% / .5); -} - -.test-opacity-percent { - opacity: 42%; -} - -.clamp-same-unit { - width: clamp(10px, 64px, 80px); -} - -.complex-clamp { - width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); -} - -.clamp-different-units { - width: clamp(10%, 2px, 4rem); -} - -.mixed-clamp { - grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); - margin: clamp(1rem, 2%, 3rem) 4vh; -} - -.calc-clamp { - margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); -} - -.multiple-calc-clamp { - margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); -} - -.nested-clamp { - font-size: clamp(clamp(1rem, 2vw, 3rem), 4vw, 5rem); -} - -@font-face { - font-family: 'A'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url(a) format(woff2); -} - -.block-flow { - display: block flow; -} - -.block-flow-root { - display: block flow-root; -} - -.inline-flow { - display: inline flow; -} - -.inline-flow-root { - display: inline flow-root; -} - -.run-in-flow { - display: run-in flow; -} - -.list-item-block-flow { - display: list-item block flow; -} - -.inline-flow-list-item { - display: inline flow list-item; -} - -.block-flex { - display: block flex; -} - -.inline-flex { - display: inline flex; -} - -.block-grid { - display: block grid; -} - -.inline-grid { - display: inline grid; -} - -.inline-ruby { - display: inline ruby; -} - -.block-table { - display: block table; -} - -.inline-table { - display: inline table; -} - -.table-cell-flow { - display: table-cell flow; -} - -.table-caption-flow { - display: table-caption flow; -} - -.ruby-base-flow { - display: ruby-base flow; -} - -.ruby-text-flow { - display: ruby-text flow; -} - -.logical-float { - float: inline-start; -} - -.color-function { - prop-1: color(display-p3 0.00000 0.51872 0.36985); - prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; - prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); - prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22)); - prop-5: color(display-p3 1 1 1 1); -} - -.oklab { - color-1: oklab(40% 0.001236 0.0039); - color-2: oklab(40% 0.1236 0.0039 / 1); - color-3: oklab(40% 0.1236 0.0039 / .5); - color-4: oklab(40% 0.1236 0.0039 / 100%); - color-5: oklab(40% 0.1236 0.0039 / 50%); - color-6: oklab(60% 0.1 0); - color-7: oklab(60% 0.1 0 foo); - color-8: oklab(40.101% 0.1147 0.0453); - color-9: oklab(59.686% 0.1009 0.1192); - color-10: oklab(65.125% -0.0320 0.1274); - color-11: oklab(66.016% -0.1084 0.1114); - color-12: oklab(72.322% -0.0465 -0.1150); -} - -.oklch { - color-1: oklch(40% 0.1268735435 34.568626); - color-2: oklch(40% 0.1268735435 34.568626 / 1); - color-3: oklch(40% 0.1268735435 34.568626 / .5); - color-4: oklch(40% 0.1268735435 34.568626 / 100%); - color-5: oklch(40% 0.1268735435 34.568626 / 50%); - color-6: oklch(60% 0.150 0); - - color-7: oklch(60% 0.1250 180); - color-8: oklch(60% 0.1250 180deg); - color-9: oklch(60% 0.1250 0.5turn); - color-10: oklch(60% 0.1250 200grad); - color-11: oklch(60% 0.1250 3.14159rad); - - color-12: oklch(60% 0.1250 45); - color-13: oklch(60% 0.1250 45deg); - color-14: oklch(60% 0.1250 0.125turn); - color-15: oklch(60% 0.1250 50grad); - color-16: oklch(60% 0.1250 0.785398rad); - color-17: oklch(60% 0.1250 0.785398unknown); -} - -.ic-unit { - --value-2ic: initial; - text-indent: 2ic; - content: var(--value-2ic); - left: var(--non-existing, 2ic); - width: calc(8ic + 20px); - height: 10px; - margin: 0.5ic 1ic .2ic; - padding: 2 ic; -} - -.unset { - clip: unset; -} - -.mod { - padding: 8px mod(18px, 5px) 1px calc(mod(15px, 6px) + 50%); - transform: rotate(mod(-140deg, -90deg)); - width: mod(mod(-18px, 5px), 5px); -} - -.rem { - padding: 8px rem(18px, 5px) 1px calc(rem(15px, 6px) + 50%); - transform: rotate(rem(-140deg, -90deg)); -} - -.round { - top: round(2.5px, 1px); - right: round(nearest, 2.5px, 1px); - bottom: round(up, 2.5px, 1px); - left: round(down, 2.5px, 1px); - padding-left: round(to-zero, 2.5px, 1px); -} - -.trigonometric { - left: sin(45deg); - left: cos(45deg); - left: tan(45deg); - left: asin(0.5); - left: acos(0.5); - left: atan(10); - left: atan2(-1, 1); - left: asin(sin(pi / 2)); - left: atan2(infinity, -infinity); - left: sin((1deg * 3) + .25turn); -} - -.trigonometric-ignore-not-a-function { - left: sin; - left: cos; - left: tan; - left: asin; - left: acos; - left: atan; - left: atan2; -} - -.trigonometric-ignore-no-arguments { - left: sin(); - left: cos(); - left: tan(); - left: asin(); - left: acos(); - left: atan(); - left: atan2(); -} - -@custom-selector :--view-m [data-view-size=m]; - -:--view-m .view { - background: red; - } - -.nested-calc { - order: calc(1 * calc(8 / 3 + calc(5 * 10))); -} - -.text-decoration-shorthand { - -webkit-text-decoration: 3px wavy pink overline; - text-decoration: 3px wavy pink overline; -} - -.stage__container { - inset-inline-start: var(--size, 1rem); -} - -:scope { - content: "plain :scope"; -} - -@scope (.foo) { - :scope { - content: ":scope in @scope"; - } -} - -:scope { - @scope (.foo) { - content: ":scope in @scope, but with nesting"; - } -} - -@media (min-aspect-ratio: 1.77) { - /* media query aspect ratio : */ -} - -.color-mix { - color-1: color-mix(in srgb, rgb(255 0 0 / 0), blue 65%); - color-2: color-mix(in lab, rgb(255 0 0 / 0), blue 65%); - color-3: color-mix(in xyz, rgb(255 0 0 / 0), blue 65%); - color-4: color-mix(in oklch, rgb(255 0 0 / 0), blue 65%); - color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%); - color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); -} - -.gradients-interpolation-method { - --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); - - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); -} - -.test-css-color-5-interop { - color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); - color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); - color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); - color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); - color-5: hwb(from hwb(50deg 20% 30%) h w b); - color-6: lab(from lab(40% 56.6 39) l a b); - color-7: lch(from lch(40% 56.6 39) l c h); - color-8: oklab(from oklab(40% 0.566 0.39) l a b); - color-9: oklch(from oklch(40% 0.566 39deg) l c h); -} - -.test-property-with-var { - --opacity: 1; - color: rgba(87 107 149 / var(--opacity)); -} - -.exponential-functions { - width: calc(1px * pow(2, 3)); -} - -.out-of-gamut { - --color: color(display-p3 0 1 0); -} - -.issue-1244--a { - background-image: -ms-linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--b { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.issue-1244--c { - background-image: linear-gradient(180deg, red 0%, blue 100%); -} - -.dark { - color-scheme: dark; -} - -.light { - color-scheme: light; -} - -.schemed-colors { - color: light-dark(lch(from oklab(40% 0.566 0.39) l c h), magenta); -} - -.schemed-prop { - --theme-color: light-dark(cyan, deepskyblue); -} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index 818a9a613..e34f703da 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -33,25 +33,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } :is(.test-nesting-rules,#test-is-pseudo) + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index 6df125ef7..f26253055 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -43,25 +43,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css index 61ebe6bb7..2be1d92fd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css @@ -54,6 +54,16 @@ -webkit-order: 4; -moz-box-ordinal-group: 5; order: 4; +} + +.test-nesting-rules p { + -webkit-box-ordinal-group: 6; + -webkit-order: 5; + -moz-box-ordinal-group: 6; + order: 5; + } + +.test-nesting-rules { -webkit-box-ordinal-group: 7; @@ -64,19 +74,23 @@ order: 6; } -.test-nesting-rules p { - -webkit-box-ordinal-group: 6; - -webkit-order: 5; - -moz-box-ordinal-group: 6; - order: 5; - } - .test-nesting-rules, #test-is-pseudo { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; order: 7; +} + +.test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { + -webkit-box-ordinal-group: 9; + -webkit-order: 8; + -moz-box-ordinal-group: 9; + order: 8; + } + +.test-nesting-rules, +#test-is-pseudo { -webkit-box-ordinal-group: 10; @@ -87,13 +101,6 @@ order: 9; } -.test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { - -webkit-box-ordinal-group: 9; - -webkit-order: 8; - -moz-box-ordinal-group: 9; - order: 8; - } - @media (max-width: 30em) { .test-custom-media-queries { -webkit-box-ordinal-group: 11; diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index 464a43cb2..1b6013b03 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -69,6 +69,16 @@ -webkit-order: 4; -moz-box-ordinal-group: 5; order: 4; +} + +.test-nesting-rules p { + -webkit-box-ordinal-group: 6; + -webkit-order: 5; + -moz-box-ordinal-group: 6; + order: 5; + } + +.test-nesting-rules { -webkit-box-ordinal-group: 7; @@ -79,27 +89,12 @@ order: 6; } -.test-nesting-rules p { - -webkit-box-ordinal-group: 6; - -webkit-order: 5; - -moz-box-ordinal-group: 6; - order: 5; - } - .test-nesting-rules, #test-is-pseudo { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; order: 7; - - -webkit-box-ordinal-group: 10; - - -webkit-order: 9; - - -moz-box-ordinal-group: 10; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { @@ -116,6 +111,18 @@ order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + -webkit-box-ordinal-group: 10; + + -webkit-order: 9; + + -moz-box-ordinal-group: 10; + + order: 9; +} + @custom-media --narrow-window (max-width: 30em); @media (max-width: 30em) { diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index a2e54066a..1509690b8 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -33,25 +33,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } :is(.test-nesting-rules,#test-is-pseudo) + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index 99a0b97e4..4659719e6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -42,25 +42,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 0744bedd2..fcae0be42 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -41,25 +41,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index 184c8a052..a148b7f4a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -44,25 +44,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css index 527f16276..1af8722cf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css @@ -33,25 +33,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } :is(.test-nesting-rules,#test-is-pseudo) + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @media (max-width: 30em) { .test-custom-media-queries { order: 10; diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index 74d8b199a..7ba61e2b6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -44,25 +44,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index 74d8b199a..7ba61e2b6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -44,25 +44,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index cdf497178..139c3badf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -44,25 +44,32 @@ .test-nesting-rules { order: 4; - - order: 6; } .test-nesting-rules p { order: 5; } +.test-nesting-rules { + + order: 6; +} + .test-nesting-rules, #test-is-pseudo { order: 7; - - order: 9; } .test-nesting-rules:not(#does-not-exist) + p,#test-is-pseudo + p { order: 8; } +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css index 3376f9052..7c6a19843 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -65,12 +65,6 @@ -webkit-order: 4; -moz-box-ordinal-group: 5; order: 4; - - is-layer: C; - -webkit-box-ordinal-group: 7; - -webkit-order: 6; - -moz-box-ordinal-group: 7; - order: 6; } .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { @@ -81,12 +75,32 @@ order: 5; } +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + + is-layer: C; + -webkit-box-ordinal-group: 7; + -webkit-order: 6; + -moz-box-ordinal-group: 7; + order: 6; + } + .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; order: 7; +} + +.test-nesting-rules:not(#does-not-exist):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p,#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { + -webkit-box-ordinal-group: 9; + -webkit-order: 8; + -moz-box-ordinal-group: 9; + order: 8; + } + +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 10; @@ -97,13 +111,6 @@ order: 9; } -.test-nesting-rules:not(#does-not-exist):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p,#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { - -webkit-box-ordinal-group: 9; - -webkit-order: 8; - -moz-box-ordinal-group: 9; - order: 8; - } - @media (max-width: 500px) { .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 11; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index 08692a54b..7b6d929f9 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -74,12 +74,6 @@ -webkit-order: 4; -moz-box-ordinal-group: 5; order: 4; - - is-layer: C; - -webkit-box-ordinal-group: 7; - -webkit-order: 6; - -moz-box-ordinal-group: 7; - order: 6; } .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { @@ -90,20 +84,21 @@ order: 5; } +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + + is-layer: C; + -webkit-box-ordinal-group: 7; + -webkit-order: 6; + -moz-box-ordinal-group: 7; + order: 6; + } + .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; order: 7; - - -webkit-box-ordinal-group: 10; - - -webkit-order: 9; - - -moz-box-ordinal-group: 10; - - order: 9; } .test-nesting-rules:not(#does-not-exist):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p,#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { @@ -120,6 +115,18 @@ order: 8; } +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + + -webkit-box-ordinal-group: 10; + + -webkit-order: 9; + + -moz-box-ordinal-group: 10; + + order: 9; +} + @custom-media --narrow-window (max-width: 500px); @media (max-width: 500px) { diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.after.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.after.expect.css index ee5b192d5..4226a2ca3 100644 --- a/plugins/css-has-pseudo/test/plugin-order-nesting.after.expect.css +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.after.expect.css @@ -3,10 +3,10 @@ order: 1; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { order: 2; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-w-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { order: 3; } diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.after.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.after.preserve.expect.css index d1e585c5e..c3d9e159d 100644 --- a/plugins/css-has-pseudo/test/plugin-order-nesting.after.preserve.expect.css +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.after.preserve.expect.css @@ -7,18 +7,18 @@ a:has(.b) { order: 1; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { order: 2; } -a:has(> img):focus { +a:has( > img):focus { order: 2; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-w-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { order: 3; } -a:has(> img) :has(> .some) { +a:has( > img) :has( > .some) { order: 3; } diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.before.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.before.expect.css index ee5b192d5..4226a2ca3 100644 --- a/plugins/css-has-pseudo/test/plugin-order-nesting.before.expect.css +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.before.expect.css @@ -3,10 +3,10 @@ order: 1; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { order: 2; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-w-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { order: 3; } diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.before.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.before.preserve.expect.css index d1e585c5e..c3d9e159d 100644 --- a/plugins/css-has-pseudo/test/plugin-order-nesting.before.preserve.expect.css +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.before.preserve.expect.css @@ -7,18 +7,18 @@ a:has(.b) { order: 1; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { order: 2; } -a:has(> img):focus { +a:has( > img):focus { order: 2; } -.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { +.js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-w-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-w-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { order: 3; } -a:has(> img) :has(> .some) { +a:has( > img) :has( > .some) { order: 3; } diff --git a/plugins/postcss-nesting/CHANGELOG.md b/plugins/postcss-nesting/CHANGELOG.md index 650d5b625..11f04b15a 100644 --- a/plugins/postcss-nesting/CHANGELOG.md +++ b/plugins/postcss-nesting/CHANGELOG.md @@ -2,6 +2,7 @@ ### Unreleased (major) +- Make edition `2024-02` the default. - Updated: Support for Node v18+ (major). ### 12.1.2 diff --git a/plugins/postcss-nesting/README.md b/plugins/postcss-nesting/README.md index e867f5546..e605f27de 100644 --- a/plugins/postcss-nesting/README.md +++ b/plugins/postcss-nesting/README.md @@ -34,13 +34,11 @@ you might want to use [PostCSS Nested] instead. .foo { color: red; - - color: pink; } .foo:hover { color: green; } -.foo > .bar { +.foo > .bar { color: blue; } @media (prefers-color-scheme: dark) { @@ -48,6 +46,10 @@ you might want to use [PostCSS Nested] instead. color: cyan; } } +.foo { + + color: pink; +} ``` ## Usage @@ -80,35 +82,23 @@ instructions for: - [Gulp](INSTALL.md#gulp) - [Grunt](INSTALL.md#grunt) -## ⚠️ `@nest` has been removed from the specification. - -Previous iterations of the [CSS Nesting specification] required using `@nest` for certain selectors. - -`@nest` was removed from the specification completely. -Future versions of this plugin will error if you use `@nest`. +## Options -We advice everyone to migrate their codebase **now** to nested CSS without `@nest`. -We published a [Stylelint Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins-stylelint/no-at-nest-rule#csstoolsstylelint-no-at-nest-rule) to help you migrate. +### edition -example warning: -> `@nest` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version. -> Change `@nest foo & {}` to `foo & {}` to migrate to the latest standard. +The CSS nesting feature has gone through several iterations and what is currently implemented in browsers is not the same as what was originally proposed. This plugin dates back to the original proposal and you might have written your CSS expecting this older behavior. -You can silence this warning with a new `silenceAtNestWarning` plugin option. +You can pick the older behavior by setting the `edition` option. +The `edition` values correspond with rough dates when of a particular version of the specification: +- `2024-02` (default) +- `2021` -```js -postcssNesting({ - silenceAtNestWarning: true -}) -``` - -## Options +> [!TIP] +> If you wrote nested rules with `@nest` you definitely want to set the `edition` to `2021`. +> If you are unsure than you should try to omit the `edition` option and use the default. -### edition +Eventually we will remove support for the older edition, and this plugin option, so it is strongly advised to update your CSS to the latest edition. -The default behavior is to transpile CSS following an older version of the CSS nesting specification. - -If you want to already use the latest version you can set the `edition` option to `2024-02`. ```js postcssNesting({ @@ -116,13 +106,18 @@ postcssNesting({ }) ``` -#### `2021` (default) +#### `2024-02` (default) + +- usage of `:is()` pseudo-class is no longer optional +- at rules are not combined with the `and` keyword +- `@nest` is removed from the specification +- declarations and nested rules/at-rules are no longer re-ordered + +#### `2021` This version is a continuation of what existed before CSS nesting was implemented in browsers. It made a few non-invasive changes to keep up with implementations but it is falling behind. -In a future version of this plugin this will no longer be the default. - ```pcss .foo { color: red; @@ -162,55 +157,7 @@ In a future version of this plugin this will no longer be the default. } ``` -#### `2024-02` - -- usage of `:is()` pseudo-class is no longer optional -- at rules are not combined with the `and` keyword -- `@nest` is removed from the specification -- declarations and nested rules/at-rules are no longer re-ordered - -```pcss -.foo { - color: red; - - &:hover { - color: green; - } - - > .bar { - color: blue; - } - - @media (prefers-color-scheme: dark) { - color: cyan; - } - - color: pink; -} - -/* becomes */ - -.foo { - color: red; -} -.foo:hover { - color: green; - } -.foo > .bar { - color: blue; - } -@media (prefers-color-scheme: dark) { - .foo { - color: cyan; -} - } -.foo { - - color: pink; -} -``` - -### noIsPseudoSelector +### noIsPseudoSelector (edition: `2021`) #### Specificity diff --git a/plugins/postcss-nesting/dist/index.cjs b/plugins/postcss-nesting/dist/index.cjs index 65e7f45ed..88967964f 100644 --- a/plugins/postcss-nesting/dist/index.cjs +++ b/plugins/postcss-nesting/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-selector-parser"),t=require("@csstools/selector-specificity"),n=require("@csstools/selector-resolve-nested");const r=e.pseudo({value:":is"});function sortCompoundSelectorsInsideComplexSelector(t){if(!t||!t.nodes)return;const n=[];let o=[];for(let s=0;s"tag"===e.type))){const n=r.clone({}),o=t.nodes[s];o.replaceWith(n),n.append(e.selector({nodes:[o],value:void 0}))}o.push(t.nodes[s])}else n.push(o),n.push([t.nodes[s]]),o=[];n.push(o);const s=[];for(let e=0;e"selector"===e.type&&"selector"===t.type&&e.nodes.length&&t.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t.nodes[0]):"selector"===e.type&&e.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t):"selector"===t.type&&t.nodes.length?selectorTypeOrder(e)-selectorTypeOrder(t.nodes[0]):selectorTypeOrder(e)-selectorTypeOrder(t)));for(let e=0;e=0;e--)s[e].remove(),t.prepend(s[e])}function selectorTypeOrder(t){return e.isPseudoElement(t)?o.pseudoElement:o[t.type]}const o={universal:0,tag:1,pseudoElement:2,id:3,class:4,attribute:5,pseudo:6,selector:7,string:8,root:9,comment:10};function ampersandToScope$1(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{const n=t.parent;t.replaceWith(e.pseudo({value:":scope"})),n&&sortCompoundSelectorsInsideComplexSelector(n)})),t.selector=r.toString())}function cleanupParent(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function groupDeclarations(e){const t=[],n=[];e.each((e=>{if(isDeclarationLike(e,n.length>0))t.push(e);else{if("comment"===e.type){let r=e.next();for(;r&&"comment"===r.type;)r=r.next();if(isDeclarationLike(r,n.length>0))return void t.push(e)}n.push(e)}})),e.removeAll(),t.forEach((t=>{e.append(t)})),n.forEach((t=>{e.append(t)}))}function isDeclarationLike(e,t){return!!e&&("decl"===e.type||"atrule"===e.type&&"mixin"===e.name.toLowerCase()&&!t)}function comma(e){const t=[];let n="",r=!1,o=0,s=!1,i=!1;for(const l of e)i?i=!1:"\\"===l?i=!0:s?l===s&&(s=!1):'"'===l||"'"===l?s=l:"("===l?o+=1:")"===l?o>0&&(o-=1):0===o&&","===l&&(r=!0),r?(""!==n&&t.push(n.trim()),n="",r=!1):n+=l;return t.push(n.trim()),t}function shiftNodesBeforeParent(e,t){const n=t.index(e);if(n){const e=t.cloneBefore().removeAll().append(t.nodes.slice(0,n));e.raws.semicolon=!0,cleanupParent(e)}t.before(e),t.raws.semicolon=!0}var s=["container","document","media","supports","layer","starting-style"];function transformAtruleWithinAtrule(e,t){var n,r;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.params=(n=t.params,r=e.params,comma(n).map((e=>comma(r).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),cleanupParent(t)}function isAtruleWithinAtrule(e,t){return s.includes(e.name)&&e.name===t.name}function atruleWithinRule$1(e,t,n,r,o){if(groupDeclarations(t),shiftNodesBeforeParent(e,t),e.nodes){const s=t.clone().removeAll().append(e.nodes);e.append(s),cleanupParent(t),r(s,n,o)}else cleanupParent(t)}function isAtruleWithinRule$1(e){return s.includes(e.name)}function combinationsWithSizeN(e,t){if(t<2)throw new Error("n must be greater than 1");if(e.length<2)throw new Error("s must be greater than 1");if(Math.pow(e.length,t)>1e4)throw new Error("Too many combinations when trying to resolve a nested selector with lists, reduce the complexity of your selectors");const n=[];for(let e=0;e=0;s--){let t=n[s];if(t>=e.length){if(t=0,n[s]=0,0===s)return r;n[s-1]+=1}o[s]=e[t]}r.push(o),n[n.length-1]++}}function nodesAreEquallySpecific(n){const r=n.map((t=>e().astSync(t))).map((e=>t.selectorSpecificity(e))),o=r[0];for(let e=1;ee().astSync(t))):[e().astSync(`:is(${t.join(",")})`)];const s=[];for(let t=0;t{"nesting"===e.type&&(n=!0)}));const r=t.nodes[0];let o=!1;r.each((e=>"combinator"===e.type&&(o=!0,!1))),n?o&&r.insertBefore(r.at(0),e.nesting({})):(r.insertBefore(r.at(0),e.combinator({value:" "})),r.insertBefore(r.at(0),e.nesting({}))),l=t.toString()}let c=[],a=0;if(e().astSync(l).walkNesting((()=>{a++})),a>1&&o.length>1)c=combinationsWithSizeN(o,a),i=c.length;else{i=o.length;for(let e=0;e{if("nesting"!==o.type)return;let s=c[t][n];n++,"root"===s.type&&1===s.nodes.length&&(s=s.nodes[0]);const i=e().astSync(`:is(${s.toString()})`),l=isSimpleSelector(s.nodes[0]),a=isCompoundSelector(s.nodes[0]),u=isSimpleSelector(o),p=isCompoundSelector(o);if(l&&u)return void o.replaceWith(s.clone());if((l||a)&&(u||p)){const e=o.parent;return l&&"selector"===s.type?o.replaceWith(s.clone().nodes[0]):o.replaceWith(...s.clone().nodes),void(e&&e.nodes.length>1&&sortCompoundSelectorsInsideComplexSelector(e))}if(l){const e=o.parent;return o.replaceWith(s.clone().nodes[0]),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(a){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsNotInsideCompoundSelector(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}const d=o.parent;r.noIsPseudoSelector?o.replaceWith(...s.clone().nodes):o.replaceWith(...i.clone({}).nodes),d&&sortCompoundSelectorsInsideComplexSelector(d)})),s.push(o.toString())}}return s}function isSimpleSelector(e){return"combinator"!==e.type&&!(e.parent&&e.parent.nodes.length>1)}function isCompoundSelector(e,t=null){if(isSimpleSelector(e))return!1;if(!e.parent)return!1;if(!!e.parent.nodes.find((e=>"combinator"===e.type)))return!1;return!(!!e.parent.nodes.find((e=>"nesting"===e.type))&&t&&!isCompoundSelector(t))}function nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(e){if(!e.parent)return!1;if(0!==e.parent.nodes.indexOf(e))return!1;for(let t=1;t"!==e.parent.nodes[t].value)return!1;return!0}function nestingIsNotInsideCompoundSelector(e){if(isSimpleSelector(e))return!0;if(!e.parent)return!1;for(let t=0;te.split("&").length>=2&&-1===e.indexOf("|")))}function transformRuleWithinRule$1(e,t,n,r){let o=[];try{o=mergeSelectors$1(t.selectors,e.selectors,r)}catch(r){return void e.warn(n,`Failed to parse selectors : "${t.selector}" / "${e.selector}" with message: "${r instanceof Error?r.message:r}"`)}if(!o.length)return;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.selectors=o;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule$1(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function isAtRule(e){return e&&"atrule"===e.type}function isNestRule(e){return e&&isAtRule(e)&&"nest"===e.name}function isRule(e){return e&&"rule"===e.type}function walk$1(e,t,n){e.each((r=>{const o=r.parent;isNestRule(r)&&!n.silenceAtNestWarning&&e.warn(t,`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${r.params} {}\` to \`${r.params} {}\` to migrate to the latest standard.`),isRule(r)&&isRule(o)&&isValidRuleWithinRule$1(r)?transformRuleWithinRule$1(r,o,t,n):isNestRule(r)&&isRule(o)&&isValidNestRuleWithinRule(r)?transformNestRuleWithinRule(r,o,t,walk$1,n):isAtRule(r)&&isRule(o)&&isAtruleWithinRule$1(r)?atruleWithinRule$1(r,o,t,walk$1,n):isAtRule(r)&&isAtRule(o)&&isAtruleWithinAtrule(r,o)&&transformAtruleWithinAtrule(r,o),"nodes"in r&&r.nodes.length&&walk$1(r,t,n)}))}const creator$2=e=>{const t=Object.assign({noIsPseudoSelector:!1,silenceAtNestWarning:!1},e);return{postcssPlugin:"postcss-nesting",Rule(e,{result:n}){walk$1(e,n,t),e.selector.includes("&")&&ersandToScope$1(e,n)}}};function ampersandToScope(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{t.replaceWith(e.pseudo({value:":scope"}))})),t.selector=r.toString())}function atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes);e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}creator$2.postcss=!0;const i=e();function mergeSelectors(e,t,r,o){let s;try{s=n.resolveNestedSelector(i.astSync(t),i.astSync(r))}catch(n){return e.warn(o,`Failed to parse selectors : "${r}" / "${t}" with message: "${n instanceof Error?n.message:n}"`),!1}return!!s&&s.toString()}function transformRuleWithinRule(e,t,n){const r=mergeSelectors(e,e.selector,t.selector,n);if(!r)return;shiftNodesBeforeParent(e,t),e.selector=r;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function walk(e,t){e.each((e=>{const n=e.parent;isRule(e)&&isRule(n)&&isValidRuleWithinRule(e)?transformRuleWithinRule(e,n,t):isAtRule(e)&&isRule(n)&&isAtruleWithinRule(e)&&atruleWithinRule(e,n,t,walk),"nodes"in e&&e.nodes.length&&walk(e,t)}))}const creator$1=()=>({postcssPlugin:"postcss-nesting",Rule(e,{result:t}){walk(e,t),e.selector.includes("&")&&ersandToScope(e,t)},AtRule:{nest(e){throw e.error(`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${e.params} {}\` to \`${e.params} {}\` to migrate to the latest standard.`)}}});creator$1.postcss=!0;const creator=e=>{const t=Object.assign({edition:"2021"},e);switch(t.edition){case"2021":return creator$2(e);case"2024-02":return creator$1();default:throw new Error(`Invalid edition: ${t.edition}`)}};creator.postcss=!0,module.exports=creator; +"use strict";var e=require("postcss-selector-parser"),t=require("@csstools/selector-specificity"),n=require("@csstools/selector-resolve-nested");const r=e.pseudo({value:":is"});function sortCompoundSelectorsInsideComplexSelector(t){if(!t||!t.nodes)return;const n=[];let o=[];for(let s=0;s"tag"===e.type))){const n=r.clone({}),o=t.nodes[s];o.replaceWith(n),n.append(e.selector({nodes:[o],value:void 0}))}o.push(t.nodes[s])}else n.push(o),n.push([t.nodes[s]]),o=[];n.push(o);const s=[];for(let e=0;e"selector"===e.type&&"selector"===t.type&&e.nodes.length&&t.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t.nodes[0]):"selector"===e.type&&e.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t):"selector"===t.type&&t.nodes.length?selectorTypeOrder(e)-selectorTypeOrder(t.nodes[0]):selectorTypeOrder(e)-selectorTypeOrder(t)));for(let e=0;e=0;e--)s[e].remove(),t.prepend(s[e])}function selectorTypeOrder(t){return e.isPseudoElement(t)?o.pseudoElement:o[t.type]}const o={universal:0,tag:1,pseudoElement:2,id:3,class:4,attribute:5,pseudo:6,selector:7,string:8,root:9,comment:10};function ampersandToScope$1(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{const n=t.parent;t.replaceWith(e.pseudo({value:":scope"})),n&&sortCompoundSelectorsInsideComplexSelector(n)})),t.selector=r.toString())}function cleanupParent(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function groupDeclarations(e){const t=[],n=[];e.each((e=>{if(isDeclarationLike(e,n.length>0))t.push(e);else{if("comment"===e.type){let r=e.next();for(;r&&"comment"===r.type;)r=r.next();if(isDeclarationLike(r,n.length>0))return void t.push(e)}n.push(e)}})),e.removeAll(),t.forEach((t=>{e.append(t)})),n.forEach((t=>{e.append(t)}))}function isDeclarationLike(e,t){return!!e&&("decl"===e.type||"atrule"===e.type&&"mixin"===e.name.toLowerCase()&&!t)}function comma(e){const t=[];let n="",r=!1,o=0,s=!1,i=!1;for(const l of e)i?i=!1:"\\"===l?i=!0:s?l===s&&(s=!1):'"'===l||"'"===l?s=l:"("===l?o+=1:")"===l?o>0&&(o-=1):0===o&&","===l&&(r=!0),r?(""!==n&&t.push(n.trim()),n="",r=!1):n+=l;return t.push(n.trim()),t}function shiftNodesBeforeParent(e,t){const n=t.index(e);if(n){const e=t.cloneBefore().removeAll().append(t.nodes.slice(0,n));e.raws.semicolon=!0,cleanupParent(e)}t.before(e),t.raws.semicolon=!0}var s=["container","document","media","supports","layer","starting-style"];function transformAtruleWithinAtrule(e,t){var n,r;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.params=(n=t.params,r=e.params,comma(n).map((e=>comma(r).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),cleanupParent(t)}function isAtruleWithinAtrule(e,t){return s.includes(e.name)&&e.name===t.name}function atruleWithinRule$1(e,t,n,r,o){if(groupDeclarations(t),shiftNodesBeforeParent(e,t),e.nodes){const s=t.clone().removeAll().append(e.nodes);e.append(s),cleanupParent(t),r(s,n,o)}else cleanupParent(t)}function isAtruleWithinRule$1(e){return s.includes(e.name)}function combinationsWithSizeN(e,t){if(t<2)throw new Error("n must be greater than 1");if(e.length<2)throw new Error("s must be greater than 1");if(Math.pow(e.length,t)>1e4)throw new Error("Too many combinations when trying to resolve a nested selector with lists, reduce the complexity of your selectors");const n=[];for(let e=0;e=0;s--){let t=n[s];if(t>=e.length){if(t=0,n[s]=0,0===s)return r;n[s-1]+=1}o[s]=e[t]}r.push(o),n[n.length-1]++}}function nodesAreEquallySpecific(n){const r=n.map((t=>e().astSync(t))).map((e=>t.selectorSpecificity(e))),o=r[0];for(let e=1;ee().astSync(t))):[e().astSync(`:is(${t.join(",")})`)];const s=[];for(let t=0;t{"nesting"===e.type&&(n=!0)}));const r=t.nodes[0];let o=!1;r.each((e=>"combinator"===e.type&&(o=!0,!1))),n?o&&r.insertBefore(r.at(0),e.nesting({})):(r.insertBefore(r.at(0),e.combinator({value:" "})),r.insertBefore(r.at(0),e.nesting({}))),l=t.toString()}let c=[],a=0;if(e().astSync(l).walkNesting((()=>{a++})),a>1&&o.length>1)c=combinationsWithSizeN(o,a),i=c.length;else{i=o.length;for(let e=0;e{if("nesting"!==o.type)return;let s=c[t][n];n++,"root"===s.type&&1===s.nodes.length&&(s=s.nodes[0]);const i=e().astSync(`:is(${s.toString()})`),l=isSimpleSelector(s.nodes[0]),a=isCompoundSelector(s.nodes[0]),u=isSimpleSelector(o),p=isCompoundSelector(o);if(l&&u)return void o.replaceWith(s.clone());if((l||a)&&(u||p)){const e=o.parent;return l&&"selector"===s.type?o.replaceWith(s.clone().nodes[0]):o.replaceWith(...s.clone().nodes),void(e&&e.nodes.length>1&&sortCompoundSelectorsInsideComplexSelector(e))}if(l){const e=o.parent;return o.replaceWith(s.clone().nodes[0]),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(a){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsNotInsideCompoundSelector(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}const d=o.parent;r.noIsPseudoSelector?o.replaceWith(...s.clone().nodes):o.replaceWith(...i.clone({}).nodes),d&&sortCompoundSelectorsInsideComplexSelector(d)})),s.push(o.toString())}}return s}function isSimpleSelector(e){return"combinator"!==e.type&&!(e.parent&&e.parent.nodes.length>1)}function isCompoundSelector(e,t=null){if(isSimpleSelector(e))return!1;if(!e.parent)return!1;if(!!e.parent.nodes.find((e=>"combinator"===e.type)))return!1;return!(!!e.parent.nodes.find((e=>"nesting"===e.type))&&t&&!isCompoundSelector(t))}function nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(e){if(!e.parent)return!1;if(0!==e.parent.nodes.indexOf(e))return!1;for(let t=1;t"!==e.parent.nodes[t].value)return!1;return!0}function nestingIsNotInsideCompoundSelector(e){if(isSimpleSelector(e))return!0;if(!e.parent)return!1;for(let t=0;te.split("&").length>=2&&-1===e.indexOf("|")))}function transformRuleWithinRule$1(e,t,n,r){let o=[];try{o=mergeSelectors$1(t.selectors,e.selectors,r)}catch(r){return void e.warn(n,`Failed to parse selectors : "${t.selector}" / "${e.selector}" with message: "${r instanceof Error?r.message:r}"`)}if(!o.length)return;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.selectors=o;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule$1(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function isAtRule(e){return e&&"atrule"===e.type}function isNestRule(e){return e&&isAtRule(e)&&"nest"===e.name}function isRule(e){return e&&"rule"===e.type}function walk$1(e,t,n){e.each((r=>{const o=r.parent;isNestRule(r)&&!n.silenceAtNestWarning&&e.warn(t,`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${r.params} {}\` to \`${r.params} {}\` to migrate to the latest standard.`),isRule(r)&&isRule(o)&&isValidRuleWithinRule$1(r)?transformRuleWithinRule$1(r,o,t,n):isNestRule(r)&&isRule(o)&&isValidNestRuleWithinRule(r)?transformNestRuleWithinRule(r,o,t,walk$1,n):isAtRule(r)&&isRule(o)&&isAtruleWithinRule$1(r)?atruleWithinRule$1(r,o,t,walk$1,n):isAtRule(r)&&isAtRule(o)&&isAtruleWithinAtrule(r,o)&&transformAtruleWithinAtrule(r,o),"nodes"in r&&r.nodes.length&&walk$1(r,t,n)}))}const creator$2=e=>{const t=Object.assign({noIsPseudoSelector:!1,silenceAtNestWarning:!1},e);return{postcssPlugin:"postcss-nesting",Rule(e,{result:n}){walk$1(e,n,t),e.selector.includes("&")&&ersandToScope$1(e,n)}}};function ampersandToScope(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{t.replaceWith(e.pseudo({value:":scope"}))})),t.selector=r.toString())}function atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes);e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}creator$2.postcss=!0;const i=e();function mergeSelectors(e,t,r,o){let s;try{s=n.resolveNestedSelector(i.astSync(t),i.astSync(r))}catch(n){return e.warn(o,`Failed to parse selectors : "${r}" / "${t}" with message: "${n instanceof Error?n.message:n}"`),!1}return!!s&&s.toString()}function transformRuleWithinRule(e,t,n){const r=mergeSelectors(e,e.selector,t.selector,n);if(!r)return;shiftNodesBeforeParent(e,t),e.selector=r;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function walk(e,t){e.each((e=>{const n=e.parent;isRule(e)&&isRule(n)&&isValidRuleWithinRule(e)?transformRuleWithinRule(e,n,t):isAtRule(e)&&isRule(n)&&isAtruleWithinRule(e)&&atruleWithinRule(e,n,t,walk),"nodes"in e&&e.nodes.length&&walk(e,t)}))}const creator$1=()=>({postcssPlugin:"postcss-nesting",Rule(e,{result:t}){walk(e,t),e.selector.includes("&")&&ersandToScope(e,t)},AtRule:{nest(e){throw e.error(`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${e.params} {}\` to \`${e.params} {}\` to migrate to the latest standard.`)}}});creator$1.postcss=!0;const creator=e=>{const t=Object.assign({edition:"2024-02"},e);switch(t.edition){case"2021":return creator$2(e);case"2024-02":return creator$1();default:throw new Error(`Invalid edition: ${t.edition}`)}};creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-nesting/dist/index.d.ts b/plugins/postcss-nesting/dist/index.d.ts index 0ce7888d8..356c13de6 100644 --- a/plugins/postcss-nesting/dist/index.d.ts +++ b/plugins/postcss-nesting/dist/index.d.ts @@ -5,7 +5,7 @@ export default creator; /** postcss-nesting plugin options */ export declare type pluginOptions = { - /** The implementation edition for CSS Nesting, default to '2021' */ + /** The implementation edition for CSS Nesting, default to '2024-02' */ edition?: '2021' | '2024-02'; } & pluginOptions2021 & pluginOptions2024_02; diff --git a/plugins/postcss-nesting/dist/index.mjs b/plugins/postcss-nesting/dist/index.mjs index 20214719d..aa9883992 100644 --- a/plugins/postcss-nesting/dist/index.mjs +++ b/plugins/postcss-nesting/dist/index.mjs @@ -1 +1 @@ -import e from"postcss-selector-parser";import{selectorSpecificity as t}from"@csstools/selector-specificity";import{resolveNestedSelector as n}from"@csstools/selector-resolve-nested";const r=e.pseudo({value:":is"});function sortCompoundSelectorsInsideComplexSelector(t){if(!t||!t.nodes)return;const n=[];let o=[];for(let s=0;s"tag"===e.type))){const n=r.clone({}),o=t.nodes[s];o.replaceWith(n),n.append(e.selector({nodes:[o],value:void 0}))}o.push(t.nodes[s])}else n.push(o),n.push([t.nodes[s]]),o=[];n.push(o);const s=[];for(let e=0;e"selector"===e.type&&"selector"===t.type&&e.nodes.length&&t.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t.nodes[0]):"selector"===e.type&&e.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t):"selector"===t.type&&t.nodes.length?selectorTypeOrder(e)-selectorTypeOrder(t.nodes[0]):selectorTypeOrder(e)-selectorTypeOrder(t)));for(let e=0;e=0;e--)s[e].remove(),t.prepend(s[e])}function selectorTypeOrder(t){return e.isPseudoElement(t)?o.pseudoElement:o[t.type]}const o={universal:0,tag:1,pseudoElement:2,id:3,class:4,attribute:5,pseudo:6,selector:7,string:8,root:9,comment:10};function ampersandToScope$1(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{const n=t.parent;t.replaceWith(e.pseudo({value:":scope"})),n&&sortCompoundSelectorsInsideComplexSelector(n)})),t.selector=r.toString())}function cleanupParent(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function groupDeclarations(e){const t=[],n=[];e.each((e=>{if(isDeclarationLike(e,n.length>0))t.push(e);else{if("comment"===e.type){let r=e.next();for(;r&&"comment"===r.type;)r=r.next();if(isDeclarationLike(r,n.length>0))return void t.push(e)}n.push(e)}})),e.removeAll(),t.forEach((t=>{e.append(t)})),n.forEach((t=>{e.append(t)}))}function isDeclarationLike(e,t){return!!e&&("decl"===e.type||"atrule"===e.type&&"mixin"===e.name.toLowerCase()&&!t)}function comma(e){const t=[];let n="",r=!1,o=0,s=!1,i=!1;for(const l of e)i?i=!1:"\\"===l?i=!0:s?l===s&&(s=!1):'"'===l||"'"===l?s=l:"("===l?o+=1:")"===l?o>0&&(o-=1):0===o&&","===l&&(r=!0),r?(""!==n&&t.push(n.trim()),n="",r=!1):n+=l;return t.push(n.trim()),t}function shiftNodesBeforeParent(e,t){const n=t.index(e);if(n){const e=t.cloneBefore().removeAll().append(t.nodes.slice(0,n));e.raws.semicolon=!0,cleanupParent(e)}t.before(e),t.raws.semicolon=!0}var s=["container","document","media","supports","layer","starting-style"];function transformAtruleWithinAtrule(e,t){var n,r;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.params=(n=t.params,r=e.params,comma(n).map((e=>comma(r).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),cleanupParent(t)}function isAtruleWithinAtrule(e,t){return s.includes(e.name)&&e.name===t.name}function atruleWithinRule$1(e,t,n,r,o){if(groupDeclarations(t),shiftNodesBeforeParent(e,t),e.nodes){const s=t.clone().removeAll().append(e.nodes);e.append(s),cleanupParent(t),r(s,n,o)}else cleanupParent(t)}function isAtruleWithinRule$1(e){return s.includes(e.name)}function combinationsWithSizeN(e,t){if(t<2)throw new Error("n must be greater than 1");if(e.length<2)throw new Error("s must be greater than 1");if(Math.pow(e.length,t)>1e4)throw new Error("Too many combinations when trying to resolve a nested selector with lists, reduce the complexity of your selectors");const n=[];for(let e=0;e=0;s--){let t=n[s];if(t>=e.length){if(t=0,n[s]=0,0===s)return r;n[s-1]+=1}o[s]=e[t]}r.push(o),n[n.length-1]++}}function nodesAreEquallySpecific(n){const r=n.map((t=>e().astSync(t))).map((e=>t(e))),o=r[0];for(let e=1;ee().astSync(t))):[e().astSync(`:is(${t.join(",")})`)];const s=[];for(let t=0;t{"nesting"===e.type&&(n=!0)}));const r=t.nodes[0];let o=!1;r.each((e=>"combinator"===e.type&&(o=!0,!1))),n?o&&r.insertBefore(r.at(0),e.nesting({})):(r.insertBefore(r.at(0),e.combinator({value:" "})),r.insertBefore(r.at(0),e.nesting({}))),l=t.toString()}let a=[],c=0;if(e().astSync(l).walkNesting((()=>{c++})),c>1&&o.length>1)a=combinationsWithSizeN(o,c),i=a.length;else{i=o.length;for(let e=0;e{if("nesting"!==o.type)return;let s=a[t][n];n++,"root"===s.type&&1===s.nodes.length&&(s=s.nodes[0]);const i=e().astSync(`:is(${s.toString()})`),l=isSimpleSelector(s.nodes[0]),c=isCompoundSelector(s.nodes[0]),u=isSimpleSelector(o),p=isCompoundSelector(o);if(l&&u)return void o.replaceWith(s.clone());if((l||c)&&(u||p)){const e=o.parent;return l&&"selector"===s.type?o.replaceWith(s.clone().nodes[0]):o.replaceWith(...s.clone().nodes),void(e&&e.nodes.length>1&&sortCompoundSelectorsInsideComplexSelector(e))}if(l){const e=o.parent;return o.replaceWith(s.clone().nodes[0]),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(c){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsNotInsideCompoundSelector(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}const d=o.parent;r.noIsPseudoSelector?o.replaceWith(...s.clone().nodes):o.replaceWith(...i.clone({}).nodes),d&&sortCompoundSelectorsInsideComplexSelector(d)})),s.push(o.toString())}}return s}function isSimpleSelector(e){return"combinator"!==e.type&&!(e.parent&&e.parent.nodes.length>1)}function isCompoundSelector(e,t=null){if(isSimpleSelector(e))return!1;if(!e.parent)return!1;if(!!e.parent.nodes.find((e=>"combinator"===e.type)))return!1;return!(!!e.parent.nodes.find((e=>"nesting"===e.type))&&t&&!isCompoundSelector(t))}function nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(e){if(!e.parent)return!1;if(0!==e.parent.nodes.indexOf(e))return!1;for(let t=1;t"!==e.parent.nodes[t].value)return!1;return!0}function nestingIsNotInsideCompoundSelector(e){if(isSimpleSelector(e))return!0;if(!e.parent)return!1;for(let t=0;te.split("&").length>=2&&-1===e.indexOf("|")))}function transformRuleWithinRule$1(e,t,n,r){let o=[];try{o=mergeSelectors$1(t.selectors,e.selectors,r)}catch(r){return void e.warn(n,`Failed to parse selectors : "${t.selector}" / "${e.selector}" with message: "${r instanceof Error?r.message:r}"`)}if(!o.length)return;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.selectors=o;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule$1(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function isAtRule(e){return e&&"atrule"===e.type}function isNestRule(e){return e&&isAtRule(e)&&"nest"===e.name}function isRule(e){return e&&"rule"===e.type}function walk$1(e,t,n){e.each((r=>{const o=r.parent;isNestRule(r)&&!n.silenceAtNestWarning&&e.warn(t,`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${r.params} {}\` to \`${r.params} {}\` to migrate to the latest standard.`),isRule(r)&&isRule(o)&&isValidRuleWithinRule$1(r)?transformRuleWithinRule$1(r,o,t,n):isNestRule(r)&&isRule(o)&&isValidNestRuleWithinRule(r)?transformNestRuleWithinRule(r,o,t,walk$1,n):isAtRule(r)&&isRule(o)&&isAtruleWithinRule$1(r)?atruleWithinRule$1(r,o,t,walk$1,n):isAtRule(r)&&isAtRule(o)&&isAtruleWithinAtrule(r,o)&&transformAtruleWithinAtrule(r,o),"nodes"in r&&r.nodes.length&&walk$1(r,t,n)}))}const creator$2=e=>{const t=Object.assign({noIsPseudoSelector:!1,silenceAtNestWarning:!1},e);return{postcssPlugin:"postcss-nesting",Rule(e,{result:n}){walk$1(e,n,t),e.selector.includes("&")&&ersandToScope$1(e,n)}}};function ampersandToScope(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{t.replaceWith(e.pseudo({value:":scope"}))})),t.selector=r.toString())}function atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes);e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}creator$2.postcss=!0;const i=e();function mergeSelectors(e,t,r,o){let s;try{s=n(i.astSync(t),i.astSync(r))}catch(n){return e.warn(o,`Failed to parse selectors : "${r}" / "${t}" with message: "${n instanceof Error?n.message:n}"`),!1}return!!s&&s.toString()}function transformRuleWithinRule(e,t,n){const r=mergeSelectors(e,e.selector,t.selector,n);if(!r)return;shiftNodesBeforeParent(e,t),e.selector=r;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function walk(e,t){e.each((e=>{const n=e.parent;isRule(e)&&isRule(n)&&isValidRuleWithinRule(e)?transformRuleWithinRule(e,n,t):isAtRule(e)&&isRule(n)&&isAtruleWithinRule(e)&&atruleWithinRule(e,n,t,walk),"nodes"in e&&e.nodes.length&&walk(e,t)}))}const creator$1=()=>({postcssPlugin:"postcss-nesting",Rule(e,{result:t}){walk(e,t),e.selector.includes("&")&&ersandToScope(e,t)},AtRule:{nest(e){throw e.error(`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${e.params} {}\` to \`${e.params} {}\` to migrate to the latest standard.`)}}});creator$1.postcss=!0;const creator=e=>{const t=Object.assign({edition:"2021"},e);switch(t.edition){case"2021":return creator$2(e);case"2024-02":return creator$1();default:throw new Error(`Invalid edition: ${t.edition}`)}};creator.postcss=!0;export{creator as default}; +import e from"postcss-selector-parser";import{selectorSpecificity as t}from"@csstools/selector-specificity";import{resolveNestedSelector as n}from"@csstools/selector-resolve-nested";const r=e.pseudo({value:":is"});function sortCompoundSelectorsInsideComplexSelector(t){if(!t||!t.nodes)return;const n=[];let o=[];for(let s=0;s"tag"===e.type))){const n=r.clone({}),o=t.nodes[s];o.replaceWith(n),n.append(e.selector({nodes:[o],value:void 0}))}o.push(t.nodes[s])}else n.push(o),n.push([t.nodes[s]]),o=[];n.push(o);const s=[];for(let e=0;e"selector"===e.type&&"selector"===t.type&&e.nodes.length&&t.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t.nodes[0]):"selector"===e.type&&e.nodes.length?selectorTypeOrder(e.nodes[0])-selectorTypeOrder(t):"selector"===t.type&&t.nodes.length?selectorTypeOrder(e)-selectorTypeOrder(t.nodes[0]):selectorTypeOrder(e)-selectorTypeOrder(t)));for(let e=0;e=0;e--)s[e].remove(),t.prepend(s[e])}function selectorTypeOrder(t){return e.isPseudoElement(t)?o.pseudoElement:o[t.type]}const o={universal:0,tag:1,pseudoElement:2,id:3,class:4,attribute:5,pseudo:6,selector:7,string:8,root:9,comment:10};function ampersandToScope$1(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{const n=t.parent;t.replaceWith(e.pseudo({value:":scope"})),n&&sortCompoundSelectorsInsideComplexSelector(n)})),t.selector=r.toString())}function cleanupParent(e){if(!e.nodes.length)return void e.remove();const t=e.nodes.filter((e=>"comment"===e.type));t.length===e.nodes.length&&e.replaceWith(...t)}function groupDeclarations(e){const t=[],n=[];e.each((e=>{if(isDeclarationLike(e,n.length>0))t.push(e);else{if("comment"===e.type){let r=e.next();for(;r&&"comment"===r.type;)r=r.next();if(isDeclarationLike(r,n.length>0))return void t.push(e)}n.push(e)}})),e.removeAll(),t.forEach((t=>{e.append(t)})),n.forEach((t=>{e.append(t)}))}function isDeclarationLike(e,t){return!!e&&("decl"===e.type||"atrule"===e.type&&"mixin"===e.name.toLowerCase()&&!t)}function comma(e){const t=[];let n="",r=!1,o=0,s=!1,i=!1;for(const l of e)i?i=!1:"\\"===l?i=!0:s?l===s&&(s=!1):'"'===l||"'"===l?s=l:"("===l?o+=1:")"===l?o>0&&(o-=1):0===o&&","===l&&(r=!0),r?(""!==n&&t.push(n.trim()),n="",r=!1):n+=l;return t.push(n.trim()),t}function shiftNodesBeforeParent(e,t){const n=t.index(e);if(n){const e=t.cloneBefore().removeAll().append(t.nodes.slice(0,n));e.raws.semicolon=!0,cleanupParent(e)}t.before(e),t.raws.semicolon=!0}var s=["container","document","media","supports","layer","starting-style"];function transformAtruleWithinAtrule(e,t){var n,r;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.params=(n=t.params,r=e.params,comma(n).map((e=>comma(r).map((t=>`${e} and ${t}`)).join(", "))).join(", ")),cleanupParent(t)}function isAtruleWithinAtrule(e,t){return s.includes(e.name)&&e.name===t.name}function atruleWithinRule$1(e,t,n,r,o){if(groupDeclarations(t),shiftNodesBeforeParent(e,t),e.nodes){const s=t.clone().removeAll().append(e.nodes);e.append(s),cleanupParent(t),r(s,n,o)}else cleanupParent(t)}function isAtruleWithinRule$1(e){return s.includes(e.name)}function combinationsWithSizeN(e,t){if(t<2)throw new Error("n must be greater than 1");if(e.length<2)throw new Error("s must be greater than 1");if(Math.pow(e.length,t)>1e4)throw new Error("Too many combinations when trying to resolve a nested selector with lists, reduce the complexity of your selectors");const n=[];for(let e=0;e=0;s--){let t=n[s];if(t>=e.length){if(t=0,n[s]=0,0===s)return r;n[s-1]+=1}o[s]=e[t]}r.push(o),n[n.length-1]++}}function nodesAreEquallySpecific(n){const r=n.map((t=>e().astSync(t))).map((e=>t(e))),o=r[0];for(let e=1;ee().astSync(t))):[e().astSync(`:is(${t.join(",")})`)];const s=[];for(let t=0;t{"nesting"===e.type&&(n=!0)}));const r=t.nodes[0];let o=!1;r.each((e=>"combinator"===e.type&&(o=!0,!1))),n?o&&r.insertBefore(r.at(0),e.nesting({})):(r.insertBefore(r.at(0),e.combinator({value:" "})),r.insertBefore(r.at(0),e.nesting({}))),l=t.toString()}let a=[],c=0;if(e().astSync(l).walkNesting((()=>{c++})),c>1&&o.length>1)a=combinationsWithSizeN(o,c),i=a.length;else{i=o.length;for(let e=0;e{if("nesting"!==o.type)return;let s=a[t][n];n++,"root"===s.type&&1===s.nodes.length&&(s=s.nodes[0]);const i=e().astSync(`:is(${s.toString()})`),l=isSimpleSelector(s.nodes[0]),c=isCompoundSelector(s.nodes[0]),u=isSimpleSelector(o),p=isCompoundSelector(o);if(l&&u)return void o.replaceWith(s.clone());if((l||c)&&(u||p)){const e=o.parent;return l&&"selector"===s.type?o.replaceWith(s.clone().nodes[0]):o.replaceWith(...s.clone().nodes),void(e&&e.nodes.length>1&&sortCompoundSelectorsInsideComplexSelector(e))}if(l){const e=o.parent;return o.replaceWith(s.clone().nodes[0]),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(c){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}if(nestingIsNotInsideCompoundSelector(o)){const e=o.parent;return o.replaceWith(...s.clone().nodes),void(e&&sortCompoundSelectorsInsideComplexSelector(e))}const d=o.parent;r.noIsPseudoSelector?o.replaceWith(...s.clone().nodes):o.replaceWith(...i.clone({}).nodes),d&&sortCompoundSelectorsInsideComplexSelector(d)})),s.push(o.toString())}}return s}function isSimpleSelector(e){return"combinator"!==e.type&&!(e.parent&&e.parent.nodes.length>1)}function isCompoundSelector(e,t=null){if(isSimpleSelector(e))return!1;if(!e.parent)return!1;if(!!e.parent.nodes.find((e=>"combinator"===e.type)))return!1;return!(!!e.parent.nodes.find((e=>"nesting"===e.type))&&t&&!isCompoundSelector(t))}function nestingIsFirstAndOnlyInSelectorWithEitherSpaceOrChildCombinator(e){if(!e.parent)return!1;if(0!==e.parent.nodes.indexOf(e))return!1;for(let t=1;t"!==e.parent.nodes[t].value)return!1;return!0}function nestingIsNotInsideCompoundSelector(e){if(isSimpleSelector(e))return!0;if(!e.parent)return!1;for(let t=0;te.split("&").length>=2&&-1===e.indexOf("|")))}function transformRuleWithinRule$1(e,t,n,r){let o=[];try{o=mergeSelectors$1(t.selectors,e.selectors,r)}catch(r){return void e.warn(n,`Failed to parse selectors : "${t.selector}" / "${e.selector}" with message: "${r instanceof Error?r.message:r}"`)}if(!o.length)return;groupDeclarations(t),shiftNodesBeforeParent(e,t),e.selectors=o;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule$1(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function isAtRule(e){return e&&"atrule"===e.type}function isNestRule(e){return e&&isAtRule(e)&&"nest"===e.name}function isRule(e){return e&&"rule"===e.type}function walk$1(e,t,n){e.each((r=>{const o=r.parent;isNestRule(r)&&!n.silenceAtNestWarning&&e.warn(t,`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${r.params} {}\` to \`${r.params} {}\` to migrate to the latest standard.`),isRule(r)&&isRule(o)&&isValidRuleWithinRule$1(r)?transformRuleWithinRule$1(r,o,t,n):isNestRule(r)&&isRule(o)&&isValidNestRuleWithinRule(r)?transformNestRuleWithinRule(r,o,t,walk$1,n):isAtRule(r)&&isRule(o)&&isAtruleWithinRule$1(r)?atruleWithinRule$1(r,o,t,walk$1,n):isAtRule(r)&&isAtRule(o)&&isAtruleWithinAtrule(r,o)&&transformAtruleWithinAtrule(r,o),"nodes"in r&&r.nodes.length&&walk$1(r,t,n)}))}const creator$2=e=>{const t=Object.assign({noIsPseudoSelector:!1,silenceAtNestWarning:!1},e);return{postcssPlugin:"postcss-nesting",Rule(e,{result:n}){walk$1(e,n,t),e.selector.includes("&")&&ersandToScope$1(e,n)}}};function ampersandToScope(t,n){let r,o=t.parent;for(;o;){if("rule"===o.type)return;o=o.parent}try{r=e().astSync(t.selector)}catch(e){return void t.warn(n,`Failed to parse selector : "${t.selector}" with message: "${e instanceof Error?e.message:e}"`)}r&&(r.walkNesting((t=>{t.replaceWith(e.pseudo({value:":scope"}))})),t.selector=r.toString())}function atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes);e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}creator$2.postcss=!0;const i=e();function mergeSelectors(e,t,r,o){let s;try{s=n(i.astSync(t),i.astSync(r))}catch(n){return e.warn(o,`Failed to parse selectors : "${r}" / "${t}" with message: "${n instanceof Error?n.message:n}"`),!1}return!!s&&s.toString()}function transformRuleWithinRule(e,t,n){const r=mergeSelectors(e,e.selector,t.selector,n);if(!r)return;shiftNodesBeforeParent(e,t),e.selector=r;"rule"===e.type&&"rule"===t.type&&e.selector===t.selector&&e.append(...t.nodes),cleanupParent(t)}function isValidRuleWithinRule(e){return e.selectors.every((e=>-1===e.indexOf("|")))}function walk(e,t){e.each((e=>{const n=e.parent;isRule(e)&&isRule(n)&&isValidRuleWithinRule(e)?transformRuleWithinRule(e,n,t):isAtRule(e)&&isRule(n)&&isAtruleWithinRule(e)&&atruleWithinRule(e,n,t,walk),"nodes"in e&&e.nodes.length&&walk(e,t)}))}const creator$1=()=>({postcssPlugin:"postcss-nesting",Rule(e,{result:t}){walk(e,t),e.selector.includes("&")&&ersandToScope(e,t)},AtRule:{nest(e){throw e.error(`\`@nest\` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version.\nChange \`@nest ${e.params} {}\` to \`${e.params} {}\` to migrate to the latest standard.`)}}});creator$1.postcss=!0;const creator=e=>{const t=Object.assign({edition:"2024-02"},e);switch(t.edition){case"2021":return creator$2(e);case"2024-02":return creator$1();default:throw new Error(`Invalid edition: ${t.edition}`)}};creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-nesting/docs/README.md b/plugins/postcss-nesting/docs/README.md index af3aca4e9..b8f571c59 100644 --- a/plugins/postcss-nesting/docs/README.md +++ b/plugins/postcss-nesting/docs/README.md @@ -27,42 +27,30 @@ you might want to use [PostCSS Nested] instead. /* becomes */ - + ``` -## ⚠️ `@nest` has been removed from the specification. +## Options -Previous iterations of the [CSS Nesting specification] required using `@nest` for certain selectors. +### edition -`@nest` was removed from the specification completely. -Future versions of this plugin will error if you use `@nest`. +The CSS nesting feature has gone through several iterations and what is currently implemented in browsers is not the same as what was originally proposed. This plugin dates back to the original proposal and you might have written your CSS expecting this older behavior. -We advice everyone to migrate their codebase **now** to nested CSS without `@nest`. -We published a [Stylelint Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins-stylelint/no-at-nest-rule#csstoolsstylelint-no-at-nest-rule) to help you migrate. +You can pick the older behavior by setting the `edition` option. +The `edition` values correspond with rough dates when of a particular version of the specification: +- `2024-02` (default) +- `2021` -example warning: -> `@nest` was removed from the CSS Nesting specification and will be removed from PostCSS Nesting in the next major version. -> Change `@nest foo & {}` to `foo & {}` to migrate to the latest standard. +> [!TIP] +> If you wrote nested rules with `@nest` you definitely want to set the `edition` to `2021`. +> If you are unsure than you should try to omit the `edition` option and use the default. -You can silence this warning with a new `silenceAtNestWarning` plugin option. +Eventually we will remove support for the older edition, and this plugin option, so it is strongly advised to update your CSS to the latest edition. -```js -({ - silenceAtNestWarning: true -}) -``` - -## Options - -### edition - -The default behavior is to transpile CSS following an older version of the CSS nesting specification. - -If you want to already use the latest version you can set the `edition` option to `2024-02`. ```js ({ @@ -70,37 +58,27 @@ If you want to already use the latest version you can set the `edition` option t }) ``` -#### `2021` (default) - -This version is a continuation of what existed before CSS nesting was implemented in browsers. -It made a few non-invasive changes to keep up with implementations but it is falling behind. - -In a future version of this plugin this will no longer be the default. - -```pcss - - -/* becomes */ - - -``` - -#### `2024-02` +#### `2024-02` (default) - usage of `:is()` pseudo-class is no longer optional - at rules are not combined with the `and` keyword - `@nest` is removed from the specification - declarations and nested rules/at-rules are no longer re-ordered +#### `2021` + +This version is a continuation of what existed before CSS nesting was implemented in browsers. +It made a few non-invasive changes to keep up with implementations but it is falling behind. + ```pcss /* becomes */ - + ``` -### noIsPseudoSelector +### noIsPseudoSelector (edition: `2021`) #### Specificity diff --git a/plugins/postcss-nesting/src/index.ts b/plugins/postcss-nesting/src/index.ts index e17244980..8ee076a49 100644 --- a/plugins/postcss-nesting/src/index.ts +++ b/plugins/postcss-nesting/src/index.ts @@ -10,7 +10,7 @@ export type { pluginOptions as pluginOptions2024_02 } from './editions/2024-02'; /** postcss-nesting plugin options */ export type pluginOptions = { - /** The implementation edition for CSS Nesting, default to '2021' */ + /** The implementation edition for CSS Nesting, default to '2024-02' */ edition?: '2021' | '2024-02', } & pluginOptions2021 & pluginOptions2024_02; @@ -18,7 +18,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { const options = Object.assign( // Default options { - edition: '2021', + edition: '2024-02', }, // Provided options opts, diff --git a/plugins/postcss-nesting/test/_tape-2021.mjs b/plugins/postcss-nesting/test/_tape-2021.mjs index 29578bd1f..31aa7752e 100644 --- a/plugins/postcss-nesting/test/_tape-2021.mjs +++ b/plugins/postcss-nesting/test/_tape-2021.mjs @@ -49,42 +49,61 @@ mixinPluginNestedRules.postcss = true; postcssTape(plugin)({ 'basic': { message: 'supports basic usage', + options: { + edition: '2021', + }, }, 'basic:no-is-pseudo-selector': { message: 'supports basic usage { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'ampersand-everywhere': { message: 'supports & at the root', + options: { + edition: '2021', + }, }, 'complex': { message: 'supports complex entries', + options: { + edition: '2021', + }, }, 'complex:no-is-pseudo-selector': { message: 'supports complex entries { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'direct': { message: 'supports direct usage', + options: { + edition: '2021', + }, }, 'direct:no-is-pseudo-selector': { message: 'supports direct usage { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'at-nest': { message: 'supports at-nest usage', warnings: 64, + options: { + edition: '2021', + }, }, 'at-nest:silent': { message: 'supports at-nest usage { silenceAtNestWarning: true }', warnings: 4, options: { + edition: '2021', silenceAtNestWarning: true, }, }, @@ -92,121 +111,175 @@ postcssTape(plugin)({ message: 'supports at-nest usage { noIsPseudoSelector: true }', warnings: 64, options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'container': { message: 'supports nested @container', + options: { + edition: '2021', + }, }, 'container:no-is-pseudo-selector': { message: 'supports nested @container { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'decl-order': { message: 'resolves to the correct order', + options: { + edition: '2021', + }, }, 'document': { message: 'supports nested @document', + options: { + edition: '2021', + }, }, 'document:no-is-pseudo-selector': { message: 'supports nested @document { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'invalid-selector': { message: 'warns on invalid selectors', warnings: 4, + options: { + edition: '2021', + }, }, 'media': { message: 'supports nested @media', + options: { + edition: '2021', + }, }, 'media:no-is-pseudo-selector': { message: 'supports nested @media { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'multiple-replacements': { message: 'supports multiple replacements', + options: { + edition: '2021', + }, }, 'pseudo-element': { message: 'supports pseudo elements', + options: { + edition: '2021', + }, }, 'supports': { message: 'supports nested @supports', + options: { + edition: '2021', + }, }, 'supports:no-is-pseudo-selector': { message: 'supports nested @supports { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'layer': { message: 'supports nested @layer', + options: { + edition: '2021', + }, }, 'empty': { message: 'removes empty rules', + options: { + edition: '2021', + }, }, 'empty:no-is-pseudo-selector': { message: 'removes empty rules { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'ignore': { message: 'ignores invalid entries', + options: { + edition: '2021', + }, }, 'ignore:no-is-pseudo-selector': { message: 'ignores invalid entries { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'mixin-declaration': { message: 'supports other visitors (mixin declaration)', - plugins: [mixinPluginDeclaration(), plugin()], + plugins: [mixinPluginDeclaration(), plugin({ edition: '2021' })], }, 'mixin-declaration:no-is-pseudo-selector': { message: 'supports other visitors (mixin declaration) { noIsPseudoSelector: true }', - plugins: [mixinPluginDeclaration(), plugin({ noIsPseudoSelector: true })], + plugins: [mixinPluginDeclaration(), plugin({ noIsPseudoSelector: true, edition: '2021' })], }, 'mixin-rule': { message: 'supports other visitors (mixin rule)', - plugins: [mixinPluginRule(), plugin()], + plugins: [mixinPluginRule(), plugin({ edition: '2021' })], }, 'mixin-rule:no-is-pseudo-selector': { message: 'supports other visitors (mixin rule) { noIsPseudoSelector: true }', - plugins: [mixinPluginRule(), plugin({ noIsPseudoSelector: true })], + plugins: [mixinPluginRule(), plugin({ noIsPseudoSelector: true, edition: '2021' })], }, 'mixin-nested-rules': { message: 'supports mixin with nested rules', - plugins: [mixinPluginNestedRules(), plugin()], + plugins: [mixinPluginNestedRules(), plugin({ edition: '2021' })], }, 'spec-examples': { message: 'supports all spec examples', + options: { + edition: '2021', + }, }, 'spec-examples:no-is-pseudo-selector': { message: 'supports all spec examples { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'relative-selectors': { message: 'supports relative selectors', + options: { + edition: '2021', + }, }, 'requires-is-pseudo': { message: 'examples of selector nesting that require :is to be correct', + options: { + edition: '2021', + }, }, 'requires-is-pseudo:no-is-pseudo-selector': { message: 'examples of selector nesting that require :is to be correct { noIsPseudoSelector: true }', options: { + edition: '2021', noIsPseudoSelector: true, }, }, 'examples/example': { message: 'basic examples', + options: { + edition: '2021', + }, }, }); diff --git a/plugins/postcss-nesting/test/_tape-2024-02.mjs b/plugins/postcss-nesting/test/_tape-2024-02.mjs index 445fe12c3..d3f5d6a1c 100644 --- a/plugins/postcss-nesting/test/_tape-2024-02.mjs +++ b/plugins/postcss-nesting/test/_tape-2024-02.mjs @@ -49,88 +49,46 @@ mixinPluginNestedRules.postcss = true; postcssTape(plugin)({ 'basic:edition-2024-02': { message: 'supports basic usage', - options: { - edition: '2024-02', - }, }, 'ampersand-everywhere:edition-2024-02': { message: 'supports & at the root', - options: { - edition: '2024-02', - }, }, 'complex:edition-2024-02': { message: 'supports complex entries', - options: { - edition: '2024-02', - }, }, 'direct:edition-2024-02': { message: 'supports direct usage', - options: { - edition: '2024-02', - }, }, 'container:edition-2024-02': { message: 'supports nested @container', - options: { - edition: '2024-02', - }, }, 'decl-order:edition-2024-02': { message: 'resolves to the correct order', - options: { - edition: '2024-02', - }, }, 'invalid-selector:edition-2024-02': { message: 'warns on invalid selectors', - options: { - edition: '2024-02', - }, warnings: 4, }, 'media:edition-2024-02': { message: 'supports nested @media', - options: { - edition: '2024-02', - }, }, 'multiple-replacements:edition-2024-02': { message: 'supports multiple replacements', - options: { - edition: '2024-02', - }, }, 'pseudo-element:edition-2024-02': { message: 'supports pseudo elements', - options: { - edition: '2024-02', - }, }, 'supports:edition-2024-02': { message: 'supports nested @supports', - options: { - edition: '2024-02', - }, }, 'layer:edition-2024-02': { message: 'supports nested @layer', - options: { - edition: '2024-02', - }, }, 'empty:edition-2024-02': { message: 'removes empty rules', - options: { - edition: '2024-02', - }, }, 'ignore:edition-2024-02': { message: 'ignores invalid entries', - options: { - edition: '2024-02', - }, }, 'mixin-declaration:edition-2024-02': { message: 'supports other visitors (mixin declaration)', @@ -146,26 +104,14 @@ postcssTape(plugin)({ }, 'spec-examples:edition-2024-02': { message: 'supports all spec examples', - options: { - edition: '2024-02', - }, }, 'relative-selectors:edition-2024-02': { message: 'supports relative selectors', - options: { - edition: '2024-02', - }, }, 'requires-is-pseudo:edition-2024-02': { message: 'examples of selector nesting that require :is to be correct', - options: { - edition: '2024-02', - }, }, 'examples/example:edition-2024-02': { message: 'basic examples', - options: { - edition: '2024-02', - }, }, }); diff --git a/plugins/postcss-nesting/test/wpt/nesting-basics.html b/plugins/postcss-nesting/test/wpt/nesting-basics.html index 7aab56078..e7b3dc418 100644 --- a/plugins/postcss-nesting/test/wpt/nesting-basics.html +++ b/plugins/postcss-nesting/test/wpt/nesting-basics.html @@ -130,18 +130,18 @@ .test-10 { & { - background-color: green; + background-color: red; } - background-color: red; + background-color: green; } .test-11 { & { - background-color: red; + background-color: green !important; } - background-color: green !important; + background-color: red; } `, }, diff --git a/sites/postcss-preset-env/src/static/js/playground.js b/sites/postcss-preset-env/src/static/js/playground.js index 699409b0f..e97fef488 100644 --- a/sites/postcss-preset-env/src/static/js/playground.js +++ b/sites/postcss-preset-env/src/static/js/playground.js @@ -41,11 +41,6 @@ const currentConfig = stateAtLoad.config ?? { inlineDirection: 'left-to-right', blockDirection: 'top-to-bottom', }, - features: { - 'nesting-rules': ['auto', { - edition: '2024-02', - }], - }, }; function processCss(source, config, isDefaultState = false) {