Fylgja component - Stylelint Config
Table of Contents
A sharable stylelint config object that enforces Fylgja's CSS rules.
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, Tailwind and Inline CSS support found under the Extra Syntax Support
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"]
}
],
}
}
Extra Syntax Support
The core rules take some preprocessors rules in account, if they do not impact any CSS defaults.
For better support pre-processors and post-processors support, use the following options below.
SCSS
This adds support for Sass (scss syntax) support.
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 on fylgja.dev.
TailwindCSS
This adds support for TailwindCSS functions in CSS.
To include these rules, add tailwind
to the end of the extend path;
{
"extends": "@fylgja/stylelint-config/tailwind",
}
CSS Order
There are no rules, since we do feel there should be a form flexibility on that part.
But we do follow a specific style of ordering for our CSS, it's is described in our CSS order DOC at fylgja.dev.
Inline CSS support (HTML and more)
Any of the Fylgja Stylelint Config options will, as of v5.0 also check any inline CSS by default.
This done thx to the Stylelint plugin stylelint-config-html.
This plugin will add support to check your project not just for errors in CSS files, but also checks in the style tags in your HTML.
You can opt out of this behavior by using the rules directly, found in the rules folder.
Rules
All rules are base 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: import, if, else
at-rule-no-vendor-prefix
: trueat-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-lineblock-opening-brace-space-before
: always- ignoreAtRules: if, else
Color
alpha-value-notation
: nullcolor-hex-case
: lowercolor-hex-length
: short
Comment
comment-empty-line-before
: always- except: first-nested
- ignore: after-comment, stylelint-commands
Custom Property
custom-property-empty-line-before
: never
Declaration
declaration-block-no-redundant-longhand-properties
: truedeclaration-block-semicolon-newline-before
: never-multi-linedeclaration-block-trailing-semicolon
: always- ignore: single-declaration
declaration-colon-newline-after
: null- Works better with Prettier and does not always makes sense anyway. So giving freedom to the dev.
declaration-empty-line-before
: neverdeclaration-no-important
: true
Font family
font-family-no-duplicate-names
: true- 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
General / Sheet
indentation
: 4max-line-length
: 80- ignorePattern: URI's
- severity: warning
max-nesting-depth
: 5- 5 allows easier setting of
if
's andmixins
. The CSS dept is enforced viaselector-max
.
- 5 allows easier setting of
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-class-pattern
: ^(?:[a-z]|-)([a-z0-9])(-[a-z0-9]+)$selector-list-comma-newline-before
: never-multi-lineselector-list-comma-space-after
: always-single-lineselector-max-attribute
: 2selector-max-class
: 4selector-max-compound-selectors
: 4selector-max-empty-lines
: 0,selector-max-id
: 1selector-max-type
: 2selector-max-universal
: 2selector-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
- ignoreProperties: with the name
value-list-comma-newline-after
: null,value-list-comma-newline-before
: never-multi-linevalue-no-vendor-prefix
: true- ignoreValues: tap-highlight-color