Stylelint Guide

Rules ¶

Disallow unknown annotations ¶

annotation-no-unknown

This rule considers annotations defined in the CSS Specifications, up to and including Editor's Drafts, to be known.

// Incorrect
a {
  color: green !imprtant;
}
// Correct
a {
  color: green !important;
}

Disallow invalid hex colors ¶

color-no-invalid-hex

Longhand hex colors can be either 6 or 8 (with alpha channel) hexadecimal characters. And their shorthand variants are 3 and 4 characters respectively.

// Incorrect
a { color: #00; }
a { color: #fff1az; }
a { color: #12345aa; }
// Correct
a { color: #000; }
a { color: #000f; }
a { color: #fff1a0; }
a { color: #123450aa; }

Disallow duplicate font family names ¶

font-family-no-duplicate-names This rule checks the font and font-family properties.

This rule ignores $sass, @less, and var(--custom-property) variable syntaxes

Caveat: This rule will stumble on unquoted multi-word font names and unquoted font names containing escape sequences. Wrap these font names in quotation marks, and everything should be fine.

// Incorrect
a { font-family: 'Times', Times, serif; }
a { font: 1em "Arial", 'Arial', sans-serif; }
a { font: normal 14px/32px -apple-system, BlinkMacSystemFont, sans-serif, sans-serif; }
// Correct
a { font-family: Times, serif; }
a { font: 1em "Arial", "sans-serif", sans-serif; }
a { font: normal 14px/32px -apple-system, BlinkMacSystemFont, sans-serif; }

Disallow (unescaped) newlines in strings ¶

string-no-newline

The spec says this: "A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as '\A' or '\00000a'." And also: "It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash ()."

// Incorrect
a {
  content: "first
    second";
}

[title="something
is probably wrong"] {}

a {
  font-family: "Times
    New
    Roman";
}
// Correct
a {
  content: "first\Asecond";
}

a {
  content: "first\\nsecond";
}

[title="nothing\
  is wrong"] {}

a {
  font-family: "Times New Roman";
}

Disallow unknown units ¶

unit-no-unknown

This rule considers units defined in the CSS Specifications, up to and including Editor's Drafts, to be known.

// Incorrect
a {
  width: 10pixels;
}
a {
  width: calc(10px + 10pixels);
}
// Correct
a {
  width: 10px;
}
a {
  width: 10Px;
}
a {
  width: 10pX;
}
a {
  width: calc(10px + 10px);
}

Disallow unknown properties ¶

property-no-unknown

// Incorrect
a {
  colr: blue;
}

a {
  my-property: 1;
}
// Correct
a {
  color: green;
}

a {
  fill: black;
}

a {
  -moz-align-self: center;
}

a {
  -webkit-align-self: center;
}

a {
  align-self: center;
}

Disallow duplicate properties within declaration blocks ¶

declaration-block-no-duplicate-properties

// Incorrect
a { color: pink; color: orange; }

a { color: pink; background: orange; color: orange }
// Correct
a { color: pink; }

a { color: pink; background: orange; }

Disallow empty blocks ¶

block-no-empty

// Incorrect
a {}

a { }

@media print {
  a {}
}
// Correct
a {
  /* foo */
}

@media print {
  a {
    color: pink;
  }
}

Disallow unknown pseudo-class selectors ¶

selector-pseudo-class-no-unknown

// Incorrect
a:unknown {}

a:UNKNOWN {}

a:hoverr {}
// Correct
a:hover {}

a:focus {}

:not(p) {}

input:-moz-placeholder {}

Disallow unknown type selectors ¶

selector-type-no-unknown

// Incorrect
unknown {}

tag {}
// Correct
input {}

ul li {}

li > a {}

Disallow empty comments ¶

comment-no-empty

// Incorrect
/**/

/* */

/*

 */
// Correct
/* comment */

/*
 * Multi-line Comment
**/

Setting in project ¶

Add .stylelintrc.js in your project, and set these rules into it.

module.exports = {
  "extends": "stylelint-config-html/vue",
  "rules": {
    'annotation-no-unknown': true,
    'color-no-invalid-hex': true,
    'font-family-no-duplicate-names': true,
    'string-no-newline': true,
    'unit-no-unknown': true,
    'property-no-unknown': true,
    'declaration-block-no-duplicate-properties': true,
    'block-no-empty': true,
    'selector-pseudo-class-no-unknown': true,
    'selector-type-no-unknown': true,
    'comment-no-empty': true,
  }
}

You can use Stylelint on the command line. For example:

npx stylelint "src/**/*.vue"

For more usage, please check the official docs

References ¶

Official Stylelint Guide