stylelint-plugin-stylus

Stylelint plugin for Stylus.

This plugin is still in an experimental state

NPM license NPM version NPM downloads Build Status


# ๐Ÿ“› Introduction

Stylelint (opens new window) plugin for Stylus (opens new window).

This plugin allows us to check the Stylus (opens new window) with Stylelint (opens new window).

Stylelint editor integrations (opens new window) are useful to check your code in real-time.

You can check on the Online DEMO.

# ๐Ÿ’ฟ Installation

Via npm (opens new window):

npm install --save-dev stylelint stylelint-plugin-stylus

# ๐Ÿ“– Usage

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

# Configuration

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

Example stylelint.config.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // "stylelint-config-standard",
    "stylelint-plugin-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-plugin-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",
  },
};

# ๐Ÿ’ป Editor integrations

# Visual Studio Code

Use the stylelint.vscode-stylelint (opens new window) extension that Stylelint (opens new window) 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 (opens new window) for parsing Stylus (opens new window). With the following setting, .styl and <style lang="stylus"> are parsed by postcss-styl (opens new window).

  • via CLI

    stylelint ... --custom-syntax stylelint-plugin-stylus/custom-syntax
    
  • with VSCode extension (opens new window)

    {
      "stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax",
      "stylelint.validate": [
        ...,
        // โ†“ Add "stylus" language.
        "stylus"
      ]
    }
    

# โคด๏ธ RuleSets

This plugin provides some rulesets. It can be used by specifying it in the extends of the Stylelint configuration (opens new window).

  • "stylelint-plugin-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-plugin-stylus.
  • "stylelint-plugin-stylus/standard" ... Above, plus rules to improve code readability.

# โœ… Rules

You can use the rules built into Stylelint (opens new window) and the rules provided by this plugin.

The --fix option on the command line (opens new window) automatically fixes problems reported by rules which have a 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
๐Ÿ”ง stylus/at-extend-style enforces @extend style. /standard
๐Ÿ”ง stylus/at-rule-empty-line-before require or disallow an empty line before at-rules. /standard
๐Ÿ”ง stylus/at-rule-name-space-after require a single space after at-rule names. /standard
๐Ÿ”ง stylus/block-closing-brace-empty-line-before require or disallow an empty line before the closing brace of blocks. /standard
๐Ÿ”ง stylus/block-closing-brace-newline-after require a newline or disallow whitespace after the closing brace of blocks. /standard
๐Ÿ”ง 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.
๐Ÿ”ง stylus/block-closing-brace-space-before require a single space or disallow whitespace before the closing brace of blocks. /standard
๐Ÿ”ง stylus/block-opening-brace-newline-after require a newline after the opening brace of blocks. /standard
๐Ÿ”ง stylus/block-opening-brace-space-after require a single space or disallow whitespace after the opening brace of blocks. /standard
๐Ÿ”ง stylus/block-opening-brace-space-before require a single space or disallow whitespace before the opening brace of blocks. /standard
๐Ÿ”ง stylus/color-hex-case enforce lowercase or uppercase for hex colors. /standard
๐Ÿ”ง stylus/declaration-colon require or disallow declaration colons. /standard
๐Ÿ”ง stylus/hash-object-property-comma require or disallow commas in hash object properties. /standard
๐Ÿ”ง stylus/indentation enforces indentation. /standard
๐Ÿ”ง stylus/media-feature-colon require or disallow media feature colons. /standard
๐Ÿ”ง stylus/no-at-require disallow @require, use @import instead. /standard
๐Ÿ”ง stylus/no-eol-whitespace disallow end-of-line whitespace. /standard
๐Ÿ”ง stylus/number-leading-zero require or disallow a leading zero for fractional numbers less than 1. /standard
๐Ÿ”ง stylus/number-no-trailing-zeros disallow trailing zeros in numbers. /standard
๐Ÿ”ง stylus/pythonic enforces pythonic or brace style. /standard
๐Ÿ”ง stylus/selector-list-comma-newline-after require a newline or disallow whitespace after the commas of selector lists. /standard
๐Ÿ”ง stylus/selector-list-comma-newline-before require a newline or disallow whitespace before the commas of selector lists.
๐Ÿ”ง stylus/selector-list-comma-space-after require a single space or disallow whitespace after the commas of selector lists.
๐Ÿ”ง stylus/selector-list-comma-space-before require a single space or disallow whitespace before the commas of selector lists. /standard
๐Ÿ”ง stylus/selector-list-comma require or disallow selector list comma. /standard
๐Ÿ”ง stylus/selector-pseudo-class-case enforce lowercase or uppercase for pseudo-class selectors. /standard
๐Ÿ”ง stylus/semicolon require or disallow semicolon. /standard
๐Ÿ”ง stylus/single-line-comment-double-slash-space-after require or disallow whitespace after the double-slash of single-line comments. /standard
๐Ÿ”ง 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).