stylelint-custom-processor-loader

0.6.0 verified Sat Apr 25 auth: no javascript

A Webpack loader (v0.6.0) that integrates Stylelint with custom processors (e.g., styled-components, markdown, HTML) into the Webpack build pipeline. Unlike postcss-loader, which only handles CSS files, this loader enables linting of CSS-in-JS and other non-standard syntaxes directly from JavaScript/TypeScript files. It requires peer dependencies stylelint >=7.8 and webpack >=2, and is intended for Webpack 2+ only. The loader is stable but receives infrequent updates, designed specifically for custom processor workflows that postcss-loader cannot support.

Common errors

error Error: Cannot find module 'stylelint' ↓

cause Missing peer dependency stylelint.

fix

Run: npm install --save-dev stylelint

error Module build failed: Error: No configuration provided for stylelint-custom-processor-loader ↓

cause Missing .stylelintrc or configPath option pointing to invalid config.

fix

Create a .stylelintrc file in project root or pass configPath option with valid path.

error Error: Cannot find module 'stylelint-processor-styled-components' ↓

cause Processor not installed or not specified in stylelint config.

fix

Install processor: npm install --save-dev stylelint-processor-styled-components, and add processors array to .stylelintrc.

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Loader order incorrect (babel-loader runs after this loader on non-JS output).

fix

Ensure stylelint-custom-processor-loader is the last loader in the 'use' array (first executed).

Warnings

breaking Webpack 1 is not supported; only Webpack 2+ ↓

fix Upgrade to webpack >=2 or use stylelint-loader instead.

gotcha Loader order: must be the last loader in the 'use' array (executed first). Placing it before babel-loader causes syntax errors. ↓

fix Ensure stylelint-custom-processor-loader is the last entry in the 'use' array (after other loaders).

gotcha Without stylelint config file or processors, linting does nothing. ↓

fix Create a .stylelintrc file and specify processors (e.g., stylelint-processor-styled-components).

deprecated Loader is no longer actively maintained; author recommends postcss-loader for standard CSS. ↓

fix For non-custom-processor workflows, switch to postcss-loader with stylelint plugin.

breaking Requires Node >=6; incompatible with older Node versions. ↓

fix Upgrade Node to version >=6 or pin to an older version of the loader if needed.

Install

npm install stylelint-custom-processor-loader

yarn add stylelint-custom-processor-loader

pnpm add stylelint-custom-processor-loader

Imports

default
wrong
```
const loader = require('stylelint-custom-processor-loader')
```
correct
```
import stylelintCustomProcessorLoader from 'stylelint-custom-processor-loader'
```
Loader is typically used in webpack config as string 'stylelint-custom-processor-loader', not imported directly. Node require works for runtime use, but ESM import is preferred for consistency.

default (config use)

wrong

module.exports = { module: { rules: [ { test: /\.jsx?$/, use: 'stylelint-custom-processor-loader' } ] } }

correct

module.exports = { module: { rules: [ { test: /\.jsx?$/, loader: 'stylelint-custom-processor-loader', exclude: /node_modules/ } ] } }

Loader must come last (first executed) in the use array when combined with other loaders. Omitting 'exclude: /node_modules/' may cause errors. Common mistake: placing loader first in 'use' array.

options

wrong

require('stylelint-custom-processor-loader').default

correct

import stylelintCustomProcessorLoader from 'stylelint-custom-processor-loader';
// In webpack config:
{ loader: 'stylelint-custom-processor-loader', options: { configPath: './.my-stylelintrc' } }

Options are passed via webpack's 'options' object, not imported. The npm package exports a single function, but direct import for options is not needed.

Quickstart

Shows webpack config integrating babel-loader and stylelint-custom-processor-loader, plus minimal .stylelintrc for styled-components.

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: ['babel-loader', 'stylelint-custom-processor-loader'],
        exclude: /node_modules/,
      },
    ],
  },
};
// .stylelintrc (in project root)
{
  "processors": ["stylelint-processor-styled-components"],
  "rules": { "declaration-colon-space-after": "always" }
}