nesting editions

README.md

@@ -23,11 +23,7 @@ const yourConfig = {
 		/* remove autoprefixer if you had it here, it's part of postcss-preset-env */
 		postcssPresetEnv({
 			/* pluginOptions */
-			features: {
-				'nesting-rules': {
-					noIsPseudoSelector: false,
-				},
-			},
+			features: {},
 		})
 	]
 }

packages/selector-resolve-nested/test/compound.mjs

@@ -161,6 +161,18 @@ test('surrounding whitespace', async () => {
 			expected_resolved: '#foo.foo.foo',
 			expected_flat: '.foo#foo.foo',
 		},
+		{
+			a: '&',
+			b: 'a, .a',
+			expected_resolved: ':is(a,.a)',
+			expected_flat: 'a, .a',
+		},
+		{
+			a: '&',
+			b: '::before',
+			expected_resolved: ':is(::before)',
+			expected_flat: '::before',
+		},
 	];
 
 	for (const { a, b, expected_resolved, expected_flat } of testCases) {

plugin-packs/postcss-preset-env/README.md

@@ -27,11 +27,7 @@ const yourConfig = {
 		/* remove autoprefixer if you had it here, it's part of postcss-preset-env */
 		postcssPresetEnv({
 			/* pluginOptions */
-			features: {
-				'nesting-rules': ['auto', {
-					noIsPseudoSelector: false,
-				}],
-			},
+			features: {},
 		})
 	]
 }

plugins/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Nesting
 
+### Unreleased (minor)
+
+- Add the `edition` plugin option to control which CSS nesting specification version should be used. The default is `2021` but you can also set it to the newer `2024-02` edition to have more modern behavior.
+
 ### 12.0.4
 
 _February 26, 2024_

plugins/postcss-nesting/README.md

@@ -26,12 +26,16 @@ you might want to use [PostCSS Nested] instead.
 	@media (prefers-color-scheme: dark) {
 		color: cyan;
 	}
