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
+138
View File
@@ -0,0 +1,138 @@
# selector-max-specificity
Limit the specificity of selectors.
<!-- prettier-ignore -->
```css
.foo, #bar.baz span, #hoo { color: pink; }
/** ↑ ↑ ↑
* Each of these selectors */
```
Visit the [Specificity Calculator](https://specificity.keegan.st) for visual representation of selector specificity.
This rule ignores selectors with variable interpolation (`#{$var}`, `@{var}`, `$(var)`).
This rule resolves nested selectors before counting the specificity of a selector. Each selector in a [selector list](https://www.w3.org/TR/selectors4/#selector-list) is evaluated separately.
## Options
`string`: Maximum specificity allowed.
Format is `"id,class,type"`, as laid out in the [W3C selector spec](https://drafts.csswg.org/selectors/#specificity-rules).
For example, with `"0,2,0"`:
The following patterns are considered violations:
<!-- prettier-ignore -->
```css
#foo {}
```
<!-- prettier-ignore -->
```css
.foo .baz .bar {}
```
<!-- prettier-ignore -->
```css
.foo .baz {
& .bar {}
}
```
<!-- prettier-ignore -->
```css
.foo {
color: red;
@nest .baz .bar & {
color: blue;
}
}
```
The following patterns are _not_ considered violations:
<!-- prettier-ignore -->
```css
div {}
```
<!-- prettier-ignore -->
```css
.foo div {}
```
<!-- prettier-ignore -->
```css
.foo div {
& div a {}
}
```
<!-- prettier-ignore -->
```css
.foo {
& .baz {}
}
```
<!-- prettier-ignore -->
```css
.foo {
color: red;
@nest .baz & {
color: blue;
}
}
```
## Optional secondary options
### `ignoreSelectors: ["/regex/", /regex/, "string"]`
Given:
```
[
"0,2,0",
{
ignoreSelectors: [":global", ":local", "/my-/"]
}
]
```
The following patterns are _not_ considered violations:
<!-- prettier-ignore -->
```css
:global(.foo) .bar {}
```
<!-- prettier-ignore -->
```css
:local(.foo.bar)
```
<!-- prettier-ignore -->
```css
:local(.foo, :global(.bar).baz)
```
The following patterns are considered violations:
<!-- prettier-ignore -->
```css
:global(.foo) .bar.baz {}
```
<!-- prettier-ignore -->
```css
:local(.foo.bar.baz)
```
<!-- prettier-ignore -->
```css
:local(.foo, :global(.bar), .foo.bar.baz)
```
+182
View File
@@ -0,0 +1,182 @@
// @ts-nocheck
'use strict';
const _ = require('lodash');
const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
const isStandardSyntaxSelector = require('../../utils/isStandardSyntaxSelector');
const keywordSets = require('../../reference/keywordSets');
const optionsMatches = require('../../utils/optionsMatches');
const parseSelector = require('../../utils/parseSelector');
const report = require('../../utils/report');
const resolvedNestedSelector = require('postcss-resolve-nested-selector');
const ruleMessages = require('../../utils/ruleMessages');
const specificity = require('specificity');
const validateOptions = require('../../utils/validateOptions');
const ruleName = 'selector-max-specificity';
const messages = ruleMessages(ruleName, {
expected: (selector, max) => `Expected "${selector}" to have a specificity no more than "${max}"`,
});
// Return an array representation of zero specificity. We need a new array each time so that it can mutated
const zeroSpecificity = () => [0, 0, 0, 0];
// Calculate the sum of given array of specificity arrays
const specificitySum = (specificities) => {
const sum = zeroSpecificity();
specificities.forEach((specificityArray) => {
specificityArray.forEach((value, i) => {
sum[i] += value;
});
});
return sum;
};
function rule(max, options) {
return (root, result) => {
const validOptions = validateOptions(
result,
ruleName,
{
actual: max,
possible: [
// Check that the max specificity is in the form "a,b,c"
(spec) => /^\d+,\d+,\d+$/.test(spec),
],
},
{
actual: options,
possible: {
ignoreSelectors: [_.isString, _.isRegExp],
},
optional: true,
},
);
if (!validOptions) {
return;
}
// Calculate the specificity of a simple selector (type, attribute, class, ID, or pseudos's own value)
const simpleSpecificity = (selector) => {
if (optionsMatches(options, 'ignoreSelectors', selector)) {
return zeroSpecificity();
}
return specificity.calculate(selector)[0].specificityArray;
};
// Calculate the the specificity of the most specific direct child
const maxChildSpecificity = (node) =>
node.reduce((maxSpec, child) => {
const childSpecificity = nodeSpecificity(child); // eslint-disable-line no-use-before-define
return specificity.compare(childSpecificity, maxSpec) === 1 ? childSpecificity : maxSpec;
}, zeroSpecificity());
// Calculate the specificity of a pseudo selector including own value and children
const pseudoSpecificity = (node) => {
// `node.toString()` includes children which should be processed separately,
// so use `node.value` instead
const ownValue = node.value;
const ownSpecificity =
ownValue === ':not' || ownValue === ':matches'
? // :not and :matches don't add specificity themselves, but their children do
zeroSpecificity()
: simpleSpecificity(ownValue);
return specificitySum([ownSpecificity, maxChildSpecificity(node)]);
};
const shouldSkipPseudoClassArgument = (node) => {
// postcss-selector-parser includes the arguments to nth-child() functions
// as "tags", so we need to ignore them ourselves.
// The fake-tag's "parent" is actually a selector node, whose parent
// should be the :nth-child pseudo node.
const parentNode = node.parent.parent;
if (parentNode && parentNode.value) {
const parentNodeValue = parentNode.value;
const normalisedParentNode = parentNodeValue.toLowerCase().replace(/:+/, '');
return (
parentNode.type === 'pseudo' &&
(keywordSets.aNPlusBNotationPseudoClasses.has(normalisedParentNode) ||
keywordSets.linguisticPseudoClasses.has(normalisedParentNode))
);
}
return false;
};
// Calculate the specificity of a node parsed by `postcss-selector-parser`
const nodeSpecificity = (node) => {
if (shouldSkipPseudoClassArgument(node)) {
return zeroSpecificity();
}
switch (node.type) {
case 'attribute':
case 'class':
case 'id':
case 'tag':
return simpleSpecificity(node.toString());
case 'pseudo':
return pseudoSpecificity(node);
case 'selector':
// Calculate the sum of all the direct children
return specificitySum(node.map(nodeSpecificity));
default:
return zeroSpecificity();
}
};
const maxSpecificityArray = `0,${max}`.split(',').map(parseFloat);
root.walkRules((ruleNode) => {
if (!isStandardSyntaxRule(ruleNode)) {
return;
}
// Using `.selectors` gets us each selector in the eventuality we have a comma separated set
ruleNode.selectors.forEach((selector) => {
resolvedNestedSelector(selector, ruleNode).forEach((resolvedSelector) => {
try {
// Skip non-standard syntax selectors
if (!isStandardSyntaxSelector(resolvedSelector)) {
return;
}
parseSelector(resolvedSelector, result, ruleNode, (selectorTree) => {
// Check if the selector specificity exceeds the allowed maximum
if (
specificity.compare(maxChildSpecificity(selectorTree), maxSpecificityArray) === 1
) {
report({
ruleName,
result,
node: ruleNode,
message: messages.expected(resolvedSelector, max),
word: selector,
});
}
});
} catch {
result.warn('Cannot parse selector', {
node: ruleNode,
stylelintType: 'parseError',
});
}
});
});
});
};
}
rule.ruleName = ruleName;
rule.messages = messages;
module.exports = rule;