MDSLKTR / codeclimate-stylelint

A Code Climate engine for the mighty, modern CSS linter

Code Climate Stylelint Engine

A Code Climate engine that wraps stylelint.
You can run it on your local environment using the Code Climate CLI, or on the hosted analysis platform.

Stylelint is a tool to help you enforce consistent conventions and avoid errors in your stylesheets.
It can be configured using a configuration file.

Installation

1. If you haven't already, install the Code Climate CLI.
2. Run codeclimate engines:install stylelint. This command both installs the engine and enables it in your .codeclimate.yml file.
3. Add a stylelint config file.
4. You're ready to analyze! Browse into your project's folder and run codeclimate analyze.

Configuration Options

• ignore_warnings: true|false (default false) - skip warnings with styletint quiet flag
• config: Specify a relative path for the configuration file. (ex: config/.stylelintrc)

Configs

• stylelint-config-css-modules: CSS modules shareable config
• stylelint-config-prettier: Turns off all rules that are unnecessary or might conflict with prettier
• stylelint-config-recommended: The recommended shareable config
• stylelint-config-recommended-scss: The recommended shareable SCSS config
• stylelint-config-sass-guidelines: A stylelint config based on https://sass-guidelin.es/
• stylelint-config-standard: The standard shareable config
• stylelint-config-styled-components: The shareable stylelint config for stylelint-processor-styled-components
• stylelint-config-suitcss: SUIT CSS config
• stylelint-config-wordpress: WordPress CSS Coding Standards shareable config
• stylelint-rscss: Validate RSCSS conventions

Processors

This engine has support for the recommended processors:

• stylelint-processor-arbitrary-tags: A stylelint processor that allows you to lint CSS within arbitrary tags
• stylelint-processor-html: Lint within HTML <style> tags. ***DEPRECATED

Plugins

This engine has support for the recommended plugins:

• stylelint-8-point-grid: Validate CSS with 8-point grid guideline
• stylelint-a11y: Enforce a11y rules
• stylelint-at-rule-no-children: Disallow block declarations inside at rules
• 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: Enforces variables, functions or custom CSS keywords for property's values
• stylelint-declaration-use-variable: Check the use of scss, less or custom css variable on declaration
• stylelint-high-performance-animation: Prevent the use of low performance animation and transition properties
• stylelint-media-use-custom-media: Enforce usage of custom media queries in CSS
• stylelint-no-indistinguishable-colors: Disallows colors that are suspiciously close to being identical, using css-colorguard
• stylelint-no-unsupported-browser-features: Disallow features that are unsupported by the browsers that you are targeting
• stylelint-order: Order related linting rules
• stylelint-prettier: Runs Prettier as a Stylelint rule
• stylelint-scss: SCSS specific linting rules
• stylelint-selector-bem-pattern: Specify a BEM pattern for selectors
• stylelint-selector-tag-no-without-class: Disallow certain tags without a class qualifier in selectors
• stylelint-use-logical: 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 usage of unknown custom properties
• stylelint-z-index-value-constraint: Set minimum and maximum constraint value for z-index.

If you need something else, please open an issue.

Development

To run the code locally, you'll need to install codeclimate's CLI and docker.
Navigate to the package directory in your terminal and run:

npm run build
npm test

Adding packages

Install the desired packages as dependencies and test it.

If it is a plugin, add it to the .stylelint config in the test/stylelint-plugins directory and make sure it trigger some issues. Update the snapshot file with the new issue count.

If it is a config or processor, add a new directory inside the tests directory with the name of the package and make sure it trigger some issues.

Before commiting your changes run the tests!

Something else, please open an issue.

Need help?

For help with stylelint, check out their documentation.