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
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-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.
-
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" ] }
: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 withinstylelint
(WIP). And turns On rules that possible errors rules withinstylelint-plugin-stylus
."stylelint-plugin-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).