stylelint-config-mission-made v0.0.7
CSS Coding standards for MissionMade
This package contains the Stylelint CSS coding standard for MissionMade. This extends stylelint-config-recommended
as follows:
- A comment must always have an empty line before it
- Colour hexes must be lowercase
- Colour hexes must use the long syntax
- Font family names must always be quoted unless they are a keyword eg
sans-serif
- Numbers must have a leading zero if appropriate
- Rules must have an empty line before except when after a single-line comment
- Strings must use double quotes
- Value keywords must be lowercase
- Units must be lowercase
Installation
To install this package, run the following command:
npm install --save-dev stylelint stylelint-config-mission-made
Configuration
Save this in the root of your project as .stylelintrc.json
:
{
"extends": "stylelint-config-mission-made",
"syntax": "scss"
}
In this example we're specifying SCSS as the syntax to use, but this isn't required and it should work fine with CSS or PostCSS. However, I haven't had much success getting Stylelint working with Less.
Audit and apply fixes
See what needs fixing:
npx stylelint src/scss/**/*.scss
Automatically apply fixes:
npx stylelint src/scss/**/*.scss --fix
Or you can simplify the process by adding the command to the package.json under scripts.
...
"scripts": {
"lint": "stylelint src/scss/**/*.scss",
"lint-fix": "stylelint src/scss/**/*.scss --fix"
}
...
Depending on the configuration of the terminal app, you may notice that files nested deeper than 2+ folders ie. ./src/scss/styles/blocks/hero-slider.scss
are not being fixed. To correct this wrap the scss path in double quote.
...
"scripts": {
"lint": "stylelint \"src/scss/**/*.scss\"",
"lint-fix": "stylelint \"src/scss/**/*.scss\" --fix"
}
...