Awesome Stylelint

A list of awesome Stylelint configs, plugins, integrations etc.

Contents

• Analysis platforms
• Configs
• Custom syntaxes
• Editor integrations
• Formatters
• Plugins
• Testing
• Tools
• Tutorials

Analysis platforms

• codacy-stylelint - Codacy integration.
• megalinter - Integrated into MegaLinter.
• putout - Integrated into Putout.
• Qlty plugin - Qlty integration.
• reviewdog/action-stylelint - Reviewdog GitHub Action.

Configs

Custom syntaxes

• stylelint-config-html - Config for HTML and HTML-like files, including XML, Vue, Svelte, Astro, and PHP.
• stylelint-config-standard-vue - Standard config for Vue.
• stylelint-config-sass-guidelines - Sass guidelines config.
• stylelint-config-standard-scss - Standard config for SCSS.
• @dreamsicle.io/stylelint-config-tailwindcss - Tailwind CSS directives and functions.

Order

• stylelint-config-alphabetical-order - Sorts properties alphabetically.
• stylelint-config-clean-order - Sorts properties into logical groups.
• stylelint-config-recess-order - Sorts properties logically the way Recess did and Bootstrap does.

Modern CSS

• stylelint-config-modern - A config to enforce modern CSS.

Stylistic

• @stylistic/stylelint-config - The stylistic shareable config for @stylistic/stylelint-plugin.

Large examples

• @primer/stylelint-config - The GitHub shareable config.
• @shopify/stylelint-plugin - The Shopify shareable config.

Custom syntaxes

• postcss-angular - Angular Components.
• postcss-html - HTML and HTML-like.
• postcss-less - Less.
• postcss-linaria - Linaria.
• postcss-lit - Lit elements.
• postcss-markdown - Markdown.
• postcss-sass - Sass.
• postcss-scss - SCSS.
• postcss-styled-syntax - Template literals.
• sugarss - Whitespace-sensitive SugarSS.

Editor integrations

• ale - Vim plugin.
• coc-stylelint - Neovim. language server extension.
• flycheck - Emacs extension.
• sublimeLinter-stylelint - Sublime Text plugin.
• vscode-stylelint - VS Code extension.
• zed-stylelint - Zed extension.

Formatters

• @csstools/stylelint-formatter-github - Output errors and warnings directly in GitHub pull requests.
• stylelint-actions-formatters - Output errors and warnings for GitHub Actions.
• stylelint-checkstyle-formatter - Output Checkstyle XML reports.
• stylelint-codeframe-formatter - Output codeframe errors and warnings.
• stylelint-formatter-gitlab-code-quality-report - Output errors and warnings as a GitLab Code Quality report (artifact).
• stylelint-formatter-pretty - A pretty formatter for terminals.

Plugins

Architecture and methodologies

• stylelint-plugin-defensive-css - Enforce defensive CSS best practices (Pack).
• stylelint-react-native - Enforce React Native rules (Pack).
• stylelint-selector-bem-pattern - Enforce BEM patterns for selectors.
• @morev/stylelint-plugin - Enforce (S)CSS and BEM best practices (Pack).

Browser compatibility

• stylelint-no-browser-hacks - Disallow browser hacks that are irrelevant to the browsers you are targeting.
• stylelint-no-unsupported-browser-features - Disallow CSS that is unsupported by the browsers you're targeting.
• stylelint-plugin-use-baseline - Disallow CSS features not in Baseline.

Colors

• stylelint-gamut - Enforce standard different color spaces (Pack).
• stylelint-no-indistinguishable-colors - Disallow colors that are suspiciously close to being identical.

File system

• stylelint-no-unresolved-module - Disallow unresolved imports (import-like or url).

Internationalization

• stylelint-plugin-logical-css - Enforce logical CSS properties, values and units (Pack).

Nesting

• stylelint-use-nesting - Enforce nesting when it is possible.

Order

• stylelint-order - Enforce a specific order for things like properties (Pack).

Pre-processors

• stylelint-scss - Enforce SCSS-specific conventions (Pack).
• stylelint-stylus - Enforce Stylus-specific conventions.

Performance

• stylelint-high-performance-animation - Disallow low-performance animation and transition properties.

Stylistic

• @stylistic/stylelint-plugin - Enforce stylistic conventions by using the rules removed in Stylelint 16.0.0 (Pack).

Variables and constraints

• stylelint-declaration-block-no-ignored-properties - Disallow property values that are ignored.
• stylelint-declaration-strict-value - Enforce variables, functions or keywords for the value of specific properties.
• stylelint-media-use-custom-media - Enforce usage of custom media queries.
• stylelint-no-restricted-syntax - Disallow specified syntax.
• stylelint-plugin-rhythmguard - Enforce spacing scales and design token usage across CSS and Tailwind class strings (Pack).
• stylelint-scales - Enforce scales for numeric values (Pack).
• stylelint-value-no-unknown-custom-properties - Disallow unknown custom properties.

Testing

• @morev/stylelint-testing-library - Platform agnostic solution for testing Stylelint plugins (works with vitest, jest or node:test).
• jest-preset-stylelint - Jest preset for Stylelint plugins.
• stylelint-tape - Test custom rules using Tape.
• stylelint-test-rule-node - A rule tester using Node.js built-in test runner (node:test).

Tools

• pre-commit-stylelint - Mirrors all releases for the pre-commit hooks framework.
• stylelint-config-inspector - A visual tool for inspecting and understanding your configuration.
• stylelint-define-config - Provide a defineConfig function for stylelint.config.js files.
• stylelint-find-new-rules - Find Stylelint rules that are not configured in your Stylelint config.

Tutorials

• Lint your CSS with Stylelint - CSS Tricks article.
• Stylelint: The Style Sheet Linter We've Always Wanted - Smashing Magazine article.
• Floss your style sheets with Stylelint - The first article written about Stylelint.
• Writing Your First Custom Stylelint Rule - Quickly create and integrate your own Stylelint rules.