stylelint-config-neat

A neat shareable config for stylelint.

Extends stylelint-config-recommended.

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

Example

@custom-media --viewport-medium (width <= 50rem);

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --secondaryColor: lab(32.5 38.5 -47.6 / 90%);
}

.html {
  all: unset;
  overflow: hidden auto;
}

@media (--viewport-medium) {
  .body {
    padding-inline: calc(var(--fontSize) / 2 + 1px);
    font-family: system-ui;
    font-size: var(--fontSize);
    line-height: calc(var(--fontSize) * 1.5);
    color: var(--mainColor);
    overflow-wrap: break-word;
  }
}

:--heading {
  margin-block: 0;
}

.hero:matches(.light, .dark) {
  background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
}

.link {
  color: rgb(0 0 100% / 90%);

  &:hover {
    color: hwb(120deg 100% 25% / 80%);
  }
}

Installation

npm install --save-dev stylelint-config-neat

Usage

Set your stylelint config to:

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

Extending the config

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

For example, to turn off the declaration-no-important rule:

{
  "extends": "stylelint-config-neat",
  "rules": {
    "declaration-no-important": false
  }
}