@mrhenry/stylelint-mrhenry-nesting
v3.1.0
Published
Mr. Henry's preferred way of writing nested CSS
Downloads
1,975
Readme
@mrhenry/stylelint-mrhenry-nesting
Specify a strict coding style for CSS nesting.
/* 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.
- only conditional at-rules
- every nested selector must start with
& - only a single pseudo after
&
Valid CSS :
.element {
&:focus {
/* when ".element" has focus */
}
&:is([data-theme=red]) {
/* when ".element" has an attribute "data-theme" with value "red" */
}
&:is(body.some-modifier *) {
/* when ".element" is a child of <body class="some-modifier"> */
}
&:has(img) {
/* when ".element" has a child element of type "img" */
}
@media (prefers-color-scheme: dark) {
/* when ".element" is shown in a dark mode context */
}
}Invalid CSS :
/* invalid, the nested selector is not a "filter" on the elements matched by the parent */
.foo {
> .bar {
color: green;
}
}
/* invalid, the nested selector is not a "filter" on the elements matched by the parent */
.foo {
+ :focus {
color: green;
}
}
/* invalid, "@custom-selector" is not a conditional at-rule */
.foo {
@custom-selector :--foo .bar;
}Usage
npm install --save-dev @mrhenry/stylelint-mrhenry-nesting
// stylelint.config.js
module.exports = {
plugins: [
"@mrhenry/stylelint-mrhenry-nesting",
],
rules: {
"@mrhenry/stylelint-mrhenry-nesting": true,
},
}Optional secondary options
ignoreAtRules: [/regex/, "string"]
// stylelint.config.js
module.exports = {
plugins: [
"@mrhenry/stylelint-mrhenry-nesting",
],
rules: {
"@mrhenry/stylelint-mrhenry-nesting": [
true,
{ ignoreAtRules: ["mixin"] }
],
},
}Given:
[/^custom-/i, "mixin"]The following patterns are not considered problems:
.foo {
@custom-selector :--bar .bar;
}.foo {
@CUSTOM-MEDIA --bar (min-width: 320px);
}.foo {
@mixin bar;
}