@mrhenry/stylelint-mrhenry-nesting 1.0.2 → 2.0.0

package/README.md

@@ -2,6 +2,20 @@
 
 [![version](https://img.shields.io/npm/v/@mrhenry/stylelint-mrhenry-nesting.svg)](https://www.npmjs.com/package/@mrhenry/stylelint-mrhenry-nesting)
 
+Specify a strict coding style for CSS nesting.
+
+```css
+/* valid, the nested selector is a "filter" for "focus" */
+.element {
+	&:focus {}
+}
+
+/* invalid, the nested selector is not a "filter" on the elements matched by the parent */
+.foo {
+	> .bar {}
+}
+```
+
 Use CSS nesting only for conditional styling.
 This style of CSS aims to be expressive and readable.
 
@@ -9,6 +23,7 @@ This style of CSS aims to be expressive and readable.
 - every nested selector must start with `&`
 - only a single pseudo after `&`
 
+**Valid CSS :**
 
 ```css
 .element {
@@ -26,8 +41,7 @@ This style of CSS aims to be expressive and readable.
 }
 ```
 
---------
-
+**Invalid CSS :**
 
 ```css
 /* invalid, the nested selector is not a "filter" on the elements matched by the parent */
@@ -70,3 +84,18 @@ This style of CSS aims to be expressive and readable.
 }
 ```
 
+## Usage
+
+`npm install --save-dev @mrhenry/stylelint-mrhenry-nesting`
+
+```js
+// stylelint.config.js
+module.exports = {
+	plugins: [
+		"@mrhenry/stylelint-mrhenry-nesting",
+	],
+	rules: {
+		"@mrhenry/stylelint-mrhenry-nesting": true,
+	},
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrhenry/stylelint-mrhenry-nesting",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Mr. Henry's preferred way of writing nested CSS",
   "publishConfig": {
     "access": "public"

package/stylelint-mrhenry-nesting.js

@@ -1,7 +1,7 @@
 const stylelint = require("stylelint");
 const selectorParser = require('postcss-selector-parser');
 
-const ruleName = "plugin/stylelint-mrhenry-nesting";
+const ruleName = "@mrhenry/stylelint-mrhenry-nesting";
 const messages = stylelint.utils.ruleMessages(ruleName, {
 	rejectedAtRule: (name) => {
 		return `Nested at-rules with name "${name}" is not allowed.`;
@@ -180,6 +180,21 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
 };
 
 function fixSelector(rule, selectorsAST, selectorAST) {
+	if (
+		selectorAST.nodes?.length === 1 &&
+		selectorAST.nodes?.[0].type === 'pseudo'
+	) {
+		selectorAST.replaceWith(selectorParser.selector({
+			nodes: [
+				selectorParser.nesting(),
+				selectorAST.nodes[0]
+			]
+		}))
+
+		rule.selector = selectorsAST.toString();
+		return;
+	}
+
 	selectorAST.replaceWith(selectorParser.selector({
 		nodes: [
 			selectorParser.nesting(),
@@ -191,6 +206,7 @@ function fixSelector(rule, selectorsAST, selectorAST) {
 			}),
 		]
 	}))
+
 	rule.selector = selectorsAST.toString();
 }