@alza54/stylelint-config-scss

Strict shareable config for stylelint and SCSS.

Features

• Extends stylelint-standard config
• Turns on almost all rules from stylelint-scss
• Protects you from common mistakes
• Handles how $variables are defined and enforces to use them
• Handles how @mixins, %placeholders, and @functions should be defined
• Also checks @imports, declarations, url()s, and other minor things
• Enforces to use autoprefixer by restricting vendor prefixes
• Maintains consistent declarations order with stylelint-order
• Has sensible defaults, but is nice and not intrusive
• Is opened for further extension!

The goal of this project is to be nicer version of @wemake-services/stylelint-config-scss.

Bundled plugins

• stylelint-scss
• stylelint-order
• style-search
• stylelint-config-recommended-scss
• stylelint-config-standard
• stylelint-csstree-validator
• stylelint-declaration-block-no-ignored-properties
• stylelint-declaration-strict-value
• stylelint-high-performance-animation
• stylelint-no-indistinguishable-colors
• stylelint-selector-tag-no-without-class
• stylelint-use-nesting

Installation

npm install --save-dev @alza54/stylelint-config-scss

or yarn

yarn add -D @alza54/stylelint-config-scss

And then extend it in your configuration:

{
  "extends": [
    "@alza54/stylelint-config-scss"
  ]
}

Code example

This code is considered valid (and beautiful):

$mobile: 450px;

@function em ($size, $base-font: 16px) {
  @return $size * 1em / $base-font;
}

%abstract-div {
  display: block;
}

div {
  @extend %abstract-div;

  background-image: url('https://placehold.it/400x200');
  padding: em($size: 5px);

  @media screen and (min-width: $mobile) {
    display: none;
  }
}

License

MIT.