Fylgja component - Stylelint Config

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.

LESS  # 

We have a super small config to unset some rules, that conflict with the LESS naming.

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

For more infomation checkout the LESS 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

  • 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-name-quotes: always-where-recommended
    • severity: warning
  • 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
  • function-url-quotes: always

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
  • no-empty-first-line: true

Media

  • media-feature-name-no-unknown: true
    • severity: warning
  • media-feature-name-no-vendor-prefix: true
  • 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-attribute-quotes: always
  • 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: 0
  • selector-max-type: 2
  • selector-max-universal: 1
  • selector-no-qualifying-type: true
    • ignore: attribute, class
  • selector-no-vendor-prefix: true
  • selector-type-no-unknown: true
    • severity: warning

Shorthand property

  • shorthand-property-no-redundant-values: true

String

  • string-quotes: double

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.