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

Install stylelint, and the config:

npm install --save-dev stylelint@13 stylelint-config-torchbox

Then configure stylelint to use this config. As a stylelint.config.js in the root of your project:

module.exports = {
  // See https://github.com/torchbox/stylelint-config-torchbox for rules.
  extends: 'stylelint-config-torchbox',
};

• Use Stylelint’s --report-needless-disables flag to ensure you do not use more stylelint-disable comments than needed.

stylelint supports Vue, and our configuration is usable in .vue single-file components with no changes. Do make sure linting is configured to check .vue files:

• Wherever stylelint is manually invoked, make sure to point it both at stylesheets, and Vue components: stylelint --report-needless-disables './src/sass' './src/vue_components'.
• With stylelint-webpack-plugin, use extensions: ['scss', 'vue'],.
• With pre-commit, use files: \.(scss|vue)$.

To get the most out of this config, it is assumed that projects have the following tools set up:

• Prettier for automated formatting of stylesheets.
• Browserslist and autoprefixer.

See config.js for the config definition. This package depends on:

• stylelint-scss
• stylelint-order
• stylelint-a11y
• stylelint-declaration-strict-value
• stylelint-config-standard
• stylelint-config-prettier

• color-named: never
• number-leading-zero: always
• declaration-block-no-shorthand-property-overrides
• declaration-no-important
• selector-max-id: 0
• selector-max-type: 2, ignore: child, compounded, next-sibling
• selector-class-pattern: , resolveNestedSelectors: true
• max-nesting-depth: 4
• selector-max-specificity: 0,4,0
• value-no-vendor-prefix
• function-calc-no-invalid
• property-no-vendor-prefix
• selector-no-vendor-prefix
• media-feature-name-no-vendor-prefix
• at-rule-no-vendor-prefix
• scss/at-rule-no-unknown
• scss/declaration-nested-properties: never
• scss/selector-no-redundant-nesting-selector
• scss/percent-placeholder-pattern: ^do-not-use-placeholders$
• scss/dollar-variable-no-missing-interpolation
• scss/at-mixin-argumentless-call-parentheses: always
• scss/at-mixin-pattern: ``
• order/order: dollar-variables, custom-properties, type: at-rule, hasBlock: false, declarations
• a11y/no-obsolete-attribute
• a11y/no-obsolete-element
• a11y/no-text-align-justify
• a11y/no-outline-none
• scale-unlimited/declaration-strict-value: color, fill, stroke, /-color/, ignoreKeywords: currentColor, inherit, transparent, initial

• at-rule-name-space-after: always
• color-hex-length: short
• comment-empty-line-before: always, except: first-nested, ignore: stylelint-commands
• comment-whitespace-inside: always
• custom-property-empty-line-before: always, except: after-custom-property, first-nested, ignore: after-comment, inside-single-line-block
• declaration-bang-space-after: never
• declaration-bang-space-before: always
• declaration-block-single-line-max-declarations: 1
• function-name-case: lower
• function-whitespace-after: always
• length-zero-no-unit
• media-feature-colon-space-after: always
• media-feature-colon-space-before: never
• media-feature-parentheses-space-inside: never
• media-feature-range-operator-space-after: always
• media-feature-range-operator-space-before: always
• selector-attribute-brackets-space-inside: never
• selector-attribute-operator-space-after: never
• selector-attribute-operator-space-before: never
• selector-pseudo-class-parentheses-space-inside: never
• selector-pseudo-element-colon-notation: double
• selector-type-case: lower
• value-keyword-case: lower
• block-no-empty
• color-no-invalid-hex
• comment-no-empty
• declaration-block-no-duplicate-properties: true, ignore: consecutive-duplicates-with-different-values
• font-family-no-duplicate-names
• font-family-no-missing-generic-family-keyword
• function-calc-no-unspaced-operator
• function-linear-gradient-no-nonstandard-direction
• keyframe-declaration-no-important
• media-feature-name-no-unknown
• no-duplicate-at-import-rules
• no-duplicate-selectors
• no-empty-source
• no-invalid-double-slash-comments
• property-no-unknown
• selector-pseudo-class-no-unknown
• selector-pseudo-element-no-unknown
• selector-type-no-unknown
• string-no-newline
• unit-no-unknown
• selector-attribute-quotes: always
• at-rule-semicolon-space-before: never

Rules that are turned off on purpose.

Rules that are not configured.

See the contribution guidelines for guidance and setup instructions.