Home

Awesome

<h1 align="center">stylelint-plugin-stylus</h1> <p align="center"><a href="https://stylelint.io/" alt="Stylelint">Stylelint</a> plugin for <a href="https://stylus-lang.com/" alt="Stylus">Stylus</a>. <p align="center"><b><i>This plugin is still in an experimental state</i></b></p> <p align="center"> <a href="https://www.npmjs.com/package/stylelint-plugin-stylus"> <img src="https://img.shields.io/npm/l/stylelint-plugin-stylus.svg" alt="NPM license"> </a> <a href="https://www.npmjs.com/package/stylelint-plugin-stylus"> <img src="https://img.shields.io/npm/v/stylelint-plugin-stylus.svg" alt="NPM version"> </a> <a href="https://www.npmjs.com/package/stylelint-plugin-stylus"> <img src="https://img.shields.io/npm/dw/stylelint-plugin-stylus.svg" alt="NPM downloads"> </a> <a href="https://github.com/ota-meshi/stylelint-plugin-stylus/actions?query=workflow%3ACI"> <img src="https://github.com/ota-meshi/stylelint-plugin-stylus/workflows/CI/badge.svg?branch=master" alt="Build Status"> </a> </p> <br>

:name_badge: Introduction

Stylelint plugin for Stylus.

This plugin allows us to check the Stylus with Stylelint.

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.

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

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

:arrow_heading_up: RuleSets

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

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

<!--RULES_TABLE_START-->

Possible Errors Rules

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

Rule IDDescriptionRuleSet
stylus/at-rule-no-unknowndisallow unknown at-rules./recommended
stylus/property-no-unknowndisallow unknown properties./recommended
stylus/selector-type-no-unknowndisallow unknown type selectors./recommended
stylus/single-line-comment-no-emptydisallow empty single-line comments./recommended

Standard Rules

These rules relate to style guidelines.

Rule IDDescriptionRuleSet
:wrench:stylus/at-extend-styleenforces @extend style./standard
:wrench:stylus/at-rule-empty-line-beforerequire or disallow an empty line before at-rules./standard
:wrench:stylus/at-rule-name-space-afterrequire a single space after at-rule names./standard
:wrench:stylus/block-closing-brace-empty-line-beforerequire or disallow an empty line before the closing brace of blocks./standard
:wrench:stylus/block-closing-brace-newline-afterrequire a newline or disallow whitespace after the closing brace of blocks./standard
:wrench:stylus/block-closing-brace-newline-beforerequire a newline or disallow whitespace before the closing brace of blocks./standard
stylus/block-closing-brace-space-afterrequire a single space or disallow whitespace after the closing brace of blocks.
:wrench:stylus/block-closing-brace-space-beforerequire a single space or disallow whitespace before the closing brace of blocks./standard
:wrench:stylus/block-opening-brace-newline-afterrequire a newline after the opening brace of blocks./standard
:wrench:stylus/block-opening-brace-space-afterrequire a single space or disallow whitespace after the opening brace of blocks./standard
:wrench:stylus/block-opening-brace-space-beforerequire a single space or disallow whitespace before the opening brace of blocks./standard
:wrench:stylus/color-hex-caseenforce lowercase or uppercase for hex colors./standard
:wrench:stylus/declaration-colonrequire or disallow declaration colons./standard
:wrench:stylus/hash-object-property-commarequire or disallow commas in hash object properties./standard
:wrench:stylus/indentationenforces indentation./standard
:wrench:stylus/media-feature-colonrequire or disallow media feature colons./standard
:wrench:stylus/no-at-requiredisallow @require, use @import instead./standard
:wrench:stylus/no-eol-whitespacedisallow end-of-line whitespace./standard
:wrench:stylus/number-leading-zerorequire or disallow a leading zero for fractional numbers less than 1./standard
:wrench:stylus/number-no-trailing-zerosdisallow trailing zeros in numbers./standard
:wrench:stylus/pythonicenforces pythonic or brace style./standard
:wrench:stylus/selector-list-comma-newline-afterrequire a newline or disallow whitespace after the commas of selector lists./standard
:wrench:stylus/selector-list-comma-newline-beforerequire a newline or disallow whitespace before the commas of selector lists.
:wrench:stylus/selector-list-comma-space-afterrequire a single space or disallow whitespace after the commas of selector lists.
:wrench:stylus/selector-list-comma-space-beforerequire a single space or disallow whitespace before the commas of selector lists./standard
:wrench:stylus/selector-list-commarequire or disallow selector list comma./standard
:wrench:stylus/selector-pseudo-class-caseenforce lowercase or uppercase for pseudo-class selectors./standard
:wrench:stylus/semicolonrequire or disallow semicolon./standard
:wrench:stylus/single-line-comment-double-slash-space-afterrequire or disallow whitespace after the double-slash of single-line comments./standard
:wrench:stylus/single-line-commentenforces comment style where single-line comments are allowed./standard
<!--RULES_TABLE_END-->

License

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