Rule Idea: code instead of variable/mixin use

I have a tough but helpful rule(s) to add. They’re similar but should be split into two rules.

Rule 1: Let’s say I have a variable $color-gray90: #111; . Then, in my code I see color: #111; I would want a rule to check for this and alert that we should be using the variable instead of the declaration.

Rule 2: Similar but perhaps more important, let’s say I have defined a mixin:

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}

Then, in my code I see the following:

button {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

I would like a rule to identify that the user should have used the mixin instead of the definitions directly. This becomes even more valuable when: 1) linting legacy or older code, or 2) when linting after creating a new mixin to determine where else it can be placed.

I find great value in both of these rules. Could they be added to the list of potential additions? They’re probably tough to make but would be extremely helpful.

[shawnbot]

FWIW, I’ve built something like this into our monolithic stylelint-config-primer’s new primer/variables rule. I’m AFK right now so I can’t get too into it, but if anyone would be interested in helping me clean it up and abstract it out, I’d be more than happy to make that happen.

[branpar]

I’ve been thinking about how we might be able to improve this without the performance hit and I came up with an idea. Multiple new rules (specific for variables) under the $-variable category. I’m thinking something like:

dollar-variable-after-color
dollar-variable-after-font
dollar-variable-after-border
...

As an example dollar-variable-after-color would check for the property colorand enforce that only a variable is required there. This way it doesn’t check to see if a variable already exists for the given hex/named color, just that we want to use a variable instead of a hex/color.

The other rule ideas I mentioned are to extend this to things like font, which would then allow enforcement of a variable to pass font family strings, and borderand border-color for the dollar-variable-after-border option.

Thoughts? I think this would be more universal and more appealing as you can enable it for specific aspects of the SCSS. I haven’t figured out a more performant way to enforce mixin usage yet.