Repository: stylelint-scss/stylelint-scss (js)

Issue:
`scss/media-feature-value-dollar-variable` false positive for variables in the form of `module.$var` when using sass modules `@use ...`
Hi everyone,

SCSS code:

```scss
@use "./variables";

@media (max-width: variables.$val) { 
  a { color: red; } 
}
```

stylelintrc config:

```json
{
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "scss/media-feature-value-dollar-variable": "always"
  },
  "customSyntax": "postcss-scss"
}
```

Error:

```text
3:20  ✖  Expected a dollar-variable (e.g. $var) to be used as a media feature value  scss/media-feature-value-dollar-variable
```

I would expect when using sass variables via the module syntax the rule still sees this as using a $ variable.


Minimal repo to reproduce: https://github.com/mbehzad/scss-media-feature-value-dollar-variable-issue

Cheers

Pull request description:
media-feature-value-dollar-variable: support @use
Fixes #714

Patch:
diff --git a/package-lock.json b/package-lock.json
index 3fcb6c9..3ea445f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2957,17 +2957,6 @@
         "string-width": "^4.1.0"
       }
     },
-    "node_modules/ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -4267,20 +4256,6 @@
         "once": "^1.4.0"
       }
     },
-    "node_modules/enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-colors": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -4321,9 +4296,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz",
+      "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.3.3",
@@ -5302,9 +5277,9 @@
       }
     },
     "node_modules/husky": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.1.tgz",
-      "integrity": "sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.2.tgz",
+      "integrity": "sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg==",
       "dev": true,
       "bin": {
         "husky": "lib/bin.js"
@@ -5329,9 +5304,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
+      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -8952,9 +8927,9 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -8967,24 +8942,24 @@
       "dev": true
     },
     "node_modules/lint-staged": {
-      "version": "13.0.3",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.0.3.tgz",
-      "integrity": "sha512-9hmrwSCFroTSYLjflGI8Uk+GWAwMB4OlpU4bMJEAT5d/llQwtYKoim4bLOyLCuWFAhWEupE0vkIFqtw/WIsPug==",
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.1.0.tgz",
+      "integrity": "sha512-pn/sR8IrcF/T0vpWLilih8jmVouMlxqXxKuAojmbiGX5n/gDnz+abdPptlj0vYnbfE0SQNl3CY/HwtM0+yfOVQ==",
       "dev": true,
       "dependencies": {
         "cli-truncate": "^3.1.0",
-        "colorette": "^2.0.17",
-        "commander": "^9.3.0",
+        "colorette": "^2.0.19",
+        "commander": "^9.4.1",
         "debug": "^4.3.4",
         "execa": "^6.1.0",
-        "lilconfig": "2.0.5",
-        "listr2": "^4.0.5",
+        "lilconfig": "2.0.6",
+        "listr2": "^5.0.5",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-inspect": "^1.12.2",
         "pidtree": "^0.6.0",
         "string-argv": "^0.3.1",
-        "yaml": "^2.1.1"
+        "yaml": "^2.1.3"
       },
       "bin": {
         "lint-staged": "bin/lint-staged.js"
@@ -8997,9 +8972,9 @@
       }
     },
     "node_modules/lint-staged/node_modules/commander": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.3.0.tgz",
-      "integrity": "sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==",
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.1.tgz",
+      "integrity": "sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==",
       "dev": true,
       "engines": {
         "node": "^12.20.0 || >=14"
@@ -9116,9 +9091,9 @@
       }
     },
     "node_modules/lint-staged/node_modules/yaml": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
-      "integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.3.tgz",
+      "integrity": "sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==",
       "dev": true,
       "engines": {
         "node": ">= 14"
@@ -9535,22 +9510,22 @@
       }
     },
     "node_modules/listr2": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.5.tgz",
-      "integrity": "sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-5.0.6.tgz",
+      "integrity": "sha512-u60KxKBy1BR2uLJNTWNptzWQ1ob/gjMzIJPZffAENzpZqbMZ/5PrXXOomDcevIS/+IB7s1mmCEtSlT2qHWMqag==",
       "dev": true,
       "dependencies": {
         "cli-truncate": "^2.1.0",
-        "colorette": "^2.0.16",
+        "colorette": "^2.0.19",
         "log-update": "^4.0.0",
         "p-map": "^4.0.0",
         "rfdc": "^1.3.0",
-        "rxjs": "^7.5.5",
+        "rxjs": "^7.5.7",
         "through": "^2.3.8",
         "wrap-ansi": "^7.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^14.13.1 || >=16.0.0"
       },
       "peerDependencies": {
         "enquirer": ">= 2.3.0 < 3"
@@ -9611,9 +9586,9 @@
       "dev": true
     },
     "node_modules/listr2/node_modules/rxjs": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz",
