postcss-nesting - npm Package Compare versions

Comparing version 11.2.1 to 11.2.2

CHANGELOG.md

 # Changes to PostCSS Nesting
 
+### 11.2.2 (March 25, 2023)
+
+- Improved: support for mixins
+
 ### 11.2.1 (February 16, 2023)
@@ -4,0 +8,0 @@

package.json

 {
 	"name": "postcss-nesting",
 	"description": "Nest rules inside each other in CSS",
-	"version": "11.2.1",
+	"version": "11.2.2",
 	"contributors": [
@@ -55,16 +55,12 @@ {
 	"devDependencies": {
+		"@csstools/postcss-tape": "*",
 		"puppeteer": "^19.5.2"
 	},
 	"scripts": {
-		"prebuild": "npm run clean",
 		"build": "rollup -c ../../rollup/default.mjs",
-		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
 		"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",
-		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
-		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
-		"prepublishOnly": "npm run clean && npm run build && npm run test",
-		"test": "node .tape.mjs && npm run test:exports",
+		"lint": "node ../../.github/bin/format-package-json.mjs",
+		"prepublishOnly": "npm run build && npm run test",
+		"test": "node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs",
 		"test:browser": "node ./test/_browser.mjs",
-		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
 		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
@@ -71,0 +67,0 @@ },

README.md

@@ -84,3 +84,33 @@ # PostCSS Nesting [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
+## ⚠️ Nested selectors must start with a symbol
 
+The current version of the [CSS Nesting specification](https://www.w3.org/TR/2023/WD-css-nesting-1-20230214/#example-34e8e94f) disallows nested selectors to start with a letter (i.e. a tag name or element selector). To write such selectors, they need to be prefixed with `& ` or wrapped with `:is()`.
+
+You will get a warning when selectors start with a letter:
+> Nested selectors must start with a symbol and "span" begins with a letter.
+
+```pcss
+.foo {
+	/* ❌ invalid */
+	span {
+		color: hotpink;
+	}
+
+	/* ✅ valid */
+	& span {
+		color: hotpink;
+	}
+
+	/* ❌ invalid */
+	span & {
+		color: hotpink;
+	}
+
+	/* ✅ valid */
+	:is(span) & {
+		color: hotpink;
+	}
+}	
+```
+
 ## Options
@@ -87,0 +117,0 @@

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43767

1.06%

Number of low quality alerts

1

-50%

Number of lines in readme file

226

15.31%

Worsened metrics

Dev dependency count

2

100%

No dependency changes