This project has moved the repository as an official Stylus project!
It is currently maintained in stylus/stylelint-stylus!
See [https://github.com/stylus/stylelint-stylus](https://github.com/stylus/stylelint-stylus).
stylelint-plugin-stylus
This plugin is still in an experimental state
# ๐ 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).
- Finds the many wrong use of selector, declaration, at-rule and more using the rules of Stylelint (opens new window).
- Finds the violations in coding style for Stylus (opens new window).
- Use the fix option (opens new window) to automatically fixes the many stylistic violations.
Stylelint editor integrations (opens new window) are useful to check your code in real-time.
You can check on the Online DEMO.
# ๐ฟ Installation
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 withinstylelint
(WIP). And turns On rules that possible errors rules withinstylelint-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).
Playground โ