Stylelint rule that doesn't allow the styling of utility classes in CSS
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.eslintrc.json
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json

README.md

selector-no-utility

NPM version Build Status

This plugin is extra specific to primer-utilities I will accept PRs to make it more generic, or feel free to fork and use it for your own classes.

You should not be able to style a utility classes. Utility classes are single purpose, reusing them to add extra style violates their single purpose.

    .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. After installing npm, you can install stylelint-function-url-no-domain with this command.

$ npm install --save-dev stylelint-function-url-no-domain

Usage

In your stylelint config add this.

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

Related

License

MIT © GitHub