webpack-contrib / stylelint-webpack-plugin

A Stylelint plugin for webpack

stylelint-webpack-plugin

This version of stylelint-webpack-plugin only works with webpack 5. For the webpack 4, see the 2.x branch.

This plugin uses stylelint that helps you avoid errors and enforce conventions in your styles.

Getting Started

To begin, you'll need to install stylelint-webpack-plugin:

npm install stylelint-webpack-plugin --save-dev

or

yarn add -D stylelint-webpack-plugin

or

pnpm add -D stylelint-webpack-plugin

Note:

You also need to install stylelint >= 13 from npm, if you haven't already:

npm install stylelint --save-dev

or

yarn add -D stylelint

or

pnpm add -D stylelint

Note:

If you are using Stylelint 13 rather than 14+, you might also need to install @types/stylelint as a dev dependency if getting stylelint related type errors.

Then add the plugin to your webpack config. For example:

const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new StylelintPlugin(options)],
  // ...
};

Options

See stylelint's options for the complete list of options available. These options are passed through to the stylelint directly.

cache

• Type:

type cache = boolean;

• Default: true

The cache is enabled by default to decrease execution time.

cacheLocation

• Type:

type cacheLocation = string;

• Default: node_modules/.cache/stylelint-webpack-plugin/.stylelintcache

Specify the path to the cache location. Can be a file or a directory.

configFile

• Type:

type context = string;

• Default: undefined

Specify the config file location to be used by stylelint.

Note:

By default this is handled by stylelint.

context

• Type:

type context = string;

• Default: compiler.context

A string indicating the root of your files.

exclude

• Type:

type exclude = string | Array<string>;

• Default: ['node_modules', compiler.options.output.path]

Specify the files and/or directories to exclude. Must be relative to options.context.

extensions

• Type:

type extensions = string | Array<string>;

• Default: ['css', 'scss', 'sass']

Specify extensions that should be checked.

files

• Type:

type files = string | Array<string>;

• Default: null

Specify directories, files, or globs. Must be relative to options.context. Directories are traversed recursively looking for files matching options.extensions. File and glob patterns ignore options.extensions.

fix

• Type:

type fix = boolean;

• Default: false

If true, stylelint will fix as many errors as possible. The fixes are made to the actual source files. All unfixed errors will be reported. See Autofixing errors docs.

formatter

• Type:

type formatter = string | (
  results: Array<import('stylelint').LintResult>
) => string

• Default: 'string'

Specify the formatter that you would like to use to format your results. See formatter option.

lintDirtyModulesOnly

• Type:

type lintDirtyModulesOnly = boolean;

• Default: false

Lint only changed files, skip lint on start.

stylelintPath

• Type:

type stylelintPath = string;

• Default: stylelint

Path to stylelint instance that will be used for linting.

threads

• Type:

type threads = boolean | number;

• Default: false

Set to true for an auto-selected pool size based on number of cpus. Set to a number greater than 1 to set an explicit pool size. Set to false, 1, or less to disable and only run in main process.

Errors and Warning

By default the plugin will auto adjust error reporting depending on stylelint errors/warnings counts. You can still force this behavior by using emitError or emitWarning options:

emitError

• Type:

type emitError = boolean;

• Default: true

The errors found will always be emitted, to disable set to false.

emitWarning

• Type:

type emitWarning = boolean;

• Default: true

The warnings found will always be emitted, to disable set to false.

failOnError

• Type:

type failOnError = boolean;

• Default: true

Will cause the module build to fail if there are any errors, to disable set to false.

failOnWarning

• Type:

type failOnWarning = boolean;

• Default: false

Will cause the module build to fail if there are any warnings, if set to true.

quiet

• Type:

type quiet = boolean;

• Default: false

Will process and report errors only and ignore warnings, if set to true.

outputReport

• Type:

type outputReport =
  | boolean
  | {
      filePath?: string | undefined;
      formatter?:
        | (
            | string
            | ((results: Array<import('stylelint').LintResult>) => string)
          )
        | undefined;
    };

• Default: false

Write the output of the errors to a file, for example a json file for use for reporting. The filePath is relative to the webpack config: output.path. You can pass in a different formatter for the output file, if none is passed in the default/configured formatter will be used.

{
  filePath: 'path/to/file';
  formatter: 'json';
}

Changelog

Changelog

License

MIT

stylelint-webpack-plugin's Issues

Log to the browsers's console

Is there a way to log the errors and warnings to the browser's console in addition to terminal's?

Update to stylelint 6.x

Please update plugin to stylelint 6.x version

Can't get the plugin to work with SCSS / stylelint scss plugin

At the moment I have a webpack-setup with a combination of postcss and sass:

