Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add annotation-no-unknown #6155

Merged
merged 8 commits into from
Jun 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/user-guide/rules/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ Within each cateogory, the rules are grouped by the [_thing_](http://apps.workfl

## Avoid errors

### Annotation

- [`annotation-no-unknown`](../../../lib/rules/annotation-no-unknown/README.md): Disallow unknown annotations.

### Color

- [`color-no-invalid-hex`](../../../lib/rules/color-no-invalid-hex/README.md): Disallow invalid hex colors.
Expand Down
60 changes: 60 additions & 0 deletions lib/rules/annotation-no-unknown/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# annotation-no-unknown

Disallow unknown annotations.

<!-- prettier-ignore -->
```css
a { color: green !imprtant; }
/** ↑
* This annotation */
```

This rule considers annotations defined in the CSS Specifications, up to and including Editor's Drafts, to be known.

## Options

### `true`

The following pattern is considered a problem:

<!-- prettier-ignore -->
```css
a {
color: green !imprtant;
}
```

The following pattern is _not_ considered problem:

<!-- prettier-ignore -->
```css
a {
color: green !important;
}
```

## Optional secondary options

### `ignoreAnnotations: ["/regex/", /regex/, "string"]`

Given:

```json
["/^--foo-/", "--bar"]
```

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```css
a {
color: green !--foo--bar;
}
```

<!-- prettier-ignore -->
```css
a {
color: green !--bar;
}
```
58 changes: 58 additions & 0 deletions lib/rules/annotation-no-unknown/__tests__/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
'use strict';

const { messages, ruleName } = require('..');

testRule({
ruleName,
config: [
true,
{
ignoreAnnotations: ['/^--foo-/', '--bar'],
},
],

accept: [
{
code: 'a { color: green !important; }',
},
{
code: 'a { color: green !IMPORTANT; }',
},
{
code: 'a { color: green !ImPoRtAnT; }',
},
{
code: 'a { color: green !--foo--bar; }',
},
{
code: 'a { color: green !--bar; }',
},
],

reject: [
{
code: 'a { color: green !imprtant }',
message: messages.rejected('!imprtant'),
line: 1,
column: 18,
endLine: 1,
endColumn: 27,
},
{
code: 'a { color: green !IMPRTANT }',
message: messages.rejected('!IMPRTANT'),
line: 1,
column: 18,
endLine: 1,
endColumn: 27,
},
{
code: 'a { color: green !ImPrTaNt }',
message: messages.rejected('!ImPrTaNt'),
line: 1,
column: 18,
endLine: 1,
endColumn: 27,
},
],
});
86 changes: 86 additions & 0 deletions lib/rules/annotation-no-unknown/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
'use strict';

const valueParser = require('postcss-value-parser');

const getDeclarationValue = require('../../utils/getDeclarationValue');
const optionsMatches = require('../../utils/optionsMatches');
const report = require('../../utils/report');
const ruleMessages = require('../../utils/ruleMessages');
const validateOptions = require('../../utils/validateOptions');
const { isRegExp, isString } = require('../../utils/validateTypes');

const ruleName = 'annotation-no-unknown';

const messages = ruleMessages(ruleName, {
rejected: (annotation) => `Unexpected unknown annotation "${annotation}"`,
});

const meta = {
url: 'https://stylelint.io/user-guide/rules/list/annotation-no-unknown',
};

/** @type {import('stylelint').Rule} */
const rule = (primary, secondaryOptions) => {
return (root, result) => {
const validOptions = validateOptions(
result,
ruleName,
{ actual: primary },
{
actual: secondaryOptions,
possible: {
ignoreAnnotations: [isString, isRegExp],
},
optional: true,
},
);

if (!validOptions) {
return;
}

root.walkDecls(checkStatement);

/**
* @param {import('postcss').Declaration} decl
*/
function checkStatement(decl) {
mattxwang marked this conversation as resolved.
Show resolved Hide resolved
if (decl.important) return;

if (!decl.value.includes('!')) return;
mattxwang marked this conversation as resolved.
Show resolved Hide resolved

const parsedValue = valueParser(getDeclarationValue(decl));

parsedValue.walk((node) => {
if (!isAnnotation(node)) return;

const value = node.value;
const tokenValue = value.slice(1);

if (optionsMatches(secondaryOptions, 'ignoreAnnotations', tokenValue)) {
return;
mattxwang marked this conversation as resolved.
Show resolved Hide resolved
}

report({
message: messages.rejected(value),
node: decl,
result,
ruleName,
word: value,
});
});
}

/**
* @param {valueParser.Node} node
*/
function isAnnotation(node) {
return node.type === 'word' && node.value.startsWith('!');
}
};
};

rule.ruleName = ruleName;
rule.messages = messages;
rule.meta = meta;
module.exports = rule;
1 change: 1 addition & 0 deletions lib/rules/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const importLazy = _importLazy(require);
/** @type {typeof import('stylelint').rules} */
const rules = {
'alpha-value-notation': importLazy('./alpha-value-notation'),
'annotation-no-unknown': importLazy('./annotation-no-unknown'),
'at-rule-allowed-list': importLazy('./at-rule-allowed-list'),
'at-rule-disallowed-list': importLazy('./at-rule-disallowed-list'),
'at-rule-empty-line-before': importLazy('./at-rule-empty-line-before'),
Expand Down