stylelint-config-standard
Standard shareable config for Stylelint
Last updated a day ago by jeddy3 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install stylelint-config-standard 
SYNC missed versions from official npm registry.

stylelint-config-standard

NPM version Build Status

The standard shareable config for Stylelint.

Extends stylelint-config-recommended.

Turns on additional rules to enforce common conventions found in the specifications and in a handful of CSS styleguides, including: The Idiomatic CSS Principles, 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.

To see the rules that this config uses, please read the config itself.

Example

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

/**
 * Multi-line comment
 */

:root {
  --brand-red: hsl(5deg 10% 40%);
}

.selector-1,
.selector-2,
.selector-3[type="text"] {
  background: linear-gradient(#fff, rgb(0 0 0 / 80%));
  box-sizing: border-box;
  display: block;
  color: var(--brand-red);
}

.selector-a,
.selector-b:not(:first-child) {
  padding: 10px !important;
  top: calc(100% - 2rem);
}

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

/* Single-line comment */

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

@media (orientation: portrait), projection and (color) {
  .selector-i + .selector-ii {
    background: hsl(20deg 25% 33%);
    font-family: Helvetica, "Arial Black", sans-serif;
  }
}

/* Flush single line comment */
@media
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
  .selector {
    animation: 3s none fade-in;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent,
        #fff 25px,
        rgb(255 255 255 / 100%) 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");
  }
}

@keyframes fade-in {
  from { opacity: 0%; }
  to { opacity: 100%; }
}

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 --save-dev

Usage

Set your stylelint config to:

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

Extending the config

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

You can turn off rules by setting its value to null. For example:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-class-pattern": null
  }
}

Or lower the severity of a rule to a warning using the severity secondary option. For example:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "property-no-vendor-prefix": [
      true,
      {
        "severity": "warning"
      }
    ]
  }
}

A more complete example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule, set the severity of the number-max-precision rule to warning, and add the unit-allowed-list rule:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["--my-at-rule"]
      }
    ],
    "indentation": "tab",
    "number-leading-zero": null,
    "number-max-precision": [
      4,
      {
        "severity": "warning"
      }
    ],
    "unit-allowed-list": ["em", "rem", "s"]
  }
}

Suggested additions

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

Changelog

License

Current Tags

  • 23.0.0                                ...           latest (a day ago)
  • 23.0.0-0                                ...           next (2 days ago)

33 Versions

  • 23.0.0                                ...           a day ago
  • 23.0.0-0                                ...           2 days ago
  • 22.0.0                                ...           6 months ago
  • 21.0.0                                ...           8 months ago
  • 20.0.0                                ...           2 years ago
  • 19.0.0                                ...           2 years ago
  • 18.3.0                                ...           3 years ago
  • 18.2.0                                ...           4 years ago
  • 18.1.0                                ...           4 years ago
  • 18.0.0                                ...           4 years ago
  • 17.0.0                                ...           4 years ago
  • 16.0.0                                ...           5 years ago
  • 15.0.1                                ...           5 years ago
  • 15.0.0                                ...           5 years ago
  • 14.0.0                                ...           5 years ago
  • 13.0.2                                ...           5 years ago
  • 13.0.1                                ...           5 years ago
  • 13.0.0                                ...           5 years ago
  • 12.0.0                                ...           5 years ago
  • 11.0.0                                ...           5 years ago
  • 10.0.0                                ...           5 years ago
  • 9.0.0                                ...           5 years ago
  • 8.0.0                                ...           5 years ago
  • 7.0.0                                ...           5 years ago
  • 6.0.0                                ...           6 years ago
  • 5.0.0                                ...           6 years ago
  • 4.0.1                                ...           6 years ago
  • 4.0.0                                ...           6 years ago
  • 3.0.0                                ...           6 years ago
  • 2.0.0                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
  • 0.2.0                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
Maintainers (2)
Downloads
Today 20
This Week 32,810
This Month 85,187
Last Day 6,148
Last Week 34,326
Last Month 149,830
Dependencies (1)
Dev Dependencies (12)
Dependents (1597)

Copyright 2014 - 2021 © npmmirror.com |