: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.

| | Rule ID | Description | RuleSet | |:---|:--------|:------------|:--------| | | stylus/at-rule-no-unknown | disallow unknown at-rules. | /recommended | | | stylus/property-no-unknown | disallow unknown properties. | /recommended | | | stylus/selector-type-no-unknown | disallow unknown type selectors. | /recommended | | | stylus/single-line-comment-no-empty | disallow empty single-line comments. | /recommended |

Standard Rules

These rules relate to style guidelines.

| | Rule ID | Description | RuleSet | |:---|:--------|:------------|:--------| | :wrench: | stylus/at-extend-style | enforces @extend style. | /standard | | :wrench: | stylus/at-rule-empty-line-before | require or disallow an empty line before at-rules. | /standard | | :wrench: | stylus/at-rule-name-space-after | require a single space after at-rule names. | /standard | | :wrench: | stylus/block-closing-brace-empty-line-before | require or disallow an empty line before the closing brace of blocks. | /standard | | :wrench: | stylus/block-closing-brace-newline-after | require a newline or disallow whitespace after the closing brace of blocks. | /standard | | :wrench: | stylus/block-closing-brace-newline-before | require a newline or disallow whitespace before the closing brace of blocks. | /standard | | | stylus/block-closing-brace-space-after | require a single space or disallow whitespace after the closing brace of blocks. | | | :wrench: | stylus/block-closing-brace-space-before | require a single space or disallow whitespace before the closing brace of blocks. | /standard | | :wrench: | stylus/block-opening-brace-newline-after | require a newline after the opening brace of blocks. | /standard | | :wrench: | stylus/block-opening-brace-space-after | require a single space or disallow whitespace after the opening brace of blocks. | /standard | | :wrench: | stylus/block-opening-brace-space-before | require a single space or disallow whitespace before the opening brace of blocks. | /standard | | :wrench: | stylus/color-hex-case | enforce lowercase or uppercase for hex colors. | /standard | | :wrench: | stylus/declaration-colon | require or disallow declaration colons. | /standard | | :wrench: | stylus/hash-object-property-comma | require or disallow commas in hash object properties. | /standard | | :wrench: | stylus/indentation | enforces indentation. | /standard | | :wrench: | stylus/media-feature-colon | require or disallow media feature colons. | /standard | | :wrench: | stylus/no-at-require | disallow @require, use @import instead. | /standard | | :wrench: | stylus/no-eol-whitespace | disallow end-of-line whitespace. | /standard | | :wrench: | stylus/number-leading-zero | require or disallow a leading zero for fractional numbers less than 1. | /standard | | :wrench: | stylus/number-no-trailing-zeros | disallow trailing zeros in numbers. | /standard | | :wrench: | stylus/pythonic | enforces pythonic or brace style. | /standard | | :wrench: | stylus/selector-list-comma-newline-after | require a newline or disallow whitespace after the commas of selector lists. | /standard | | :wrench: | stylus/selector-list-comma-newline-before | require a newline or disallow whitespace before the commas of selector lists. | | | :wrench: | stylus/selector-list-comma-space-after | require a single space or disallow whitespace after the commas of selector lists. | | | :wrench: | stylus/selector-list-comma-space-before | require a single space or disallow whitespace before the commas of selector lists. | /standard | | :wrench: | stylus/selector-list-comma | require or disallow selector list comma. | /standard | | :wrench: | stylus/selector-pseudo-class-case | enforce lowercase or uppercase for pseudo-class selectors. | /standard | | :wrench: | stylus/semicolon | require or disallow semicolon. | /standard | | :wrench: | stylus/single-line-comment-double-slash-space-after | require or disallow whitespace after the double-slash of single-line comments. | /standard | | :wrench: | stylus/single-line-comment | enforces comment style where single-line comments are allowed. | /standard |

License

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