Linting

Density publishes optional lint plugins for projects using its CSS tokens and Base UI components. They work with flat ESLint configuration and Stylelint.

Density CSS

Install compatible versions of ESLint 9 and Stylelint 16, then add density-css to your project.

Inline styles

The ESLint rule warns when inline React style objects use literal colors in color-related properties, or literal px, rem, or em font sizes. Use Density variables such as var(--dn-color-*) and var(--dn-size-*) instead.

// eslint.config.js
import densityTokens from "density-css/eslint-plugin";

export default [
{
  plugins: { density: densityTokens },
  rules: {
    "density/no-rogue-inline-style-tokens": "warn",
  },
},
];

Stylesheets

The Stylelint rule warns about literal colors and font sizes in stylesheets, and requires registered --dn-* variables. It permits theme definitions and Density’s internal exceptions.

// stylelint.config.mjs
export default {
plugins: ["density-css/stylelint-plugin"],
rules: {
  "density/no-rogue-tokens": [true, { severity: "warning" }],
},
};

Density Base UI

Add this optional ESLint rule when you author components with density-base-ui. It warns when uncontrolled component props such as defaultValue, defaultOpen, and defaultChecked are used. Density components are designed to be controlled: keep the state in your application and pass the corresponding controlled prop.

// eslint.config.js
import densityBaseUi from "density-base-ui/eslint-plugin";

export default [
{
  plugins: { "density-base-ui": densityBaseUi },
  rules: {
    "density-base-ui/no-uncontrolled-component-props": "warn",
  },
},
];

You can use this alongside the Density CSS ESLint configuration above by placing both configuration objects in the same exported array. Starting with warnings makes it easy to adopt the checks in an existing codebase; promote them to errors when the project is ready to enforce them.