added all files to project

This commit is contained in:
2022-03-10 10:36:59 +01:00
parent 09dd957b33
commit 46a936d7de
25351 changed files with 3883356 additions and 0 deletions
+355
View File
@@ -0,0 +1,355 @@
# max-nesting-depth
Limit the depth of nesting.
<!-- prettier-ignore -->
```css
a { & > b { top: 0; } }
/** ↑
* This nesting */
```
This rule works by checking rules' and at-rules' actual "nesting depth" against your specified max. Here's how nesting depths works:
<!-- prettier-ignore -->
```css
a {
& b { /* nesting depth 1 */
& .foo { /* nesting depth 2 */
@media print { /* nesting depth 3 */
& .baz { /* nesting depth 4 */
color: pink;
}
}
}
}
}
```
Note that **root-level at-rules will _not_ be included in the nesting depth calculation**, because most users would take for granted that root-level at-rules are "free" (because necessary). So both of the following `.foo` rules have a nesting depth of 2, and will therefore pass if your `max` is less than or equal to 2:
<!-- prettier-ignore -->
```css
a {
b { /* 1 */
.foo {} /* 2 */
}
}
@media print { /* ignored */
a {
b { /* 1 */
.foo {} /* 2 */
}
}
}
```
This rule integrates into stylelint's core the functionality of the (now deprecated) plugin [`stylelint-statement-max-nesting-depth`](https://github.com/davidtheclark/stylelint-statement-max-nesting-depth).
## Options
`int`: Maximum nesting depth allowed.
For example, with `2`:
The following patterns are considered violations:
<!-- prettier-ignore -->
```css
a {
& .foo { /* 1 */
&__foo { /* 2 */
& > .bar {} /* 3 */
}
}
}
```
<!-- prettier-ignore -->
```css
a {
@media print { /* 1 */
& .foo { /* 2 */
& .bar {} /* 3 */
}
}
}
```
The following patterns are _not_ considered violations:
<!-- prettier-ignore -->
```css
a {
& .foo { /* 1 */
&__foo {} /* 2 */
}
}
a .foo__foo .bar .baz {}
```
<!-- prettier-ignore -->
```css
@media print {
a {
& .foo { /* 1 */
&__foo {} /* 2 */
}
}
}
```
## Optional secondary options
### `ignore: ["blockless-at-rules"]`
Ignore at-rules that only wrap other rules, and do not themselves have declaration blocks.
For example, with `1`:
The following patterns are considered violations:
As the at-rules have a declarations blocks.
<!-- prettier-ignore -->
```css
a {
&:hover { /* 1 */
@media (min-width: 500px) { color: pink; } /* 2 */
}
}
```
<!-- prettier-ignore -->
```css
a {
@nest > b { /* 1 */
.foo { color: pink; } /* 2 */
}
}
```
The following patterns are _not_ considered violations:
As all of the following `.foo` rules would have a nesting depth of just 1.
<!-- prettier-ignore -->
```css
a {
.foo { color: pink; } /* 1 */
}
```
<!-- prettier-ignore -->
```css
@media print { /* ignored regardless of options */
a {
.foo { color: pink; } /* 1 */
}
}
```
<!-- prettier-ignore -->
```css
a {
@media print { /* ignored because it's an at-rule without a declaration block of its own */
.foo { color: pink; } /* 1 */
}
}
```
### `ignore: ["pseudo-classes"]`
Ignore rules where the first selector in each selector list item is a pseudo-class
For example, with `1`:
The following patterns are considered violations:
<!-- prettier-ignore -->
```css
.a {
.b { /* 1 */
.c { /* 2 */
top: 0;
}
}
}
```
<!-- prettier-ignore -->
```css
.a {
&:hover { /* ignored */
.b { /* 1 */
.c { /* 2 */
top: 0;
}
}
}
}
```
<!-- prettier-ignore -->
```css
.a {
.b { /* 1 */
&::selection { /* 2 */
color: #64FFDA;
}
}
}
```
<!-- prettier-ignore -->
```css
.a {
.b { /* 1 */
&:hover, .c { /* 2 */
top: 0;
}
}
}
```
The following patterns are _not_ considered violations:
As all of the following pseudoclasses rules would have a nesting depth of just 1.
<!-- prettier-ignore -->
```css
.a {
.b { /* 1 */
&:hover { /* ignored */
top: 0;
}
}
}
```
<!-- prettier-ignore -->
```css
.a {
.b { /* 1 */
&:nest {
&:nest-lvl2 { /* ignored */
top: 0;
}
}
}
}
```
<!-- prettier-ignore -->
```css
.a {
&:hover { /* ignored */
.b { /* 1 */
top: 0;
}
}
}
```
<!-- prettier-ignore -->
```css
.a {
&:nest { /* ignored */
&:nest-lvl2 { /* ignored */
top: 0;
.b { /* 1 */
bottom: 0;
}
}
}
}
```
<!-- prettier-ignore -->
```css
.a {
.b { /* 1 */
&:hover, &:focus { /* ignored */
top: 0;
}
}
}
```
### `ignoreAtRules: ["/regex/", /regex/, "string"]`
Ignore the specified at-rules.
For example, with `1` and given:
```
["/^my-/", "media"]
```
The following patterns are _not_ considered violations:
<!-- prettier-ignore -->
```css
a {
@media print { /* 1 */
b { /* 2 */
c { top: 0; } /* 3 */
}
}
}
```
<!-- prettier-ignore -->
```css
a {
b { /* 1 */
@media print { /* 2 */
c { top: 0; } /* 3 */
}
}
}
```
<!-- prettier-ignore -->
```css
a {
@my-at-rule print { /* 1 */
b { /* 2 */
c { top: 0; } /* 3 */
}
}
}
```
<!-- prettier-ignore -->
```css
a {
@my-other-at-rule print { /* 1 */
b { /* 2 */
c { top: 0; } /* 3 */
}
}
}
```
The following patterns are considered violations:
<!-- prettier-ignore -->
```css
a {
@import print { /* 1 */
b { top: 0; } /* 2 */
}
}
```
<!-- prettier-ignore -->
```css
a {
@not-my-at-rule print { /* 1 */
b { top: 0; } /* 2 */
}
}
```
+114
View File
@@ -0,0 +1,114 @@
// @ts-nocheck
'use strict';
const _ = require('lodash');
const hasBlock = require('../../utils/hasBlock');
const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
const optionsMatches = require('../../utils/optionsMatches');
const parser = require('postcss-selector-parser');
const report = require('../../utils/report');
const ruleMessages = require('../../utils/ruleMessages');
const validateOptions = require('../../utils/validateOptions');
const ruleName = 'max-nesting-depth';
const messages = ruleMessages(ruleName, {
expected: (depth) => `Expected nesting depth to be no more than ${depth}`,
});
function rule(max, options) {
const isIgnoreAtRule = (node) =>
node.type === 'atrule' && optionsMatches(options, 'ignoreAtRules', node.name);
return (root, result) => {
validateOptions(
result,
ruleName,
{
actual: max,
possible: [_.isNumber],
},
{
optional: true,
actual: options,
possible: {
ignore: ['blockless-at-rules', 'pseudo-classes'],
ignoreAtRules: [_.isString, _.isRegExp],
},
},
);
root.walkRules(checkStatement);
root.walkAtRules(checkStatement);
function checkStatement(statement) {
if (isIgnoreAtRule(statement)) {
return;
}
if (!hasBlock(statement)) {
return;
}
if (statement.selector && !isStandardSyntaxRule(statement)) {
return;
}
const depth = nestingDepth(statement);
if (depth > max) {
report({
ruleName,
result,
node: statement,
message: messages.expected(max),
});
}
}
};
function nestingDepth(node, level = 0) {
const parent = node.parent;
if (isIgnoreAtRule(parent)) {
return 0;
}
// The nesting depth level's computation has finished
// when this function, recursively called, receives
// a node that is not nested -- a direct child of the
// root node
if (parent.type === 'root' || (parent.type === 'atrule' && parent.parent.type === 'root')) {
return level;
}
function containsPseudoClassesOnly(selector) {
const normalized = parser().processSync(selector, { lossless: false });
const selectors = normalized.split(',');
return selectors.every((sel) => sel.startsWith('&:') && sel[2] !== ':');
}
if (
(optionsMatches(options, 'ignore', 'blockless-at-rules') &&
node.type === 'atrule' &&
node.every((child) => child.type !== 'decl')) ||
(optionsMatches(options, 'ignore', 'pseudo-classes') &&
node.type === 'rule' &&
containsPseudoClassesOnly(node.selector))
) {
return nestingDepth(parent, level);
}
// Unless any of the conditions above apply, we want to
// add 1 to the nesting depth level and then check the parent,
// continuing to add and move up the hierarchy
// until we hit the root node
return nestingDepth(parent, level + 1);
}
}
rule.ruleName = ruleName;
rule.messages = messages;
module.exports = rule;