@wagtail/stylelint-config-wagtail

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

• Run npm install stylelint @wagtail/stylelint-config-wagtail --save-dev
• 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

Changelog

0.8.0 - 2023-11-14

Changed

• Upgrade to Stylelint 15.11, and latest version of stylelint-config-recommended-scss (#38).