Awesome Stylelint
A list of awesome Stylelint configs, plugins, integrations etc.
Contents
- Analysis platforms
- Configs
- Custom syntaxes
- Editor integrations
- Formatters
- Plugins
- Task runners
- Testing
- Tools
- Tutorials
Analysis platforms
- codacy-stylelint - Codacy integration.
- codeclimate-stylelint - Code Climate integration.
- megalinter - Integrated into MegaLinter.
- putout - Integrated into Putout.
- reviewdog/action-stylelint - Reviewdog GitHub Action.
Configs
- @archoleat/stylelint-config-extended-scss - Archoleat config for SCSS with property sorting.
- @primer/stylelint-config - The GitHub shareable config.
- @stylistic/stylelint-config - The stylistic shareable config for
@stylistic/stylelint-plugin
. - @wordpress/stylelint-config - WordPress CSS Coding Standards shareable config.
- stylelint-config-clean-order - Order styles with stylelint-order.
- stylelint-config-hudochenkov - Personal configs use stylelint-order.
- stylelint-config-idiomatic-order - Order styles based on idiomatic-css.
- stylelint-config-prettier-scss - Turns off conflicting rules when using Prettier for SCSS.
- stylelint-config-prettier - Turns off conflicting rules when using Prettier for CSS.
- stylelint-config-property-sort-order-smacss - Property Sort Ordering based on the SMACSS methodology.
- stylelint-config-rational-order - Sorts related property declarations by grouping together in the rational order.
- stylelint-config-recess-order - Sorts CSS properties the way Recess did and Bootstrap does.
- stylelint-config-recommended-vue - The recommended shareable Vue config for Stylelint.
- stylelint-config-sass-guidelines - Sass guidelines config.
- stylelint-config-standard-scss - Standard config for SCSS.
- stylelint-config-standard - Standard config for CSS.
- stylelint-config-two-dash-bem - BEM Convention zero dependency rule enforcing Two Dashes style for Stylelint.
- stylelint-config-wikimedia - Wikimedia CSS Coding Standards shareable config.
Custom syntaxes
- postcss-angular - Angular Components.
- postcss-html - HTML, including Vue SFC.
- postcss-less - Less.
- postcss-linaria - Linaria.
- postcss-lit - Lit elements.
- postcss-markdown - Markdown.
- postcss-sass - Sass.
- postcss-scss - SCSS.
- postcss-styled-components - Styled-components.
- postcss-styled-syntax - Template literals.
Editor integrations
- ale - Vim plugin.
- coc-stylelint - Neovim. language server extension.
- flycheck - Emacs extension.
- linter-stylelint - Atom plugin.
- null-ls - Neovim plugin.
- sublimeLinter-contrib-stylelint_d - Sublime Text plugin as daemon.
- sublimeLinter-stylelint - Sublime Text plugin.
- vscode-stylelint - VS Code extension.
Formatters
- 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-github - Output errors and warnings directly in GitHub pull requests.
- 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
- @isnotdefined/stylelint-plugin - Disallow obsolete CSS and enforce unit steps (Pack).
- @stylistic/stylelint-plugin - Enforce stylistic conventions by using the rules removed in Stylelint 16.0.0 (Pack).
- stylelint-8-point-grid - Enforce an 8-point grid.
- stylelint-a11y - Enforce accessibility standards (Pack).
- stylelint-at-rule-no-children - Disallow block rule declarations inside at-rules.
- stylelint-color-format - Enforce HEX, RGB or HSL colors.
- stylelint-css-modules-no-global-scoped-selector - Disallow global-scoped selectors in CSS Modules.
- stylelint-css-modules - Enforce CSS modules architecture (Pack).
- stylelint-csstree-validator - Validate CSS values to match W3C specs and browsers extensions.
- 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-file-max-lines - Limit a maximum number of lines per file.
- stylelint-force-app-name-prefix - Enforce app name prefix for rules.
- stylelint-gamut - Enforce standard different color spaces (Pack).
- stylelint-group-selectors - Group selectors that have the same set of properties and values.
- stylelint-high-performance-animation - Disallow low-performance animation and transition properties.
- stylelint-images - Enforce good performance and avoid mistakes with images (Pack).
- stylelint-itcss - Enforce ITCSS architecture (Pack).
- stylelint-max-lines - Limit the number of lines in a source.
- stylelint-media-use-custom-media - Enforce usage of custom media queries.
- stylelint-no-browser-hacks - Disallow browser hacks that are irrelevant to the browsers you are targeting.
- stylelint-no-indistinguishable-colors - Disallow colors that are suspiciously close to being identical.
- stylelint-no-nested-media - Disallow nested
@media
rules. - stylelint-no-restricted-syntax - Disallow specified syntax.
- stylelint-no-unresolved-module - Disallow unresolved imports (import-like or
url
). - stylelint-no-unsupported-browser-features - Disallow CSS that is unsupported by the browsers you're targeting.
- stylelint-no-unused-selectors - Disallow unused selectors.
- stylelint-order - Enforce a specific order for things like properties (Pack).
- stylelint-plugin-defensive-css - Enforce defensive CSS best practices (Pack).
- stylelint-plugin-ecss - Enforce Enduring CSS architecture.
- stylelint-plugin-logical-css - Enforce logical CSS properties, values and units (Pack).
- stylelint-react-native - Enforce React Native rules (Pack).
- stylelint-rem-over-px - Enforce
rem
units overpx
units. - stylelint-rscss - Enforce RSCSS conventions (Pack).
- stylelint-sass-render-errors - Display Sass render errors and deprecations.
- stylelint-scales - Enforce scales for numeric values (Pack).
- stylelint-scss - Enforce SCSS-specific conventions (Pack).
- stylelint-selector-bem-pattern - Enforce BEM patterns for selectors.
- stylelint-selector-no-empty - Disallow empty selectors.
- stylelint-selector-tag-no-without-class - Disallow certain tags without a class qualifier in selectors.
- stylelint-stylus - Enforce Stylus-specific conventions.
- stylelint-suitcss - Enforce SUITCSS conventions (Pack).
- stylelint-transform-function-no-whitespace - Disallow whitespace between transform functions and their parentheses.
- stylelint-use-logical-spec - Enforce usage of logical properties and values.
- stylelint-use-nesting - Enforce nesting when it is possible.
- stylelint-value-no-exposed-custom-properties - Disallow usage of exposed custom properties.
- stylelint-value-no-unknown-custom-properties - Disallow unknown custom properties.
- stylelint-z-index-value-constraint - Specify minimum and maximum constraint value for z-index.
Task runners
- broccoli-stylelint - Broccoli plugin.
- ember-cli-stylelint - Ember CLI plugin.
- grunt-stylelint - Grunt plugin.
- gulp-stylelint - Gulp plugin.
- jest-runner-stylelint - Jest plugin.
- nx-stylelint - Nx plugin.
- stylelint-webpack-plugin - Webpack plugin.
Testing
- 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-define-config - Provide a
defineConfig
function forstylelint.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.