Can't compile because of "isEmpty"

[kud]

ERROR in index.b43c128eeca99639b3b4.css from CssoWebpackPlugin
Cannot read property 'isEmpty' of undefined TypeError: Cannot read property 'isEmpty' of undefined
    at Object.cleanRuleset (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/lib/clean/Rule.js:83:31)
    at Object.leave (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/lib/clean/index.js:16:37)
    at List.walkNode (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/node_modules/css-tree/lib/walker/create.js:161:19)
    at List.each (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/node_modules/css-tree/lib/utils/list.js:159:12)
    at Object.eval [as StyleSheet] (eval at createTypeIterator (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/node_modules/css-tree/lib/walker/create.js:112:12), <anonymous>:5:15)
    at walkNode (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/node_modules/css-tree/lib/walker/create.js:158:37)
    at walk (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/node_modules/css-tree/lib/walker/create.js:214:9)
    at module.exports (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/lib/clean/index.js:13:5)
    at compressChunk (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/lib/compress.js:68:5)
    at compress (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/lib/compress.js:153:9)
    at minify (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/lib/index.js:94:9)
    at Object.minifyStylesheet [as minify] (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso/lib/index.js:123:12)
    at /Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/lib/index.js:152:63
    at /Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:3110:16
    at eachOfArrayLike (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:1069:9)
    at eachOf (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:1117:5)
    at Object.eachLimit (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:3172:5)
    at /Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/lib/index.js:118:37
    at /Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:3110:16
    at eachOfArrayLike (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:1069:9)
    at eachOf (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:1117:5)
    at Object.eachLimit (/Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/node_modules/async/dist/async.js:3172:5)
    at /Users/kud/Projects/_contexte/lois-webapp/node_modules/csso-webpack-plugin/lib/index.js:117:33
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:14:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.additionalAssets.callAsync.err (/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/Compilation.js:1270:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeTree.callAsync.err (/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/Compilation.js:1266:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/Compilation.js:1203:27)
    at hooks.make.callAsync.err (/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/Compiler.js:547:17)
    at _done (eval at create (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
    at _err1 (eval at create (/Users/kud/Projects/_contexte/lois-webapp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)
    at _addModuleChain (/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/Compilation.js:1054:12)
    at processModuleDependencies.err (/Users/kud/Projects/_contexte/lois-webapp/node_modules/webpack/lib/Compilation.js:980:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)

import path from "path"
import webpack from "webpack"
import MiniCssExtractPlugin from "mini-css-extract-plugin"
import CssoWebpackPlugin from "csso-webpack-plugin"
import HtmlWebpackPlugin from "html-webpack-plugin"

import babelConfig from "./babel.config.js"
import envVars from "./env.json"

const SRC_DIR = path.resolve(__dirname, "src")
const DIST_DIR = path.resolve(__dirname, "dist")

export default env => {
  return {
    mode: "production",

    // the source
    entry: [`${SRC_DIR}/index.js`],

    // the destination
    output: {
      path: DIST_DIR,
      filename: "index.[hash].js",
      publicPath: "/",
    },

    resolve: {
      alias: {
        "~": `${SRC_DIR}`, // thanks to that, we can use import xxx from '~/file'
      },
    },

    // plugins
    plugins: [
      new HtmlWebpackPlugin({
        template: "src/index.html",
        favicon: "src/favicon.ico",
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: true,
        },

        segmentToken: JSON.stringify(envVars[env.stage].SEGMENT_TOKEN),
      }),

      new MiniCssExtractPlugin({
        filename: "index.[hash].css",
      }),

      new CssoWebpackPlugin(),
    ],

    // what will be used for each type of code
    module: {
      rules: [
        // javascript
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          options: babelConfig,
        },

        // files
        {
          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
          use: {
            loader: "url-loader",
            options: {
              limit: 100000,
            },
          },
        },

        // styles
        {
          test: /\.css$/,
          exclude: /\.module\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                modules: false,
                importLoaders: 1,
                import: true,
              },
            },
            {
              loader: "postcss-loader",
              options: {
                ident: "postcss",
                plugins: loader => [
                  require("autoprefixer"),
                  require("postcss-axis"),
                  require("postcss-custom-media")({
                    extensions: require("./mediaQueries"),
                  }),
                ],
              },
            },
          ],
        },

        {
          test: /\.module\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: "[name]--[local]___[hash:base64:5]",
                import: true,
              },
            },
            {
              loader: "postcss-loader",
              options: {
                ident: "postcss-module",
                plugins: loader => [
                  require("autoprefixer"),
                  require("postcss-axis"),
                  require("postcss-custom-media")({
                    extensions: require("./mediaQueries"),
                  }),
                ],
              },
            },
          ],
        },

        // images
        {
          test: /.*\.(gif|png|jpe?g|svg)$/i,
          use: [
            {
              loader: "file-loader",
            },
            {
              loader: "image-webpack-loader",
              options: {
                gifsicle: {
                  interlaced: false,
                },
                optipng: {
                  optimizationLevel: 7,
                },
                pngquant: {
                  quality: "65-90",
                  speed: 4,
                },
                mozjpeg: {
                  progressive: true,
                  quality: 65,
                },
              },
            },
          ],
        },
      ],
    },
  }
}

Specifications

• CSSO Plugin version: 1.0.0-beta.12
• Webpack version: 4.16.1

/cc @zoobestik

[zoobestik]

@kud, thanks for your report,

Looks like bug in csso with non-trivial syntax.
Can you show index.b43c128eeca99639b3b4.css or minimal reproduction case?

[kud]

I'll try to debug myself for the moment.

To be fair, it works like a charm with last plugin and cssnano for the moment.

      new LastCallWebpackPlugin({
        assetProcessors: [
          {
            regExp:  /\.css$/,
            processor: (assetName, asset) => cssnano.process(asset.source())
              .then(r => r.css)
          }
        ],
        canPrint: true,
      })

I'll investigate. Thank you.