Skip to content

stylelint

stylelint documentation

stylelint - GitHub

Configuration in Mega-Linter

Variable Description Default value
CSS_STYLELINT_ARGUMENTS User custom arguments to add in linter CLI call
Ex: -s --foo "bar"
CSS_STYLELINT_FILTER_REGEX_INCLUDE Custom regex including filter
Ex: (src\|lib)
Include every file
CSS_STYLELINT_FILTER_REGEX_EXCLUDE Custom regex excluding filter
Ex: (test\|examples)
Exclude no file
CSS_STYLELINT_FILE_EXTENSIONS Allowed file extensions. "*" matches any extension, "" matches empty extension. Empty list excludes all files
Ex: [".py", ""]
[".css", ".scss", ".saas"]
CSS_STYLELINT_FILE_NAMES_REGEX File name regex filters. Regular expression list for filtering files by their base names using regex full match. Empty list includes all files
Ex: ["Dockerfile(-.+)?", "Jenkinsfile"]
Include every file
CSS_STYLELINT_CONFIG_FILE stylelint configuration file name
Use LINTER_DEFAULT to let the linter find it
.stylelintrc.json
CSS_STYLELINT_RULES_PATH Path where to find linter configuration file Workspace folder, then Mega-Linter default rules
CSS_STYLELINT_DISABLE_ERRORS Run linter but consider errors as warnings false
CSS_STYLELINT_DISABLE_ERRORS_IF_LESS_THAN Maximum number of errors allowed 0

IDE Integration

Use stylelint in your favorite IDE to catch errors before Mega-Linter !

IDE Extension Name Install
Atom linter-stylelint Visit Web Site
Emacs flycheck Visit Web Site
Sublime Text SublimeLinter-stylelint Visit Web Site
Sublime Text SublimeLinter-contrib-stylelint_d Visit Web Site
vim ale Visit Web Site
Visual Studio Code vscode-stylelint Install in VsCode

Mega-Linter Flavours

This linter is available in the following flavours

Flavor Description Embedded linters Info
all Default Mega-Linter Flavor 91 Docker Image Size (tag) Docker Pulls
dart Optimized for DART based projects 39 Docker Image Size (tag) Docker Pulls
documentation Mega-Linter for documentation projects 38 Docker Image Size (tag) Docker Pulls
dotnet Optimized for C, C++, C# or VB based projects 44 Docker Image Size (tag) Docker Pulls
go Optimized for GO based projects 40 Docker Image Size (tag) Docker Pulls
java Optimized for JAVA based projects 39 Docker Image Size (tag) Docker Pulls
javascript Optimized for JAVASCRIPT or TYPESCRIPT based projects 47 Docker Image Size (tag) Docker Pulls
php Optimized for PHP based projects 42 Docker Image Size (tag) Docker Pulls
python Optimized for PYTHON based projects 47 Docker Image Size (tag) Docker Pulls
ruby Optimized for RUBY based projects 39 Docker Image Size (tag) Docker Pulls
rust Optimized for RUST based projects 39 Docker Image Size (tag) Docker Pulls
salesforce Optimized for Salesforce based projects 41 Docker Image Size (tag) Docker Pulls
scala Optimized for SCALA based projects 39 Docker Image Size (tag) Docker Pulls
swift Optimized for SWIFT based projects 39 Docker Image Size (tag) Docker Pulls
terraform Optimized for TERRAFORM based projects 43 Docker Image Size (tag) Docker Pulls

Behind the scenes

How are identified applicable files

  • File extensions: .css, .scss, .saas

Example calls

stylelint myfile.css
stylelint --config .stylelintrc.json myfile.css
stylelint --fix --config .stylelintrc.json myfile.css

