22.28.0 • Public • Published


Latest release (latest dist-tag) Latest release (next dist-tag) Minified + GZipped size GitHub license

Jest runner for Stylelint.


@commercetools-frontend/jest-stylelint-runner is inspired by jest-runner-stylelint.

However, it has two main distinctions.

  • jest-stylelint-runner will process your CSS with PostCSS given a postcss.config.js file in your project. This means that it can resolve imports and custom properties through the use of PostCSS plugins.
  • jest-stylelint-runner has stylelint as a peer dependency.


Install jest(it needs Jest 21+),jest-stylelint-runner, postcss and any PostCSS plugins you need.

yarn add --dev jest postcss stylelint @commercetools-frontend/jest-stylelint-runner

# or with NPM

npm install --save-dev jest postcss stylelint @commercetools-frontend/jest-stylelint-runner


Add it to your Jest config.

In your package.json:

  "jest": {
    "runner": "@commercetools-frontend/jest-stylelint-runner",
    "moduleFileExtensions": ["css"],
    "testMatch": ["**/*.css"]

Or in jest.stylelint.config.js:

module.exports = {
  runner: '@commercetools-frontend/jest-stylelint-runner',
  displayName: 'stylelint',
  moduleFileExtensions: ['css'],
  testMatch: ['**/*.css'],

Run it as jest --config jest.stylelint.config.js.

Define your PostCSS config

In your postcss.config.js:

module.exports = () => {
  return {
    parser: false,
    map: false,
    plugins: {
      'postcss-import': {},
      // ...

Recommended setup for Custom Applications

If you are developing Custom Applications for commercetools's Merchant Center, and are using CSS Modules, we recommend to additionally install the following dependencies:

yarn add -E postcss-syntax stylelint-config-prettier stylelint-config-standard stylelint-order stylelint-value-no-unknown-custom-properties

Then configure Stylelint as following:

 * @type {import('stylelint').Config}
module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  plugins: ['stylelint-order', 'stylelint-value-no-unknown-custom-properties'],
  rules: {
    // other rules...
    'csstools/value-no-unknown-custom-properties': [
        importFrom: [

Furthermore, the postcss.config.js should be configured as following:

const { createPostcssConfig } = require('@commercetools-frontend/mc-scripts');

// Re-export the pre-configured `postcss.config.js`.
// This file is only used by file/scripts in this repository, for example linters etc.
module.exports = createPostcssConfig();

You can also customize some of the plugins (see function signature).

Package Sidebar


npm i @commercetools-frontend/jest-stylelint-runner

Weekly Downloads






Unpacked Size

7.15 kB

Total Files


Last publish


  • tdeekens
  • emmenko
  • commercetools-admin