🐛 Allow custom properties as variables

Author: DanPurdy

lib/rules/variable-for-property.js

@@ -14,10 +14,10 @@ var whitelistedValues = ['inherit', 'initial', 'transparent', 'none', 'currentCo
  */
 var isValidProperty = function (propertyElem) {
   if (propertyElem) {
-    if (propertyElem.type === 'variable') {
+    if (propertyElem.is('variable')) {
       return true;
     }
-    else if (propertyElem.type === 'ident' && whitelistedValues.indexOf(propertyElem.content) !== -1) {
+    else if (propertyElem.is('ident') && whitelistedValues.indexOf(propertyElem.content) !== -1) {
       return true;
     }
   }
@@ -46,9 +46,14 @@ var isIgnoredType = function (propertyElem) {
  * @returns {boolean} Whether the property is an ignored type or not
  */
 var isIgnoredFunction = function (propertyElem, allowMap, functionWhitelist) {
-  if (propertyElem && propertyElem.type === 'function') {
+  if (propertyElem && propertyElem.is('function')) {
     var funcIdent = propertyElem.first('ident');
 
+    // allow custom properties as values
+    if (funcIdent.content === 'var') {
+      return true;
+    }
+
     if (allowMap && funcIdent.content === 'map-get') {
       return true;
     }

tests/sass/variable-for-property.sass

@@ -46,3 +46,7 @@
 
 .func-name-test
   color: my-map-func(blue, light)
+
+.custom-prop
+  // ensure custom properties are valid
+  color: var(--my-prop)

tests/sass/variable-for-property.scss

@@ -51,3 +51,7 @@
 .func-name-test {
   color: my-map-func(blue, light);
 }
+
+.custom-prop {
+  color: var(--my-prop); // ensure custom properties are valid
+}