stylelint-plugin-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.
• The Stylus-specific syntax can be disallowed and auto-fix. This will help you migrate to another CSS preprocessor.

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-plugin-stylus

:book: Usage

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

Custom Syntax

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-plugin-stylus/custom-syntax
  

• with VSCode extension

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

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-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"
  ],
  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",
  }
}

:arrow_heading_up: RuleSets

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

• "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.
• "stylelint-plugin-stylus/no-stylus" ... A rule set that does not allow Stylus-specific syntax. This will help you migrate to another CSS preprocessor.

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