stylelint-plugin-stylus

    0.13.1 • Public • Published

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

    💿 Installation

    Via npm:

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

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

    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",
      ],
      // 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 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-plugin-stylus/custom-syntax
    • with VSCode extension

      {
        "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.

    • "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 and the rules provided by this plugin.

    The --fix option on the command line 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).

    Install

    npm i stylelint-plugin-stylus

    DownloadsWeekly Downloads

    2,152

    Version

    0.13.1

    License

    MIT

    Unpacked Size

    159 kB

    Total Files

    58

    Last publish

    Collaborators

    • ota-meshi