GoogleChromeLabs / critters

Hi,
I am using the CrittersPlugin with the OptimizeCssAssetsPlugin. When I add this the fallowing css

* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: inherit;
}

it gets minified to:

*{box-sizing:border-box}:after,:before{box-sizing:inherit}

Notice it is now missing the * selector and it only uses :after and :before.

If I remove the css rules for *::before and *::after or if I CrittersPlugin from the plugins array it works fine, but when I include them I get the fallowing error:

ERROR in   Error: The string "", is not a valid CSS selector

  - nwmatcher.js:827 emit
    [webpack-tutorial-boilerplate]/[nwmatcher]/src/nwmatcher.js:827:37

  - nwmatcher.js:1529 select
    [webpack-tutorial-boilerplate]/[nwmatcher]/src/nwmatcher.js:1529:11

  - nwmatcher.js:1451 Object.first
    [webpack-tutorial-boilerplate]/[nwmatcher]/src/nwmatcher.js:1451:14

  - critters.js:117 Node.querySelector
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:117:28

  - critters.js:359
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:359:37

  - Array.filter

  - critters.js:357
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:357:49

  - critters.js:166
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:166:16

  - Array.filter

  - critters.js:162 walkStyleRules
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:162:29

  - critters.js:161 walkStyleRules
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:161:18

  - critters.js:355 Critters.<anonymous>
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:355:9

  - new Promise

  - critters.js:345 Critters.processStyle
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:345:12

  - critters.js:254
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:254:76

  - Array.map

  - critters.js:254 Critters.$If_2
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:254:39

  - critters.js:244 Critters.<anonymous>
    [webpack-tutorial-boilerplate]/[critters-webpack-plugin]/dist/critters.js:244:34

Here is the dependency liist

    "autoprefixer": "^9.0.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "critters-webpack-plugin": "^1.1.0",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-inline-svg-plugin": "^1.2.4",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "optimize-css-assets-webpack-plugin": "^4.0.3",
    "postcss-loader": "^2.1.6",
    "purgecss-webpack-plugin": "^1.2.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0",
    "webpack-merge": "^4.1.3"

Getting the exact same error message issue as you but totally stumped on how to resolve it

Are you by any chance also getting this?

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html

same here. trying to use critters on an app that uses Antd. any suggestions on how to debug/solve this?

@reflog whilst not ideal, in the end I opted for html-webpack-inline-source-plugin

Long term though, I'd love to use Critters - I'd be more than happy to help any of the active maintainers if they need it?

Thanks for the reports! It looks like this line is to blame:

critters/src/index.js

Line 275 in c53df3d

sel = sel.replace(/::?(?:[a-z-]+)([.[#~&^:*]|\s|\n|$)/gi, '$1');

Happy to accept PR's if anyone knows how to fix it, otherwise I'll use your CSS as a test and find a fix @ThisNameWasTaken.

i got the same error but wasn't able to identify what causes it.

If anyone is still getting this error after upgrading to 1.2.0, let me know!