Compiling CSS breaks/stops when an eslint rule is broken

On our end we need to disable bail option when running in dev.

You can apply this hook for now to only use bail when compiling with bud build. It should alleviate the issue somewhat:

app.hooks.on('bail', app.isProduction)

I don’t think it will fully fix it. Personally, I think stylelint is just kind of janky like this.

My recommendation is to disable stylelint-webpack-plugin's failOnError in development:

  app.extensions
    .get('stylelint-webpack-plugin')
    .setOption('failOnError', app.isProduction);

You’ll still see the errors emitted but they won’t trigger a fail state:

Maybe this should be the default behavior. I don’t know. We aren’t customizing the stylelint-webpack-plugin defaults in any way… I would think that the defaults would “just work”.

More drastically, you can disable stylelint entirely when running hot:

  app.extensions
    .get('stylelint-webpack-plugin')
    .set('when', app.isProduction)
5 Likes