postcss-nesting - npm Package Compare versions

Comparing version 12.0.4 to 12.1.0

CHANGELOG.md

 # Changes to PostCSS Nesting
 
+### 12.1.0
+
+_March 6, 2024_
+
+- 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
@@ -15,9 +21,2 @@
 
-### 12.0.2
-
-_December 15, 2023_
-
-- Fix type definitions
-- Updated [`@csstools/selector-specificity`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity) to [`3.0.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/selector-specificity/CHANGELOG.md#301) (patch)
-
 [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting/CHANGELOG.md)

dist/index.d.ts

@@ -8,2 +8,8 @@ import type { PluginCreator } from 'postcss';
 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 */
@@ -15,2 +21,8 @@ noIsPseudoSelector?: 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 { }

package.json

 {
 	"name": "postcss-nesting",
 	"description": "Nest rules inside each other in CSS",
-	"version": "12.0.4",
+	"version": "12.1.0",
 	"contributors": [
@@ -57,2 +57,3 @@ {
 	"dependencies": {
+		"@csstools/selector-resolve-nested": "^1.1.0",
 		"@csstools/selector-specificity": "^3.0.2",
@@ -59,0 +60,0 @@ "postcss-selector-parser": "^6.0.13"

README.md

@@ -29,2 +29,4 @@ # PostCSS Nesting [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 	}
+
+	color: pink;
 }
@@ -36,2 +38,4 @@
 	color: red;
+
+	color: pink;
 }
@@ -105,2 +109,108 @@ .foo:hover {
 
+### 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
@@ -107,0 +217,0 @@

No alert changes

Improved metrics

Total package byte prevSize

33787

increased by23.15%

Lines of code

109

increased by31.33%

Number of lines in readme file

322

increased by51.89%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@csstools/selector-resolve-nested@^1.1.0

• + Added@csstools/selector-resolve-nested@1.1.0(transitive)