Skip to main content

Stylelint rules for component-scale CSS

Container queries need contracts, not vibes.

stylelint-plugin-container-query-sanity validates named containers, query ranges, unreachable intervals, containment types, logical feature usage, and breakpoint token discipline before those issues reach the browser.

Named container contracts

Catches missing, unknown, conflicting, and under-declared named containers.

Range sanity checks

Finds invalid ranges, unreachable nested intervals, and redundant lower bounds.

Containment-aware diagnostics

Keeps size, scroll-state, logical-axis, and design-token usage explicit.

Read the overviewCompare configs
  • npm license
  • npm total downloads
  • latest GitHub release
  • GitHub stars
  • GitHub forks
  • GitHub open issues
  • Codecov coverage

13 rules

โ€ข Named containers, query math, containment, and token usage.

3 configs

โ€ข Recommended, strict, and all presets for staged adoption.

Stylelint 16+

โ€ข ESM-first plugin pack with compatibility smoke checks.

Documentation map

Everything links to the release-critical paths.

The site now surfaces rule docs, configs, developer API output, generated inspectors, and project links from the landing page instead of hiding them in a sparse navbar.

Step 1

โ€ข Start clean

Install the plugin, pick a config, and apply the rules without guessing how Stylelint should load the plugin pack.

Open section

Step 2

โ€ข Choose configs

Compare recommended, strict, and all configs so teams can choose the right release posture.

Open section

Step 3

โ€ข Audit rules

Browse every rule with concrete CSS examples and options for production rollout.

Open section