stlint

Stylus Linter

• Issues
• Installation
• Example cli Usage
• CLI
• Non CLI Usage
• As Part of Your Workflow
• Ignore errors
• Rules
• License

Installation

As part of your project

npm i stlint -D

As a cli tool:

npm install stlint -g

Example cli Usage:

npx stlint Run stlint on cwd

stlint Run stlint on cwd as global

stlint path/to/filename.styl Run stlint on a file

stlint path/to/dir --watch Watch dir, run stlint on file change

stlint --help Get list of commands

stlint --version Get version number

stlint --config path/to/config/.configrc Run stlint with custom config settings

stlint styl/ --watch -c path/to/config/.configrc Watch dir, use custom config

stlint --command autocomplete --content #e --offset 0 --lineoffset 0 Get autocomplete suggestions for # string

CLI

-h or --help Display list of commands

-w or --watch Watch file or directory and run lint on change

-c or --config Pass in location of custom config file

-v or --version Display current version

-g or --grep Only run rules matching this string or regexp

-f or --fix Try fix some issues

-i or --info Show info about version and config (can be used with --grep for filter rules)

-r or --reporter Reporter "raw", "json" or "silent"

All another options from config

Non CLI Usage

const StylusLinter = require('stlint').StylusLinter;
StylusLinter('path/to/stylus/', {
  watch: true
});

or check only one file or text

const Linter = require('stlint').Linter;
const linter = new Linter({
  ...options
});
 
// if you want check content
linter.lint('./test.styl', 'content');
 
// if you want check file
linter.lint('./test.styl');
 
// and display errors.
linter.display();

Config file

Create .stlintrc file in project root

{
  "reporter": "raw",
  "watch": false,
  "extends": ["stlint-v4fire", "./test/.myfileconfig.json"],
  "extraRules": "./my-rules/",
  "rules": {
    "color": false,
    "colons": ["always"],
    "depthControl": {
      "indentPref": 4
    }
  },
  "path": "./src",
  "excludes": ["node_modules/"],
  "stylusParserOptions": {},
  "reportOptions": {
    "columnSplitter": " | ",
    "maxWidth": 70,
    "minWidth": 70,
    "truncate": false
  }
}

As Part of Your Workflow

Stlint integrations with IDEs are available.

• WebStorm / PhpStorm / IntelliJ IDEA
• VSCode

Ignore errors

sometimes you want to ignore the error for this there are two directives:

• @stlint-ignore - ignores only one line after it
• @stlint-disable @stlint-enable - ignore block (@stlint-enable is optional)

For example, in the following code, some errors will be ignored.

$p = {
  a: #CCC
  // @stlint-ignore
  b: #ccc // need use uppercase notation will be ignored
  c: 10px
}
.test
  margin-top 20px
  // @stlint-disable
  padding-top 20px  // need use mixin will be ignored
  color #ccc        // need use uppercase notation and use variable will be ignored
  // @stlint-enable
  background-color #ddd

Respectively, in order not to display errors of the entire file, it is enough to add an @stlint-disable directive to its beginning

// @stlint-disable - all errors below will be ignored
$p = {
  a: #CCC
  b: #ccc
  c: 10px
}
.test
  margin-top 20px
  padding-top 20px
  color #ccc
  background-color #ddd

Rules

brackets

Check for brackets

Default value

[
  "never"
]

---

colons

Use/Do not use colons after property

Default value

[
  "never"
]

---

color

Process all color values. Allow or deny use it not in variable and use uppercase or lowercase statements For example this code has error - because we use only color in uppercase

.test
  color #ccc

If allowOnlyInVar === true code above also has error - no use color without variable

Fixed code

$color = #CCC
.test
  color $color

Default value

{
  "conf": "uppercase",
  "enabled": true,
  "allowOnlyInVar": true,
  "allowShortcut": true,
  "denyRGB": true
}

---

commaInObject

Allow or deny commas in object hash

Default value

[
  "never"
]

---

depthControl

Control depth spaces or tab

Default value

{
  "indentPref": "tab"
}

---

emptyLines

Check if document has several empty lines

Default value

true

---

leadingZero

Check for leading 0 on numbers ( 0.5 )

Default value

[
  "always"
]

---

mixedSpaces

check for mixed spaces and tabs

Default value

{
  "indentPref": "tab"
}

---

prefixVarsWithDollar

Check that $ is used when declaring vars

Default value

{
  "conf": "always",
  "prefix": "$",
  "allowConst": true
}

---

quotePref

Check that quote style is consistent with config

Default value

[
  "double"
]

---

semicolons

