Awesome Stylelint

A list of awesome Stylelint configs, plugins, etc.

Contents

• Configs
• Formatters
• Plugins
• Tools
• Tutorials

Configs

• GitHub - Sharable Stylelint config used by GitHub's CSS.
• rational-order - Stylelint config that sorts related property declarations by grouping together in the rational order.
• strict-scss - Strict shareable config for Stylelint and SCSS.
• stylelint-recommended - The recommended shareable config for Stylelint.
• stylelint-standard - The standard shareable config for Stylelint.
• Wikimedia - Wikimedia CSS Coding Standards shareable config for Stylelint.
• WordPress - WordPress CSS Coding Standards shareable config for Stylelint.
• stylelint-config-sass-guidelines - A Stylelint config based on https://sass-guidelin.es/.
• Recess Property Order - Sorts CSS properties the way Recess did and Bootstrap does.

Formatters

• stylelint-checkstyle-formatter - Output Checkstyle XML reports of Stylelint results.
• stylelint-codeframe-formatter - Stylelint formatter using babel-code-frame to show the piece of code where the errors and warnings are.
• stylelint-formatter-github - See Stylelint errors and warnings directly in pull requests.

Plugins

• stylelint-order - A collection of order related linting rules for Stylelint.
• stylelint-scss - A collection of SCSS specific linting rules for Stylelint.
• stylelint-selector-bem-pattern - A Stylelint plugin that incorporates postcss-bem-linter.
• stylelint-no-unsupported-browser-features - A Stylelint plugin that checks if the CSS you're using is supported by the browsers you're targeting.
• stylelint-a11y - A Stylelint plugin to check the accessibility of your CSS for users.
• stylelint-high-performance-animation - A Stylelint rule for preventing the use of low performance animation and transition properties.
• @signal-noise/stylelint-scales - Enforce a variety of scale related linting rules (plugin pack).
• stylelint-8-point-grid - Validate CSS with 8-point grid guideline.
• stylelint-at-rule-no-children - Disallow block rule declarations inside at-rules (with a few exceptions).
• stylelint-color-format - Convert HEX colors to either RGB or HSL.
• 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 due to another property value in the same rule.
• stylelint-declaration-strict-value - Specify properties for which either a variable ($sass, @less, var(--cssnext)), function or custom CSS keyword (inherit, none, etc.) must be used for its value.
• stylelint-force-app-name-prefix - Force rules to have app name as prefix.
• stylelint-group-selectors - Identify the selectors, which can be grouped, as they have same set of properties and values.
• stylelint-images - Check your CSS images to improve the performance and avoid common mistakes (plugin pack).
• stylelint-itcss - A set of rules to enforce ITCSS architecture.
• stylelint-media-use-custom-media - Enforce usage of custom media queries in CSS.
• stylelint-no-browser-hacks - Disallow browser hacks that are irrelevant to the browsers you are targeting; uses stylehacks.
• stylelint-no-indistinguishable-colors - Disallow colors that are suspiciously close to being identical.
• stylelint-no-unused-selectors - Disallow unused selectors, i.e., selectors that are not referenced from documents.
• stylelint-plugin-ecss - A set of rules to enforce Enduring CSS architecture.
• stylelint-prettier - Runs Prettier as a Stylelint rule.
• stylelint-react-native - Enforce React Native specific linting rules (plugin pack).
• stylelint-rscss - Validate RSCSS conventions.
• stylelint-selector-no-empty - Disallow empty Selectors.
• stylelint-selector-tag-no-without-class - Disallow certain tags without a class qualifier in selectors.
• stylelint-suitcss - A collection of Stylelint plugins for SUIT CSS, including deprecated :root rules (plugin pack).
• stylelint-use-logical-spec - Enforce usage of logical properties and values in CSS.
• stylelint-use-nesting - Enforce nesting when it is possible in CSS.
• stylelint-value-no-unknown-custom-properties - Disallow unknown custom properties.
• stylelint-value-no-exposed-custom-properties - Disallow usage of exposed custom properties.
• stylelint-z-index-value-constraint - Specify minimum and maximum constraint value for z-index.
• stylelint-stylus - Stylelint plugin for Stylus.
• stylelint-css-modules - A set of rules to enforce CSS modules architecture.
• stylelint-css-modules-no-global-scoped-selector - Stylelint rule for CSS modules to prevent usage of global-scoped selectors.
• stylelint-no-restricted-syntax - Stylelint rule to disallow specified syntax, similar to ESLint no-restricted-syntax.
• stylelint-no-unresolved-module - Ensures that module (import-like or url) can be resolved to a module on the file system.
• stylelint-max-lines - Limit the count of a lines.
• stylelint-no-nested-media - Disallow nested @media rules.
• stylelint-sass-render-errors - Display Sass render errors and deprecations as lint errors.
• @isnotdefined/stylelint-plugin - Collection of Stylelint rules such as no-obsolete to ban obsolete selectors, properties or values and unit-step to enforce 0.125 steps for relative units.
• stylelint-gamut - Stylelint plugin for working with different color spaces.

Tools

• stylelint-find-new-rules - Find Stylelint rules that are not configured in your Stylelint config.
• stylelint-tape - A Stylelint rule tester using tape.
• nx-stylelint - Plugin to use Stylelint in an Nx workspace.

Tutorials

• Lint your CSS with Stylelint - Written by one of Stylelint's co-creators, this is the definitive article on Stylelint.
• Stylelint: The Style Sheet Linter We've Always Wanted - Why linting a stylesheet matters and how Stylelint brings order to a stylesheet.
• Improving CSS quality at Facebook and beyond - Detailing Facebook's switch from a custom CSS linter to Stylelint.
• How to lint your Sass/CSS properly with Stylelint - Introduction to linting CSS. (As above, we now recommend using gulp-stylelint, rather than the gulp-postcss and postcss-reporter combination outlined in the article)
• Improving the Quality of Your CSS with PostCSS - Introduction to various PostCSS linting tools. (As above, we recommend using gulp-stylelint. Also, doiuse is now bundled in Stylelint as the no-unsupported-browser-features rule)
• Floss your style sheets with Stylelint - The first article written about Stylelint. (As before, we now recommend using gulp-stylelint)
• Writing Your First Custom Stylelint Rule - Quickly create and integrate your own Stylelint rules.