Disable declaration-property-value-no-unknown rule for SCSS

.changeset/sixty-dolls-kneel.md

@@ -0,0 +1,5 @@
+---
+"stylelint-config-recommended-vue": patch
+---
+
+Disable declaration-property-value-no-unknown rule for SCSS

lib/vue-specific-rules-for-scss.js

@@ -5,4 +5,7 @@ const baseRules = require("./vue-specific-rules");
 module.exports = {
   ...baseRules,
   ...(baseRules["function-no-unknown"] ? { "function-no-unknown": null } : {}),
+  ...(baseRules["declaration-property-value-no-unknown"]
+    ? { "declaration-property-value-no-unknown": null }
+    : {}),
 };

tests/fixtures/integrations/stylelint-scss-v4.1/src/valid.vue

@@ -19,6 +19,12 @@ a {
   @include my-mixin
 }
 
+$animation-duration: 300ms;
+$animation-function: ease-in-out;
+.d {
+  transition: all $animation-duration $animation-function;
+}
+
 // Vue
 :global(.foo),
 ::v-deep(.foo),

tests/fixtures/integrations/stylelint-scss/src/valid.vue

@@ -19,6 +19,12 @@ a {
   @include my-mixin
 }
 
+$animation-duration: 300ms;
+$animation-function: ease-in-out;
+.d {
+  transition: all $animation-duration $animation-function;
+}
+
 // Vue
 :global(.foo),
 ::v-deep(.foo),

tests/fixtures/integrations/stylelint-v16-scss/.npmrc

@@ -0,0 +1 @@
+package-lock=false

tests/fixtures/integrations/stylelint-v16-scss/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "stylelint-config-recommended-vue-test-stylelint",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "devDependencies": {
+    "postcss-html": "^1.0.0",
+    "stylelint": "^16.0.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-recommended-vue": "file:../../../../stylelint-config-recommended-vue-test.tgz"
+  },
+  "engines": {
+    "node": ">=18.12.0"
+  }
+}

tests/fixtures/integrations/stylelint-v16-scss/src/invalid.vue

@@ -0,0 +1,7 @@
+<style lang="scss">
+a {
+    @if $x == null {
+        color: red;
+    }
+}
+</style>

tests/fixtures/integrations/stylelint-v16-scss/src/valid.vue

@@ -0,0 +1,38 @@
+<style lang="scss">
+a {
+    color: v-bind(color);
+    padding-right: math.div(4, 2);
+}
+
+// SCSS
+.b {
+    // stylelint-disable-next-line scss/at-if-no-null
+    @if $x == null {
+        color: red;
+    }
+}
+@mixin my-mixin {
+  color: blue
+}
+
+.c {
+  @include my-mixin
+}
+
+$animation-duration: 300ms;
+$animation-function: ease-in-out;
+.d {
+  transition: all $animation-duration $animation-function;
+}
+
+// Vue
+:global(.foo),
+::v-deep(.foo),
+::v-slotted(.foo),
+::v-global(.foo),
+:deep(.foo),
+:slotted(.foo) {
+    color: red;
+}
+
+</style>

tests/fixtures/integrations/stylelint-v16-scss/stylelint.config.js

@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  extends: "stylelint-config-recommended-vue/scss",
+  rules: {},
+};

tests/fixtures/integrations/stylelint-v16/stylelint.config.js

@@ -2,4 +2,5 @@
 
 module.exports = {
   extends: "stylelint-config-recommended-vue",
+  rules: {},
 };