stylelint-config

Stylelint configuration file used on my personal website (w0s.jp).

Features

It is based on stylelint-config-standard with its own rule settings.

🙂: No problem, 😨: Error

• Do not use ID selector.
  • 😨 #foo {}
  • 🙂 .foo {}
• Do not use multiple universal selectors. However, this excludes the use of a next-sibling combinator (+).
  • 🙂 * {}
  • 😨 * > * {}
  • 🙂 * + * {} (This is used in the "owl selector" in stack layout)
• The attribute selectors' case-sensitivity require the i identifier. See stylelint-attribute-case-sensitivity for details.
  • 😨 [type="foo"] { }
  • 🙂 [type="foo" i] { }
• CSS nesting must use the & nesting selector.
  • 😨 .foo { .bar {} }
  • 🙂 .foo { &.bar {} }
• Disallow !important within declarations.
  • 😨 color: #000 !important
  • 🙂 color: #000
• Disallow complex shorthand properties such as background and font.
  • 😨 white-space: pre-wrap
  • 🙂 white-space-collapse: preserve
• The display property must use multi keyword syntax.
  • 😨 display: block
  • 🙂 display: block flow
• Use logical properties instead of physical properties.
  • 😨 margin-top: 1em
  • 🙂 margin-block-start: 1em
  • 🙂 overflow-x: visible (The overflow-* logical properties is not well supported by browsers)
• Use logical units instead of physical units.
  • 😨 inline-size: 10lvw
  • 🙂 inline-size: 10lvi
• Use logical values instead of physical values.
  • 😨 text-align: right
  • 🙂 text-align: end
  • 🙂 caption-side: top (Logical values for the caption-side property is only inline-start or inline-end)
• Disallow default viewport-percentage units. The stylelint-no-default-viewport plugin is used.
  • 😨 inline-size: 10vi
  • 🙂 inline-size: 10lvi
• The text-indent value must be 0 or greater.
  • 😨 margin-inline-start: 1em; text-indent: -1em
  • 🙂 text-indent: 1em hanging
• The font-weight value must be a number.
  • 😨 font-weight: normal
  • 🙂 font-weight: 500 /* Windows + Yu Gothic measures to be greater than 400 */
• Flex containers require an explicit flex-wrap property. The stylelint-plugin-defensive-css plugin is used.
  • 😨 display: block flex
  • 🙂 display: block flex; flex-wrap: nowrap
• For the root element, color and background-color must be specified as a set. The stylelint-root-colors plugin is used.
  • 😨 :root { color: #000 }
  • 🙂 :root { background-color: #fff; color: #000 }
• The order of properties within declaration blocks follows stylelint-config-concentric-order.
  • 😨 .foo { padding: 1em; margin: 1em }
  • 🙂 .foo { margin: 1em; padding: 1em }

See source code for other details.

Usage

{
  "extends": ["@w0s/stylelint-config"]
}