stylelint-config-modern

The modern CSS shareable config for Stylelint.

It complements Stylelint's standard config by turning on additional lint rules to enforce modern CSS features and conventions.

It works alongside the textual rules and examples at moderncss.ai.

Installation

Install using npm (or bun, pnpm etc.):

npm install stylelint-config-modern --save-dev

Usage

Add it to your stylelint config:

export default {
   extends: [
    "stylelint-config-standard",
+   "stylelint-config-modern"
  ],
};

Directionality

This config sets languageOptions.directionality to the CSS initial values (block: "top-to-bottom", inline: "left-to-right").

If your project is right-to-left, vertical, or bidirectional, override it in your config.

For example, for right-to-left:

export default {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-modern"
  ],
+ languageOptions: {
+   directionality: { block: "top-to-bottom", inline: "right-to-left" },
+ },
};

Cross-file references (opt-in)

If you use the modern CSS features of custom properties and @custom-media, you may want to check they're known across your project by using the referenceFiles configuration property.

For example, if they're defined in a tokens directory:

export default {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-modern"
  ],
+ referenceFiles: ["tokens/*.css"],
+ rules: {
+   "no-unknown-custom-properties": true,
+   "no-unknown-custom-media": true,
+ },
};

Changelog

License