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

Formatters

• stylelint-checkstyle-formatter - Output Checkstyle XML reports of stylelint results.
• 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-z-index-value-constraint - Specify minimum and maximum constraint value for z-index.
• stylelint-plugin-stylus - stylelint plugin for Stylus.
• stylelint-css-modules - A set of rules to enforce CSS modules architecture.
• 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.

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.

License