1.0.2 need to save SASS file two times in order to get rid of errors

[weilinzung]

• Operating System: macOS Mojave 10.14.5
• Node Version: v11.13.0
• NPM Version: 6.10.0
• webpack Version: 4.41.2
• stylelint-webpack-plugin Version: 1.0.2

Expected Behavior

I am using webpack-dev-serve, new webpack.NoEmitOnErrorsPlugin() & sass-loader with this plugin, onv0.10.5 everything works fine.
I just save one time of the file after I fix the SASS that errors would be gone.

Actual Behavior

When I update to v1.0.2, every time when an SCSS file has errors, I have to save the file 2 times in order to make the error go away. Basically, the error logs are duplicated for the first time and the second time.

first time log from -> sass-loder

SassError: Invalid CSS after "}": expected 1 selector or at-rule, was "html"
        on line 4 of src/_scss/_general.scss

second time log from -> stylelint-webpack-plugin

src/_scss/_general.scss
 7:3  ✖  Unknown word   CssSyntaxError

Code

Here is my setup:

    new StyleLintPlugin({
      failOnError: false,
      emitErrors: true,
      configFile: `stylelintrc.js`,
      syntax: 'scss',
      files: '*.s?(a|c)ss'
    }),

How Do We Reproduce?

Run stylelint-webpack-plugin using webpack-dev-server in watch mode.

Question, what changes on failOnError & emitErrors from the last two releases?

Thank you!

[weilinzung]

Update: once I remove new webpack.NoEmitOnErrorsPlugin() with the v1.0.2 would be ok, but I think I need the new webpack.NoEmitOnErrorsPlugin().

[weilinzung]

Test again when I change back this line back to the old version that would work: v1.0.0...master#diff-195523ef24b1bd918b6f5644d00b5b55L24

From
compiler.hooks.afterEmit.tapAsync(
"Called after finishing and sealing the compilation."
to
compiler.hooks.afterCompile.tapAsync(
"Called after emitting assets to output directory."

I think should be the first one because during local development, I don't think there is any CSS file that would be in the output folder.

[ricardogobbosouza]

@weilinzung could provide a repository for reproduction?

[weilinzung]

@ricardogobbosouza sorry, it is an internal project that I don't have it in the public. For now, I just use the old version. Just wondering why to change the hooks to afterCompile.

[ricardogobbosouza]

@weilinzung I understand, if you can provide a demo repository with this error, I appreciate.
afterCompile caused problems with the option lintDirtyModulesOnly, I'm analyzing this change

[weilinzung]

@ricardogobbosouza I will try to create a demo, but I need a bit of time. thank you for looking into it.

[weilinzung]

@ricardogobbosouza Sorry for the delay, seems you fix this. When would this release?

[ricardogobbosouza]

@weilinzung I will release soon

[ricardogobbosouza]

@weilinzung released v1.0.4

[weilinzung]

@ricardogobbosouza amazing! I would test now!

[weilinzung]

@ricardogobbosouza I think this issue comes back again with v1.1.2.
Something happens on these changes: 17f7421

Not sure what actually changes from 1.0.4 to 1.1.2, afterEmit seems not working as expected anymore. However, once I change the afterEmit to afterCompile that would work again.

      **compiler.hooks.afterCompile.tapAsync(**
        'StylelintWebpackPlugin',
        (compilation, next) => {
          if (warnings.length) {
            compilation.warnings.push(StylelintError.format(options, warnings));
            warnings = [];
          }

[ricardogobbosouza]

Hi @weilinzung
The hook correct is afterEmit and not afterCompile

[weilinzung]

@ricardogobbosouza I still not have it, but here is my setup.

I try something else by removing the new webpack.NoEmitOnErrorsPlugin(), then would work again with the latest 1.1.2. I also have sass-loader that would report syntax errors.

    new StylelintPlugin({
      failOnError: false,
      emitErrors: true,
      configFile: `stylelintrc.js`,
      syntax: 'scss',
      files: './src/**/*.s?(a|c)ss'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()

[ricardogobbosouza]

Try this @weilinzung

new StylelintPlugin({
  emitWarning: true,
  configFile: `stylelintrc.js`,
  syntax: 'scss',
  files: './src/**/*.s?(a|c)ss'
}),
....

Use emitWarning. See #200 (comment)

[weilinzung]

@ricardogobbosouza thank you, but that does not work for me, but remove option pluginnew webpack.NoEmitOnErrorsPlugin() it is fine for now.