stylelint-config-saymedia

A sharable stylelint config object that enforces Say Media's CSS Standards

Installation

Install stylelint and stylelint-config-saymedia:

npm install stylelint saymedia/stylelint-config-saymedia --save-dev

Usage

If you've installed stylelint-config-saymedia locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-saymedia"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-whitelist rule:

{
  "extends": "stylelint-config-saymedia",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "ignores"
      ]
    }],
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Documentation

Extends

• stylelint-config-recommended: The recommended shareable config for stylelint

Plugins

• stylelint-declaration-block-no-ignored-properties: Disallow property values that are ignored due to another property value in the same rule.
• stylelint-order: A plugin pack of order related linting rules for stylelint.
• stylelint-scss: A collection of SCSS specific linting rules for stylelint

Configured Lints

This is a list of the lints turned on in this configuration (beyond the ones that come from stylelint-config-recommended), and what they do.

At-rule

• at-rule-empty-line-before: Require an empty line before at-rules. disabled temporarily, pending #2480
• at-rule-no-unknown: Disallow unknown at-rules. disabled in favor of the SCSS version
• scss/at-rule-no-unknown: Disallow unknown at-rules. Should be used instead of stylelint's at-rule-no-unknown.
• at-rule-no-vendor-prefix: Disallow vendor prefixes for at-rules.

Block

• block-closing-brace-newline-after: Require a newline after the closing brace of blocks. overriding recommended version to exclude @if and @else rules.

Color

• color-hex-length: Specify long notation for hex colors

Custom Property

• custom-property-pattern: Use snake_case for custom properties

Declaration

• plugin/declaration-block-no-ignored-properties: Disallow property values that are ignored due to another property value in the same rule.
• declaration-empty-line-before: Disallow an empty line before declarations

Font Family

• font-family-name-quotes: Use quotation marks around font family names where recommended by the spec.

Function

• function-url-quotes: Require quotes for urls

General / Sheet

• indentation: Use 4 spaces for indentation
• max-line-length: Limit line lengths to 100 characters (excluding comments)
• no-descending-specificity: Disallow selectors of lower specificity from coming after overriding selectors of higher specificity. disabled temporarily, due to false positives, pending #2489

Media Feature

• media-feature-name-no-vendor-prefix: Disallow vendor prefixes for media feature names

Property

• property-no-vendor-prefix: Disallow vendor prefixes for properties.
• order/properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocks

Rule

• rule-empty-line-before: Require an empty line before multi-line rules

Selector

• selector-attribute-quotes: Require quotes for attribute values.
• selector-class-pattern: Use kebab-case for class names
• selector-max-id: Don't allow ID selectors
• selector-no-qualifying-type: Disallow qualifying a selector by type (excluding attribute selectors)
• selector-no-vendor-prefix: Disallow vendor prefixes for selectors.

String

• string-quotes: Specify double quotes around strings.

Time

• time-min-milliseconds: Specify a minimum time value of 100 milliseconds

Value

• value-keyword-case: Specify lowercase for keywords values.
• value-no-vendor-prefix: Disallow vendor prefixes for values.

SCSS

@else, @if

• scss/at-else-closing-brace-newline-after: Require a newline after the closing brace of @else statements if they're the last in the chain.
• scss/at-else-closing-brace-space-after: Require a single space after the closing brace of @else statements if they're not the last in the chain.
• scss/at-else-empty-line-before: Disallow empty lines before @else statements.
• scss/at-if-closing-brace-newline-after: Require a newline after the closing brace of @if statements if they're the last in the chain.
• scss/at-if-closing-brace-space-after: Require a single space after the closing brace of @if statements if they're not the last in the chain.

@function

• scss/at-function-parentheses-space-before: Disallow a space before @function parentheses.
• scss/at-function-pattern: Use snake_case for functions

@mixin

• scss/at-mixin-argumentless-call-parentheses: Require parentheses in argumentless @mixin calls.
• scss/at-mixin-parentheses-space-before: Disallow a space before @mixin parentheses.
• scss/at-mixin-pattern: Use snake_case for mixins

$variable

• scss/dollar-variable-colon-newline-after: Require a newline after the colon in multi-line $variable declarations.
• scss/dollar-variable-colon-space-after: Require a single space after the colon in single-line $variable declarations.
• scss/dollar-variable-colon-space-before: Disallow whitespace before the colon in $variable declarations.
• scss/dollar-variable-empty-line-before: Require a single empty line before groups of $variable declarations except after comments
• scss/dollar-variable-no-missing-interpolation: Disallow Sass variables that are used without interpolation with CSS features that use custom identifiers.
• scss/dollar-variable-pattern: Use snake_case for $variables

%placeholder

• scss/percent-placeholder-pattern: Use snake_case for placeholders

// comment

• scss/double-slash-comment-empty-line-before: Require an empty line before most //-comments
• scss/double-slash-comment-whitespace-inside: Require whitespace after the // in //-comments

Other

• scss/declaration-nested-properties: Disallow properties with - in their names to be in a form of a nested group.
• scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (&).

Changelog

License