stylelint-stylus

Stylelint plugin for Stylus.

This plugin is still in an experimental state

:name_badge: Introduction

Stylelint plugin for Stylus.

This plugin allows us to check the Stylus with Stylelint.

• Finds the many wrong use of selector, declaration, at-rule and more using the rules of Stylelint.
• Finds the violations in coding style for Stylus.
• Use the fix option to automatically fixes the many stylistic violations.

Stylelint editor integrations are useful to check your code in real-time.

You can check on the Online DEMO.

:cd: Installation

Via npm:

npm install --save-dev stylelint stylelint-stylus

:book: Usage

stylelint-stylus is a plugin for Stylelint, so it is for use with Stylelint.
If you are not using Stylelint, start by using Stylelint.

Configuration

Use .stylelintrc.* or stylelint.config.js file to configure rules. See also: https://stylelint.io/user-guide/configure.

Example stylelint.config.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // "stylelint-config-standard",
    "stylelint-stylus/standard",
  ],
  rules: {
    // override/add rules settings here, such as:
    // "stylus/declaration-colon": "never"
  },
};

If you want to set all the rules yourself, set as follows.

module.exports = {
  plugins: [
    // add this plugin here:
    "stylelint-stylus",
  ],
  // makes the stylus files parseable.
  overrides: [
    {
      files: ["*.stylus", "*.styl", "**/*.stylus", "**/*.styl"],
      customSyntax: "postcss-styl",
    },
  ],
  rules: {
    // add rules settings here, such as:
    "stylus/declaration-colon": "never",
    "stylus/pythonic": "always",
    "stylus/selector-list-comma": "never",
    "stylus/semicolon": "never",
    "stylus/single-line-comment": "always",
  },
};

:computer: Editor integrations

Visual Studio Code

Use the stylelint.vscode-stylelint extension that Stylelint provides officially.

You have to configure the stylelint.validate option of the extension to check .stylus files, because the extension does not check the *.stylus file by default.

Example .vscode/settings.json:

{
  "stylelint.validate": [
      ...,
      // ↓ Add "stylus" language.
      "stylus"
  ]
}

Custom Syntax

If you are using stylelint v13, you need to do the following:

Set custom syntax for parsing Stylus. With the following setting, .styl and <style lang="stylus"> are parsed by postcss-styl.

• via CLI

  stylelint ... --custom-syntax stylelint-stylus/custom-syntax

• with VSCode extension

  {
  "stylelint.customSyntax": "stylelint-stylus/custom-syntax",
  "stylelint.validate": [
    ...,
    // ↓ Add "stylus" language.
    "stylus"
  ]
  }

:arrow_heading_up: RuleSets

This plugin provides some rulesets. It can be used by specifying it in the extends of the Stylelint configuration.

• "stylelint-stylus/recommended" ... Turns Off rules that cannot be used with the Stylus within stylelint (WIP). And turns On rules that possible errors rules within stylelint-stylus.
• "stylelint-stylus/standard" ... Above, plus rules to improve code readability.

:white_check_mark: Rules

You can use the rules built into Stylelint and the rules provided by this plugin.

The --fix option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.

Possible Errors Rules

These rules relate to possible syntax or logic errors in Stylus.

Standard Rules

These rules relate to style guidelines.

License

See the LICENSE file for license rights and limitations (MIT).