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.

Sign up for GitHub

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

Jump to bottom

Add ignoreAtRules option to no-invalid-position-at-import #5520

Merged
merged 6 commits into from Sep 15, 2021
Merged

Add ignoreAtRules option to no-invalid-position-at-import #5520

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ed5fc57
Add ignoreAtRules option to no-invalid-position-at-import
sylwia-lask Sep 10, 2021
880e1b1
Apply suggestions from code review
sylwia-lask Sep 14, 2021
d37bbc8
Update lib/rules/no-invalid-position-at-import-rule/README.md
sylwia-lask Sep 14, 2021
f99c335
Move non-standard test rules to the bottom
sylwia-lask Sep 14, 2021
e3248d0
Update lib/rules/no-invalid-position-at-import-rule/__tests__/index.js
sylwia-lask Sep 14, 2021
70176e5
Put all conditions together
sylwia-lask Sep 14, 2021
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
30 changes: 30 additions & 0 deletions lib/rules/no-invalid-position-at-import-rule/README.md
View file
Open in desktop
Expand Up @@ -49,3 +49,33 @@ a {}
@charset 'utf-8';
@import 'foo.css';
```

## Optional secondary options

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

Given:

```json
["/^my-/", "custom"]
```

The following patterns are _not_ considered violations:

<!-- prettier-ignore -->
```css
@my-at-rule "x.css";
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
@import "styles.css";
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
```

<!-- prettier-ignore -->
```css
@my-other-at-rule {}
@import "styles.css";
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
```

<!-- prettier-ignore -->
```css
@custom "import.css";
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
@import "styles.css"
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
```
53 changes: 53 additions & 0 deletions lib/rules/no-invalid-position-at-import-rule/__tests__/index.js
View file
Open in desktop
Expand Up @@ -149,3 +149,56 @@ testRule({
},
],
});

testRule({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move this above the previous testRule as we tend to put non-standard tests last.

ruleName,
config: [true, { ignoreAtRules: ['use', '/^my-/', /foo/] }],
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved

accept: [
{
code: stripIndent`
@use 'bar.scss';
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
@import 'foo.css';
`,
description: 'ignored atRule at the beggining - equal string',
},
{
code: stripIndent`
@foofoo 'bar.scss';
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
@import 'foo.css';
`,
description: 'ignored atRule at the beggining - match regExp',
},
{
code: stripIndent`
@my-custom-rule {};
@import 'foo.css';
`,
description: 'ignored atRule at the beggining - match regExp',
},
],

reject: [
{
code: stripIndent`
@bar 'bar.scss';
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
@import 'foo.css';
`,
message: messages.rejected,
description: 'atRule does not match the pattern',
line: 2,
column: 1,
},
{
code: stripIndent`
@use 'bar.css';
@bar 'bar.scss';
sylwia-lask marked this conversation as resolved.
Show resolved Hide resolved
@import 'foo.css';
`,
message: messages.rejected,
description: 'one of atRules before @import does not match the pattern',
line: 3,
column: 1,
},
],
});
21 changes: 19 additions & 2 deletions lib/rules/no-invalid-position-at-import-rule/index.js
View file
Open in desktop
Expand Up @@ -4,19 +4,32 @@

const isStandardSyntaxAtRule = require('../../utils/isStandardSyntaxAtRule');
const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
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 = 'no-invalid-position-at-import-rule';

const messages = ruleMessages(ruleName, {
rejected: 'Unexpected invalid position @import rule',
});

function rule(actual) {
function rule(actual, options) {
return (root, result) => {
const validOptions = validateOptions(result, ruleName, { actual });
const validOptions = validateOptions(
result,
ruleName,
{ actual },
{
actual: options,
possible: {
ignoreAtRules: [isString, isRegExp],
},
optional: true,
},
);

if (!validOptions) {
return;
Expand All @@ -27,6 +40,10 @@ function rule(actual) {
root.walk((node) => {
const nodeName = node.name && node.name.toLowerCase();

if (node.type === 'atrule' && optionsMatches(options, 'ignoreAtRules', node.name)) {
Copy link
Member

@jeddy3 jeddy3 Sep 14, 2021 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall we move this into the conditional below to keep everything together, i.e.:

if (
	(node.type === 'atrule' &&
		nodeName !== 'charset' &&
		nodeName !== 'import' &&
		!optionsMatches(options, 'ignoreAtRules', node.name) &&
		isStandardSyntaxAtRule(node)) ||
	(node.type === 'rule' && isStandardSyntaxRule(node))
) {
	invalidPosition = true;

	return;
}

You're right to use node.name rather than nodeName as the ignore* options are case sensitive, and people can use a regex with the i flag if they want case insensitivity.

Incidentally, I wonder whether this rule can be refactored to avoid walking every node. Instead, walking just import at rules, and whether that'll affect performance or not. One for another time, though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, maybe it's worth to refactor that rule. For now I've changed it as you suggest - put every contition together

return;
}

if (
(node.type === 'atrule' &&
nodeName !== 'charset' &&
Expand Down