Error when used with Stylelint

[Reynicke]

Hi!

I try to create a setup consisting of sass, stylelint and media-query-plugin, but the combination of media-query-plugin and stylelint-webpack-plugin produces an error. If I remove one of the 2 plugins everything works fine. But together following error occurs:

UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘syntax’ of undefined
    at Root.toString (src/frontend-core/node_modules/postcss-syntax/patch-postcss.js:38:67)
    at addToStore (src/frontend-core/node_modules/media-query-plugin/src/postcss.js:14:51)
    at /src/frontend-core/node_modules/media-query-plugin/src/postcss.js:59:17

I can avoid this error if I remove certain MediaQueryPlugin queries. It works, for example, with a (min-width: 1200px) query (there are only very few of those in my sass code base). But I could not pinpoint which sass code leads to the error.

My Webpack config looks like this:

{
  plugins: [
    new MediaQueryPlugin({
      filename: `styles-nomobile.css`,
      include: true,
      queries: {
        '(min-width: 480px)': 'desktop',
        '(min-width: 600px)': 'desktop',
        '(min-width: 768px)': 'desktop',
      }
    }),
    new MiniCssExtractPlugin({
      filename: `styles.css`,
    }),
    new StyleLintPlugin({
      files: pathsConfig.bundleRoot + '/**/*.scss',
      lintDirtyModulesOnly: env === 'dev' && process.argv.indexOf('--watch') >= 0
    })
  ],
  module: {
    rules: [
      {
        test: /\.s?[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {url: false, sourceMap: true}
          },
          MediaQueryPlugin.loader,
          {
            loader: 'sass-loader',
            options: {sourceMap: true}
          }
        ]
     }  
   ]
  },
  ...
}

The used package versions:

"node-sass": "4.14.1",
"media-query-plugin": "^1.1.0",
"mini-css-extract-plugin": "0.11.2",
"postcss": "^8.0.9",
"stylelint": "13.7.1",
"stylelint-config-standard": "20.0.0",
"stylelint-no-unsupported-browser-features": "^4.0.0",
"stylelint-webpack-plugin": "2.1.0",

[SassNinja]

Hi @Reynicke

thanks for your issue!

I've been able to reproduce the error though I don't know the reason yet. Maybe stylelint doesn't like the created chunk with the extracted CSS – requires further investigation.

Does it help when you replace this line

lintDirtyModulesOnly: env === 'dev' && process.argv.indexOf('--watch') >= 0

with this?

lintDirtyModulesOnly: true

[Reynicke]

Hi @SassNinja

lintDirtyModulesOnly: true helps, but only because Stylelint doesn't do anything then (my guess). If the Webpack watcher is running and I change a file, it crashes.

[maxhartshorn]

Also seeing this issue when using Stylelint and this plugin

[markvella-highlight]

I've also encountered this issue - I have a very similar setup to @Reynicke in terms of Webpack configuration and packages installed.