Skip to content

Latest commit

 

History

History
308 lines (216 loc) · 20.1 KB

rules.md

File metadata and controls

308 lines (216 loc) · 20.1 KB

Rules

Every rule is standalone and turned off by default. None of the rules have default values for their options.

List of rules

Here are all the rules within stylelint, grouped by the thing they apply to.

Color

Font family

  • font-family-name-quotes: Specify whether or not quotation marks should be used around font family names, and whether single or double.

Font weight

Function

Number

String

Time

Unit

Value

Value list

Custom property

Property

Declaration

Declaration block

Block

Root selector

Selector

Selector list

Rule

Media feature

Custom media

Media query

Media query list

At rule

Comment

General / Sheet

About rule names

  • Made of lowercase words separated by hyphens.

  • Split into two parts:

    • The first describes what thing the rule applies to.
    • The second describes what the rule is checking.
"number-leading-zero"
    ↑       ↑
the thing   what the rule is checking
  • Except when the rule applies to the whole stylesheet:
"no-eol-whitespace"
"indentation"
     ↑
  what the rules are checking

No rules

Most rules allow you to choose whether you want to require *or- disallow something.

For example, whether numbers must or must not have a leading zero:

  • number-leading-zero: string - "always"|"never"

    • "always" - there must always be a leading zero.
    • "never" - there must never be a leading zero.
    a { line-height: 0.5; }
/**                  ↑
 *   This leading zero */

However, some rules just disallow something. *-no-* is used to identify these rules.

For example, whether empty blocks should be disallowed:

  • block-no-empty - blocks must not be empty.
    a { }
/**    ↑
 *  Blocks like this */

Notice how, for a rule like this, it does not make sense to have an option to enforce the opposite i.e. that every block must be empty.

Max rules

*-max-* is used when a rule is setting a limit to something.

For example, specifying the maximum number of digits after the "." in a number:

  • number-max-precision: int
    a { font-size: 1.333em; }
/**                 ↑
 * The maximum number of digits after this "." */

Whitespace rules

Whitespace rules allow you to specify whether an empty line, a single space, a newline or no space must be used in some specific part of the stylesheet.

The whitespace rules combine two sets of keywords:

  1. before, after and inside are used to specify where the whitespace (if any) is expected.
  2. empty-line, space and newline are used to specify whether a single empty line, a single space, a single newline or no space is expected there.

For example, specifying if a single empty line or no space must come before all the comments in a stylesheet:

  • comment-empty-line-before: string - "always"|"never"
    a {}
                  ←
    /* comment */ ↑
                  ↑
/**               ↑
 *        This empty line  */

Additionally, some whitespace rule make use of another set of keywords:

  1. comma, colon, semicolon, opening-brace, closing-brace, opening-parenthesis, closing-parenthesis, operator or range-operator are used if a specific piece of punctuation in the thing is being targetted.

For example, specifying if a single space or no space must come after a comma in a function:

  • function-comma-space-after: string - "always"|"never"
    a { transform: translate(1, 1) }
/**                           ↑
 *  The space after this commas */

The plural of the punctuation is used for inside rules. For example, specifying if a single space or no space must be inside the parentheses of a function:

  • function-parentheses-space-inside: string - "always"|"never"
    a { transform: translate( 1, 1 ); }
/**                         ↑      ↑
 * The space inside these two parentheses */