-      "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.6.0.tgz",
+      "integrity": "sha512-DDa7d8TFNUalGC9VqXvQ1euWNN7sc63TrUCuM9J998+ViviahMIjKSOU7rfcgFOF+FCD71BhDRv4hrFz+ImDLQ==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -9634,9 +9609,9 @@
       }
     },
     "node_modules/listr2/node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
       "dev": true
     },
     "node_modules/locate-path": {
@@ -11117,9 +11092,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
       "dev": true,
       "funding": [
         {
@@ -11179,9 +11154,9 @@
       }
     },
     "node_modules/postcss-scss": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.5.tgz",
-      "integrity": "sha512-F7xpB6TrXyqUh3GKdyB4Gkp3QL3DDW1+uI+gxx/oJnUt/qXI4trj5OGlp9rOKdoABGULuqtqeG+3HEVQk4DjmA==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz",
+      "integrity": "sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==",
       "dev": true,
       "funding": [
         {
@@ -11197,13 +11172,13 @@
         "node": ">=12.0"
       },
       "peerDependencies": {
-        "postcss": "^8.3.3"
+        "postcss": "^8.4.19"
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -11236,9 +11211,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
-      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
+      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -12102,9 +12077,9 @@
       "dev": true
     },
     "node_modules/stylelint": {
-      "version": "14.15.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.15.0.tgz",
-      "integrity": "sha512-JOgDAo5QRsqiOZPZO+B9rKJvBm64S0xasbuRPAbPs6/vQDgDCnZLIiw6XcAS6GQKk9k1sBWR6rmH3Mfj8OknKg==",
+      "version": "14.16.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.0.tgz",
+      "integrity": "sha512-X6uTi9DcxjzLV8ZUAjit1vsRtSwcls0nl07c9rqOPzvpA8IvTX/xWEkBRowS0ffevRrqkHa/ThDEu86u73FQDg==",
       "dev": true,
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.2",
@@ -12120,7 +12095,7 @@
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.0",
+        "ignore": "^5.2.1",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
@@ -12134,7 +12109,7 @@
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
         "resolve-from": "^5.0.0",
         "string-width": "^4.2.3",
@@ -15149,14 +15124,6 @@
         "string-width": "^4.1.0"
       }
     },
-    "ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -16113,17 +16080,6 @@
         "once": "^1.4.0"
       }
     },
-    "enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "ansi-colors": "^4.1.1"
-      }
-    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -16152,9 +16108,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz",
+      "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.3.3",
@@ -16870,9 +16826,9 @@
       "dev": true
     },
     "husky": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.1.tgz",
-      "integrity": "sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.2.tgz",
+      "integrity": "sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg==",
       "dev": true
     },
     "iconv-lite": {
@@ -16885,9 +16841,9 @@
       }
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
+      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
       "dev": true
     },
     "ignore-walk": {
@@ -19604,9 +19560,9 @@
       }
     },
     "lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
       "dev": true
     },
     "lines-and-columns": {
@@ -19616,30 +19572,30 @@
       "dev": true
     },
     "lint-staged": {
-      "version": "13.0.3",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.0.3.tgz",
-      "integrity": "sha512-9hmrwSCFroTSYLjflGI8Uk+GWAwMB4OlpU4bMJEAT5d/llQwtYKoim4bLOyLCuWFAhWEupE0vkIFqtw/WIsPug==",
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.1.0.tgz",
+      "integrity": "sha512-pn/sR8IrcF/T0vpWLilih8jmVouMlxqXxKuAojmbiGX5n/gDnz+abdPptlj0vYnbfE0SQNl3CY/HwtM0+yfOVQ==",
       "dev": true,
       "requires": {
         "cli-truncate": "^3.1.0",
-        "colorette": "^2.0.17",
-        "commander": "^9.3.0",
+        "colorette": "^2.0.19",
+        "commander": "^9.4.1",
         "debug": "^4.3.4",
         "execa": "^6.1.0",
-        "lilconfig": "2.0.5",
-        "listr2": "^4.0.5",
+        "lilconfig": "2.0.6",
+        "listr2": "^5.0.5",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-inspect": "^1.12.2",
         "pidtree": "^0.6.0",
         "string-argv": "^0.3.1",
-        "yaml": "^2.1.1"
+        "yaml": "^2.1.3"
       },
       "dependencies": {
         "commander": {
-          "version": "9.3.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-9.3.0.tgz",
-          "integrity": "sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==",
+          "version": "9.4.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.1.tgz",
+          "integrity": "sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==",
           "dev": true
         },
         "execa": {
@@ -19708,9 +19664,9 @@
           "dev": true
         },
         "yaml": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
-          "integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==",
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.3.tgz",
+          "integrity": "sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==",
           "dev": true
         }
       }
@@ -20029,17 +19985,17 @@
       }
     },
     "listr2": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.5.tgz",
-      "integrity": "sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-5.0.6.tgz",
+      "integrity": "sha512-u60KxKBy1BR2uLJNTWNptzWQ1ob/gjMzIJPZffAENzpZqbMZ/5PrXXOomDcevIS/+IB7s1mmCEtSlT2qHWMqag==",
       "dev": true,
       "requires": {
         "cli-truncate": "^2.1.0",
-        "colorette": "^2.0.16",
+        "colorette": "^2.0.19",
         "log-update": "^4.0.0",
         "p-map": "^4.0.0",
         "rfdc": "^1.3.0",
-        "rxjs": "^7.5.5",
+        "rxjs": "^7.5.7",
         "through": "^2.3.8",
         "wrap-ansi": "^7.0.0"
       },
