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"
  }
  ...