Fylgja component - Stylelint Config

Table of Contents

A sharable stylelint config object that enforces Fylgja's CSS rules.

Extends stylelint-config-recommended.

Installation

npm install @fylgja/stylelint-config --save-dev

Usage

If you've installed @fylgja/stylelint-config, just set your stylelint config to:

{
"extends": "@fylgja/stylelint-config"
}

SCSS support found under the Extensions

Extending

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

{
"extends": "@fylgja/stylelint-config",
"rules": {
"rule-empty-line-before": [
"always-multi-line", {
"except": ["first-nested"],
"ignore": ["after-comment"]
}
],
}
}

Extensions

While the core rules already take preprocessors in account,

some times extra rules are needed, to add support for a specific preprocessor.

SCSS

We have added the stylelint plugin SCSS to better support SCSS styles

To include these rules, add scss to the end of the extend path

{
"extends": "@fylgja/stylelint-config/scss",
}

For more infomation checkout the SCSS DOC.

Order

We do follow a specific style of ordering our code, it's is described in our CSS order DOC.

Rules

For information on what each rule does. Checkout the original DOC or the rules folder on Stylelint Github Page.

Since we extend on the stylelint-config-recommended. You should also checkout the rules set there.

Down here are only the rules we have set.

We have not set any [allowed/disallowed]-list values. it's better to set those project specific, if needed.

At-rule

  • at-rule-empty-line-before: always
    • except: blockless-after-same-name-blockless, first-nested
    • ignore: after-comment, inside-block
    • ignoreAtRules: use, forward, import, if, else
  • at-rule-no-unknown: true
    • ignoreAtRules: for, each, if, else, mixin, mixin-*, include, screen
      • Includes support for PostCSS plugins and TailwindCSS
  • at-rule-no-vendor-prefix: true
  • at-rule-semicolon-space-before: never
    • If there was a option for never, it would be never

Block

  • block-closing-brace-newline-after: always-multi-line
    • ignoreAtRules: if, else
  • block-closing-brace-newline-before: always-multi-line

Color

  • alpha-value-notation: null
  • color-hex-case: lower
    • Lowercase letters are easier to distinguish from numbers
  • color-hex-length: short
  • color-no-invalid-hex: true

Comment

  • comment-empty-line-before: always
    • except: first-nested
    • ignore: after-comment, stylelint-commands

Custom Property

  • custom-property-empty-line-before: never

Declaration

  • declaration-colon-newline-after: null
    • Works better with Prettier and does not always makes sense anyway. So giving freedom to the dev.
  • declaration-block-no-redundant-longhand-properties: true
  • declaration-block-semicolon-newline-before: never-multi-line
    • Would be never if this was an option
  • declaration-empty-line-before: never
  • declaration-no-important: true

Font family

  • font-family-no-missing-generic-family-keyword: true
    • severity: warning

Function

  • function-name-case: lower
    • ignoreFunctions: Starting with: get, (e.g getColor)
  • function-url-no-scheme-relative: true

General / Sheet

  • indentation: 4
  • max-line-length: 80
    • ignorePattern: URI's
    • severity: warning
  • max-nesting-depth: 5
    • 5 allows easier setting of if's and mixins. The CSS dept is enforced via selector-max.
  • no-descending-specificity: true
    • severity: warning

Media

  • media-feature-name-no-unknown: true
    • severity: warning
  • media-query-list-comma-newline-before: never-multi-line
    • Would be never if this was an option

Number

  • number-max-precision: 5

Notes about number-leading-zero. Just as Bootstrap & Google we support no leading zero's.

But since pretty much all compilers and prettier use leading zero's, we have kept the rule set to the default value.

Property

  • property-no-vendor-prefix: true
    • ignoreProperties: appearance, text-size-adjust, tap-highlight-color

Rule

  • rule-empty-line-before: always-multi-line
    • except: first-nested,
    • ignore: after-comment, inside-block

Selector

  • selector-list-comma-newline-before: never-multi-line
    • Would be never if this was an option
  • selector-list-comma-space-after: always-single-line
  • selector-max-attribute: 2
  • selector-max-class: 4
  • selector-max-compound-selectors: 4
  • selector-max-empty-lines: 0,
  • selector-max-id: 1
  • selector-max-type: 2
  • selector-max-universal: 2
  • selector-no-qualifying-type: true
    • ignore: attribute, class
  • selector-type-no-unknown: true
    • severity: warning

Value

  • value-keyword-case: lower
    • ignoreProperties: with the name family
    • Font families may have uppercase letters
  • value-list-comma-newline-before: never-multi-line
  • value-no-vendor-prefix: true
    • ignoreValues: tap-highlight-color
Noticed a typo or is something unclear? Help us improve this page on GitHub.