const StylelintPlugin = require('stylelint-webpack-plugin');
...
                // CSS/SCSS
                {
                    test: /\.s?css$/,
                    use: ExtractTextPlugin.extract({
                        use: [
                            { loader: 'css-loader', options: { importLoaders: 1, import: false, minimize: (env === 'production'), sourceMap: (env === 'production')  } },
                            'resolve-url-loader',
                            'sass-loader?sourceMap',
                            {
                                loader: 'postcss-loader',
                                options: {
                                    config: {
                                        ctx: {
                                            cssnext: {
                                                warnForDuplicates: false,
                                                features: {
                                                    autoprefixer: false
                                                }
                                            },
                                            autoprefixer: {},
                                            lost: {}
                                        }
                                    }
                                }
                            }
                        ]
                    })
                }
...
            // CSS linting
            new StylelintPlugin({
                syntax: 'scss'
            })

Then .stylelintrc looks like this:

{
    "defaultSeverity": "warning",
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-lost"
    ],
    "plugins": [
        "stylelint-scss"
    ],
    "rules": {
        "scss/at-extend-no-missing-placeholder": true,
        "scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
        "scss/at-import-no-partial-leading-underscore": true,
        "scss/at-import-partial-extension-blacklist": ["scss"],
        "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
        "scss/dollar-variable-colon-space-after": "always",
        "scss/dollar-variable-colon-space-before": "never",
        "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
        "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
        "scss/selector-no-redundant-nesting-selector": true
    },
    "ignoreFiles": './craft/**/*'
}

Unfortunately I can't get the plugin setup with the stylelint scss plugin. Now I get 100+ warnings like "Unexpected unknown at-rule "@mixin"".

Is this an error or am I doing something wrong?

Lint dirty files only

When trying to introduce stylelint to an existing codebase, it can be very hard if the webpack console blows up with errors from across the codebase.

It would be great to have an option lintDirtyModulesOnly: true, that would:

