stylelint 规则强制使用预定义的类而不是 css

Question

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

common.scss:

 .mr-4 {margin-right: 4px}.ml-4 {margin-left: 4px}.pr-4 {padding-right: 4px}.pl-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

Answer 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.