postcss-nesting - npm Package Compare versions

Comparing version 11.0.1 to 11.1.0

dist/lib/merge-selectors/merge-selectors.d.ts

 import { options } from '../options';
-export default function mergeSelectors(fromSelectors: Array<string>, toSelectors: Array<string>, opts: options): any[];
+import type { Node, Result } from 'postcss';
+export default function mergeSelectors(node: Node, postcssResult: Result, fromSelectors: Array<string>, toSelectors: Array<string>, opts: options, fromAtNest?: boolean): any[];

package.json

 {
 	"name": "postcss-nesting",
 	"description": "Nest rules inside each other in CSS",
-	"version": "11.0.1",
-	"author": "Jonathan Neal <[e-mail]>",
+	"version": "11.1.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "[e-mail]",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Jonathan Neal",
+			"email": "[e-mail]"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "[e-mail]"
+		}
+	],
 	"license": "CC0-1.0",
@@ -28,4 +42,6 @@ "funding": {
 	"files": [
-		"dist",
-		"mod.js"
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
 	],
@@ -39,2 +55,5 @@ "dependencies": {
 	},
+	"devDependencies": {
+		"puppeteer": "^19.5.2"
+	},
 	"scripts": {
@@ -44,3 +63,3 @@ "prebuild": "npm run clean",
 		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
-		"docs": "node ../../.github/bin/generate-docs/install.mjs",
+		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
 		"lint": "npm run lint:eslint && npm run lint:package-json",
@@ -51,2 +70,3 @@ "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
 		"test": "node .tape.mjs && npm run test:exports",
+		"test:browser": "node ./test/_browser.mjs",
 		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
@@ -81,4 +101,6 @@ "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
 	"csstools": {
+		"cssdbId": "nesting-rules",
 		"exportName": "postcssNesting",
-		"humanReadableName": "PostCSS Nesting"
+		"humanReadableName": "PostCSS Nesting",
+		"specUrl": "https://www.w3.org/TR/css-nesting-1/"
 	},
@@ -85,0 +107,0 @@ "volta": {

README.md

@@ -1,24 +0,25 @@
-# PostCSS Nesting [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
+# PostCSS Nesting [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
-[![NPM Version][npm-img]][npm-url]
-[![CSS Standard Status][css-img]][css-url]
-[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
+[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-nesting.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/nesting-rules.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
-[PostCSS Nesting] lets you nest style rules inside each other, following the
-[CSS Nesting] specification. If you want nested rules the same way [Sass] works
+[PostCSS Nesting] lets you nest style rules inside each other, following the [CSS Nesting specification].
+
+If you want nested rules the same way [Sass] works
 you might want to use [PostCSS Nested] instead.
 
 ```pcss
-a, b {
+.foo {
 	color: red;
 
-	/* "&" comes first */
-	& c, & d {
-		color: white;
+	&:hover {
+		color: green;
 	}
 
-	/* "&" comes later, requiring "@nest" */
-	@nest e & {
-		color: yellow;
+	> .bar {
+		color: blue;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		color: cyan;
+	}
 }
@@ -28,13 +29,16 @@
 
-a, b {
+.foo {
 	color: red;
 }
-
-a c, a d, b c, b d {
-	color: white;
+.foo:hover {
+		color: green;
+	}
+.foo > .bar {
+		color: blue;
+	}
+@media (prefers-color-scheme: dark) {
+	.foo {
+		color: cyan;
 }
-
-e a, e b {
-	color: yellow;
-}
+	}
 ```
@@ -47,21 +51,37 @@
 ```bash
-npm install postcss-nesting --save-dev
+npm install postcss postcss-nesting --save-dev
 ```
 
-Use [PostCSS Nesting] as a [PostCSS] plugin:
+Use it as a [PostCSS] plugin:
 
 ```js
-import postcss from 'postcss';
-import postcssNesting from 'postcss-nesting';
+const postcss = require('postcss');
+const postcssNesting = require('postcss-nesting');
 
 postcss([
-  postcssNesting(/* pluginOptions */)
+	postcssNesting(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
-[PostCSS Nesting] runs in all Node environments, with special instructions for:
+[PostCSS Nesting] runs in all Node environments, with special
+instructions for:
 
-| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
-| --- | --- | --- | --- |
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Next.js](INSTALL.md#nextjs)
+- [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 first warn and then error if you use `@nest`.
+
+We advice everyone to migrate their codebase **now** to nested CSS without `@nest`.
+
+
 ## Options
@@ -168,15 +188,7 @@
 
-### ⚠️ Spec disclaimer
-
-The [CSS Nesting Module] spec states on nesting that "Declarations occurring after a nested rule are invalid and ignored.".
-While we think it makes sense on browsers, enforcing this at the plugin level introduces several constraints that would
-interfere with PostCSS' plugin nature such as with `@mixin`
-
-[css-img]: https://cssdb.org/images/badges/nesting-rules.svg
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#nesting-rules
 [discord]: https://discord.gg/bUadyRwkJS
-[npm-img]: https://img.shields.io/npm/v/postcss-nesting.svg
 [npm-url]: https://www.npmjs.com/package/postcss-nesting
 
-[CSS Nesting]: https://drafts.csswg.org/css-nesting-1/
 [PostCSS]: https://github.com/postcss/postcss
@@ -186,2 +198,2 @@ [PostCSS Nesting]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
 [Sass]: https://sass-lang.com/
-[CSS Nesting Module]: https://www.w3.org/TR/css-nesting-1/
+[CSS Nesting specification]: https://www.w3.org/TR/css-nesting-1/

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41122

increased by31.75%

Number of package files

25

increased by8.7%

Lines of code

122

increased by7.96%

Number of lines in readme file

196

increased by6.52%

Worsened metrics

Dev dependency count

1

increased byInfinity%

No dependency changes