PIE shareable stylelint config.
A Stylelint config used in PIE – Just Eat Takeaway’s design system.
Use it as is or as a foundation for your own config.
To see the rules that this config uses, please read the config itself.
npm install @justeattakeaway/stylelint-config-pie --save-devCurrently there are 3 different sets of rules:
-
base- the base rules that we'd advise all projects use and extend as needed. -
strict- a smaller collection of optional opinionated rules. -
ordering- an even smaller collection of optional rules that specify the ordering of CSS properties.
If you've installed stylelint-config-pie locally within your project, just set your stylelint config to:
{
"extends": "@justeattakeaway/stylelint-config-pie/base"
}The easiest way to do this is by adding the following section to your package.json:
"stylelint": {
"extends": "@justeattakeaway/stylelint-config-pie/base"
}You may only want to use a specific ruleset such as base, strict or ordering. If so, simply point to the ones you'd like to use:
"stylelint": {
"extends": [
"@justeattakeaway/stylelint-config-pie/base",
"@justeattakeaway/stylelint-config-pie/strict",
"@justeattakeaway/stylelint-config-pie/ordering"
]
}Note: @justeattakeaway/stylelint-config-pie includes all rules. We would strongly recommend using @justeattakeaway/stylelint-config-pie/base and going from there.
If you've globally installed stylelint-config-pie using the -g flag, then you'll need to use the absolute path to stylelint-config-pie in your config e.g.
{
"extends": "/absolute/path/to/@justeattakeaway/stylelint-config-pie/base"
}Simply add a "rules" key to your config, then add your overrides and additions there.
For example, to change the indentation to tabs, and turn off the number-leading-zero rule:
{
"extends": "@justeattakeaway/stylelint-config-pie/base",
"rules": {
"indentation": "tab",
"number-leading-zero": null
}
}stylelint-config-pie is a great foundation for your own config. Here is a list of the rules turned on in this config, and what they do:
- alpha-value-notation
- at-rule-empty-line-before
- at-rule-name-case
- at-rule-name-space-after
- at-rule-no-vendor-prefix
- block-closing-brace-newline-after
- block-closing-brace-newline-before
- block-closing-brace-space-before
- block-opening-brace-newline-after
- block-opening-brace-space-after
- block-opening-brace-space-before
- color-function-notation
- color-hex-case
- color-hex-length
- color-no-invalid-hex
- comment-empty-line-before
- comment-whitespace-inside
- declaration-bang-space-after
- declaration-bang-space-before
- declaration-block-no-duplicate-properties
- declaration-block-no-shorthand-property-overrides
- declaration-block-semicolon-newline-after
- declaration-block-semicolon-newline-before
- declaration-block-semicolon-space-before
- declaration-block-trailing-semicolon
- declaration-colon-newline-after
- declaration-colon-space-after
- declaration-colon-space-before
- font-family-name-quotes
- font-weight-notation
- function-calc-no-unspaced-operator
- function-comma-newline-after
- function-comma-newline-before
- function-comma-space-after
- function-comma-space-before
- function-linear-gradient-no-nonstandard-direction
- function-name-case
- function-parentheses-space-inside
- function-url-quotes
- function-whitespace-after
- indentation
- keyframes-name-pattern
- length-zero-no-unit
- max-empty-lines
- media-feature-colon-space-after
- media-feature-colon-space-before
- media-feature-name-case
- media-feature-name-no-vendor-prefix
- media-feature-parentheses-space-inside
- media-feature-range-operator-space-after
- media-feature-range-operator-space-before
- media-query-list-comma-newline-before
- media-query-list-comma-space-after
- media-query-list-comma-space-before
- no-duplicate-selectors
- no-eol-whitespace
- no-missing-end-of-source-newline
- number-leading-zero
- number-max-precision
- number-no-trailing-zeros
- property-case
- property-no-unknown
- property-no-vendor-prefix
- rule-empty-line-before
- scss/at-else-closing-brace-newline-after
- scss/at-else-closing-brace-space-after
- scss/at-else-empty-line-before
- scss/at-else-if-parentheses-space-before
- scss/at-if-closing-brace-newline-after
- selector-attribute-quotes
- selector-class-pattern
- selector-combinator-space-after
- selector-combinator-space-before
- selector-descendant-combinator-no-non-space
- selector-list-comma-newline-after
- selector-list-comma-newline-before
- selector-list-comma-space-before
- selector-max-empty-lines
- selector-max-universal
- selector-no-vendor-prefix
- selector-pseudo-element-colon-notation
- selector-type-case
- string-quotes
- unit-no-unknown
- value-list-comma-newline-after
- value-list-comma-newline-before
- value-list-comma-space-after
- value-list-comma-space-before
- value-no-vendor-prefix