From b663d0f3e883822ae306a2575d0898cba4247211 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sat, 20 Apr 2024 12:24:12 +0200 Subject: [PATCH 1/6] postcss-nesting: make edition 2024 the default --- plugins/postcss-nesting/CHANGELOG.md | 4 + plugins/postcss-nesting/README.md | 64 +++++--------- plugins/postcss-nesting/dist/index.cjs | 2 +- plugins/postcss-nesting/dist/index.d.ts | 2 +- plugins/postcss-nesting/dist/index.mjs | 2 +- plugins/postcss-nesting/docs/README.md | 52 ++++-------- plugins/postcss-nesting/src/index.ts | 4 +- plugins/postcss-nesting/test/_tape-2021.mjs | 83 +++++++++++++++++-- .../postcss-nesting/test/_tape-2024-02.mjs | 54 ------------ .../test/wpt/nesting-basics.html | 8 +- .../src/static/js/playground.js | 5 -- 11 files changed, 127 insertions(+), 153 deletions(-) diff --git a/plugins/postcss-nesting/CHANGELOG.md b/plugins/postcss-nesting/CHANGELOG.md index 6fdb7843f..7abdbfaa6 100644 --- a/plugins/postcss-nesting/CHANGELOG.md +++ b/plugins/postcss-nesting/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Nesting +### Unreleased (major) + +- Make edition `2024-02` the default. + ### 12.1.1 _March 31, 2024_ diff --git a/plugins/postcss-nesting/README.md b/plugins/postcss-nesting/README.md index e867f5546..c82a91dc9 100644 --- a/plugins/postcss-nesting/README.md +++ b/plugins/postcss-nesting/README.md @@ -80,35 +80,13 @@ 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`. - -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. - -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. - -You can silence this warning with a new `silenceAtNestWarning` plugin option. - -```js -postcssNesting({ - silenceAtNestWarning: true -}) -``` - ## Options ### edition -The default behavior is to transpile CSS following an older version of the CSS nesting specification. +The default behavior is to transpile CSS following the version of the CSS nesting specification as it existed during the last major version of this plugin. -If you want to already use the latest version you can set the `edition` option to `2024-02`. +If you want to use an older or even more recent version you can set the `edition` option. ```js postcssNesting({ @@ -116,12 +94,12 @@ postcssNesting({ }) ``` -#### `2021` (default) +#### `2024-02` (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. +- 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 { @@ -146,13 +124,11 @@ In a future version of this plugin this will no longer be the default. .foo { color: red; - - color: pink; } .foo:hover { color: green; } -.foo > .bar { +.foo > .bar { color: blue; } @media (prefers-color-scheme: dark) { @@ -160,14 +136,18 @@ In a future version of this plugin this will no longer be the default. color: cyan; } } +.foo { + + color: pink; +} ``` -#### `2024-02` +#### `2021` -- 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 +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 { @@ -192,11 +172,13 @@ In a future version of this plugin this will no longer be the default. .foo { color: red; + + color: pink; } .foo:hover { color: green; } -.foo > .bar { +.foo > .bar { color: blue; } @media (prefers-color-scheme: dark) { @@ -204,13 +186,9 @@ In a future version of this plugin this will no longer be the default. 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 3a82e63cd..18d499380 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())}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 atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes),s=mergeSelectors(e,"&",t.selector,n);if(!s)return;o.selector=s,e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}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())}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 atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes),s=mergeSelectors(e,"&",t.selector,n);if(!s)return;o.selector=s,e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}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 781e66818..9bed2577c 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 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())}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 atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes),s=mergeSelectors(e,"&",t.selector,n);if(!s)return;o.selector=s,e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}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 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())}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 atruleWithinRule(e,t,n,r){if(shiftNodesBeforeParent(e,t),e.nodes){const o=t.clone().removeAll().append(e.nodes),s=mergeSelectors(e,"&",t.selector,n);if(!s)return;o.selector=s,e.append(o),cleanupParent(t),r(o,n)}else cleanupParent(t)}function isAtruleWithinRule(e){return s.includes(e.name)}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..05651b167 100644 --- a/plugins/postcss-nesting/docs/README.md +++ b/plugins/postcss-nesting/docs/README.md @@ -34,35 +34,13 @@ you might want to use [PostCSS Nested] instead. -## ⚠️ `@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`. - -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. - -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. - -You can silence this warning with a new `silenceAtNestWarning` plugin option. - -```js -({ - silenceAtNestWarning: true -}) -``` - ## Options ### edition -The default behavior is to transpile CSS following an older version of the CSS nesting specification. +The default behavior is to transpile CSS following the version of the CSS nesting specification as it existed during the last major version of this plugin. -If you want to already use the latest version you can set the `edition` option to `2024-02`. +If you want to use an older or even more recent version you can set the `edition` option. ```js ({ @@ -70,37 +48,37 @@ 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. +#### `2024-02` (default) -In a future version of this plugin this will no longer be the 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 ```pcss /* becomes */ - + ``` -#### `2024-02` +#### `2021` -- 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 +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 */ - + ``` -### 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) { From f8a9c43254fa37289586ddd3e7011685e6fb816d Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sat, 20 Apr 2024 12:27:51 +0200 Subject: [PATCH 2/6] update readme --- plugins/postcss-nesting/README.md | 49 +++----------------------- plugins/postcss-nesting/docs/README.md | 10 +----- 2 files changed, 6 insertions(+), 53 deletions(-) diff --git a/plugins/postcss-nesting/README.md b/plugins/postcss-nesting/README.md index c82a91dc9..82386e1ad 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 @@ -101,47 +103,6 @@ postcssNesting({ - `@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; -} -``` - #### `2021` This version is a continuation of what existed before CSS nesting was implemented in browsers. diff --git a/plugins/postcss-nesting/docs/README.md b/plugins/postcss-nesting/docs/README.md index 05651b167..323817df4 100644 --- a/plugins/postcss-nesting/docs/README.md +++ b/plugins/postcss-nesting/docs/README.md @@ -27,7 +27,7 @@ you might want to use [PostCSS Nested] instead. /* becomes */ - + ``` @@ -55,14 +55,6 @@ If you want to use an older or even more recent version you can set the `edition - `@nest` is removed from the specification - declarations and nested rules/at-rules are no longer re-ordered -```pcss - - -/* becomes */ - - -``` - #### `2021` This version is a continuation of what existed before CSS nesting was implemented in browsers. From ab5fc0301c77c1360336ad37cfdaba92d5f69daa Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sat, 20 Apr 2024 12:30:41 +0200 Subject: [PATCH 3/6] update postcss-preset-env --- .../postcss-preset-env/test/_tape.mjs | 37 -- .../test/basic.autoprefixer.expect.css | 15 +- .../test/basic.autoprefixer.false.expect.css | 15 +- ...basic.autoprefixer.remove.false.expect.css | 15 +- .../test/basic.ch38.expect.css | 15 +- .../test/basic.ch88-ff78-saf10.expect.css | 609 ------------------ .../test/basic.ch88-ff78.expect.css | 603 ----------------- .../basic.ch88-ff78.no-is-pseudo.expect.css | 603 ----------------- .../postcss-preset-env/test/basic.expect.css | 15 +- .../test/basic.ff49.expect.css | 15 +- .../test/basic.ff66.expect.css | 15 +- ...ebrew.all-browsers-have-support.expect.css | 15 +- .../test/basic.hebrew.expect.css | 15 +- .../test/basic.ie10.expect.css | 23 +- ...esting.noIsPseudoSelector.false.expect.css | 512 --------------- .../test/basic.nesting.true.expect.css | 15 +- .../test/basic.op_mini.expect.css | 15 +- .../test/basic.preserve.false.expect.css | 35 +- .../test/basic.preserve.true.expect.css | 37 +- .../test/basic.safari15.expect.css | 15 +- .../test/basic.stage0-ff49.expect.css | 15 +- .../test/basic.stage0-ff66.expect.css | 15 +- .../test/basic.stage0.expect.css | 15 +- .../test/basic.supports-query.expect.css | 15 +- .../test/basic.vendors-1.expect.css | 15 +- .../test/basic.vendors-2.expect.css | 15 +- .../test/basic.vendors-3.expect.css | 15 +- .../test/layers-basic.expect.css | 33 +- .../layers-basic.preserve.true.expect.css | 43 +- 29 files changed, 316 insertions(+), 2504 deletions(-) delete mode 100644 plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css delete mode 100644 plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css delete mode 100644 plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css delete mode 100644 plugin-packs/postcss-preset-env/test/basic.nesting.noIsPseudoSelector.false.expect.css 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 d77574824..29627899a 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 ffa4aadf3..0a62c9e8c 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 eec71fbfb..2c981ce16 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 8cc9fd22b..3eb5b0c35 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 bfb90e08f..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(122, 0, 182, 0.65); - color-5: rgba(149, 0, 122, 0.65); - color-6: rgba(179, 0, 255, 0.65); -} - -@media (color-gamut: p3) { -.color-mix { - color-4: color(display-p3 0.4447 0 0.71665 / 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 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, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 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(141, 0, 0); - color-9: rgb(130, 31, 0); -} - -@media (color-gamut: p3) { -.test-css-color-5-interop { - color-8: color(display-p3 0.50566 0.0781 0); - color-9: color(display-p3 0.48896 0.1211 0); -} -} - -.test-property-with-var { - --opacity: 1; - color: rgba(87, 107, 149, var(--opacity)); -} - -.exponential-functions { - width: 8px; -} - -.out-of-gamut { - --color: rgb(0, 249, 66); -} - -.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(141, 0, 0); - color: var(--csstools-light-dark-toggle--1, magenta); - color: light-dark(rgb(141, 0, 0), magenta); -} - -@media (color-gamut: p3) { -.schemed-colors { - color: light-dark(color(display-p3 0.50566 0.0781 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 e1039806f..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(122, 0, 182, 0.65); - color-5: rgba(149, 0, 122, 0.65); - color-6: rgba(179, 0, 255, 0.65); -} - -@media (color-gamut: p3) { -.color-mix { - color-4: color(display-p3 0.4447 0 0.71665 / 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 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, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 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(141, 0, 0); - color-9: rgb(130, 31, 0); -} - -@media (color-gamut: p3) { -.test-css-color-5-interop { - color-8: color(display-p3 0.50566 0.0781 0); - color-9: color(display-p3 0.48896 0.1211 0); -} -} - -.test-property-with-var { - --opacity: 1; - color: rgba(87 107 149 / var(--opacity)); -} - -.exponential-functions { - width: 8px; -} - -.out-of-gamut { - --color: rgb(0, 249, 66); -} - -.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(141, 0, 0); - color: var(--csstools-light-dark-toggle--1, magenta); - color: light-dark(rgb(141, 0, 0), magenta); -} - -@media (color-gamut: p3) { -.schemed-colors { - color: light-dark(color(display-p3 0.50566 0.0781 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 2ba9a5a58..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(122, 0, 182, 0.65); - color-5: rgba(149, 0, 122, 0.65); - color-6: rgba(179, 0, 255, 0.65); -} - -@media (color-gamut: p3) { -.color-mix { - color-4: color(display-p3 0.4447 0 0.71665 / 0.65); - color-5: color(display-p3 0.55417 0 0.48083 / 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, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 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(141, 0, 0); - color-9: rgb(130, 31, 0); -} - -@media (color-gamut: p3) { -.test-css-color-5-interop { - color-8: color(display-p3 0.50566 0.0781 0); - color-9: color(display-p3 0.48896 0.1211 0); -} -} - -.test-property-with-var { - --opacity: 1; - color: rgba(87 107 149 / var(--opacity)); -} - -.exponential-functions { - width: 8px; -} - -.out-of-gamut { - --color: rgb(0, 249, 66); -} - -.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(141, 0, 0); - color: var(--csstools-light-dark-toggle--1, magenta); - color: light-dark(rgb(141, 0, 0), magenta); -} - -@media (color-gamut: p3) { -.schemed-colors { - color: light-dark(color(display-p3 0.50566 0.0781 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 8419991b7..3729324ff 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 c75a75b26..19d6881f2 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 5c0fdc432..8a04e440f 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 948f4c419..94b54471a 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 d094a1970..da869aa53 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 4d36958e6..67e0db8c8 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 bfb1b492e..4f6bc085a 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 6694fc797..a137f765c 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 7b58c338a..813fb31f1 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 730e16049..cfd63f3b1 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 d01ae4495..88f3d01c4 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 4c6fcc8ac..913e7064a 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 c5a91d6be..148d50961 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 cd16ab88c..c69732973 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 f9b076714..f0d9b32e2 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 f9b076714..f0d9b32e2 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 54a0328f8..9e5ab647a 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..fa4f7b4a4 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 @@ -11,6 +11,14 @@ order: 5.1; } + :is(.test-nesting-rules p):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + is-layer: C_D; + -webkit-box-ordinal-group: 6; + -webkit-order: 5.1; + -moz-box-ordinal-group: 6; + order: 5.1; + } + :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { is-layer: C; --order: 1; @@ -74,12 +82,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 +92,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 +123,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) { From f58ff309b5393c7a40b008475de3d5209ba7f6ce Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sat, 20 Apr 2024 12:38:23 +0200 Subject: [PATCH 4/6] fix --- .../test/plugin-order-nesting.after.expect.css | 4 ++-- .../test/plugin-order-nesting.after.preserve.expect.css | 8 ++++---- .../test/plugin-order-nesting.before.expect.css | 4 ++-- .../test/plugin-order-nesting.before.preserve.expect.css | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) 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; } From e9f78b4d2fdc5f51ae7e626851df80ec3eb9fa9a Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 21 Apr 2024 12:05:21 +0200 Subject: [PATCH 5/6] better explain the edition option --- plugins/postcss-nesting/README.md | 12 ++++++++---- plugins/postcss-nesting/docs/README.md | 12 ++++++++---- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/plugins/postcss-nesting/README.md b/plugins/postcss-nesting/README.md index 82386e1ad..106484c10 100644 --- a/plugins/postcss-nesting/README.md +++ b/plugins/postcss-nesting/README.md @@ -86,9 +86,15 @@ instructions for: ### edition -The default behavior is to transpile CSS following the version of the CSS nesting specification as it existed during the last major version of this plugin. +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 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` + +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. -If you want to use an older or even more recent version you can set the `edition` option. ```js postcssNesting({ @@ -108,8 +114,6 @@ postcssNesting({ 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; diff --git a/plugins/postcss-nesting/docs/README.md b/plugins/postcss-nesting/docs/README.md index 323817df4..e46c9812c 100644 --- a/plugins/postcss-nesting/docs/README.md +++ b/plugins/postcss-nesting/docs/README.md @@ -38,9 +38,15 @@ you might want to use [PostCSS Nested] instead. ### edition -The default behavior is to transpile CSS following the version of the CSS nesting specification as it existed during the last major version of this plugin. +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 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` + +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. -If you want to use an older or even more recent version you can set the `edition` option. ```js ({ @@ -60,8 +66,6 @@ If you want to use an older or even more recent version you can set the `edition 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 From 52c90c6f7f8c3f840e3531d39a9708c5f660b4cb Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 21 Apr 2024 12:09:49 +0200 Subject: [PATCH 6/6] one more --- plugins/postcss-nesting/README.md | 4 ++++ plugins/postcss-nesting/docs/README.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/plugins/postcss-nesting/README.md b/plugins/postcss-nesting/README.md index 106484c10..e605f27de 100644 --- a/plugins/postcss-nesting/README.md +++ b/plugins/postcss-nesting/README.md @@ -93,6 +93,10 @@ The `edition` values correspond with rough dates when of a particular version of - `2024-02` (default) - `2021` +> [!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. + 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. diff --git a/plugins/postcss-nesting/docs/README.md b/plugins/postcss-nesting/docs/README.md index e46c9812c..b8f571c59 100644 --- a/plugins/postcss-nesting/docs/README.md +++ b/plugins/postcss-nesting/docs/README.md @@ -45,6 +45,10 @@ The `edition` values correspond with rough dates when of a particular version of - `2024-02` (default) - `2021` +> [!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. + 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.