Package Exports

stylelint-config-standard

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylelint-config-standard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

stylelint-config-standard

The standard shareable config for stylelint.

Use it as is or as a foundation for your own config.

It is derived from the common rules found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Github's PrimerCSS Guidelines, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.

It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.

Example

@import url(x.css);
@import url(y.css);

/**
 * Multi-line comment
 */

.selector-1,
.selector-2,
.selector-3[type="text"] {
  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
  box-sizing: border-box;
  display: block;
  color: #333;
}

.selector-a,
.selector-b:not(:first-child) {
  padding: 10px !important;
  top: calc(calc(1em * 2) / 3);
}

.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }

/* Single-line comment */

@media (min-width >= 60em) {
  .selector {
    /* Flush to parent comment */
    transform: translate(1, 1) scale(3);
  }
}

@media (min-orientation: portrait), projection and (color) {
  .selector-i + .selector-ii {
    background: color(rgb(0, 0, 0) lightness(50%));
    font-family: helvetica, "arial black", sans-serif;
  }
}

/* Flush single line comment */
@media
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

  .selector {
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent,
        #fff 25px,
        rgba(255, 255, 255, 1) 50px
      );
    margin: 10px;
    margin-bottom: 5px;
    box-shadow:
      0 1px 1px #000,
      0 1px 0 #fff,
      2px 2px 1px 1px #ccc inset;
    height: 10rem;
  }

  /* Flush nested single line comment */
  .selector::after {
    content: '→';
    background-image: url(x.svg);
  }
}

Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.

Installation

$ npm install stylelint-config-standard

Usage

If you've installed stylelint-config-standard locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-standard"
}

If you've globally installed stylelint-config-standard using the -g flag, then you'll need to use the absolute path to stylelint-config-standard in your config e.g.

{
  "extends": "/absolute/path/to/stylelint-config-standard"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to whitelist specific units, change the indentation to tabs and turn off the number-leading-zero rule:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Suggested additions

stylelint-config-standard is a great foundation for your own config. You can extend it create a tailored and much stricter config:

Specify what quotes must be used using:
Specify the order of properties using:
- declaration-block-properties-order
If you use autoprefixer you'll want to disallow vendor prefixes using:
Control specificity using:
- max-nesting-depth
- selector-max-specificity
Specify acceptable selector types, units, properties, functions and words in comments using:
Specify acceptable naming patterns using:
Specify a notation when there are one or more valid representations using:
- font-weight-notation
Specify the acceptable use of custom properties using:
- custom-property-no-outside-root
- selector-root-no-composition
Specify if Data URIs must or must not be used using:
- function-url-data-uris
Specify a maximum line length using:
- max-line-length
Catch possible mistakes related to your targeted browsers using:
- no-browser-hacks
- no-unsupported-browser-features

Using the config with SugarSS syntax

The config is broadly compatible with SugarSS syntax. You will need to turn off the declaration-block-trailing-semicolon rule, as so:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-block-trailing-semicolon": null
  }
}

JSPM