• Skip linting files the first time it encounters them (to avoid linting during Webpack's first run)
• Only lint edited files during incremental builds

At a high level, this could be achieved if the plugin stores a stateful map between module names and the number of times it has processed them. If the number of times is greater than 1, and Webpack has processed the file (i.e. it has changed), then we can lint it.

Support for Webpack 3

Updated to Webpack 3 and got this:

warning "[email protected]" has incorrect peer dependency "webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta.0 || ^1.13.2".

An in-range update of conventional-github-releaser is breaking the build 🚨

Version 1.1.8 of conventional-github-releaser just got published.

Branch	Build failing 🚨
Dependency	conventional-github-releaser
Current Version	1.1.7
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As conventional-github-releaser is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ coverage/coveralls Coverage pending from Coveralls.io Details
• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

---

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

options: "files" throwing errors when passed basic string input, unable to find app root directory

Hi there,

1. Running stylelint '**/*.css' in CLI works as expected.
2. Configuring it through this package does not seem to get any matches. For all of the commented-out patterns I've tried (see the gist), I get:
   Error: Files glob patterns specified did not match any files
3. The only exception to point 2 is '../../*/.css'; this path begins to lint css in the node_modules folder.
   If I try to go one level up, I get:
   a EISDIR: illegal operation on a directory, read.
4. I get the same effect for all cases if I remove the configBaseddir, and configFile configuration properties.

This might be multiple separate errors. It looks like something is wrong with the way files is sending the glob pattern, and we're stuck searching for matches over contents of the stylelint folder, instead of the directory we want. In addition, when we go up enough levels, the plugin seems to be trying to access directories as files (point 4).

What do you think?
webpack.config.js below:
https://gist.github.com/sdtsui/feb5f1de7c7c53e6e42180f201d890cd

Thanks!

p.s. for completeness, here is my package.json, with the lint-css script that works.
https://gist.github.com/sdtsui/a16a054228999f9150bb0fadc6f6d647
I'm on Node v5.5.0.

which style does this plugin lint ?

consider I got sass-loader, css-loader, style-loader .

does this plugin lint the processed code - css or the source code - sass ?

undefined rules

I'm having trouble using the sass lint rules in .stylelintrc Can you provide some docs on the rules and any additional dependencies?

I have everything configured as your instructions indicate.

package.json includes: "stylelint-webpack-plugin": "^0.4.0",

webpack.config includes:

const StyleLintPlugin = require('stylelint-webpack-plugin');

new StyleLintPlugin({
syntax: 'scss',
configFile: '.stylelintrc',
files: ['*/.s?(a|c)ss'],
failOnError: false,
})

Am I missing a dependency?? When I run the linters I get
Error: Undefined rule nesting-depth

or

Error: Undefined rule NestingDepth

Which is a valid rule, but what version of sass is being used?
https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#bangformat
https://github.com/sasstools/sass-lint/blob/master/docs/rules/nesting-depth.md

An in-range update of stylelint is breaking the build 🚨

Version 7.11.0 of stylelint just got published.

Branch	Build failing 🚨
Dependency	stylelint
Current Version	7.10.1
Type	peerDependency

This version is covered by your current version range and after updating it in your project the build failed.

As stylelint is “only” a peerDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Release Notes

7.11.0

• Added: experimental autofixing (#2467, #2500, #2529 and #2577). Use --fix CLI parameter or fix: true Node API options property. Supported rules:
  • at-rule-empty-line-before
  • at-rule-name-case
  • color-hex-case
  • comment-empty-line-before
  • custom-property-empty-line-before
  • declaration-empty-line-before
  • indentation
  • rule-empty-line-before
• Added: selector-max-class rule.
• Added: ignore: ["custom-elements"] option to selector-type-no-unknown (#2366).
• Fixed: "Cannot find module 'pify'" regression in node@4 with npm@2 (#2614).
• Fixed: no error is thrown when linting a string with cache enabled (#2494).
• Fixed: Less :extend is now ignored (#2571).
• Fixed: function-parentheses-space-inside now ignores functions without parameters (#2587).
• Fixed: length-zero-no-unit now correctly handles newlines and no spaces after colon (#2477).
• Fixed: selector-descendant-combinator-no-non-space and selector-combinator-space-before/after now understand and check >>> shadow-piercing combinator (#2509).
• Fixed: selector-descendant-combinator-no-non-space now ignores Less guards (#2557).
• Fixed: selector-pseudo-class-no-unknown now checks @page at-rules and supports @page pseudo-classes (#2445).
• Fixed: selector-pseudo-class-no-unknown now considers focus-ring, playing and paused to be known (#2507).
• Fixed: selector-type-no-unknown now ignores MathML tags (#2478).
• Fixed: selector-type-no-unknown now ignores the /deep/ shadow-piercing combinator (#2508).
• Fixed: value-keyword-case now ignores variables with signs (#2558).

Commits

The new version differs by 83 commits.

• 8466d17 Prepare 7.11.0
• 9cd35c0 Prepare changelog
• 534c29d Update CHANGELOG.md
• aee270e Move pify from devDependencies to dependencies
• e1700b4 fix(package): update known-css-properties to version 0.2.0
• 7f48674 Update CHANGELOG.md
• d1c1b13 Add autofixing for color-hex-case (#2577)
• f0e0780 Create CHANGELOG.md
• de74769 Add indentation autofixing for selectors, at-rules params, and declarations
• 79a1ff4 Add docs
• d09da33 Add indentation autofixing for most usecases
• 074d9f8 Refactor old code
• 67b8f50 Update CHANGELOG.md
• 5796ac4 Fixed: ignore less guards in selector-descendant-combinator-no-non-space. (#2557)
• b86fc18 Stylelint pre-commit plugin (#2591)

There are 83 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

emitError: false emits empty warning

Using latest code, if I set the config emitErrors: false then I see the webpack build passes but with a warning. This appears to be due to line 22 of run-compilation.js where the result from the ternary should be [] rather than results

Stylus support

I was wondering if this also includes stylus support because I see that you mention sass/scss/css around your readme but not stylus :(

failOnBuild: false breaks the build process when NoErrorsPlugin is enabled

I'm having a problem with this plugin breaking our build process when failOnBuild is set to false and the webpack.NoErrorsPlugin() is enabled.

It looks like the problem is with pushing errors into compilation.errors despite failOnBuild being false.

The expected behavior of webpack.NoErrorsPlugin() is to stop the emitting of any assets that are marked as having an error and is doing its job correctly because this plugin is marking files as having errors. In the case of this plugin a stylelint error doesn't necessarily mean the file has a build breaking error but probably needs to be formatted correctly.

I would expect that if failOnBuild is set to false then webpack should continue even if there are errors are found.

Here's my webpack plugins config config

    plugins: PROD ? [
        // This has beneficial effect on the react lib size for deploy
        new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}}),

        // for prod we also de-dupe, obfuscate and minimize
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compress: {
                warnings: false
            }
        }),

        //  run-time environment for our application
        envPlugin
    ] :  [
        new styleLintPlugin({
            configFile: '.stylelintrc',
            files: 'client-react/src/**/*.scss',
            failOnError: false,
            syntax: 'scss'
        }),
        // When there are compilation errors, this plugin skips the emitting (and recording) phase.
        // This means there are no assets emitted that include errors.
        new webpack.NoErrorsPlugin(),
        //  run-time environment for our application
        envPlugin,

        new MyNotifyPlugin()
    ]
};

And webpack output

Hash: 7aa345397dcb3509c821
Version: webpack 1.13.1
Time: 16125ms
   [0] multi bundle 40 bytes {0} [built]
   [0] multi componentLibrary 40 bytes {1} [built]
 [898] ./common/src/simpleStringify.js 889 bytes {0} {1} [built]
 [916] ./common/src/limitConstants.js 359 bytes {0} {1} [built]
[1169] ./common/src/formatter/dateTimeFormatter.js 4.78 kB {0} {1} [built]
[1173] ./common/src/constants.js 2.35 kB {0} {1} [built]
[1174] ./common/src/formatter/timeOfDayFormatter.js 3.17 kB {0} {1} [built]
[1175] ./common/src/formatter/numericFormatter.js 12 kB {0} {1} [built]
    + 1240 hidden modules

ERROR in /Users/msaforrian/src/qbui/ui/client-react/src/components/apps/apps.scss

ERROR in /Users/msaforrian/src/qbui/ui/client-react/src/components/QBForm/tabs.scss

ERROR in /Users/msaforrian/src/qbui/ui/client-react/src/components/qbIcon/style.scss

ERROR in /Users/msaforrian/src/qbui/ui/client-react/src/components/qbTableIcon/style.scss
~/src/qbui/ui @ (msaforrian) => echo $?
0

Receiving error in files option

I have tried several combinations:

files: '/**/*.css',

or

files: './src/**/*.less',

Previously fixed errors break watcher build

I am experiencing an issue where I'm running a webpack watch, a stylelint error is reporting, I fix the error, then the webpack watcher is continually reporting errors. It seems like it's continuously stuck in error mode. My CSS config looks something like this. Any ideas?

  name: 'css',
  context: paths.css.entry,
  entry: cssFiles,
  output: {
    path: paths.css.output,
    filename: 'xxx/assets/css/[name].min.css'
  },
  module: {
    loaders: [
      { test: /\.scss/, loader: ExtractTextPlugin.extract('style', 'css!postcss!sass') },
      { test: /\.(woff2?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=/xxx/assets/fonts/[hash].[ext]' },
      { test: /\.(jpg|jpeg|gif|png|tiff)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=/xxx/assets/images/[hash].[ext]' }
    ]
  },
  sassLoader: {
    // Set outputStyle: 'expanded' as the default (nested) has wrapping and spacing issues
    // that cause linting errors
    outputStyle: 'expanded'
  },
  plugins: [
    new styleLintPlugin({
      syntax: 'scss',
      failOnError: false,
    }),
    new ExtractTextPlugin('creditcards/assets/css/[name].min.css')
  ],
  postcss: [
    autoprefixer({ browsers: ['> 5% in US', 'last 2 versions', 'IE 9'] }),
    reporter({ clearMessages: true, throwError: true })
  ]

Endless build loop with `fix` option

Hey,
when using stylelint fix option it creates an endless build loop if errors are present.

Stylelint tries to fix errors, but there are errors it can't fix and it writes the same contents of the file back, which retriggers a new build. I'm starting to think maybe I should submit this to stylelint instead of this repo.

plugins [
  new StyleLintPlugin({
    fix: false
  }),
  ...
]

Lint undefined functions?

Hello!

I just started using stylelint so I probably haven't looked at all the docs. However, I was hoping it could lint my most common problem: lint undefined functions (due to missing @imported file)

Does anyone mind pointing me in the right direction? I've gotten the impression it might have to do with some post-CSS shenanigans but I'm not sure where to start :(

No errors or warnings displayed in console

Hello,
first of all, thanks for your great work with this plugin.

Lately I am encountering exact the same issue like mentioned in #50 (fixed in #51 with version ^0.5) but with version ^0.7 (latest) of the plugin.

There are no errors or warnings displayed in the console. Downgrading to ^0.5 fixed the issue. I am using laravel-mix and the config for the plugin looks like this:

new StyleLintPlugin({
    failOnError: false,
    configFile: '.stylelintrc',
    context: 'resources/assets/sass/',
    files: '**/*.scss',
    syntax: 'scss'
}

Someone a clue, what the issue could be?

Thanks

EDIT:

After further investigation and rolling versions between 0.5 and 0.7. Finally, I read the changelog of the releases. Playing around with emitErrors and the quiet config options.

EDIT2: I had to set quiet: false explicitly, though the docs mention that it is the default value. So the lint results are printed at the "start" of the webpack build.

But still, no errors are emitted after the build process finished. If I switch emitErrors: false then all errors are suddenly shown, but just as warnings.

Maybe someone could have a look into this?

The line number of the .vue file error message is incorrect

version

0.6.0

webpack config

plugins: [
  ...
  new StyleLintPlugin({
      context: dirs.dev, // src
      syntax: 'scss',
      files: ['**/*.css', '**/*.scss', '**/*.vue']
  })
]

what's error

the line number of the .vue file error message is incorrect !

Update stylelint dependency

Current stylelint dependency is at ^6.0.1, the latest stylelint version is 7.0.1.

duplicate keys in 'rules' object surfaces confusing error

I had 'block-no-empty' declared twice in my JSON .stylelintrc.json

The error I received is

Error: Failed to parse "/Users/o2dazone/dev/app/.stylelintrc.json" as JSON, JS, or YAML.       

Running it through a validator made me realize I had duplicate keys. It's an easy fix on my side, and the error the plugin surfaced was kinda right, but it didn't really point me in the right direction on how to fix it, as my initial assumption had been a misconfiguration in the plugin config. This seemed to only effect the webpack plugin, as stylelint directly from the command line did not surface an error.

Feel free to close or set low priority 👍

Weird error "missed semicolon" with .sass syntax

Hi everyone,

I just started a new project using this linter, and I'm having a weird issue for which I can't find any solution or explanation... 😢
So I am using Sass syntax (based on indentation), and for an unknown reason the lint give me a few errors saying "Missed semicolon - CssSyntaxError". I can't understand this as with Sass there is NO semicolon... Maybe something wrong with configuration ?
Thx in advance for your help!

webpack.congif.js

const path = require('path')
const webpack = require('webpack')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')

module.exports = {
  entry: ['./src/index.js', './src/styles/index.sass'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            { loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')()
                ]
              }
            },
            'sass-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new ExtractTextPlugin({
      filename: 'styles.css',
      disable: false,
      allChunks: true
    }),
    new StyleLintPlugin({
      syntax: 'scss',
      failOnError: true,
      quiet: false
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, '/')
  }
}

.stylelintrc

{
  "rules": {
    "indentation": 2
  }
}

Webpack 2 support coming soon?

At least for some beta channel maybe?

No stylelintrc file error when using the package file stylelint property

I'm getting this error

Error: ENOENT: no such file or directory, open '/Users/nelsyeung/Sites/es6-web-template/.stylelintrc'

even though I have the following in my package.json

"stylelint": {
  "extends": "stylelint-config-standard"
},

Replication details:

git clone https://github.com/nelsyeung/es6-web-template.git
cd es6-web-template
git checkout dev
npm i
npm start

Notes
OS: macOS Sierra
Webpack: 2.2.1
stylelint-webpack-plugin: 0.5.1

Stylelint (the cli tool) runs fine with settings inside package.json, which you can also play around with inside my repository above.

Undefined rule rule-empty-line-before

Hey,

I'm currently facing this Error in my webpack build:

Error: Undefined rule rule-empty-line-before
    at module.exports (node_modules/stylelint-webpack-plugin/node_modules/stylelint/lib/utils/configurationError.js:8:27)
    at Object.keys.forEach.ruleName (node_modules/stylelint-webpack-plugin/node_modules/stylelint/lib/augmentConfig.js:276:13)
    at Array.forEach (native)
    at normalizeAllRuleSettings (node_modules/stylelint-webpack-plugin/node_modules/stylelint/lib/augmentConfig.js:272:29)
    at augmentConfigBasic.then.then.then.then.augmentedConfig (node_modules/stylelint-webpack-plugin/node_modules/stylelint/lib/augmentConfig.js:81:12)

In my package.json I've defined those related packages:

{
  ...
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel": "^6.23.0",
    "babel-cli": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.4.0",
    "babel-plugin-istanbul": "^4.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-runtime": "^6.23.0",
    "babel-template": "^6.23.0",
    "babel-types": "^6.23.0",
    "chai": "^3.5.0",
    "chai-as-promised": "^6.0.0",
    "chai-spies": "^0.7.1",
    "change-case": "^3.0.1",
    "clean-webpack-plugin": "^0.1.15",
    "css-loader": "~0.27.1",
    "ejs": "^2.5.6",
    "ejs-loader": "^0.3.0",
    "enzyme": "^2.7.1",
    "esdoc": "^0.5.2",
    "esdoc-es7-plugin": "0.0.3",
    "eslint": "^3.17.1",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-mocha": "^4.8.0",
    "eslint-plugin-react": "^6.10.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "git-hooks": "^1.1.8",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "jsdom": "^9.11.0",
    "json-loader": "^0.5.4",
    "karma": "^1.5.0",
    "karma-bamboo-reporter": "^0.1.2",
    "karma-chai": "^0.1.0",
    "karma-chai-as-promised": "^0.1.2",
    "karma-chai-spies": "^0.1.4",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.2",
    "karma-phantomjs-launcher": "^1.0.3",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.2",
    "less": "^2.7.2",
    "less-loader": "^3.0.0",
    "markdown-loader": "^2.0.0",
    "mocha": "^3.2.0",
    "mocha-jsdom": "^1.1.0",
    "mockery": "^2.0.0",
    "nock": "^9.0.9",
    "node-libs-browser": "^2.0.0",
    "node-sass": "^4.5.0",
    "npm-check-updates": "^2.10.3",
    "npm-run-all": "^4.0.2",
    "null-loader": "^0.1.1",
    "phantomjs-polyfill": "0.0.2",
    "postcss-loader": "^1.3.3",
    "postcss-url": "^5.1.2",
    "promise-loader": "^1.0.0",
    "prompt": "^1.0.0",
    "raw-loader": "^0.5.1",
    "react-addons-test-utils": "^15.4.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "report-viewer": "^0.3.3",
    "requirejs": "^2.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.2",
    "stylelint": "^7.9.0",
    "stylelint-config-standard": "^16.0.0",
    "stylelint-order": "^0.3.0",
    "stylelint-selector-bem-pattern": "^1.0.0",
    "stylelint-webpack-plugin": "^0.7.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  ...
}

This issue somehow occured, when I updated my packages.
I know, that stylelint introduced rule-empty-line-before in version 7.9.0.
stylelint-webpack-plugin references to ^7.7.0 in its package.json.

Any hints on this?

Performance issues when have multiple entries

Currently I have a project with about 15 webpack entries. Each entry have own stylesheet file. And here is webpack build time:

• With stylelint-webpack-plugin:

webpack building...
webpack built 832650538a0ff1527328 in 21824ms

webpack building...
webpack built 832650538a0ff1527328 in 13755ms

• Without stylelint-webpack-plugin

webpack built 832650538a0ff1527328 in 8009ms
webpack building...
webpack built 832650538a0ff1527328 in 194ms
webpack building...
webpack built 832650538a0ff1527328 in 204ms

UnhandledPromiseRejectionWarning, when no files match /**/*.s?(c|a)ss

The plugin fail when not found stylesheets for lint and break webpack build, this is a problem in some cases when you're starting a project without styles or embed styles in HTML

Error: /home/leosuncin/Workspaces/github/writtr-frontend/**/*.s?(c|a)ss does not match any files
(node:24485) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'emit' of undefined
(node:24485) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
The following tasks did not complete: serve, webpack:watch
Did you forget to signal async completion?

stylelint-webpack-plugin v0.7.0
webpack v2.5.1
gulp v3.9.1
node v7.7.3
npm v4.5.0
Manjaro GNU/Linux 17.0.1

You can clone my repository and view the error

Feature request: warnings rather than errors

Currently, when using Webpack Dev Server with hot reloading, not adhering to my stylelist rules results in an error. The dev server then thinks compilation has failed and will not serve the updated styles.

I want to adhere to my linting rules, but perhaps not as strictly when I'm just messing about locally :) Thus, an option like ts-loader's emitErrors would be nice, that can set stylelint errors to be emitted as warnings.

How to config the module by stylelint-webpack-plugin?

Hi, I saw the config of stylelint can write with a module name in node_modules:

--config

      Path to a specific configuration file (JSON, YAML, or CommonJS), ** or the
      name of a module in node_modules that points to one **. If no --config
      argument is provided, stylelint will search for configuration files in
      the following places, in this order:
        - a stylelint property in package.json
        - a .stylelintrc file (with or without filename extension:
          .json, .yaml, .yml, and .js are available)
        - a stylelint.config.js file exporting a JS object
      The search will begin in the working directory and move up the directory
      tree until a configuration file is found.

So I can do something like this in package.json:

"scripts": {
  "lint": "stylelint src/**/*.css --config stylelint-config-standard"
}

stylelint-config-standard is a stylelint rules package and I use npm install to install to my node_modules folder.

I use configFile of stylelint-webpack-plugin to config the module, but it seems not work.

    new StyleLintPlugin({
      configFile: 'stylelint-config-standard',
      context: 'src',
      files: ['**/*.css'],
    }),

My question is: How to config the module by stylelint-webpack-plugin?
Thanks.

Unclosed quote error

I'm having this error. My main.pcss file is importing base.pcss file with only one css rule so it can't be on line 76

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylelint/dist!./src/assets/style/main.pcss
C:\forWeb\Workflow\FrontendBoilerplate\src\assets\style\main.pcss:76:24: Unclosed quote

        // Log the rule's severity in the PostCSS result
                       ^
        result.stylelint.ruleSeverities[ruleName] = _lodash2.default.get(secondaryOptions, "severity", "error");

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylelint/dist!./src/assets/style/main.pcss
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (C:\forWeb\Workflow\FrontendBoilerplate\node_modules\postcss\lib\input.js:31:23)
    at parse (C:\forWeb\Workflow\FrontendBoilerplate\node_modules\postcss\lib\parse.js:22:17)
    at new LazyResult (C:\forWeb\Workflow\FrontendBoilerplate\node_modules\postcss\lib\lazy-result.js:61:24)
    at Processor.process (C:\forWeb\Workflow\FrontendBoilerplate\node_modules\postcss\lib\processor.js:34:16)
    at processCss (C:\forWeb\Workflow\FrontendBoilerplate\node_modules\css-loader\lib\processCss.js:188:11)
    at Object.module.exports (C:\forWeb\Workflow\FrontendBoilerplate\node_modules\css-loader\lib\loader.js:24:2)
 @ ./src/assets/style/main.pcss 4:14-178

A way to lint a package in node_modules?

Hi,

I have a local node package in my dependencies, and would expect stylelnt-webpack-plugin to lint those files as they are directly imported by my JS files.

Is there a way to do so?

Thanks in advance,

Lint on save

I have the following folder structure

...
src/
  assets/
    css/
      ...
      components/
        test.css
      ...
      main.css
  ...
...

The main.css file imports the test.css file ("postcss-import"). My webpack config looks like this:

module.export: {
  plugins: [
    new stylelintPlugin({
      context: 'src/assets/css',
      files: ['**/*.css']
    })
  ],
}

With this config, however, Stylelint will only lint my CSS files if I change the main.css file. If I change the test.css file (subdirectory), nothing happens. Is this how it's supposed to work or is there any config that I missed?

Plugin is not working with Webpack 1.12.14

Hello,

This plugin seems not to be working. It's showing me something like following, when I console.log this:

code:

const StyleLintPlugin = require('stylelint-webpack-plugin');

plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new StyleLintPlugin({configFile: '.stylelintrc', context: 'app/styles/', files: '**/*.scss', failOnError: true }),
        new webpack.DefinePlugin({
          __DEVCLIENT__: true,
          __DEVSERVER__: false
        })
    ]

result:

plugins:
   [ 
       HotModuleReplacementPlugin {},
       NoErrorsPlugin {},
       { apply: [Function: bound apply] },
       DefinePlugin { definitions: [Object] },
   ]

Even if I console.log only this plugin then it's again showing me the same result:
code: console.log(new StyleLintPlugin({configFile: '.stylelintrc', context: 'app/styles/', files: '**/*.scss', failOnError: true }));

result: { apply: [Function: bound apply] }

I also looked into the implementation and found it's as per what Webpack plugin doc explains, at https://webpack.github.io/docs/plugins.html. Could you please let me know what is the fix for this?

Displaying errors

Hey, i am having a problem displaying the Stylelint errors, i am not sure if its setup issue i created.
If i use the friendly-errors-webpack-plugin enabled it wont show the stylelint errors, only the native ones :

if i disable the plugin it will display both:

how do i disable the other reporter or give stylelint the priority ? i know it might be not the right place to ask but i figured some of u might have run into the same issue.

thats my webpack.config.js:

module.exports = {
.
.
.
  module: {
    rules: removeEmpty([
      {
        test: /\.js$/,
        use: 'eslint-loader',
        enforce: 'pre', // avoid linting before babel transpile
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              minimize: false,
              autoprefixer: false,
              sourceMap: true,
              importLoaders: 1,
              url: false,
            },
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          plugins: ['syntax-dynamic-import'],
        },
      },
  plugins: {
   new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['You application is running here http://hajok.dev'],
      },
      clearConsole: true,
    }),
    new StyleLintPlugin({
      context: path.resolve(__dirname, 'src/scss'),
      syntax: 'scss',
    }),
 .
.
.

thats my postcss.config.js:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-flexbugs-fixes': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions', '> 5%'],
    },
  },
};

Add support for CSS and LESS files by default

Current default regexp match SCSS and SASS files only

Version upgrade from 0.3.1 to 0.5.1 broke other the functionality of react-select2-wrapper

As soon as I upgraded the version of stylelint-webpack-plugin from 0.3.1 to 0.5.1 the react-select2-wrapper stopped working. Anyone else facing similar issue ? Please help

No correct error message in console

Hello,

In version 0.7.0 I have such error message in console:
Error: Failed because of a stylelint error.
at linterSuccess (.../node_modules/stylelint-webpack-plugin/lib/run-compilation.js:35:14)

but in version 0.5.0 were clear error messages:
13:7 ✖ Expected indentation of 8 spaces indentation

Could you please take a look on it?

No warning and error messages

Hello!

There are no informative messages in console about error.
For now I can see just
Error: Failed because of a stylelint error. at linterSuccess (...somePath/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:28:14)
But in version 0.4.0 were detailed error messages
13:12 ✖ Unexpected whitespace before ";" declaration-block-semicolon-space-before
I think problem is in run-compilation.js:
In version 0.4.0:
if (!options.quiet) { console.log(chalk.yellow(options.formatter(lint.results))); }
But now this code is removed.

Blank/empty errors on webpack build report

Hi all!

I just started using this linter in a project, and I'm having a weird issue with the error reporting:

I have the quiet option set to false in the config, that's why you see the lint errors at the top, but where I should see the webpack errors I just see "error"

After playing a bit the the source, I found that changing the following line "fixes" the problem:

    if (errors.length) {
-      compilation.errors.push(chalk.red(options.formatter(errors)));
+      compilation.errors.push(new Error(chalk.red(options.formatter(errors))));
      errors = [];
    }

Line: https://github.com/JaKXz/stylelint-webpack-plugin/blob/master/lib/run-compilation.js#L49
Same for line: https://github.com/JaKXz/stylelint-webpack-plugin/blob/master/lib/run-compilation.js#L44

And based on line https://github.com/JaKXz/stylelint-webpack-plugin/blob/master/lib/run-compilation.js#L31, we can remove chalk directly.

Result:

But I only took a quick look of the code, therefore I'm not really sure that's the right solution but maybe someone more familiar with the plugin (and webpack plugin development) can use this as a starting point.

Almost forgot, I'm on webpack 2.2.1, but also tested with 2.3.2 and 3.0.0 and got the same results.

Let me know if I can provide more information.

Can you ignore files with this plugin?

__

Performance optimization suggestion, lint only failed files + changed files

On my current project introducing stylelint raised watch build time from ~3s to ~25s. I guess, it happened because of big amount of files and amount of rules.

So, maybe we could cache files that failed to lint on initial run and then include them + files that changed for linting. That should decrease overhead from linting all the files that passed initially and hasn't been changed.

It seems this will require slight update how to deal with stylelint formatter, because in order to get failed files it would require both JSON and string output.

If this suggestion sounds good, I'd be happy to poke around and apply the optimization.

Can't hide warnings

I'm trying to hide the console warnings when in production:

    new StyleLintPlugin({
        files: 'craft/templates/**/*.?(s)?(a|c)ss',
        emitErrors: false,
        quiet: true
    })

All other options do work, but can't set quiet to 'true'. Any ideas or tips?

Change failOnError parameter to play nice with webpack/webpack-dev-server

Hi,

I'm currently utilizing webpack-dev-server & webpack-hot-middleware to marry with my own assets/express server/build processes/etc. I recently decided to add your plugin to my build process and one of the keys I noticed right away was "failOnError". I took a look through your source and noticed that when this parameter is present, you are piping an Error() object to webpack (https://github.com/JaKXz/stylelint-webpack-plugin/blob/master/lib/run-compilation.js#L35). This seems to work nicely for running webpack in a single build on its own (as failing the webpack build outright isn't an issue), but when we want webpack to pause building (but still listen for file changes and rebuild, which is a feature of webpack-dev-server), this failOnError key will actually stop webpack entirely (e.g. the build will no longer listen to file changes/attempt to rebuild/etc and we then have to restart the entire webpack bundling process/etc).

I found this behavior strange, because I use eslint-loader and it's failOnError key doesn't throw an error necessarily; it gracefully halts the webpack build process and still allows webpack to listen for file changes/etc and rebuild accordingly. I believe the reason is due to how eslint-loader pipes its response back to webpack. In particular, it looks like rather than throwing an error, it gets the current webpack instance and utilizes the emitError function under webpack (https://github.com/MoOx/eslint-loader/blob/master/index.js#L105).

I'd be curious to hear your thoughts and if I'm following this correctly.

I would be happy to put a pull request in as well to implement the error handling similar to how eslint-loader does it.

Thanks!

Warnings not being logged to console

Rules with a severity of "warning" are not logged to the console unless a linting error has also occurred.

If there are only warnings in your styles then no output is logged to the console at all.

Throws error with [email protected]

After updating stylelint to v7.7.0 I see this error:

In this version stylelint has exposed its formatters through documented API (see https://github.com/stylelint/stylelint/pull/2190/files). Do you think this could be the issue?

Please respect cosmiconfig

According to the document, stylelint reads configuration object in this order:

• a stylelint property in package.json
• a .stylelintrc file
• a stylelint.config.js file exporting a JS object

And the .stylelintrc file can be with or without an extension.

Please remove configFile option in order to let cosmiconfig handle it.

An in-range update of mocha is breaking the build 🚨

Version 3.4.0 of mocha just got published.

Branch	Build failing 🚨
Dependency	mocha
Current Version	3.3.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As mocha is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Release Notes

v3.4.0

Mocha is now moving to a quicker release schedule: when non-breaking changes are merged, a release should happen that week.

This week's highlights:

• allowUncaught added to commandline as --allow-uncaught (and bugfixed)
• warning-related Node flags

🎉 Enhancements

• #2793, #2697: add --allowUncaught to Node.js (@lrowe)
• #2733: Add --no-warnings and --trace-warnings flags (@sonicdoe)

🐛 Fixes

• #2793, #2697: fix broken allowUncaught (@lrowe)

🔩 Other

• #2778: Add license report and scan status (@xizhao)
• #2794: no special case for macOS running Karma locally (@boneskull)
• #2795: reverts use of semistandard directly ([#2648]) (@boneskull)

Commits

The new version differs by 9 commits0.

• 7554b31 Add Changelog for v3.4.0
• 9f7f7ed Add --trace-warnings flag
• 92561c8 Add --no-warnings flag
• ceee976 lint test/integration/fixtures/simple-reporter.js
• dcfc094 Revert "use semistandard directly"
• 93392dd no special case for macOS running Karma locally
• 4d1d91d --allow-uncaught cli option
• fb1e083 fix allowUncaught in browser
• 4ed3fc5 Add license report and scan status

false

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Can we use lintDirtyModulesOnly, but still lint on start?

Thank you so much for this useful plugin.

Is there any way I can get the plugin to lint on start, then lint only the dirty modules on save?

Here is my current config:

config.plugins.unshift(
    new styleLintPlugin({
      configFile: '.stylelintrc',
      files: './packages/**/*.s?(a|c)ss',
      formatter: require('stylelint').formatters.verbose,
      lintDirtyModulesOnly: true,
      quiet: true,
      syntax: 'scss'
    })
  );

Thanks again!

Support postcss-report

I'd like to use https://github.com/postcss/postcss-reporter with this plugin, is there a way already?

Duplicated warnings in console when quiet flag is set to false

I noticed that warrnings are duplicated when quiet flag is set to false - http://take.ms/GQb4g.
I think, this line is the reason