tenantcloud-stylelint-config

This is the default config file for stylelint from TenantCloud.

Use it as is or as a basis for your own configuration.

Installation

npm install tenantcloud-stylelint-config --save-dev

Usage

If your project does not already have stylelint, then in the root of the project create the file .stylelintrc, or with the extension .stylelintrc.js so that the code editor can highlight the syntax.

Then add tenantcloud-stylelint-config to the .stylelintrc config file.

.stylelintrc

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

If you have installed tenantcloud-stylelint-config globally using the -g flag, then you need to use the absolute path of tenantcloud-stylelint-config in the config file:

.stylelintrc

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

ATTENTION! This config is for media mixins instead of media queries:

// BAD
@media (min-width: 1200px) {
  width: 300px;
}

// GOOD
$breakpoints: (
  xs: 0, /* <576px */
  sm: 576px, /* ≥576px */
  md: 768px, /* ≥768px */
  lg: 992px, /* ≥992px */
  xl: 1200px, /* ≥1200px */
  xxl: 1400px /* ≥1400px */
) !default;

@include media-min(xs);
@include media-max(xxl);
@include media-only(lg);
@include media-between(sm, md);

Expanding the config

You can override existing rules or add new ones.

To do this, add the "rules" key to the config right after "extends": "tenantcloud-stylelint-config", and then add your own rules.

.stylelintrc

{
  "extends": "tenantcloud-stylelint-config",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null,
    "property-no-unknown": [ true, {
      "ignoreProperties": [
        "composes"
      ]
    }],
    "unit-whitelist": ["em", "rem", "s", "px"]
  }
}

Usage in VSCode

1. Open VScode
2. Install plugin stylelint
3. Use
4. If your code does not comply with the rules of tenantcloud-stylelint-config it will be underlined with a red line.

In the example, the rule 'color-named': 'never' was triggered, which prohibits the use of colors by name