Stylelint rules from Digital Element

Usage

Install package:

npm i -D stylelint @delement/stylelint-config-master

In stylelint.config.ts configuration file:

import baseConfig from "@delement/stylelint-config-master";
import type { Config } from "stylelint";

// Local overwrites
const localCfg = {
};

// Merged config
const cfg = {
  ...baseConfig,
  ...localCfg,
} satisfies Config;

export default cfg;

Run linting:

npx stylelint "./src/**/*.pcss" --fix

Compatibility

• Node.js: >=24
• Stylelint: ^17.14.0

Why this config

• Targets PostCSS (.pcss) workflows out of the box;
• Enforces consistent camelCase naming for key entities;
• Pushes token-based styling through strict value checks;
• Keeps unknown-rule checks strict with explicit PostCSS allow-lists.

Rules summary

• Naming patterns: class names, custom properties, @keyframes, @layer, custom @media;
• Formatting and readability: indentation, spacing, trailing semicolons, empty-line limits;
• Quality checks: no duplicate selectors, no redundant shorthand/longhand declarations;
• Safety checks: unknown entities validation with scoped allow-lists for PostCSS syntax;
• Token policy: no raw values for configured color/shadow/border/typography/layout properties.

Valid PostCSS example

/* buttonPrimary.pcss */

@custom-media --desktopViewport (width >= 64em);

:root {
  --textColorPrimary: #ffffff;
  --surfaceColorPrimary: #1454ff;
  --borderPrimary: 1px solid var(--surfaceColorPrimary);
  --radiusM: 8px;
  --fontSizeBody: 16px;
  --lineHeightBody: 24px;
  --shadowControl: 0 4px 12px rgb(20 84 255 / 28%);
}

.buttonPrimary {
  color: var(--textColorPrimary);
  background-color: var(--surfaceColorPrimary);
  border: var(--borderPrimary);
  border-radius: var(--radiusM);
  font-size: var(--fontSizeBody);
  line-height: var(--lineHeightBody);
  box-shadow: var(--shadowControl);
}

Features

• Default support for PostCSS-only (.pcss) files;
• Defined order for rules and properties;
• camelCase (with optional __segment) for class names, custom properties, @keyframes, @layer, and custom @media names;
• Strict indentation using two spaces;
• A maximum of two consecutive empty lines;
• Duplicate selectors, redundant shorthand/longhand declarations are disallowed;
• Vendor-prefixed properties and values are reported as warnings;
• Tokenized values are required for color/fill/stroke, shadows, border/outline, and typographic/layout tokens (font-size, line-height, z-index, border-radius) via stylelint-declaration-strict-value;
• Unknown CSS entities are checked with allow-list exceptions for PostCSS syntax (including @add-mixin, @custom-media, @custom-selector, @define-mixin, @each, @for, @include, @content, @mixin, @mixin-content).