@@ -20079,9 +20035,9 @@
           "dev": true
         },
         "rxjs": {
-          "version": "7.5.5",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz",
-          "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==",
+          "version": "7.6.0",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.6.0.tgz",
+          "integrity": "sha512-DDa7d8TFNUalGC9VqXvQ1euWNN7sc63TrUCuM9J998+ViviahMIjKSOU7rfcgFOF+FCD71BhDRv4hrFz+ImDLQ==",
           "dev": true,
           "requires": {
             "tslib": "^2.1.0"
@@ -20099,9 +20055,9 @@
           }
         },
         "tslib": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+          "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
           "dev": true
         }
       }
@@ -21191,9 +21147,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
@@ -21226,16 +21182,16 @@
       "requires": {}
     },
     "postcss-scss": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.5.tgz",
-      "integrity": "sha512-F7xpB6TrXyqUh3GKdyB4Gkp3QL3DDW1+uI+gxx/oJnUt/qXI4trj5OGlp9rOKdoABGULuqtqeG+3HEVQk4DjmA==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz",
+      "integrity": "sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==",
       "dev": true,
       "requires": {}
     },
     "postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -21259,9 +21215,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
-      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
+      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
       "dev": true
     },
     "pretty-format": {
@@ -21906,9 +21862,9 @@
       "dev": true
     },
     "stylelint": {
-      "version": "14.15.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.15.0.tgz",
-      "integrity": "sha512-JOgDAo5QRsqiOZPZO+B9rKJvBm64S0xasbuRPAbPs6/vQDgDCnZLIiw6XcAS6GQKk9k1sBWR6rmH3Mfj8OknKg==",
+      "version": "14.16.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.0.tgz",
+      "integrity": "sha512-X6uTi9DcxjzLV8ZUAjit1vsRtSwcls0nl07c9rqOPzvpA8IvTX/xWEkBRowS0ffevRrqkHa/ThDEu86u73FQDg==",
       "dev": true,
       "requires": {
         "@csstools/selector-specificity": "^2.0.2",
@@ -21924,7 +21880,7 @@
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.0",
+        "ignore": "^5.2.1",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
@@ -21938,7 +21894,7 @@
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
         "resolve-from": "^5.0.0",
         "string-width": "^4.2.3",
diff --git a/src/rules/media-feature-value-dollar-variable/index.js b/src/rules/media-feature-value-dollar-variable/index.js
index 7aeff6f..40354fb 100644
--- a/src/rules/media-feature-value-dollar-variable/index.js
+++ b/src/rules/media-feature-value-dollar-variable/index.js
@@ -41,9 +41,9 @@ export default function rule(expectation, options) {
     // and parse it again afterwards to remove trailing junk
     const valueRegexGlobal = new RegExp(valueRegex.source, "g");
     // `$var-name_sth`
-    const variableRegex = /^\$[\w-]+$/;
+    const variableRegex = /^(\w+\.)?\$[\w-]+$/;
     // `#{$var-name_sth}`
-    const interpolationVarRegex = /^#{\s*\$\w+\s*}$/;
+    const interpolationVarRegex = /^#{\s*(\w+\.)?\$\w+\s*}$/;
     // `none`, `dark`
     const keywordValueRegex = /^[a-z][a-z\d-]*$/;
 


Test patch:
diff --git a/src/rules/media-feature-value-dollar-variable/__tests__/index.js b/src/rules/media-feature-value-dollar-variable/__tests__/index.js
index 4a76585..0deabc3 100644
--- a/src/rules/media-feature-value-dollar-variable/__tests__/index.js
+++ b/src/rules/media-feature-value-dollar-variable/__tests__/index.js
@@ -57,6 +57,47 @@ testRule({
     `,
       description:
         "Always. Example: value is interpolation of a single var; spaces before and after the interpolation."
+    },
+    {
+      code: `
+      @use "./variables";
+
+      @media (max-width: variables.$val) { 
+        a { color: red; } 
+      }
+      `,
+      description: "Always. Example: using @use."
+    },
+    {
+      code: `
+      @use "./variables" as v;
+
+      @media (max-width: v.$val) { 
+        a { color: red; } 
+      }
+      `,
+      description: "Always. Example: using @use with 'as'."
+    },
+    {
+      code: `
+      @use "./variables";
+
+      @media (max-width: #{variables.$val}) { 
+        a { color: red; } 
+      }
+      `,
+      description: "Always. Example: using @use with interpolation."
+    },
+    {
+      code: `
+      @use "./variables";
+
+      @media (max-width: #{ variables.$val }) { 
+        a { color: red; } 
+      }
+      `,
+      description:
+        "Always. Example: using @use with interpolation of a single var spaces inside the interpolation."
     }
   ],