Installation

Presentation

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

Information

stylelint comes with Mozaic and it is launched at compilation time. It means that if you write CSS and bundle them using our PostCSS config, you'll get linting out of the box.

Create a root styleling configuration file

Useful tip

You don't need to configure stylelint for it to warn you about errors, it's included in the PostCSS pipeline

In some cases, you may want to configure it, for example, to configure prettier-stylelint on your IDE, or to use stylelint outside of the compilation pipeline.

For example, you may want to create an NPM script to automatically fix linting issues.

In this case, you can create a stylelint.config.js file in the root dir of your project.

and you just have to export the styleling config from Mozaic

stylelint.config.js


module.exports = require('@mozaic-ds/css-dev-tools/styleLintConfig.js')

Usage

Linter options customization

Our stylelint plugin allows developers to customize some options in the global Mozaic configuration. It needs to be added in your root mozaic.config.js file.

Default configuration:


defaultConfig: {
    caseStyle: 'kebab-case',
    bemEntitiesDelimiters: {
        modifier: '--',
        element: '__',
        media: '@',
    },
    prefixes: ['mc-', 'ml-', 'mu-', 'mt-', 'mdu-'],
  },

More informations here

Please checkout Mozaic configuration for more information.

Add custom rules

Only for advanced users

The trick below is for advanced users only. By doing this evolution you go out of the rules set and planned by Mozaic. As a result, we cannot fully guarantee the optimal functioning of Mozaic. So be sure of what you are doing.

Sometimes you may need to customize stylelint rules or add new ones. To do this, you can expand your stylelint.config.js file this way:

stylelint.config.js


'use strict'
const mozaicRules = require('@mozaic-ds/css-dev-tools/styleLintConfig.js')
const customRules = {
  'color-no-invalid-hex': null,
  'font-family-no-duplicate-names': null,
}
const stylelintConfig = mozaicRules
stylelintConfig.rules = { ...mozaicRules.rules, ...customRules }
module.exports = stylelintConfig

Disabling stylelint rules using inline comments


/* stylelint-disable plugin/mozaic-bem-pattern  */
.mc-block-Name__element-Name {
}
/* stylelint-enable */