'stylelint rule to enforce use of predefined classes instead of css

I have defined common css classnames to re-use in multiple places, like

common.scss: 

.m-r-4 {margin-right: 4px}
.m-l-4 {margin-left: 4px}
.p-r-4 {padding-right: 4px}
.p-l-4 {padding-left: 4px}

Is there any stylelint plugin to give warning to use these classes instead of writing same css rules (ex: margin-right: 4px) in other css files ? The project uses React, Webpack and StyleLint

If there is no plugin for this, any links/tutorial that can help to develop plugin like this would be helpful

Thanks

cssreactjseslintstylelint


Solution 1:[1]

You can use the built-in property-disallowed-list rule to disallow properties, and you can use a custom message to communicate your intent.

{
  "rules": {
    "property-disallowed-list": [
      ["/^margin/", "/^padding/"],
      {
        "message": "Use the appropriate utility class instead"
      }
    ]
  }
}

You can then turn off the rule in your common.scss file:

/* stylelint-disable property-disallowed-list */
.m-r-4 {margin-right: 4px}
.m-l-4 {margin-left: 4px}
.p-r-4 {padding-right: 4px}
.p-l-4 {padding-left: 4px}

Alternatively, you can write a plugin that checks against the built-in rule, but not for the common.scss file by checking the filename before processing.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeddy3

Related Questions