stylelint-config-torchbox

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

Usage

Install stylelint, and the config:

npm install --save-dev stylelint@10 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',
};

Tips

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

Related tools

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.

What’s included

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

Rules

Custom rules

• 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

Rules of stylelint-config-standard

• 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

Disabled rules

Rules that are turned off on purpose.

• declaration-empty-line-before
• no-descending-specificity
• at-rule-no-unknown
• at-rule-empty-line-before
• at-rule-name-case
• at-rule-semicolon-newline-after
• block-closing-brace-empty-line-before
• 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-hex-case
• declaration-block-semicolon-newline-after
• declaration-block-semicolon-space-after
• declaration-block-semicolon-space-before
• declaration-block-trailing-semicolon
• declaration-colon-newline-after
• declaration-colon-space-after
• declaration-colon-space-before
• function-comma-newline-after
• function-comma-space-after
• function-comma-space-before
• function-max-empty-lines
• function-parentheses-newline-inside
• function-parentheses-space-inside
• indentation
• max-empty-lines
• media-feature-name-case
• media-query-list-comma-newline-after
• media-query-list-comma-space-after
• media-query-list-comma-space-before
• no-eol-whitespace
• no-missing-end-of-source-newline
• number-no-trailing-zeros
• property-case
• rule-empty-line-before
• selector-combinator-space-after
• selector-combinator-space-before
• selector-descendant-combinator-no-non-space
• selector-list-comma-newline-after
• selector-list-comma-space-before
• selector-max-empty-lines
• selector-pseudo-class-case
• selector-pseudo-element-case
• unit-case
• value-list-comma-newline-after
• value-list-comma-space-after
• value-list-comma-space-before
• value-list-max-empty-lines
• no-extra-semicolons
• linebreaks
• max-line-length
• function-comma-newline-before
• value-list-comma-newline-before
• declaration-block-semicolon-newline-before
• block-closing-brace-space-after
• block-opening-brace-newline-before
• selector-list-comma-newline-before
• selector-list-comma-space-after
• media-query-list-comma-newline-before
• at-rule-name-newline-after
• no-empty-first-line
• unicode-bom
• string-quotes

Unused rules

Rules that are not configured.

• comment-word-disallowed-list
• custom-media-pattern
• custom-property-pattern
• declaration-block-no-redundant-longhand-properties
• declaration-property-unit-disallowed-list
• declaration-property-unit-allowed-list
• declaration-property-value-disallowed-list
• declaration-property-value-allowed-list
• font-family-name-quotes
• font-weight-notation
• function-disallowed-list
• function-url-no-scheme-relative
• function-url-quotes
• function-url-scheme-disallowed-list
• function-url-scheme-allowed-list
• function-allowed-list
• keyframes-name-pattern
• linebreaks
• media-feature-name-disallowed-list
• media-feature-name-value-allowed-list
• media-feature-name-allowed-list
• no-empty-first-line
• no-unknown-animations
• number-max-precision
• property-disallowed-list
• property-allowed-list
• scss/partial-no-import
• scss/selector-nest-combinators
• selector-attribute-operator-disallowed-list
• selector-attribute-operator-allowed-list
• selector-combinator-disallowed-list
• selector-combinator-allowed-list
• selector-max-attribute
• selector-max-class
• selector-max-combinators
• selector-max-compound-selectors
• selector-max-pseudo-class
• selector-max-universal
• selector-nested-pattern
• selector-pseudo-class-disallowed-list
• selector-pseudo-class-allowed-list
• selector-pseudo-element-disallowed-list
• selector-pseudo-element-allowed-list
• time-min-milliseconds
• unit-disallowed-list
• unit-allowed-list
• value-keyword-case
• scss/dollar-variable-pattern
• scss/at-function-pattern
• scss/at-import-partial-extension-blacklist
• scss/at-import-partial-extension-whitelist
• scss/dollar-variable-default
• scss/no-dollar-variables
• order/properties-alphabetical-order
• a11y/content-property-no-static-value
• a11y/font-size-is-readable
• a11y/line-height-is-vertical-rhythmed
• a11y/media-prefers-color-scheme
• a11y/media-prefers-reduced-motion
• a11y/no-display-none
• a11y/no-spread-text
• a11y/selector-pseudo-class-focus
• at-rule-disallowed-list
• at-rule-property-required-list
• at-rule-allowed-list
• color-no-hex
• selector-id-pattern
• 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-extend-no-missing-placeholder
• scss/at-function-parentheses-space-before
• scss/at-if-closing-brace-newline-after
• scss/at-if-closing-brace-space-after
• scss/at-import-no-partial-leading-underscore
• scss/at-mixin-parentheses-space-before
• scss/declaration-nested-properties-no-divided-groups
• scss/dollar-variable-colon-newline-after
• scss/dollar-variable-colon-space-after
• scss/dollar-variable-colon-space-before
• scss/dollar-variable-empty-line-before
• scss/double-slash-comment-empty-line-before
• scss/double-slash-comment-inline
• scss/double-slash-comment-whitespace-inside
• scss/operator-no-newline-after
• scss/operator-no-newline-before
• scss/operator-no-unspaced
• alpha-value-notation
• color-function-notation
• hue-degree-notation
• scss/comment-no-empty
• scss/dollar-variable-empty-line-after
• scss/dollar-variable-first-in-block
• scss/no-duplicate-mixins
• scss/no-global-function-names
• scss/at-each-key-value-single-line
• scss/at-function-named-arguments
• scss/at-if-no-null
• scss/at-import-partial-extension
• scss/at-mixin-named-arguments
• scss/at-rule-conditional-no-parentheses
• scss/comment-no-loud
• scss/dimension-no-non-numeric-values
• scss/function-color-relative
• scss/function-quote-no-quoted-strings-inside
• scss/function-unquote-no-unquoted-strings-inside
• scss/map-keys-quotes
• scss/no-duplicate-dollar-variables
• scss/selector-no-union-class-name
• scss/media-feature-value-dollar-variable
• selector-no-qualifying-type
• shorthand-property-no-redundant-values
• order/properties-order

Contributing

See the contribution guidelines for guidance and setup instructions.