sass-lint: Reporting color functions as invalid uses of color literals
Using gulp-sass-lint
v1.2.0
I have this code
$color-rgba: rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6);
box-shadow: $form-shadows, 0 0 8px $color-rgba;
Which produces these errors, which seems incorrect since the color names above are the built-in SCSS functions, not color literals.
27:22 warning Color functions such as 'red' should not be passed to functions, use variables no-color-literals
27:48 warning Color functions such as 'green' should not be passed to functions, use variables no-color-literals
27:76 warning Color functions such as 'blue' should not be passed to functions, use variables no-color-literals
When re-written as a single line like this
box-shadow: $form-shadows, 0 0 8px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6);;
I only get this one error instead
27:39 warning Color functions such as 'rgba' should only be used in variable declarations no-color-literals
Unless I’m missing something this seems like a bug to me, and I don’t see a way around this except to either disable this rule (which seems like a bad solution) or to just exclude this one file from linting right now.
I was able to re-write this code into 4 variables, which is a little bit of an insane work around… but at least it accepts the code now
//Due to a bug in `sass-lint` this must be broken up into multiple variables.
//Otherwise it sees the color function as color literals and reports them as violations :/
$color-r: red($input-border-focus);
$color-g: green($input-border-focus);
$color-b: blue($input-border-focus);
$color-rgba: rgba($color-r, $color-g, $color-b, .6);
box-shadow: $form-shadows, 0 0 8px $color-rgba;
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 2
- Comments: 21 (9 by maintainers)
@chrismbarr yeah i totally agree, I think we (read me) went a bit too far with the configurability of this. If you want to open another issue with maybe your thoughts on the options that would be useful for this rule and maybe it’s default behaviour then we could look to get it into v2 or v3 of which v2 is going to land soon as we’ve got so much we want to change.
also @alexmccabe you can use a sasslintrc JSON config in v1.12.0 if you wish.
@DanPurdy Ah ace! Thanks for that, the Yaml syntax is just rather odd, so a JSON config would be much preferred. JSON is king!
As for the other example (
map-get(blue, light)
flagging), the only thing I can think of is to check whether the colour is a parameter of a select few SASS functions. However, this is incredibly unclean and probably wouldn’t want to be the maintainer of such a list, as it will never please anyone.Just found another related thing today.
With this code:
rgba($color, .5)
I get this linting violation:I think the problem is that the linter cannot tell the difference between the native CSS
rgba
color literal and thergba
SCSS color functionDesired change:
rgba(255, 255, 255, .5);
- This should still be a violation of theno-color-literals
rulergba($color, .5)
- This is an SCSS function and not a color literal, it should not trigger a linting violationIt does this for key names in a map as well, for example:
flags
color 'black' should be written in its hexadecimal form #000000