+
+	color: pink;
 }
 
 /* becomes */
 
 .foo {
 	color: red;
+
+	color: pink;
 }
 .foo:hover {
 		color: green;
@@ -100,6 +104,112 @@ postcssNesting({
 
 ## Options
 
+### edition
+
+The default behavior is to transpile CSS following an older version of the CSS nesting specification.
+
+If you want to already use the latest version you can set the `edition` option to `2024-02`.
+
+```js
+postcssNesting({
+	edition: '2024-02'
+})
+```
+
+#### `2021` (default)
+
+This version is a continuation of what existed before CSS nesting was implemented in browsers.  
+It made a few non-invasive changes to keep up with implementations but it is falling behind.
+
+In a feature version of this plugin this will no longer be the default.
+
+```pcss
+.foo {
+	color: red;
+
+	&:hover {
+		color: green;
+	}
+
+	> .bar {
+		color: blue;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		color: cyan;
+	}
+
+	color: pink;
+}
+
+/* becomes */
+
+.foo {
+	color: red;
+
+	color: pink;
+}
+.foo:hover {
+		color: green;
+	}
+.foo > .bar {
+		color: blue;
+	}
+@media (prefers-color-scheme: dark) {
+	.foo {
+		color: cyan;
+}
+	}
+```
+
+#### `2024-02`
+
+- usage of `:is()` pseudo-class is no longer optional
+- at rules are not combined with the `and` keyword
+- `@nest` is removed from the specification
+- declarations and nested rules/at-rules are no longer re-ordered
+
+```pcss
+.foo {
+	color: red;
+
+	&:hover {
+		color: green;
+	}
+
+	> .bar {
+		color: blue;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		color: cyan;
+	}
+
+	color: pink;
+}
+
+/* becomes */
+
+.foo {
+	color: red;
+}
+.foo:hover {
+		color: green;
+	}
+.foo  > .bar {
+		color: blue;
+	}
+@media (prefers-color-scheme: dark) {
+	.foo {
+		color: cyan;
+}
+	}
+.foo {
+
+	color: pink;
+}
+```
+
 ### noIsPseudoSelector
 
 #### Specificity

plugins/postcss-nesting/dist/index.d.ts

@@ -5,10 +5,22 @@ export default creator;
 
 /** postcss-nesting plugin options */
 export declare type pluginOptions = {
+    /** The implementation edition for CSS Nesting, default to '2021' */
+    edition?: '2021' | '2024-02';
+} & pluginOptions2021 & pluginOptions2024_02;
+
+/** postcss-nesting plugin options */
+export declare type pluginOptions2021 = {
     /** Avoid the `:is()` pseudo class as much as possible. default: false */
     noIsPseudoSelector?: boolean;
     /** Silence the `@nest` warning. */
     silenceAtNestWarning?: boolean;
 };
 
+/** postcss-nesting plugin options */
+export declare type pluginOptions2024_02 = {
+    /** @deprecated This option was removed. You must migrate your CSS to the latest speciation to continue using this plugin. */
+    noIsPseudoSelector?: boolean;
+};
+
 export { }

plugins/postcss-nesting/docs/README.md

@@ -58,6 +58,48 @@ You can silence this warning with a new `silenceAtNestWarning` plugin option.
 
 ## Options
 
+### edition
+
+The default behavior is to transpile CSS following an older version of the CSS nesting specification.
+
+If you want to already use the latest version you can set the `edition` option to `2024-02`.
+
+```js
+<exportName>({
+	edition: '2024-02'
+})
+```
+
+#### `2021` (default)
+
+This version is a continuation of what existed before CSS nesting was implemented in browsers.  
+It made a few non-invasive changes to keep up with implementations but it is falling behind.
+
+In a feature version of this plugin this will no longer be the default.
+
+```pcss
+<example.css>
+
+/* becomes */
+
+<example.expect.css>
+```
+
+#### `2024-02`
+
+- usage of `:is()` pseudo-class is no longer optional
+- at rules are not combined with the `and` keyword
+- `@nest` is removed from the specification
+- declarations and nested rules/at-rules are no longer re-ordered
+
+```pcss
+<example.css>
+
+/* becomes */
+
+<example.edition-2024-02.expect.css>
+```
+
 ### noIsPseudoSelector
 
 #### Specificity

plugins/postcss-nesting/package.json

@@ -54,6 +54,7 @@
 		"dist"
 	],
 	"dependencies": {
+		"@csstools/selector-resolve-nested": "^1.1.0",
 		"@csstools/selector-specificity": "^3.0.2",
 		"postcss-selector-parser": "^6.0.13"
 	},

plugins/postcss-nesting/src/editions/2021/index.ts

@@ -0,0 +1,38 @@
+import type { PluginCreator } from 'postcss';
+import ampersandToScope from './lib/ampersand-to-scope.js';
+import walk from './lib/walk.js';
+
+/** postcss-nesting plugin options */
+export type pluginOptions = {
+	/** Avoid the `:is()` pseudo class as much as possible. default: false */
+	noIsPseudoSelector?: boolean,
+	/** Silence the `@nest` warning. */
+	silenceAtNestWarning?: boolean,
+};
+
+const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
+	const options = Object.assign(
+		// Default options
+		{
+			noIsPseudoSelector: false,
+			silenceAtNestWarning: false,
+		},
+		// Provided options
+		opts,
+	);
+
+	return {
+		postcssPlugin: 'postcss-nesting',
+		Rule(rule, { result }) {
+			walk(rule, result, options);
+
+			if (rule.selector.includes('&')) {
+				ampersandToScope(rule, result);
+			}
+		},
+	};
+};
+
+creator.postcss = true;
+
+export default creator;

plugins/postcss-nesting/src/lib/atrule-within-atrule.ts → plugins/postcss-nesting/src/editions/2021/lib/atrule-within-atrule.ts

@@ -1,9 +1,9 @@
 import type { AtRule } from 'postcss';
-import cleanupParent from './cleanup-parent.js';
+import cleanupParent from '../../shared/lib/cleanup-parent.js';
 import groupDeclarations from './group-declarations.js';
 import mergeParams from './merge-params.js';
-import shiftNodesBeforeParent from './shift-nodes-before-parent.js';
-import validAtrules from './valid-atrules.js';
+import shiftNodesBeforeParent from '../../shared/lib/shift-nodes-before-parent.js';
+import validAtrules from '../../shared/lib/valid-atrules.js';
 
 export default function transformAtruleWithinAtrule(node: AtRule, parent: AtRule) {
 	// Group all declarations after the first one.

plugins/postcss-nesting/src/lib/atrule-within-rule.ts → plugins/postcss-nesting/src/editions/2021/lib/atrule-within-rule.ts

@@ -1,10 +1,10 @@
-import cleanupParent from './cleanup-parent.js';
-import { options } from './options.js';
-import shiftNodesBeforeParent from './shift-nodes-before-parent.js';
-import validAtrules from './valid-atrules.js';
-import { walkFunc } from './walk-func.js';
 import type { AtRule, Result, Rule } from 'postcss';
+import type { walkFunc } from './walk-func.js';
+import cleanupParent from '../../shared/lib/cleanup-parent.js';
 import groupDeclarations from './group-declarations.js';
+import shiftNodesBeforeParent from '../../shared/lib/shift-nodes-before-parent.js';
+import validAtrules from '../../shared/lib/valid-atrules.js';
+import { options } from './options.js';
 
 export default function atruleWithinRule(node: AtRule, parent: Rule, result: Result, walk: walkFunc, opts: options) {
 	// Group all declarations after the first one.

plugins/postcss-nesting/src/lib/nest-rule-within-rule.ts → plugins/postcss-nesting/src/editions/2021/lib/nest-rule-within-rule.ts

@@ -1,10 +1,10 @@
-import { comma } from './list.js';
-import shiftNodesBeforeParent from './shift-nodes-before-parent.js';
-import cleanupParent from './cleanup-parent.js';
-import mergeSelectors from './merge-selectors/merge-selectors.js';
 import type { AtRule, Result, Rule } from 'postcss';
-import { walkFunc } from './walk-func.js';
+import type { walkFunc } from './walk-func.js';
+import mergeSelectors from './merge-selectors/merge-selectors.js';
+import shiftNodesBeforeParent from '../../shared/lib/shift-nodes-before-parent.js';
+import { comma } from './list.js';
 import { options } from './options.js';
+import cleanupParent from '../../shared/lib/cleanup-parent.js';
 
 export default function transformNestRuleWithinRule(node: AtRule, parent: Rule, result: Result, walk: walkFunc, opts: options) {
 	let selectors = [];

plugins/postcss-nesting/src/lib/rule-within-rule.ts → plugins/postcss-nesting/src/editions/2021/lib/rule-within-rule.ts

@@ -1,9 +1,9 @@
-import shiftNodesBeforeParent from './shift-nodes-before-parent.js';
-import cleanupParent from './cleanup-parent.js';
-import mergeSelectors from './merge-selectors/merge-selectors.js';
 import type { Result, Rule } from 'postcss';
-import { options } from './options.js';
+import cleanupParent from '../../shared/lib/cleanup-parent.js';
 import groupDeclarations from './group-declarations.js';
+import mergeSelectors from './merge-selectors/merge-selectors.js';
+import shiftNodesBeforeParent from '../../shared/lib/shift-nodes-before-parent.js';
+import { options } from './options.js';
 
 export default function transformRuleWithinRule(node: Rule, parent: Rule, result: Result, opts: options) {
 	let selectors = [];

plugins/postcss-nesting/src/lib/walk.ts → plugins/postcss-nesting/src/editions/2021/lib/walk.ts

@@ -1,10 +1,10 @@
-import transformRuleWithinRule, { isValidRuleWithinRule } from './rule-within-rule.js';
-import transformNestRuleWithinRule, { isValidNestRuleWithinRule } from './nest-rule-within-rule.js';
-import transformAtruleWithinRule, { isAtruleWithinRule } from './atrule-within-rule.js';
-import transformAtruleWithinAtrule, { isAtruleWithinAtrule } from './atrule-within-atrule.js';
 import type { Container, Result } from 'postcss';
+import transformAtruleWithinAtrule, { isAtruleWithinAtrule } from './atrule-within-atrule.js';
+import transformAtruleWithinRule, { isAtruleWithinRule } from './atrule-within-rule.js';
+import transformNestRuleWithinRule, { isValidNestRuleWithinRule } from './nest-rule-within-rule.js';
+import transformRuleWithinRule, { isValidRuleWithinRule } from './rule-within-rule.js';
+import { isAtRule, isNestRule, isRule } from '../../shared/lib/is-type-of-rule.js';
 import { options } from './options.js';
-import { isAtRule, isNestRule, isRule } from './is-type-of-rule.js';
 
 export default function walk(node: Container, result: Result, opts: options) {
 	node.each((child) => {