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-property-sort-order-smacss - Property Sort Ordering based on the SMACSS methodology.
• 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

• @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-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

Architecture and methodologies

• stylelint-css-modules - Enforce CSS modules architecture (Pack).
• stylelint-css-modules-no-global-scoped-selector - Disallow global-scoped selectors in CSS Modules.
• stylelint-force-app-name-prefix - Enforce app name prefix for rules.
• stylelint-itcss - Enforce ITCSS architecture (Pack).
• 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.
• stylelint-selector-tag-no-without-class - Disallow certain tags without a class qualifier in selectors.
• stylelint-suitcss - Enforce SUITCSS conventions (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.

Colors

• stylelint-color-format - Enforce HEX, RGB or HSL 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).

Images

• stylelint-images - Enforce good performance and avoid mistakes with images (Pack).

Internationalization

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

Nesting and specificity

• stylelint-at-rule-no-children - Disallow block rule declarations inside at-rules.
• stylelint-use-nesting - Enforce nesting when it is possible.

Pre-processors

• stylelint-sass-render-errors - Display Sass render errors and deprecations.
• 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).
• stylelint-file-max-lines - Limit a maximum number of lines per file.
• stylelint-group-selectors - Group selectors that have the same set of properties and values.
• stylelint-max-lines - Limit the number of lines in a source.
• stylelint-order - Enforce a specific order for things like properties (Pack).
• stylelint-transform-function-no-whitespace - Disallow whitespace between transform functions and their parentheses.
• stylelint-selector-no-empty - Disallow empty selectors.

Variables and constraints

• stylelint-8-point-grid - Enforce an 8-point grid.
• 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-scales - Enforce scales for numeric values (Pack).
• stylelint-value-no-unknown-custom-properties - Disallow unknown custom properties.
• stylelint-z-index-value-constraint - Specify minimum and maximum constraint value for z-index.

Units

• stylelint-rem-over-px - Enforce rem units over px units.

Uncategorized

• @isnotdefined/stylelint-plugin - Disallow obsolete CSS and enforce unit steps (Pack).

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 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.