primer / stylelint-selector-no-utility

Stylelint rule that forbids re-styling Primer CSS utility classes

primer/selector-no-utility

This plugin is specific to Primer CSS. We'll accept pull requests to make it more generic, or feel free to fork and use it for your own needs.

Utilities are single purpose styles that should be treated as immutable CSS. They should not be altered by custom CSS as this can cause unwanted side effects.

    .m-0, #bar .float-left, #hoo { border: 1px solid pink; }
/** ↑          ↑
 * Each of these selectors */

The following patterns are considered warnings:

#bar .float-left { border: 1px solid pink; }

#bar {
  .float-left { border: 1px solid pink; }
}

The following patterns are not considered warnings:

#bar { color: pink; }

Install

This repository is distributed with npm, and can be installed with:

$ npm install --save-dev stylelint-selector-no-utility

Usage

In your stylelint config add this.

{
  "plugins": [
    "stylelint-selector-no-utility"
  ],
  "rules": {
    "primer/selector-no-utility": true
  }
}

Related

• Stylelint
• primer

License

MIT © GitHub

stylelint-selector-no-utility's Issues

Send PR to stylelint docs?

This plugin looks great!

Would you consider sending a PR to stylelint adding it to the list of plugins? Or, let me know if you're OK with it being added, and I can do it for you. The list is looking a little sparse at the moment you see, and we're keen to adding some good quality plugins to it to get things going :)

Upgrade stylelint

In order to address primer/stylelint-config#22, we'd need to upgrade to stylelint >=9.8.0. Since the micromatch team confirmed that that vulnerability isn't really an issue & this would take upgrading two breaking versions up, I'd consider this low urgency, but would be nice to do eventually so people don't see that alert on vuln audits.

Forbid all overrides of Primer classnames

We'd like to change this stylelint rule to include all classnames (or more specifically, selectors?) in Primer CSS. So:

• Update the rule look for classnames in stats/primer.json, rather than stats/utilities.json.
• Rename this package and repo to something more accurate, e.g. stylelint-no-primer-override

/cc @primer/ds-core