@justeattakeaway/stylelint-config-pie
v0.8.0
Published
Shareable Stylelint config for use with any front-end web projects across JET.
Downloads
191
Readme
stylelint-config-pie
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.
Installation
npm install @justeattakeaway/stylelint-config-pie --save-dev
Usage
Rules
Currently 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.
In your projects
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"
}
Extending the config
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
}
}
Documentation
Configured Lints
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:
Base
- 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
Strict
- color-named
- max-nesting-depth
- media-query-list-comma-newline-after
- selector-max-compound-selectors
- selector-max-id