stylelint-plugin-css-performance-budget

stylelint-plugin-css-performance-budget provides focused Stylelint guardrails for CSS rendering cost.

Start Here

• New setup: Getting Started
• Config comparison: Config Matrix
• Low-noise preset: 🟢 performance-budget-recommended
• Strict preset: 🛡️ performance-budget-strict
• Full audit preset: 🟣 performance-budget-all

What it checks

• heavy selectors
• giant selector lists
• render-blocking CSS imports
• excessive filter/backdrop stacks and blur radii
• expensive transition and keyframe property targets
• expensive fixed/sticky positioning patterns
• fixed background attachment
• global expensive effects
• oversized performance-sensitive custom property values
• reduced-motion coverage for expensive motion
• broad or risky will-change usage
• layout-affecting motion targets
• paint/compositing value budgets

Package exports

• default plugin pack export
• performanceBudgetPluginConfigs
  • 🟢 performance-budget-recommended
  • 🟣 performance-budget-all
  • 🛡️ performance-budget-strict

Rule philosophy

🟢 Recommended mode aims for low-noise defaults. 🟣 All and 🛡️ strict profiles include broader enforcement for teams that want tighter budgets.

Use the config matrix to compare rule coverage before enabling a stricter profile.