Fylgja component - Stylelint Config

Table of Contents

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

Extends stylelint-config-recommended.


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


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

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

SCSS support found under the Extensions


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"]


While the core rules already take preprocessors in account,

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


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.


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


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-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-closing-brace-newline-after: always-multi-line
    • ignoreAtRules: if, else
  • block-closing-brace-newline-before: always-multi-line


  • 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-empty-line-before: always
    • except: first-nested
    • ignore: after-comment, stylelint-commands

Custom Property

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


  • 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-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-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-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-no-vendor-prefix: true
    • ignoreProperties: appearance, text-size-adjust, tap-highlight-color


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


  • 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-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.