spartcus stylelint configuration

To ensure a high and consistent code quality for SCSS/CSS we use stylelint.

This stylelint extends the stylelinting rules from 'stylelint-prettier/recommended' and 'stylelint-config-standard-scss'.

https://stylelint.io/

To check the rules see index.js. If for some reason a rule doesn't fit your project, you can override the specific rule in the .stylelintrc.js (as demonstrated below) of your project.

This package is made for spartacus projects. However, any proejct can benefit from this package by overriding the unfitting rules.

Version

Our config is currently optimized for Stylelint 15.10.1 To check for updates, see https://github.com/stylelint/stylelint/releases

Installing stylelint-config-spartacus package

npm install @medienwerft/stylelint-config-spartacus stylelint --save-dev

Create config

In the root of your project add a .stylelintrc.js file and add the following content:

module.exports = {
  extends: ['@medienwerft/stylelint-config-spartacus']
  "rules": {
    // Project related rules
  }
}

Use

run stylelint over specified directory:

stylelint '<directory_name>/**/*.?(css|scss)'

run and fix styles (recommended):

stylelint '<directory_name>/**/*.?(css|scss) --fix'

adding stlyelint to lintstagedrc

{
  ... other lint staged commands
  "**/*.*ss": "stylelint --fix"
}