@commercetools-frontend/jest-stylelint-runner

Jest runner for Stylelint.

Disclaimer

@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

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

Usage

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': [
      true,
      {
        importFrom: [
          'node_modules/@commercetools-uikit/design-system/materials/custom-properties.css',
        ],
      },
    ],
  },
};

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).

npm