Awesome

Usage

Install

Install jest, jest-runner-stylelint, and stylelint

npm install --save-dev jest jest-runner-stylelint stylelint

# or with yarn

yarn add --dev jest jest-runner-stylelint stylelint

Configure stylelint

You must have stylelint configured before it'll lint any of your files. Please follow the stylelint documentation on configuration to create your config.

Add it to your Jest config

Using Built-in Preset

This package includes a Jest preset which configures Jest to run stylelint on all files supported by styleint. To use it set the following in your package.json:

{
  "jest": {
    "preset": "jest-runner-stylelint"
  }
}

or jest.config.js:

module.exports = {
  preset: "jest-runner-stylelint",
};

Manually

In your package.json

{
  "jest": {
    "runner": "stylelint",
    "moduleFileExtensions": [
      "css",
      "sass",
      "scss",
      "less",
      "sss",
      "htm",
      "html",
      "md",
      "markdown",
      "mdx",
      "js",
      "jsx",
      "ts",
      "tsx",
      "vue"
    ],
    "testMatch": [
      "**/*.css",
      "**/*.sass",
      "**/*.scss",
      "**/*.less",
      "**/*.sss",
      "**/*.htm",
      "**/*.html",
      "**/*.md",
      "**/*.markdown",
      "**/*.mdx",
      "**/*.js",
      "**/*.jsx",
      "**/*.ts",
      "**/*.tsx",
      "**/*.vue"
    ]
  }
}

Or in jest.config.js

module.exports = {
  runner: "stylelint",
  moduleFileExtensions: [
    "css",
    "sass",
    "scss",
    "less",
    "sss",
    "htm",
    "html",
    "md",
    "markdown",
    "mdx",
    "js",
    "jsx",
    "ts",
    "tsx",
    "vue",
  ],
  testMatch: [
    "**/*.css",
    "**/*.sass",
    "**/*.scss",
    "**/*.less",
    "**/*.sss",
    "**/*.htm",
    "**/*.html",
    "**/*.md",
    "**/*.markdown",
    "**/*.mdx",
    "**/*.js",
    "**/*.jsx",
    "**/*.ts",
    "**/*.tsx",
    "**/*.vue",
  ],
};

Run Jest

npx jest

# or with yarn

yarn jest

Toggle --fix in watch mode

jest-stylelint-runner comes with a watch plugin that allows you to toggle the --fix value while in watch mode without having to update your configuration.

To use this watch plugin simply add this to your Jest configuration.

{
  watchPlugins: ['jest-runner-stylelint/watch-fix'],
}

After this run Jest in watch mode and you will see the following line in your watch usage menu.

 › Press F to override Stylelint --fix.

Options

This project uses cosmiconfig, so you can provide config via:

• a jest-runner-stylelint property in your package.json
• a jest-runner-stylelint.config.js JS file
• a .jest-runner-stylelintrc JSON file

In package.json

{
  "jest-runner-stylelint": {
    "cliOptions": {
      // Options here
    }
  }
}

or in jest-runner-stylelint.config.js

module.exports = {
  cliOptions: {
    // Options here
  },
};

cliOptions

Follow the stylelint documentation on configuration to create your cli options.