@wagtail/stylelint-config-wagtail

Shareable stylelint config for CSS and SCSS, following Wagtail’s code style.

Usage

Our default export contains all of our Stylelint rules, along with specific plugins for SCSS syntax.

1. Run npm install stylelint @wagtail/stylelint-config-wagtail --save-dev
2. Add "extends": "@wagtail/stylelint-config-wagtail" to your .stylelintrc

Links

• Stylelint
• stylelint-config-recommended-scss
• stylelint-config-prettier-scss

Contribution Guidelines

Install

• Required Node
• We recommend using nvm
• Clone the project on to your computer
• Run nvm install to ensure you have the correct Node version
• Run npm install to install project dependencies
• Ensure your editor is set up to use editorconfig, Prettier, Eslint and Stylelint

Development

• Run nvm use to set Node to the correct version
• Run tests via npm run test
• Run linting via npm run lint
• Run updates to Readme (if rules have changed) via npm run write-rules
• Run preflight checks before committing final code via npm run preflight
• Note: When working with the rule set, only modify the index.js file, not the .eslintrc file as it is for local linting only

Rules

Rule	Config
block-no-empty	Enabled
color-hex-length	"short"
color-named	"never"
color-no-invalid-hex	Enabled
comment-no-empty	Enabled
custom-property-no-missing-var-function	Enabled
declaration-block-no-duplicate-custom-properties	Enabled
declaration-block-no-duplicate-properties	Enabled
declaration-block-no-redundant-longhand-properties	Enabled
declaration-block-no-shorthand-property-overrides	Enabled
declaration-block-single-line-max-declarations	1
declaration-no-important	Enabled
declaration-property-value-allowed-list	Enabled - see Config
declaration-property-value-disallowed-list	{"/^border/":["none"]}, {"severity":"error"}
font-family-no-duplicate-names	Enabled
font-family-no-missing-generic-family-keyword	Enabled
function-calc-no-unspaced-operator	Enabled
function-linear-gradient-no-nonstandard-direction	Enabled
function-url-quotes	"always"
keyframe-block-no-duplicate-selectors	Enabled
keyframe-declaration-no-important	Enabled
length-zero-no-unit	Enabled
max-nesting-depth	3
media-feature-name-no-unknown	Enabled
named-grid-areas-no-invalid	Enabled
no-descending-specificity	Enabled
no-duplicate-at-import-rules	Enabled
no-duplicate-selectors	Enabled
no-empty-source	Enabled
no-invalid-double-slash-comments	Enabled
no-invalid-position-at-import-rule	{"ignoreAtRules":["use","forward"]}
no-irregular-whitespace	Enabled
order/order	[{"name":"include","type":"at-rule"},"declarations"]
property-disallowed-list	["/forced-color-adjust/","/left/","/right/","text-transform"]
property-no-unknown	Enabled
property-no-vendor-prefix	Enabled
rule-empty-line-before	"always", {"except":["after-single-line-comment","first-nested"]}
scale-unlimited/declaration-strict-value	Enabled - see Config
scss/at-extend-no-missing-placeholder	Enabled
scss/at-if-no-null	Enabled
scss/at-import-partial-extension-blacklist	"scss"
scss/at-rule-no-unknown	Enabled
scss/comment-no-empty	Enabled
scss/declaration-nested-properties-no-divided-groups	Enabled
scss/dollar-variable-no-missing-interpolation	Enabled
scss/function-quote-no-quoted-strings-inside	Enabled
scss/function-unquote-no-unquoted-strings-inside	Enabled
scss/load-no-partial-leading-underscore	Enabled
scss/media-feature-value-dollar-variable	"always", {"ignore":["keywords"]}
scss/no-duplicate-mixins	Enabled
scss/no-global-function-names	Enabled
scss/selector-no-redundant-nesting-selector	Enabled
scss/selector-no-union-class-name	Enabled
selector-anb-no-unmatchable	Enabled
selector-attribute-name-disallowed-list	"/^data-/"
selector-class-pattern	{}, {"resolveNestedSelectors":true}
selector-max-combinators	3
selector-max-id	0
selector-max-specificity	"0,3,3"
selector-no-qualifying-type	{"ignore":["attribute","class"]}
selector-pseudo-class-no-unknown	Enabled
selector-pseudo-element-no-unknown	Enabled
selector-type-no-unknown	Enabled
string-no-newline	Enabled
unit-no-unknown	Enabled
value-no-vendor-prefix	Enabled