stylelint

stylelint documentation

• Version in MegaLinter: 14.1.0
• Visit Official Web Site
• See How to configure stylelint rules
  • If custom .stylelintrc.json config file is not found, .stylelintrc.json will be used
• See How to disable stylelint rules in files
• See Index of problems detected by stylelint

Configuration in MegaLinter

• Enable stylelint by adding CSS_STYLELINT in ENABLE_LINTERS variable
• Disable stylelint by adding CSS_STYLELINT in DISABLE_LINTERS variable

• Enable auto-fixes by adding CSS_STYLELINT in APPLY_FIXES variable

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_CLI_LINT_MODE	Override default CLI lint mode - file: Calls the linter for each file - list_of_files: Call the linter with the list of files as argument - project: Call the linter from the root of the project	{linter.cli_lint_mode}
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_PRE_COMMANDS	List of bash commands to run before the linter	None
CSS_STYLELINT_POST_COMMANDS	List of bash commands to run after the linter	None
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 MegaLinter 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 MegaLinter !

	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

MegaLinter Flavours

This linter is available in the following flavours

	Flavor	Description	Embedded linters	Info
	all	Default MegaLinter Flavor	95
	dart	Optimized for DART based projects	41
	documentation	MegaLinter for documentation projects	40
	dotnet	Optimized for C, C++, C# or VB based projects	47
	go	Optimized for GO based projects	42
	java	Optimized for JAVA based projects	42
	javascript	Optimized for JAVASCRIPT or TYPESCRIPT based projects	49
	php	Optimized for PHP based projects	44
	python	Optimized for PYTHON based projects	49
	ruby	Optimized for RUBY based projects	41
	rust	Optimized for RUST based projects	41
	salesforce	Optimized for Salesforce based projects	43
	scala	Optimized for SCALA based projects	41
	swift	Optimized for SWIFT based projects	41
	terraform	Optimized for TERRAFORM based projects	46

Behind the scenes

How are identified applicable files

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

How the linting is performed

• stylelint is called one time by identified file

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)

    --fix

      Automatically fix problems 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 stylelint-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 problems 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

• NPM packages (node.js):
  • stylelint
  • stylelint-config-standard
  • stylelint-config-sass-guidelines
  • stylelint-scss

Example success log

Results of stylelint linter (version 13.8.0)
See documentation on https://megalinter.github.io/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://megalinter.github.io/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