Primer Stylelint Config

A sharable stylelint config object that enforces GitHub's CSS rules

Install

$ npm install --save --dev @primer/stylelint-config

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:

{
  "extends": "@primer/stylelint-config"
}

Documentation

Plugins

• stylelint-order: Order-related linting rules for stylelint. Properties must be sorted according to this list.
• stylelint-scss: A collection of SCSS specific linting rules for stylelint
  • scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (&).
• primer/no-override: Prohibits custom styles that target Primer CSS selectors.
• primer/no-unused-vars: Warns about SCSS variables that are declared by not used in your local files.
• primer/no-undefined-vars: Prohibits usage of undefined CSS variables.
• primer/no-scale-colors: Prohibits the use of non-functional scale CSS variables
• primer/colors: Enforces the use of certain color variables.
• primer/spacing: Enforces the use of spacing variables for margin and padding.
• primer/typography: Enforces the use of typography variables for certain CSS properties.
• primer/borders: Enforces the use of certain variables for border properties.
• primer/box-shadow: Enforces the use of certain variables for box-shadow.

Configured lints

This is a list of the lints turned on in this configuration, and what they do.

At-rule

• at-rule-disallowed-list: Specify a list 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-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-disallowed-list: Specify a list of disallowed property and value pairs within declarations.
  • ^transition: Disallow the use of all within transitions.
  • ^background: Disallow the use of http: protocols within background image urls.
  • ^border: Disallow the use of the word none for borders, use 0 instead.
  • .+: For everything ban the use of the word initial.

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

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.

License

MIT © GitHub