stylelint-rscss

Validate CSS (and SCSS, Less, SugarSS) to RSCSS conventions

stylelint-rscss is a plugin for stylelint to validate your code against RSCSS conventions. It supports SCSS (Sass), SugarSS and Less, as supported by stylelint.

As a stylelint plugin, it can be used with stylelint's hundreds of rules or other stylelint configs to validate other good CSS practices as well.

Quickstart guide

Install: Install stylelint and stylelint-rscss to your project.

npm install --save-dev stylelint stylelint-rscss

Configure: Create a .stylelintrc in your project. Use the stylelint-rscss/config configuration, which has defaults for strict RSCSS conventions.

// .stylelintrc
{
  "extends": [
    "stylelint-rscss/config"
  ]
}

Add a script: Add an npm script to your package.json.

// package.json
{
  "scripts": {
    "lint:css": "stylelint path/to/css/**/*"
  }
}

Run it!

npm run lint:css

Recommendations

These steps are not required, but are highly recommended:

• Add stylelint-config-standard as well!
• Configure your text editor to use stylelint. (See text editor support)
• Add npm run lint:css to your CI script.

Text editor support

You need to install stylelint globally (npm install -g stylelint) for text editor support.

npm install -g stylelint

After that, here are the plugins I'd recommend:

• Neovim: neomake (no setup needed)
• Vim: syntastic (use the stylelint checker)
• Atom: atom-linter + linter-stylelint

Also see stylelint's complimentary tools documentation.

Examples

Here are some valid examples according to RSCSS rules.

.component-name { }
  // ✓ Components should be two or more words, separated by dashes.
.component-name > .element { }
  // ✓ Elements should be one word. Use `>` to denote markup structure.
.component-name > .element.-foo { }
  // ✓ Variant classes begin with a dash (`-`).
.component-name.-variant { }
  // ✓ Components can have variants.
._helper { }
  // ✓ Helpers start with an underscore (`_`).

Some cases not allowed:

.component-name .element { }
  // ✗ Use `>` to denote markup structure.
.component-name.variant { }
  // ✗ Variants must begin with a dash.
.componentname { }
  // ✗ Components should be two or more words.
.component-name.other-component { }
  // ✗ Only one component name is allowed.
.component-name > .-foo { }
.-foo { }
  // ✗ Variants should be attached to components or elements.

Also OK:

h2 { }
  // ✓ Bare elements can be styled.
.component-name > h2 { }
  // ✓ Bare elements can be styled as elements.
.component-name > a:hover[aria-hidden="false"] { }
  // ✓ Pseudo-classes and attributes are OK.
.component-name:hover > .element { }
  // ✓ They're ok for components too.

See Rules for more examples.

Rules and customization

See Rules for a detailed lint of rules and examples of how to customize stylelint-rscss.

Thanks

stylelint-rscss © 2016+, Rico Sta. Cruz. Released under the MIT License. Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz