docs.md

@azat-io/stylelint-config

Base rules

alpha-value-notation

Disallow to use number notation for alpha-values.

/* bad */
.foo {
  color: oklch(0 0 0 / 0.5);
  opacity: 0.8;
}

/* good */
.foo {
  color: oklch(0 0 0 / 50%);
  opacity: 80%;
}

annotation-no-unknown

Disallow unknown annotations.

/* bad */
a {
  color: green !please;
}

/* good */
a {
  color: green !important;
}

at-rule-empty-line-before

Require an empty line before at-rules.

/* bad */
a {
}
@media {
}

/* good */
a {
}

@media {
}

at-rule-no-vendor-prefix

Disallow vendor prefixes for at-rules.

/* bad */
@-webkit-keyframes {
  0% {
    top: 0;
  }
}

/* good */
@keyframes {
  0% {
    top: 0;
  }
}

block-no-empty

Disallow empty blocks.

color-function-notation

Specify modern notation for color-functions.

/* bad */
.foo {
  color: oklch(70%, 0.1, 248);
}

/* good */
.foo {
  color: oklch(70% 0.1 248);
}

color-name

Disallow named colors.

/* bad */
a {
  color: black;
}

/* good */
a {
  color: oklch(0% 0 0);
}

color-no-hex

Disallow hex colors.

/* bad */
a {
  color: #333;
}

/* good */
a {
  color: oklch(32.11% 0 0);
}

comment-empty-line-before

Require an empty line before comments.

/* bad */
a {
}
/* comment */

/* good */
a {
}

/* comment */

comment-no-empty

Disallow empty comments.

comment-whitespace-inside

Require whitespace on the inside of comment markers.

custom-property-empty-line-before

Specify a pattern for custom media query names.

/* bad */
@custom-media --fooBar (max-width: 30em);

/* good */
@custom-media --foo-bar (max-width: 30em);

custom-property-no-missing-var-function

Disallow missing var function for custom properties.

/* bad */
:root {
  --foo: red;
}

a {
  color: --foo;
}

/* good */
:root {
  --foo: red;
}

a {
  color: var(--foo);
}

custom-property-pattern

Specify a pattern for custom properties.

/* bad */
a {
  --fooBar: 1px;
}

/* good */
a {
  --foo-bar: 1px;
}

declaration-block-no-duplicate-custom-properties

Disallow duplicate custom properties within declaration blocks.

declaration-block-no-duplicate-properties

Disallow duplicate properties within declaration blocks.

/* bad */
a {
  color: pink;
  color: orange;
}

declaration-block-no-redundant-longhand-properties

Disallow redundant longhand properties within declaration-block.

/* bad */
.foo {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* good */
.foo {
  inset: 0;
}

declaration-block-no-shorthand-property-overrides

Disallow shorthand properties that override related longhand properties.

/* bad */
a {
  background-repeat: repeat;
  background: green;
}

declaration-block-single-line-max-declarations

Limit the number of declarations within a single-line declaration block.

declaration-empty-line-before

Require an empty line before declarations.

/* bad */
a {
  --foo: pink;
  top: 5px;
}

/* good */
a {
  --foo: pink;

  top: 5px;
}

font-family-name-quotes

Require quotes for font family names where recommended.

font-family-no-duplicate-names

Disallow duplicate names within font families.

font-family-no-missing-generic-family-keyword

Disallow a missing generic family keyword within font families.

/* bad */
a {
  font-family: Arial;
}

/* good */
a {
  font-family: Arial, sans-serif;
}

function-calc-no-unspaced-operator

Disallow invalid unspaced operator within calc functions.

/* bad */
a {
  top: calc(1px+2px);
}

/* good */
a {
  top: calc(1px + 2px);
}

function-disallowed-list

Disallow to use rgb, rgba, hsl, hsla functions.

function-linear-gradient-no-nonstandard-direction

Disallow non-standard direction values for linear gradient functions.

function-name-case

Specify lowercase for function names.

/* bad */
a {
  width: Calc(5% - 10em);
}

/* good */
a {
  width: calc(5% - 10em);
}

function-no-unknown

Disallow unknown functions.

/* bad */
a {
  transform: unknown(1);
}

function-url-quotes

Require quotes for urls.

/* bad */
a {
  background: url(x.jpg);
}

/* good */
a {
  background: url('x.jpg');
}

hue-degree-notation

Specify number notation for degree hues.

/* bad */
a {
  color: lch(56.29% 19.86 10deg / 15%);
}

/* good */
a {
  color: lch(56.29% 19.86 10 / 15%);
}

import-notation

Specify URL notation for @import rules.

/* bad */
@import 'foo.css';

/* good */
@import url(foo.css);

keyframe-block-no-duplicate-selectors

Disallow duplicate selectors within keyframe blocks.

/* bad */
@keyframes foo {
  0% {
  }

  0% {
  }
}

/* good */
@keyframes foo {
  0% {
  }

  100% {
  }
}

keyframe-declaration-no-important

Disallow invalid !important within keyframe declarations.

keyframe-selector-notation

Specify percentage notation for keyframe selectors.

/* bad */
@keyframes foo {
  from {
  }

  to {
  }
}

/* good */
@keyframes foo {
  0% {
  }

  100% {
  }
}

keyframes-name-pattern

Specify a pattern for keyframe names.

/* bad */
@keyframes fooBar {
}

/* good */
@keyframes foo-bar {
}

length-zero-no-unit

Disallow units for zero lengths.

/* bad */
a {
  top: 0px;
}

/* good */
a {
  top: 0;
}

media-feature-name-no-vendor-prefix

Disallow vendor prefixes for media feature names.

media-feature-name-no-unknown

Disallow unknown media feature names.

media-feature-range-notation

Specify context notation for media feature ranges.

/* bad */
@media (min-width: 800px) {
}

@media (width >= 800px) {
}

media-query-no-invalid

Disallow invalid media queries.

named-grid-areas-no-invalid

Disallow invalid named grid areas.

no-descending-specificity

Disallow selectors of lower specificity from coming after overriding selectors of higher specificity.

/* bad */
#container a {
  top: 10px;
}

