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)

Most upvoted comments

@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:

Color functions such as 'rgba' should not be passed to functions, use variables  no-color-literals

I think the problem is that the linter cannot tell the difference between the native CSS rgba color literal and the rgba SCSS color function

Desired change: rgba(255, 255, 255, .5); - This should still be a violation of the no-color-literals rule rgba($color, .5) - This is an SCSS function and not a color literal, it should not trigger a linting violation

It does this for key names in a map as well, for example:

$colors: {
  black: #1A1A1A,
}

flags color 'black' should be written in its hexadecimal form #000000