Merge 2ceb1a4 into 6151743

stylelint-scss · Jul 17, 2021 · 6226e6d · 6226e6d
2 parents 6151743 + 2ceb1a4
commit 6226e6d
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 15 deletions.
diff --git a/src/rules/dollar-variable-first-in-block/README.md b/src/rules/dollar-variable-first-in-block/README.md
@@ -9,7 +9,7 @@ Require `$`-variable declarations to be placed first in a block (root or a rule)
 The following patterns are considered violations:
 
 ```scss
-@import '1.css';
+@import "1.css";
 $var: 200px;
 ```
 
@@ -20,11 +20,11 @@ a {
 }
 ```
 
-The following patterns are *not* considered warnings:
+The following patterns are _not_ considered warnings:
 
 ```scss
 $var: 100px;
-@import '1.css';
+@import "1.css";
 ```
 
 ```scss
@@ -40,7 +40,7 @@ a {
 
 ### `"comments"`
 
-The following patterns are *not* considered violations:
+The following patterns are _not_ considered violations:
 
 ```scss
 // Comment
@@ -57,30 +57,41 @@ a {
 
 ### `"imports"`
 
-The following patterns are *not* considered violations:
+The following patterns are _not_ considered violations:
 
 ```scss
-@import '1.css';
+@import "1.css";
 $var: 1;
 ```
 
+```scss
+@use "sass:color";
+$primary-color: #f26e21 !default;
+$secondary-color: color.change($primary-color, $alpha: 0.08) !default;
+```
+
+```scss
+@forward "src/list";
+$var1: 100px;
+```
+
 ### `except: ["root", "at-rule", "function", "mixin", "if-else", "loops"]`
 
 ### `"root"`
 
-The following patterns are *not* considered warnings:
+The following patterns are _not_ considered warnings:
 
 ```scss
 // Imports
-@import '1.css';
+@import "1.css";
 
 // Variables
 $var: 1;
 ```
 
 ```scss
 /* Imports */
-@import '1.css';
+@import "1.css";
 // Variables
 $var1: 1;
 $var2: 1;
@@ -92,7 +103,7 @@ a {
 
 ### `"at-rule"`
 
-The following patterns are *not* considered warnings:
+The following patterns are _not_ considered warnings:
 
 ```scss
 @at-root .class {
@@ -103,7 +114,7 @@ The following patterns are *not* considered warnings:
 
 ### `"function"`
 
-The following patterns are *not* considered warnings:
+The following patterns are _not_ considered warnings:
 
 ```scss
 @function function-name($numbers1, $numbers2) {
@@ -125,7 +136,7 @@ The following patterns are *not* considered warnings:
 
 ### `"mixin"`
 
-The following patterns are *not* considered warnings:
+The following patterns are _not_ considered warnings:
 
 ```scss
 @mixin mixin-name {
@@ -137,7 +148,7 @@ The following patterns are *not* considered warnings:
 
 ### `"if-else"`
 
-The following patterns are *not* considered warnings:
+The following patterns are _not_ considered warnings:
 
 ```scss
 @if $direction == up {
@@ -167,7 +178,7 @@ The following patterns are *not* considered warnings:
 
 ### `"loops"`
 
-The following patterns are *not* considered warnings:
+The following patterns are _not_ considered warnings:
 
 ```scss
 @each $size in $sizes {

diff --git a/src/rules/dollar-variable-first-in-block/__tests__/index.js b/src/rules/dollar-variable-first-in-block/__tests__/index.js
@@ -242,6 +242,51 @@ testRule(rule, {
       message: messages.expected,
       line: 3,
       column: 7
+    },
+    {
+      code: `
+      @import '1.css';
+      $var1: 100px;
+
+      a { }
+    `,
+      description: "$var in root, preceded by import, followed by selector.",
+      message: messages.expected,
+      line: 3,
+      column: 7
+    },
+    {
+      code: `
+      @import '1.css';
+      $var1: 100px;
+    `,
+      description: "$var in root, preceded by import.",
+      message: messages.expected,
+      line: 3,
+      column: 7
+    },
+    {
+      code: `
+      @use "sass:color";
+
+      $primary-color: #f26e21 !default;
+      $secondary-color: color.change($primary-color, $alpha: 0.08) !default;
+    `,
+      description: "variables in root, preceded by @use.",
+      message: messages.expected,
+      line: 4,
+      column: 7
+    },
+    {
+      code: `
+      @forward "src/list";
+
+      $var1: 100px;
+    `,
+      description: "$var in root, preceded by @forward.",
+      message: messages.expected,
+      line: 4,
+      column: 7
     }
   ]
 });
@@ -416,6 +461,23 @@ testRule(rule, {
       $var1: 100px;
     `,
       description: "$var in root, preceded by import."
+    },
+    {
+      code: `
+      @use "sass:color";
+
+      $primary-color: #f26e21 !default;
+      $secondary-color: color.change($primary-color, $alpha: 0.08) !default;
+    `,
+      description: "variables in root, preceded by @use."
+    },
+    {
+      code: `
+      @forward "src/list";
+
+      $var1: 100px;
+    `,
+      description: "$var in root, preceded by @forward."
     }
   ],
 

diff --git a/src/rules/dollar-variable-first-in-block/index.js b/src/rules/dollar-variable-first-in-block/index.js
@@ -4,6 +4,7 @@ import {
   optionsHaveIgnored
 } from "../../utils";
 import { utils } from "stylelint";
+import { includes } from "lodash";
 
 export const ruleName = namespace("dollar-variable-first-in-block");
 
@@ -81,6 +82,7 @@ export default function(primary, options) {
       let precededOnlyByAllowed = true;
       const allowComments = optionsHaveIgnored(options, "comments");
       const allowImports = optionsHaveIgnored(options, "imports");
+      const importAtRules = ["import", "use", "forward"];
 
       for (const sibling of decl.parent.nodes) {
         if (sibling === decl) {
@@ -91,7 +93,7 @@ export default function(primary, options) {
             (allowComments && sibling.type === "comment") ||
             (allowImports &&
               sibling.type === "atrule" &&
-              sibling.name === "import")
+              includes(importAtRules, sibling.name))
           )
         ) {
           precededOnlyByAllowed = false;