Merge pull request #11 from csstools/backport-postcss-nesting-changes

Backport postcss nesting changes

Author: Antonio-Laguna

plugins/postcss-nesting/.bin/test-tape.js

@@ -21,10 +21,8 @@ export default async function tape() {
 	failures += await test('ignores invalid entries', { basename: 'ignore' })
 	failures += await test('supports complex entries', { basename: 'complex' })
 	failures += await test('supports all spec examples', { basename: 'spec-examples' })
-	failures += await test('supports spec compliant mixing of nested rules and declarations', { basename: 'mixing-nested-rules-and-declarations-spec' })
-	failures += await test('supports legacy mixing of nested rules and declarations', { basename: 'mixing-nested-rules-and-declarations-legacy', pluginOptions: { allowDeclarationsAfterNestedRules: true } })
 
-	let mixinPlugin = () => {
+	let mixinPluginRule = () => {
 		return {
 			postcssPlugin: 'mixin',
 			AtRule: {
@@ -34,20 +32,35 @@ export default async function tape() {
 			},
 		}
 	}
-	mixinPlugin.postcss = true
-	failures += await test('supports other visitors', { basename: 'mixin' }, mixinPlugin)
+
+	mixinPluginRule.postcss = true
+	failures += await test('supports other visitors (mixin rule)', { basename: 'mixin-rule' }, mixinPluginRule)
+
+	let mixinPluginDeclaration = () => {
+		return {
+			postcssPlugin: 'mixin',
+			AtRule: {
+				mixin(node) {
+					node.replaceWith('color: blue;')
+				},
+			},
+		}
+	}
+
+	mixinPluginDeclaration.postcss = true
+	failures += await test('supports other visitors (mixin declaration)', { basename: 'mixin-declaration' }, mixinPluginDeclaration)
 
 	return failures === 0
 }
 
 async function test(name, init, ...plugins) {
-	const { basename, pluginOptions } = Object(init)
+	const { basename } = Object(init)
 
 	let sourceUrl = new URL(`test/${basename}.css`, workingUrl)
 	let expectUrl = new URL(`test/${basename}.expect.css`, workingUrl)
 	let resultUrl = new URL(`test/${basename}.result.css`, workingUrl)
 
-	plugins.unshift(plugin(pluginOptions))
+	plugins.unshift(plugin())
 
 	let sourceCss = await fs.readFile(sourceUrl, 'utf8')
 	let expectCss = await fs.readFile(expectUrl, 'utf8')

plugins/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changes to PostCSS Nesting
 
+### 10.0.1 (November 17, 2021)
+
+- Removed: Support for `allowDeclarationsAfterNestedRules`.
+
+We've realised that enforcing this rule from the spec was going to be problematic
+in the long run given how plugins work and the whole ecosystem around mixins and
+other features. Treating this as a patch given that this was introduced in the
+previous version and was starting to break projects that were using other features.
+
+### 10.0.0 (November 16, 2021)
+
+- Added: Support for `allowDeclarationsAfterNestedRules` to deviate from spec.
+- Added: `.npmrc` file.
+
+- Updated: Aligning completely with the [spec](https://www.w3.org/TR/css-nesting-1/) updates.
+- Updated: `esbuild` to 0.13.12 (minor)
+
+- Removed: Support for PostCSS 7
+
+### 9.0.0 (October 27, 2021)
+
+- Added: Support for Deno
+- Fixed: Issue with PostCSS 8 compatibility using the RuleExit listener
+
 ### 8.0.1 (May 1, 2021)
 
 - Fixed: Compatibility issue with CommonJS.

plugins/postcss-nesting/README.md

@@ -6,7 +6,8 @@
 [![Support Chat][git-img]][git-url]
 
 [PostCSS Nesting] lets you nest style rules inside each other, following the
-[CSS Nesting] specification.
+[CSS Nesting] specification. If you want nested rules the same way [Sass] works
+you might want to use [PostCSS Nested] instead.
 
 ```pcss
 a, b {
@@ -71,64 +72,11 @@ import postcssNesting from "https://deno.land/x/postcss_nesting/mod.js";
 await postcss([postcssNesting]).process(YOUR_CSS /*, processOptions */);
 ```
 
-## Options
+### ⚠️ Spec disclaimer
 
-### allowDeclarationsAfterNestedRules
-
-The [specification](https://www.w3.org/TR/css-nesting-1/#mixing) does not allow declarations after nested rules.
-This was previously supported by this plugin and can be re-enabled with `allowDeclarationsAfterNestedRules`.
-
-Before :
-
-```css
-a {
-  color: red;
-
-  & b {
-    color: white;
-  }
-
-  padding: 20px;
-}
-```
-
-After **without** the option :
-
-```js
-postcssNesting()
-```
-
-```css
-a {
-  color: red;
-}
-
-a b {
-  color: white;
-}
-```
-
-After **with** the option :
-
-```js
-postcssNesting({
-  allowDeclarationsAfterNestedRules: true
-})
-```
-
-```css
-a {
-  color: red;
-}
-
-a b {
-  color: white;
-}
-
-a {
-  padding: 20px;
-}
-```
+The [CSS Nesting Module] spec states on nesting that "Declarations occuring after a nested rule are invalid and ignored.".
+While we think it makes sense on browsers, enforcing this at the plugin level introduces several constrains that would
+interfere with PostCSS' plugin nature such as with `@mixin`
 
 [cli-img]: https://img.shields.io/travis/csstools/postcss-nesting.svg
 [cli-url]: https://travis-ci.org/csstools/postcss-nesting
@@ -143,3 +91,6 @@ a {
 [PostCSS]: https://github.com/postcss/postcss
 [PostCSS Nesting]: https://github.com/jonathantneal/postcss-nesting
 [Deno]: https://deno.land/x/postcss_nesting
+[PostCSS Nested]: https://github.com/postcss/postcss-nested
+[Sass]: https://sass-lang.com/
+[CSS Nesting Module]: https://www.w3.org/TR/css-nesting-1/

plugins/postcss-nesting/package.json

@@ -2,7 +2,7 @@
   "name": "postcss-nesting",
   "description": "Nest rules inside each other in CSS",
   "license": "CC0-1.0",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",

plugins/postcss-nesting/src/index.js

@@ -1,19 +1,12 @@
-import ensureCorrectMixingOfNestingRulesAndDeclarations from './lib/mixing-nesting-rules-and-declarations.js'
 import walk from './lib/walk.js'
 
 /**
- * @param {{allowDeclarationsAfterNestedRules?: boolean}} opts
  * @returns {import('postcss').Plugin}
  */
-export default function postcssNesting(opts) {
-	const allowDeclarationsAfterNestedRules = Object(opts).allowDeclarationsAfterNestedRules || false
-
+export default function postcssNesting() {
 	return {
 		postcssPlugin: 'postcss-nesting',
 		Rule(rule) {
-			if (!allowDeclarationsAfterNestedRules) {
-				ensureCorrectMixingOfNestingRulesAndDeclarations(rule)
-			}
 			walk(rule)
 		},
 	}

plugins/postcss-nesting/src/lib/mixing-nesting-rules-and-declarations.js

@@ -24,6 +24,12 @@ a {
 }
 	}
 
+a {
+
+	order: 5;
+	order: 6
+}
+
 a b {
 		order: 7;
 	}
@@ -37,6 +43,11 @@ a b {
 		order: 9;
 	}
 
+a {
+
+	order: 10
+}
+
 body a {
 		order: 11
 }
@@ -50,6 +61,11 @@ body a {
 		order: 13
 }
 
+a {
+
+	order: 14
+}
+
 @media screen {
 
 a {

plugins/postcss-nesting/test/basic.expect.css

@@ -10,6 +10,9 @@ a, b {
 :is(a,b) c, :is(a,b) d {
 		order: 4;
 	}
+a, b {
+	order: 5;
+}
 a, b {
 	order: 1;
 }
@@ -22,3 +25,6 @@ a, b {
 :is(a,b) c, :is(a,b) d {
 		order: 4;
 }
+a, b {
+	order: 5;
+}

plugins/postcss-nesting/test/direct.expect.css

@@ -11,6 +11,9 @@ d e {
 f g {
 		order: 4;
 	}
+f {
+	order: 5;
+}
 a b c {
 			order: 1
 }
@@ -23,3 +26,6 @@ d e {
 f g {
 		order: 4;
 }
+f {
+	order: 5;
+}

plugins/postcss-nesting/test/empty.expect.css

@@ -1,7 +1,5 @@
 a, b {
-	order: 1
-}
-a, b {
+	order: 1;
 	c, d {
 		order: 2;
 	}
@@ -13,9 +11,7 @@ f:is(g) {
 		order: 5;
 	}
 a, b {
-	order: 1
-}
-a, b {
+	order: 1;
 	@nest c, d {
 		order: 2;
 	}