stylelint-config-wxss

stylelint-config-wxss

The WeChat wxss syntax 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.

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

Example

/* Error: selector-max-compound-selectors */
a b {
  top: 0rpx;
}

/* Error: length-zero-no-unit */
a {
  top: 0rpx;
}

/* Error: property-no-vendor-prefix */
a {
  -moz-columns: 2;
}

/* Error: value-no-vendor-prefix */
a {
  display: -webkit-flex;
}

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

Installation

npm i stylelint-config-standard stylelint-config-wxss --save-dev

Usage

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

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

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

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

Extending the config

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

For example, to change the indentation to tabs, turn off the number-leading-zero rule, change the property-no-unknown rule to use its ignoreAtRules option and add the unit-whitelist rule:

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

License