Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
536 lines (470 sloc) 10.6 KB

Stylus Linter

Build Status NPM version NPM Downloads

NPM

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

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](#Config file)

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,
    "trancate": false
  }
}

As Part of Your Workflow

Stlint integrations with IDEs are available.

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

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.

You can’t perform that action at this time.