preact build does not work with css specificity rule (.SomeClass > element)

Do you want to request a feature or report a bug? Bug

What is the current behaviour? I am not able to build my preact app when using the following .SomeClass > element If the current behaviour is a bug, please provide the steps to reproduce.

What is the expected behaviour? I should be able to build my project

Please mention other relevant information.

when I run the build command I get this output

✖ ERROR TypeError: Cannot read property ‘trim’ of undefined

• critters.js:287 [frontend]/[critters-webpack-plugin]/dist/critters.js:287:53

• critters.js:38 [frontend]/[critters-webpack-plugin]/dist/critters.js:38:16

• Array.filter

• critters.js:34 walkStyleRules [frontend]/[critters-webpack-plugin]/dist/critters.js:34:29

• critters.js:33 walkStyleRules [frontend]/[critters-webpack-plugin]/dist/critters.js:33:18

• critters.js:262 Critters.<anonymous> [frontend]/[critters-webpack-plugin]/dist/critters.js:262:9

• new Promise

• critters.js:245 Critters.processStyle [frontend]/[critters-webpack-plugin]/dist/critters.js:245:12

• critters.js:130 [frontend]/[critters-webpack-plugin]/dist/critters.js:130:76

• Array.map

• critters.js:130 Critters.$If_3 [frontend]/[critters-webpack-plugin]/dist/critters.js:130:39

• critters.js:120 Critters.<anonymous> [frontend]/[critters-webpack-plugin]/dist/critters.js:120:34

✖ ERROR undefined

package.json

{
  "private": true,
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "per-env",
    "start:production": "npm run -s serve",
    "start:development": "npm run -s dev",
    "build": "preact build",
    "serve": "preact build && preact serve",
    "dev": "preact watch",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "eslint-config-synacor"
  },
  "eslintIgnore": [
    "build/*"
  ],
  "devDependencies": {
    "eslint": "^4.9.0",
    "eslint-config-synacor": "^2.0.2",
    "jest": "^21.2.1",
    "jest-preset-preact": "^1.0.0",
    "per-env": "^1.0.2",
    "preact-cli": "^3.0.0-rc.5",
    "preact-render-spy": "^1.2.1"
  },
  "dependencies": {
    "clsx": "^1.0.4",
    "preact": "^10.0.0-rc.3",
    "preact-compat": "^3.19.0",
    "preact-render-to-string": "^5.0.6",
    "tailwindcss": "^1.1.2"
  },
  "jest": {
    "preset": "jest-preset-preact"
  }
}

[pimdewit]

@angelsalazar @developit I have the same issue, for me it seems to be related to @keyframes and the animation CSS property in general

[livrush]

Having the same issue.

Looks like this is a bug in the critters code. There’s an issue open for a patch, but the issue is in v1.x (I have v1.3.3 in my package-lock) and critters has moved past v2.x. Hopefully the fix gets merged and released for 1.x versions, or preact-cli ups the dependency to v2.x.

If you want a quick fix you can go to the file referenced in the error

node_modules/critters-webpack-plugin/dist/critters.js:287:53

and change var name = names[i].trim(); to var name = names[j].trim();. Silly error, changing it worked for me.