Stylelint for CSS Plugins — Part 4
Lints CSS and CSS-like languages like SCSS, Sass, Less Sass, and more.
Stylelint — The CSS Linter
Contents
Configuration and Integration
Syntax and Formatting
Performance and Optimization
Customization and Extensibility
Linters and Formatters
Editor Integrations
Task Runners and Build Tools
Stylelint
Stylelint (found here) is a powerful and flexible tool that helps developers enforce consistent styling conventions and avoid errors in their CSS code. With over 100 built-in rules and support for plugins, custom syntaxes, and more, Stylelint ensures that stylesheets are clean, maintainable, and error-free.
As the premier CSS linter, Stylelint’s capabilities extend far beyond basic error detection. Its robust plugin system allows developers to tailor its functionality to their specific needs, whether that’s enforcing custom naming conventions, integrating with build tools, or applying advanced linting rules.
Get Bill Musgrave’s stories in your inbox
Join Medium for free to get updates from this writer.
Notably, Stylelint version 16, released in December 2023, removed 76 style rules, which can now be handled by Prettier. In this article, we’ll explore the world of Stylelint plugins and show you how to supercharge your CSS linting workflow.
Configuration and Integration
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.
@primer/stylelint-config: The GitHub shareable config.
Syntax and Formatting
stylelint-selector-bem-pattern: Enforce BEM patterns for selectors.
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-gamut: Enforce standard different color spaces.
stylelint-no-indistinguishable-colors: Disallow colors that are suspiciously close to being identical.
Performance and Optimization
stylelint-high-performance-animation: Disallow low-performance animation and transition properties.
Customization and Extensibility
stylelint-plugin-defensive-css: Enforce defensive CSS best practices.
stylelint-react-native: Enforce React Native rules.
stylelint-scss: Enforce SCSS-specific conventions.
stylelint-stylus: Enforce Stylus-specific conventions.
Linters and 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-gitlab-code-quality-report: Output errors and warnings as a GitLab Code Quality report.
stylelint-formatter-pretty: A pretty formatter for terminals.
Editor Integrations
coc-stylelint: Neovim language server extension.
vscode-stylelint: VS Code extension.
Task Runners and Build Tools
broccoli-stylelint: Broccoli plugin.
ember-cli-stylelint: Ember CLI plugin.
grunt-stylelint: Grunt plugin.
gulp-stylelint: Gulp plugin.
jest-preset-stylelint: Common configuration options for Jest in Stylelint environments.
jest-runner-stylelint: Jest plugin.
nx-stylelint: Nx plugin.
stylelint-webpack-plugin: Webpack plugin.
Other Plugin Articles
1 — ESLint: 100 ESLint Plugins (over 1,900 rules) for Code Quality, Security, Testing, Performance & More.
2 — Prettier, Jest & Playwright: 110 Plugins for JavaScript/TypeScript Testing (end-to-end and unit), Code Formatting.
3 — Visual Studio Code: 36+ AI Assistant Extensions plus 85+ Extensions for JavaScript/TypeScript/Angular and more.
5 — Chrome Extensions: Web Development, Debugging, Layout, Testing, and Accessibility Tools.
6 — Azure DevOps Extensions: 40+ Extensions for your Boards, Repos, and Pipelines.
I share lessons from decades in software delivery — from CI/CD to architecture governance. If you’re tackling similar challenges and want a seasoned perspective, I’m available for consulting at https://www.musgrave.com .
