Neutrino Stylelint middleware

neutrino-middleware-stylelint is a Neutrino middleware that adds basic support for Stylelint.

Installation

Installation requires a single command:

yarn add --dev neutrino-middleware-stylelint

If you want to extend a stylelint configuration, such as the Stylelint standard configuration, don't forget to install it too.

yarn add --dev stylelint-config-standard

(Yet, if that's all you really want, use our pre-configured preset instead.)

Documentation

Using this middleware requires configuration through options. It is not designed to be used on its own, instead it should be configured in your own preset.

For example, in neutrino-stylelint.js, write this configuration:

const stylelint = require('neutrino-middleware-stylelint');

module.exports = (neutrino) => {
  neutrino.use(stylelint, {
    config: {
      extends: require.resolve('stylelint-config-standard'),
      rules: {
        "indentation": "tab",
        "number-leading-zero": null,
        "property-no-unknown": [ true, {
          "ignoreProperties": [
            "composes"
          ]
        }],
        "unit-whitelist": ["em", "rem", "s"]
      }
    }
  });
};

Then configure package.json to have Neutrino pick up your custom preset:

"neutrino": {
  "use": [
    "neutrino-preset-web",
    "./neutrino-stylelint.js"
  ]
}

See [neutrino advanced configuration][neutrino-advanced-configuration] for more details.

Options

Every stylelint plugin option can be overwritten by setting in the middleware options.

Defaults

This middleware overrides some defaults from stylelint-webpack-plugin:

• files: set to '**/*.+(css|scss|sass|less)', supporting CSS, Sass and Less
• failOnError: set to false, prevents Hot Module Replacement issues.

You can see the other default values in the stylelint-webpack-plugin docs.

stylelint.config.js

neutrino-middleware-stylelint also provides a method for getting the Stylelint configuration suitable for use in a stylelint.config.js file. Typically this is used for providing hints or fix solutions to the development environment, e.g. IDEs and text editors. Doing this requires creating an instance of the Neutrino API and providing the presets used. If you keep this information in neutrino.use in package.json, this should be relatively straightforward.

Example: Create a stylelint.config.js file in the root of the project.

// .eslintrc.js
const { Neutrino } = require('neutrino');
const pkg = require('./package.json');
const api = Neutrino();

pkg.neutrino.use
  .map(require)
  .map(api.use);

module.exports = api.stylelintrc();