Add no-invalid-position-at-import-rule #5202

chuuddo · 2021-03-18T20:34:06Z

Which issue, if any, is this issue related to?

Closes #5133.

Is there anything in the PR that needs further explanation?

No, it's self-explanatory.

lib/rules/no-invalid-position-at-import-rule/index.js

lib/rules/no-invalid-position-at-import-rule/__tests__/index.js

jeddy3

@chuuddo Thank you for your first contribution. The pull request is looking good! It's great to see the naming conventions being followed too.

I've made some requests.

docs/user-guide/rules/list.md

lib/rules/no-invalid-position-at-import-rule/README.md

lib/rules/no-invalid-position-at-import-rule/index.js

lib/rules/no-invalid-position-at-import-rule/__tests__/index.js

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

jeddy3

Thanks for making the changes!

One last request, then it looks good to me.

lib/rules/no-invalid-position-at-import-rule/README.md

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

jeddy3

Thanks! LGTM.

voskresla

thx!

ybiquitous

LGTM! 👍
I've left some trivial comments, but this PR is sufficient. 😄

lib/rules/no-invalid-position-at-import-rule/README.md

ybiquitous · 2021-03-23T00:21:01Z

lib/rules/no-invalid-position-at-import-rule/index.js

+			if (node.type === 'comment' || (node.type === 'atrule' && /^charset$/i.test(node.name))) {
+				return;
+			}
+
+			if (node.type === 'atrule' && /^import$/i.test(node.name)) {


[IMO] It seems a bit readable to me if using toLowerCase. But this is just my opinion, so you can ignore it. 😃

Suggested change

if (node.type === 'comment' || (node.type === 'atrule' && /^charset$/i.test(node.name))) {

return;

}

if (node.type === 'atrule' && /^import$/i.test(node.name)) {

const nodeName = node.name.toLowerCase();

if (node.type === 'comment' || (node.type === 'atrule' && nodeName === 'charset')) {

return;

}

if (node.type === 'atrule' && nodeName === 'import') {

Suggestion looks suitable. Just made some research and toLowerCase() used much more often in rules.
@jeddy3 what do you think about it? Do we have any convention on this or should create one if not?

I had the same thought about toLowerCase as @ybiquitous when I was first reviewing the pull request as we've used that approach in loads of places. However, the regex approach sort of grew on me because we use it for filtering at-rules and declarations when walking (like we did in the last rule we added), so I didn't mention it.

Do we have any convention on this or should create one if not?

I'm all for conventions, especially within rules, because they're such a time saver when reviewing code.

I'm not sure which of the approaches is more readable, though. So, let's go with @ybiquitous's toLowerCase suggestion for now to be consistent with how we're treating names and values in other rules. We can then, if we want, refactor across the board later down the line.

Following on, we'll probably stick with toLowerCase (for names and values) because (having looked myself) we often:

do more string manipulation at the same time, e.g. trimming and slicing

look for matches in arrays and sets

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

jeddy3 · 2021-03-26T09:47:17Z

Changelog entry added:

Added: no-invalid-position-at-import-rule rule (#5202).

XhmikosR · 2021-04-27T12:09:51Z

@jeddy3 just wondering, should this handle scss files too? Trying to figure out where I should report any issues https://github.com/twbs/stylelint-config-twbs-bootstrap/pull/110/checks?check_run_id=2447711414

jeddy3 · 2021-04-27T12:16:48Z

@XhmikosR What SCSS code is triggering those errors?

XhmikosR · 2021-04-27T12:34:43Z

@jeddy3:

jeddy3 · 2021-04-27T13:22:00Z

I think we can rejig the rule so that it ignores non-standard syntax (like dollar variables) while being true to the spec that the rule enforces:

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset), or else the @import rule is invalid. [Emphasis mine]

@XhmikosR Can you create a bug ticket here in stylelint, please?

XhmikosR · 2021-04-27T13:27:03Z

Done, see #5263. Thanks :)

jeddy3 · 2021-05-01T11:14:17Z

@XhmikosR Fixed in 13.13.1.

XhmikosR · 2021-05-01T11:26:26Z

Thanks!

XhmikosR · 2021-05-01T13:34:37Z

@jeddy3 should this also be fixed here?

Sorry for not catching this earlier, I just updated to the latest versions.

jeddy3 · 2021-05-01T17:48:18Z

should this also be fixed here?

Nope. That's the pattern the rule is warning against.

I recommend moving that code into another file and importing it, e.g. @import reset, if you'd like to closer align with the CSS specs.

Alternatively, if you don't want to align, you can use /* stylelint-disable no-invalid-position-at-import-rule */ to disable the rule for that section of code, or turn off the rule entirely.

ybiquitous · 2021-05-02T02:49:38Z

I agree with @jeddy3.

Besides, it looks like out of this PR scope, but it seems good to me to migrate @import to @use because:

The Sass team discourages the continued use of the @import rule.

-- https://sass-lang.com/documentation/at-rules/import

XhmikosR · 2021-05-02T07:06:37Z

@jeddy3 Thanks, I'll just ignore the warnings in the v4-dev branch 👍

@ybiquitous That's a different thing which we can't do for v4 because it's a breaking change.

add no-invalid-position-at-import-rule

b498c0c

voskresla reviewed Mar 20, 2021

View reviewed changes

lib/rules/no-invalid-position-at-import-rule/index.js Outdated Show resolved Hide resolved

lib/rules/no-invalid-position-at-import-rule/__tests__/index.js Outdated Show resolved Hide resolved

voskresla reviewed Mar 20, 2021

View reviewed changes

lib/rules/no-invalid-position-at-import-rule/__tests__/index.js Show resolved Hide resolved

jeddy3 requested changes Mar 21, 2021

View reviewed changes

jeddy3 added the pr: needs revision label Mar 21, 2021

chuuddo and others added 6 commits March 21, 2021 14:22

Update lib/rules/no-invalid-position-at-import-rule/README.md

1e3a407

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

Update docs/user-guide/rules/list.md

3c34558

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

Update lib/rules/no-invalid-position-at-import-rule/README.md

44d7556

remove url from violation message

27e4fb8

add stripIndent in test cases

89f70d1

add more tests

77bf542

chuuddo requested a review from jeddy3 March 21, 2021 11:37

jeddy3 requested changes Mar 21, 2021

View reviewed changes

lib/rules/no-invalid-position-at-import-rule/README.md Show resolved Hide resolved

Update lib/rules/no-invalid-position-at-import-rule/README.md

5f3d454

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

jeddy3 approved these changes Mar 21, 2021

View reviewed changes

jeddy3 removed the pr: needs revision label Mar 21, 2021

voskresla approved these changes Mar 22, 2021

View reviewed changes

ybiquitous approved these changes Mar 23, 2021

View reviewed changes

chuuddo and others added 2 commits March 23, 2021 23:05

use toLowerCase() for case insensitive string comparison

c2ff6b1

Update lib/rules/no-invalid-position-at-import-rule/README.md

9eaee88

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

ybiquitous approved these changes Mar 23, 2021

View reviewed changes

jeddy3 merged commit 3dfa452 into stylelint:master Mar 26, 2021

XhmikosR mentioned this pull request Apr 27, 2021

Fix false positives for dollar variables in no-invalid-position-at-import-rule #5263

Closed

ybiquitous mentioned this pull request May 7, 2021

Add no-invalid-position-at-import-rule #5133

Closed

vsumner mentioned this pull request May 10, 2021

Update stylelint to 13.13.1 Shopify/web-configs#248

Closed

4 tasks

jeddy3 mentioned this pull request Aug 24, 2021

Add ignoreAtRules: [] to no-invalid-position-at-import-rule #5492

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add no-invalid-position-at-import-rule #5202

Add no-invalid-position-at-import-rule #5202

chuuddo commented Mar 18, 2021

jeddy3 left a comment

jeddy3 left a comment

jeddy3 left a comment

voskresla left a comment

ybiquitous left a comment

ybiquitous Mar 23, 2021

chuuddo Mar 23, 2021

jeddy3 Mar 23, 2021

jeddy3 Mar 23, 2021 •

edited

jeddy3 commented Mar 26, 2021

XhmikosR commented Apr 27, 2021

jeddy3 commented Apr 27, 2021 •

edited

XhmikosR commented Apr 27, 2021

jeddy3 commented Apr 27, 2021 •

edited

XhmikosR commented Apr 27, 2021

jeddy3 commented May 1, 2021

XhmikosR commented May 1, 2021

XhmikosR commented May 1, 2021 •

edited

jeddy3 commented May 1, 2021 •

edited

ybiquitous commented May 2, 2021

XhmikosR commented May 2, 2021

-			if (node.type === 'comment' || (node.type === 'atrule' && /^charset$/i.test(node.name))) {
-				return;
-			}
-			if (node.type === 'atrule' && /^import$/i.test(node.name)) {
+			const nodeName = node.name.toLowerCase();
+			if (node.type === 'comment' || (node.type === 'atrule' && nodeName === 'charset')) {
+				return;
+			}
+			if (node.type === 'atrule' && nodeName === 'import') {

Add no-invalid-position-at-import-rule #5202

Add no-invalid-position-at-import-rule #5202

Conversation

chuuddo commented Mar 18, 2021

jeddy3 left a comment

Choose a reason for hiding this comment

jeddy3 left a comment

Choose a reason for hiding this comment

jeddy3 left a comment

Choose a reason for hiding this comment

voskresla left a comment

Choose a reason for hiding this comment

ybiquitous left a comment

Choose a reason for hiding this comment

ybiquitous Mar 23, 2021

Choose a reason for hiding this comment

chuuddo Mar 23, 2021

Choose a reason for hiding this comment

jeddy3 Mar 23, 2021

Choose a reason for hiding this comment

jeddy3 Mar 23, 2021 • edited

Choose a reason for hiding this comment

jeddy3 commented Mar 26, 2021

XhmikosR commented Apr 27, 2021

jeddy3 commented Apr 27, 2021 • edited

XhmikosR commented Apr 27, 2021

jeddy3 commented Apr 27, 2021 • edited

XhmikosR commented Apr 27, 2021

jeddy3 commented May 1, 2021

XhmikosR commented May 1, 2021

XhmikosR commented May 1, 2021 • edited

jeddy3 commented May 1, 2021 • edited

ybiquitous commented May 2, 2021

XhmikosR commented May 2, 2021

jeddy3 Mar 23, 2021 •

edited

jeddy3 commented Apr 27, 2021 •

edited

jeddy3 commented Apr 27, 2021 •

edited

XhmikosR commented May 1, 2021 •

edited

jeddy3 commented May 1, 2021 •

edited