stylelint-config-telegraph
This package provides TMG's base CSS .stylelintrc as an extensible shared config.
Install
$ npm install --save-dev stylelint-config-telegraph
Usage
Within your stylelint config object You can extend this configuration. This will serve as a base for your config, then you can make overrides in your own config object.
Styleguide
Selectors
ID
Never use ID selectors. The high specificty can cause unexpected interactions between styles.
Class
Class names should be in the Block Element Modifier (BEM) style. BEM allows for clean, reusable code, that makes a clear connection between the HTML markup and the styles.
Documentation
Plugins
- stylelint-scss: A collection of SCSS specific linting rules for stylelint
- scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (
&
).
- scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (
- stylelint-selector-no-utility: Stylelint rule that doesn't allow the styling of utility classes in CSS
Configured lints
This is a list of the lints turned on in this configuration, and what they do.
At-rule
- at-rule-blacklist: Specify a blacklist of disallowed at-rules.
"extend"
Disallow the use of@extend
.
- at-rule-name-case: at rules must be in written lowercase.
- at-rule-name-space-after: There must always be a single space after at-rule names in single-line declaration blocks.
- at-rule-semicolon-newline-after: There must always be a newline after the semicolon.
Block
- block-closing-brace-newline-after: There must always be a newline after the closing brace.
- block-closing-brace-newline-before: There must always be a newline before the closing brace in multi-line blocks.
- block-closing-brace-space-before: There must always be a single space before the closing brace in single-line blocks.
- block-no-empty: Disallow empty blocks.
- block-opening-brace-newline-after: There must always be a newline after the opening brace in multi-line blocks.
- block-opening-brace-space-after: There must always be a single space after the opening brace in single-line blocks.
- block-opening-brace-space-before: There must always be a single space before the opening brace.
Color
- color-hex-case: Hex colors must be written in lowercase.
- color-hex-length: Always use short hex notation, where available.
- color-named: Colors must never be named.
- color-no-invalid-hex: Hex values must be valid.
Comment
- comment-empty-line-before: There must always be an empty line before comments. Except: Comments that are nested and the first child of their parent node. Ignore: stylelint commands
- comment-whitespace-inside: There must always be whitespace inside the markers.
Declaration
- declaration-bang-space-after: There must never be whitespace after the bang.
- declaration-bang-space-before: There must always be a single space before the bang.
- declaration-colon-newline-after: There must always be a newline after the colon if the declaration's value is multi-line.
- declaration-colon-space-after: There must always be a single space after the colon if the declaration's value is single-line.
- declaration-colon-space-before: There must never be whitespace before the colon.
Declaration block
- declaration-block-no-duplicate-properties: Disallow duplicate properties within declaration blocks. Ignore: consecutive duplicated properties.
- declaration-block-no-shorthand-property-overrides: Disallow shorthand properties that override related longhand properties.
- declaration-block-properties-order: Properties in declaration blocks must be sorted according to this list.
- declaration-block-semicolon-newline-after: There must always be a newline after the semicolon.
- declaration-block-semicolon-space-before: There must never be whitespace before the semicolons.
- declaration-block-single-line-max-declarations: There should never be more than
1
declaration per line. - declaration-block-trailing-semicolon: There must always be a trailing semicolon.
Declaration Property
- declaration-property-value-blacklist: Specify a blacklist of disallowed property and value pairs within declarations.
^transition
: Disallow the use ofall
within transitions.^background
: Disallow the use ofhttp:
protocols within background image urls.^border
: Disallow the use of the wordnone
for borders, use0
instead..+
: For everything ban the use of the wordinitial
.
Font Family
- font-family-name-quotes: Expect quotes only when quotes are required according to the criteria, and disallow quotes in all other cases.
Function
- function-calc-no-unspaced-operator: Disallow an unspaced operator within
calc
functions. - function-comma-newline-after: There must never be a whitespace after the commas in multi-line functions.
- function-comma-space-after: There must always be a single space after the commas in single-line functions.
- function-comma-space-before: There must never be whitespace before the commas.
- function-linear-gradient-no-nonstandard-direction: Disallow direction values in
linear-gradient()
calls that are not valid according to the standard syntax. - function-max-empty-lines: There must never be empty lines within a function.
- function-name-case: Function names must be written in lowercase.
- function-parentheses-newline-inside: There must always be a newline inside the parentheses of multi-line functions.
- function-parentheses-space-inside: There must always be a single space inside the parentheses of single-line functions.
- function-url-quotes: Urls must always be quoted.
- function-whitespace-after: There must always be whitespace after the function.
General
- indentation: Indentation should always be
2
spaces. - max-empty-lines: Limit the number of adjacent empty lines to
1
. - max-nesting-depth: Limit the allowed nesting depth
3
. - no-duplicate-selectors: Disallow duplicate selectors within a stylesheet.
- no-eol-whitespace: Disallow end-of-line whitespace.
- no-extra-semicolons: Disallow extra semicolons.
- no-missing-end-of-source-newline: Disallow missing end-of-file newlines in non-empty files.
- no-unsupported-browser-features: Disallow features that are unsupported by the browsers that we are targeting in the config
Media Feature
- media-feature-colon-space-after: There must always be a single space after the colon.
- media-feature-colon-space-before: There must never be whitespace before the colon.
- media-feature-no-missing-punctuation: Disallow missing punctuation for non-boolean media features.
- media-feature-range-operator-space-after: There must always be a single space after the range operator.
- media-feature-range-operator-space-before: There must always be a single space before the range operator.
Media Query
- media-feature-parentheses-space-inside: There must never be whitespace on the inside the parentheses.
Media Query List
- media-query-list-comma-newline-after: There must always be a newline after the commas in multi-line media query lists.
- media-query-list-comma-space-after: There must always be a single space after the commas in single-line media query lists.
- media-query-list-comma-space-before: There must never be whitepace before the commas.
Number
- number-leading-zero: There must always be a leading zero.
- number-no-trailing-zeros: Disallow trailing zeros in numbers.
Length
- length-zero-no-unit: Disallow units for zero lengths.
Property
- property-case: Properties must be written in lowercase.
- property-no-vendor-prefix: Disallow vendor prefixes for properties.
- shorthand-property-no-redundant-values: Disallow redundant values in shorthand properties.
Rule
- rule-nested-empty-line-before: There must always be an empty line before multi-line rules. Except: Nested rules that are the first of their parent rule. Ignore: Rules that come after a comment.
- rule-non-nested-empty-line-before: There must always be an empty line before multi-line rules. Ignore: Rules that come after a comment.
Selector
- selector-attribute-brackets-space-inside: There must never be whitespace on the inside the brackets.
- selector-attribute-operator-space-after: There must never be a single after after the operator.
- selector-attribute-operator-space-before: There must never be a single before after the operator.
- selector-combinator-space-after: There must always be a single space after the combinators.
- selector-combinator-space-before: There must always be a single space before the combinators.
- selector-max-compound-selectors: Limit the number of compound selectors in a selector to
3
. - selector-max-empty-lines: Limit the number of adjacent empty lines within selectors to
0
. - selector-max-specificity: Limit the specificity of selectors to
"0,4,0"
. - selector-no-id: Disallow id selectors.
- selector-no-qualifying-type: Disallow qualifying a selector by type.
- selector-no-type: Disallow type selectors.
- selector-pseudo-class-case: pseudo-class selectors should always be lowercase.
- selector-pseudo-class-parentheses-space-inside: There must never be whitespace on the inside the parentheses.
- selector-pseudo-element-case: pseudo-element selectors should always be lowercase.
- selector-pseudo-element-colon-notation: Applicable pseudo-elements must always use the double colon notation.
- selector-pseudo-element-no-unknown: Disallow unknown pseudo-element selectors.
- selector-type-case: Type selectors must always be written in lowercase.
Selector List
- selector-list-comma-newline-after: There must always be a newline after the commas.
- selector-list-comma-space-before: There must never be whitespace before the commas.
String
- string-no-newline: Disallow (unescaped) newlines in strings.
- string-quotes: Strings must always be wrapped with double quotes.
Unit
- unit-case: Units must be written in lowercase.
- unit-no-unknown: Disallow unknown units.
Value
- value-no-vendor-prefix: Disallow vendor prefixes for values.
Value list
- value-list-comma-newline-after: There must always be a newline after the commas in multi-line value lists.
- value-list-comma-space-after: There must always be a single space after the commas in single-line value lists.
- value-list-comma-space-before: There must never be whitespace before the commas.