a {
  top: 0;
}

no-duplicate-at-import-rules

Disallow duplicate @import rules.

no-duplicate-selectors

Disallow duplicate selectors.

/* bad */
.foo {
}

.foo {
}

no-invalid-double-slash-comments

Disallow invalid double-slash comments.

no-invalid-position-at-import-rule

Disallow invalid position @import rules.

number-max-precision

Limit the number of decimal places allowed in numbers to 4.

/* bad */
a {
  top: 3.245634px;
}

/* good */
a {
  top: 3.2456px;
}

property-no-vendor-prefix

Disallow vendor prefixes for properties.

/* bad */
a {
  -webkit-transform: scale(1);
}

/* good */
a {
  transform: scale(1);
}

property-no-unknown

Disallow unknown properties.

rule-empty-line-before

Require an empty line before rules.

selector-anb-no-unmatchable

Disallow unmatchable An+B selectors.

/* bad */
a:nth-of-type(0n + 0) {
}

selector-attribute-quotes

Require quotes for attribute values.

selector-class-pattern

Specify a pattern for class selectors.

/* bad */
.fooBar {
}

/* good */
.foo-bar {
}

selector-id-pattern

Specify a pattern for id selectors.

/* bad */
#fooBar {
}

/* good */
#foo-bar {
}

selector-no-vendor-prefix

Disallow vendor prefixes for selectors.

/* bad */
input::-moz-placeholder {
}

/* good */
input::placeholder {
}

selector-not-notation

Specify complex notation for :not() pseudo-class selectors.

/* bad */
:not(a):not(div) {
}

/* good */
:not(a, div) {
}

selector-pseudo-class-no-unknown

Disallow unknown pseudo-class selectors.

selector-pseudo-element-no-unknown

Disallow unknown pseudo-element selectors.

/* bad */
a::pseudo {
}

selector-pseudo-element-colon-notation

Specify double colon notation for applicable pseudo-element selectors.

/* bad */
a:before {
  color: pink;
}

/* good */
a::before {
  color: pink;
}

selector-type-case

Specify lowercase for type selectors.

/* bad */
A {
}

/* good */
a {
}

selector-type-no-unknown

Disallow unknown type selectors.

tag {
}

shorthand-property-no-redundant-values

Disallow redundant values within shorthand properties.

/* bad */
a {
  margin: 1px 1px;
}

/* good */
a {
  margin: 1px;
}

string-no-newline

Disallow invalid newlines within strings.

unit-no-unknown

Disallow unknown units.

/* bad */
a {
  width: 100pixels;
}

value-keyword-case

Specify lowercase for keywords values.

/* bad */
a {
  display: BLOCK;
}

a {
  display: block;
}

value-no-vendor-prefix

Disallow vendor prefixes for values.

Gamut

color-no-out-gamut-range

Disallow out of gamut range colors.

Logical CSS

use-logical-properties-and-values

Require to use logical properties and values.

/* bad */
.foo {
  max-width: 100%;
}

/* bad */
.foo {
  max-inline-size: 100%;
}

use-logical-units

Require to use logical units.

/* bad */
.foo {
  max-inline-size: 100vw;
}

/* bad */
.foo {
  max-inline-size: 100vi;
}