stylelint-config-minerva

Minerva's stylelint config

Installation

yarn add --dev stylelint-config-minerva
# or
npm install stylelint-config-minerva --save-dev

It is derived from the common rules found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, GitHub's PrimerCSS Guidelines, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.

It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.

To see the rules that this config uses, please read the config itself.

Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.

Usage

{
  "extends": "stylelint-config-minerva"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the indentation to tabs, turn off the number-leading-zero rule, change the property-no-unknown rule to use its ignoreAtRules option and add the unit-whitelist rule:

{
  "extends": "stylelint-config-minerva",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null,
    "property-no-unknown": [ true, {
      "ignoreProperties": [
        "composes"
      ]
    }],
    "unit-whitelist": ["em", "rem", "s"]
  }
}

NOTE The whole reason this config was written was so that we would never need to overwrite any rules. If you find that you dislike a rule and would like to change it, please bring it up with the Minerva Engineering team.

Suggested additions

stylelint-config-minerva is a great foundation for your own config. You can extend it create a tailored and much stricter config:

• Specify what quotes must be used using:
  • font-family-name-quotes
  • function-url-quotes
  • selector-attribute-quotes
  • string-quotes
• If you use autoprefixer you'll want to disallow vendor prefixes using:
  • at-rule-no-vendor-prefix
  • media-feature-name-no-vendor-prefix
  • property-no-vendor-prefix
  • selector-no-vendor-prefix
  • value-no-vendor-prefix
• Control specificity using:
  • max-nesting-depth
  • selector-max-compound-selectors
  • selector-max-specificity
• Specify acceptable selector types, units, properties, functions and words in comments using:
  • at-rule-blacklist
  • at-rule-no-unknown
  • at-rule-whitelist
  • color-named
  • color-no-hex
  • comment-word-blacklist
  • declaration-no-important
  • declaration-property-unit-blacklist
  • declaration-property-unit-whitelist
  • declaration-property-value-blacklist
  • declaration-property-value-whitelist
  • function-blacklist
  • function-url-scheme-whitelist
  • function-whitelist
  • media-feature-name-blacklist
  • media-feature-name-whitelist
  • property-blacklist
  • property-whitelist
  • selector-attribute-operator-blacklist
  • selector-attribute-operator-whitelist
  • selector-no-attribute
  • selector-no-combinator
  • selector-no-id
  • selector-no-qualifying-type
  • selector-no-type
  • selector-no-universal
  • selector-pseudo-class-blacklist
  • selector-pseudo-class-whitelist
  • unit-blacklist
  • unit-whitelist
• Specify acceptable naming patterns using:
  • custom-media-pattern
  • custom-property-pattern
  • selector-class-pattern
  • selector-id-pattern
  • selector-nested-pattern
• Specify a notation when there are one or more valid representations using:
  • font-weight-notation
• Specify what types of URLs are allowed using:
  • function-url-data-uris
  • function-url-no-scheme-relative
• Specify a maximum line length using:
  • max-line-length