Check that selector properties are sorted accordingly

Default value

[
  "never"
]

---

sortOrder

Rule for checking properties order. Can use alphabetical order or order from grouped array

Default value

{
  "conf": "grouped",
  "startGroupChecking": 6,
  "order": [
    [
      "absolute",
      "position",
      "z-index",
      "top",
      "right",
      "bottom",
      "left"
    ],
    [
      "content",
      "display",
      "flexbox",
      "flex",
      "flex-grow",
      "flex-shrink",
      "flex-basis",
      "flex-direction",
      "order",
      "flex-order",
      "flex-wrap",
      "flex-flow",
      "justify-content",
      "align-self",
      "align-items",
      "align-content",
      "flex-pack",
      "flex-align",
      "box-sizing",
      "vertical-align",
      "size",
      "width",
      "height",
      "max-width",
      "min-width",
      "max-height",
      "min-height",
      "overflow",
      "overflow-x",
      "overflow-y",
      "float",
      "clear",
      "visibility",
      "opacity",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left"
    ],
    [
      "font",
      "font-family",
      "font-size",
      "font-weight",
      "font-style",
      "font-variant",
      "font-size-adjust",
      "font-stretch",
      "line-height",
      "letter-spacing",
      "text-align",
      "text-align-last",
      "text-decoration",
      "text-emphasis",
      "text-emphasis-position",
      "text-emphasis-style",
      "text-emphasis-color",
      "text-indent",
      "text-justify",
      "text-outline",
      "text-transform",
      "text-wrap",
      "text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "word-spacing",
      "word-wrap",
      "word-break",
      "tab-size",
      "hyphens"
    ],
    [
      "pointer-events",
      "border",
      "border-spacing",
      "border-collapse",
      "border-width",
      "border-style",
      "border-color",
      "border-top",
      "border-top-width",
      "border-top-style",
      "border-top-color",
      "border-right",
      "border-right-width",
      "border-right-style",
      "border-right-color",
      "border-bottom",
      "border-bottom-width",
      "border-bottom-style",
      "border-bottom-color",
      "border-left",
      "border-left-width",
      "border-left-style",
      "border-left-color",
      "border-radius",
      "border-top-left-radius",
      "border-top-right-radius",
      "border-bottom-right-radius",
      "border-bottom-left-radius",
      "border-image",
      "border-image-source",
      "border-image-slice",
      "border-image-width",
      "border-image-outset",
      "border-image-repeat",
      "border-top-image",
      "border-right-image",
      "border-bottom-image",
      "border-left-image",
      "border-corner-image",
      "border-top-left-image",
      "border-top-right-image",
      "border-bottom-right-image",
      "border-bottom-left-image",
      "color",
      "background",
      "filter",
      "background-color",
      "background-image",
      "background-attachment",
      "background-position",
      "background-position-x",
      "background-position-y",
      "background-clip",
      "background-origin",
      "background-size",
      "background-repeat",
      "clip",
      "list-style",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "cursor",
      "box-shadow",
      "text-shadow",
      "table-layout",
      "backface-visibility",
      "will-change",
      "transition",
      "transform",
      "animation"
    ]
  ]
}

---

useMixinInsteadUnit

Allo or deny some mixin instead of unit statement

Default value

{
  "conf": "always",
  "mixin": "basis",
  "unitType": "px",
  "allowOneUnit": false
}

----

Self rules

You can create folder and use it for extra rules

{
  "extraRules": "/Users/v-chupurnov/WebstormProjects/test/rules/"
}

In this folder you can create native JavaScript files

const Rgb = require('stlint').ast.RGB;
 
function TestRule() {
    nodesFilter = ['rgb']; // can be one of https://github.com/stylus/stlint/tree/master/src/core/ast
 
    /**
     * Check the AST nodes
     * @param node
     */
    this.checkNode = (node) => {
        if (node instanceof Rgb) {
            console.log(this.state.conf); // test111
            console.log(this.state.someExtraVariable); // 112
            // this.msg('Test error on test node', node.lineno, node.column, node.line.length);
        }
    };
 
    /**
     * Check every line
     * @param line
     */
    this.checkLine = (line) => {
        if (line.lineno === 1) {
            // this.msg('Test error on test line', line.lineno, 1, line.line.length);
        }
    };
}
 
module.exports.TestRule = TestRule;

And you need add this rule in your config

{
  "extraRules": "/Users/v-chupurnov/WebstormProjects/test/rules/",
  "rules": {
    "testRule": {
      "conf": "test111",
      "someExtraVariable": 112,
      "enabled": true
    }
  }
}

License

The MIT License.