Allow functions & custom props in rgba params

sasstools · Sep 2, 2017 · 1eb2b5b · 1eb2b5b
1 parent 658f4c4
commit 1eb2b5b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/lib/rules/no-color-literals.js b/lib/rules/no-color-literals.js
@@ -80,7 +80,7 @@ module.exports = {
 
     ast.traverseByTypes(['value', 'variable'], function (node, i, parent) {
 
-      // If we don't literals as variable names then check each variable name
+      // If we don't allow literals as variable names then check each variable name
       if (node.is('variable') && !parser.options['allow-variable-identifiers']) {
         if (cssColors.indexOf(node.content[0].content) !== -1) {
           result = helpers.addUnique(result, {
@@ -127,15 +127,18 @@ module.exports = {
             // if rgba usage is allowed we need to make sure only variables are being passed to it.
             else if (
               parser.options['allow-rgba'] &&
-              funcType === 'rgba' &&
-              valElem.content[1].content[0].type !== 'variable' &&
+              funcType === 'rgba' && (
+                valElem.content[1].content[0].type !== 'variable' &&
+                valElem.content[1].content[0].type !== 'function' &&
+                valElem.content[1].content[0].type !== 'customProperty'
+              ) &&
               declarationType !== 'variable'
             ) {
               result = helpers.addUnique(result, {
                 'ruleId': parser.rule.name,
                 'line': valElem.start.line,
                 'column': valElem.start.column,
-                'message': 'A color in variable form must be passed to rgba, literals are restricted',
+                'message': 'Only variables or functions must be passed to rgba, literals are restricted',
                 'severity': parser.severity
               });
             }

diff --git a/tests/rules/no-color-literals.js b/tests/rules/no-color-literals.js
@@ -12,7 +12,7 @@ describe('no color literals - scss', function () {
     lint.test(file, {
       'no-color-literals': 1
     }, function (data) {
-      lint.assert.equal(16, data.warningCount);
+      lint.assert.equal(19, data.warningCount);
       done();
     });
   });
@@ -40,7 +40,7 @@ describe('no color literals - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(20, data.warningCount);
+      lint.assert.equal(23, data.warningCount);
       done();
     });
   });
@@ -54,7 +54,7 @@ describe('no color literals - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(19, data.warningCount);
+      lint.assert.equal(22, data.warningCount);
       done();
     });
   });
@@ -86,7 +86,7 @@ describe('no color literals - sass', function () {
     lint.test(file, {
       'no-color-literals': 1
     }, function (data) {
-      lint.assert.equal(16, data.warningCount);
+      lint.assert.equal(19, data.warningCount);
       done();
     });
   });
@@ -114,7 +114,7 @@ describe('no color literals - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(20, data.warningCount);
+      lint.assert.equal(23, data.warningCount);
       done();
     });
   });
@@ -128,7 +128,7 @@ describe('no color literals - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(19, data.warningCount);
+      lint.assert.equal(22, data.warningCount);
       done();
     });
   });

diff --git a/tests/sass/no-color-literals.sass b/tests/sass/no-color-literals.sass
@@ -113,3 +113,11 @@ $hsla: hsla(40, 50%, 50%, .3)
 
 .rgba-enabled
   color: rgba($hexVar, .3)
+
+.some-element
+  border-bottom: 1px solid rgba($light-gray, 0.5)
+  color: rgba(shade($some-color), 0.5)
+
+.color
+  border: 1px solid --white
+  color: rgba(--my-color, 0.5)
diff --git a/tests/sass/no-color-literals.scss b/tests/sass/no-color-literals.scss
@@ -122,3 +122,13 @@ $black: #000;
 .rgba-enabled {
   color: rgba($hexVar, .3);
 }
+
+.some-element {
+    border-bottom: 1px solid rgba($light-gray, .5);
+    color: rgba(shade($some-color), 0.5); // functions should be allowed as rgba params
+}
+
+.color {
+  border: 1px solid --white;
+  color: rgba(--my-color, 0.5);
+}