Help content


  A mighty, modern CSS linter.

  Usage: stylelint [input] [options]

  Input: Files(s), glob(s), or nothing to use stdin.

    If an input argument is wrapped in quotation marks, it will be passed to
    globby for cross-platform glob support. node_modules are always ignored.
    You can also pass no input and use stdin, instead.

  Options:

    --config

      Path to a specific configuration file (JSON, YAML, or CommonJS), or the
      name of a module in node_modules that points to one. If no --config
      argument is provided, stylelint will search for configuration files in
      the following places, in this order:
        - a stylelint property in package.json
        - a .stylelintrc file (with or without filename extension:
          .json, .yaml, .yml, and .js are available)
        - a stylelint.config.js file exporting a JS object
      The search will begin in the working directory and move up the directory
      tree until a configuration file is found.

    --config-basedir

      An absolute path to the directory that relative paths defining "extends"
      and "plugins" are *relative to*. Only necessary if these values are
      relative paths.

    --print-config

      Print the configuration for the given path.

    --ignore-path, -i

      Path to a file containing patterns that describe files to ignore. The
      path can be absolute or relative to process.cwd(). By default, stylelint
      looks for .stylelintignore in process.cwd().

    --ignore-pattern, --ip

      Pattern of files to ignore (in addition to those in .stylelintignore)

    --syntax, -s

      Specify a syntax. Options: "css", "css-in-js", "html", "less",
      "markdown", "sass", "scss", "sugarss". If you do not specify a syntax,
      syntaxes will be automatically inferred by the file extensions
      and file content.

    --fix

      Automatically fix violations of certain rules.

    --custom-syntax

      Module name or path to a JS file exporting a PostCSS-compatible syntax.

    --stdin

      Accept stdin input even if it is empty.

    --stdin-filename

      A filename to assign stdin input.

    --ignore-disables, --id

      Ignore styleline-disable comments.

    --disable-default-ignores, --di

      Allow linting of node_modules.

    --cache                       [default: false]

      Store the info about processed files in order to only operate on the
      changed ones the next time you run stylelint. By default, the cache
      is stored in "./.stylelintcache". To adjust this, use --cache-location.

    --cache-location              [default: '.stylelintcache']

      Path to a file or directory to be used for the cache location.
      Default is "./.stylelintcache". If a directory is specified, a cache
      file will be created inside the specified folder, with a name derived
      from a hash of the current working directory.

      If the directory for the cache does not exist, make sure you add a trailing "/"
      on *nix systems or "\" on Windows. Otherwise the path will be assumed to be a file.

    --formatter, -f               [default: "string"]

      The output formatter: "compact", "json", "string", "tap", "unix" or "verbose".

    --custom-formatter

      Path to a JS file exporting a custom formatting function.

    --quiet, -q

      Only register violations for rules with an "error"-level severity (ignore
      "warning"-level).

    --color
    --no-color

      Force enabling/disabling of color.

    --report-needless-disables, --rd

      Also report errors for stylelint-disable comments that are not blocking a lint warning.
      The process will exit with code 2 if needless disables are found.

    --report-invalid-scope-disables, --risd

      Report stylelint-disable comments that used for rules that don't exist within the configuration object.
      The process will exit with code 2 if invalid scope disables are found.

    --report-descriptionless-disables, --rdd

      Report stylelint-disable comments without a description.
      The process will exit with code 2 if descriptionless disables are found.

    --max-warnings, --mw

      Number of warnings above which the process will exit with code 2.
      Useful when setting "defaultSeverity" to "warning" and expecting the
      process to fail on warnings (e.g. CI build).

    --output-file, -o

      Path of file to write report.

    --version, -v

      Show the currently installed version of stylelint.

    --allow-empty-input, --aei

      When glob pattern matches no files, the process will exit without throwing an error.

Installation on mega-linter Docker image

Example success log

Results of stylelint linter (version 13.8.0)
See documentation on https://nvuillam.github.io/mega-linter/descriptors/css_stylelint/
-----------------------------------------------

[SUCCESS] .automation/test/css/css_good_01.css


Example error log

Results of stylelint linter (version 13.8.0)
See documentation on https://nvuillam.github.io/mega-linter/descriptors/css_stylelint/
-----------------------------------------------

[ERROR] .automation/test/css/css_bad_01.css

    .automation/test/css/css_bad_01.css
     2:1   ✖  Expected empty line before comment   comment-empty-line-before
     3:1   ✖  Expected empty line before comment   comment-empty-line-before
     5:5   ✖  Expected indentation of 2 spaces     indentation              
     5:33  ✖  Expected "#FFFFFF" to be "#ffffff"   color-hex-case           
     5:33  ✖  Expected "#FFFFFF" to be "#FFF"      color-hex-length         
     6:5   ✖  Expected indentation of 2 spaces     indentation              
     7:5   ✖  Expected indentation of 2 spaces     indentation              
     8:5   ✖  Expected indentation of 2 spaces     indentation              
     8:12  ✖  Expected "#AAAAAA" to be "#aaaaaa"   color-hex-case           
     8:12  ✖  Expected "#AAAAAA" to be "#AAA"      color-hex-length