stylelint-config-norton

A Stylelint shareable config for the Norton stylesheet guide

Installation

Use npx, which comes with NPM 5+:

$ npx install-peerdeps --dev stylelint-config-norton

If using npm <5, you'll need to install the peer dependencies on your own:

# get the peerDependencies versions
npm info "stylelint-config-norton@latest" peerDependencies

# install (replace "version" with the versions returned by the above command)
npm install --save-dev stylelint-config-norton stylelint@version stylelint-order@version stylelint-scss@version

Alternatively, you can use generator-norton-style (a Yeoman generator) to automatically add all required files and dependencies. Follow instructions on generator-norton-style's README to install Yeoman and generator-norton-style globally and then just follow the generator's prompts:

$ yo norton-style

Usage

Once the stylelint-config-norton package is installed, you can use it by specifying stylelint-config-norton in the extends section of your stylelint configuration.

// stylelint.config.js
module.exports = {
  extends: ['stylelint-config-norton'],
  rules: {
    // Override rules here
  }
};

Usage without Sass rules

To use the Norton config in a project that doesn't use Sass, import and use the included css.js config instead of the default one.

// stylelint.config.js
module.exports = {
  extends: [require.resolve('stylelint-config-norton/src/css')],
  rules: {
    // Override rules here
  }
};

Rules

This configuration extends stylelint-config-standard and stylelint-config-sass-guidelines.

It modifies the following rules:

• at-rule-empty-line-before ignores @forward, @import, and @use.
• declaration-property-unit-blacklist includes px for font-size with severity of warning for accessibility best practice.
• function-parentheses-space-inside is never-single-line instead of never to be more in line with eslint-config-norton.
• indentation uses tabs instead of spaces for accessibility.
• max-empty-lines is 2 instead of 1.
• max-nesting-depth is 2 instead of 1.
• order/properties-order is inspired by the order from GitHub's Primer design system instead of alphabetical. See related issues: #3 & #4. It also adds and groups accessibility properties.
• scss/at-rule-empty-line-before doesn't allow an empty line between @if/@else statements.