Preact-cli: preact build does not work with css specificity rule (.SomeClass > element)

Created on 1 Oct 2019 · 10Comments · Source: preactjs/preact-cli

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.
[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.
[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"
  }
}

need more info

Source

angelsalazar

👍2

Most helpful comment

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

pimdewit on 12 Oct 2019

👍2

All 10 comments

Hmm - you're using preact-compat with preact@10, which isn't supported. This is likely causing output like <style>[object Object]</style>, which the CSS inlining solution can't parse. Try deleting the preact-compat dependency.

developit on 3 Oct 2019

Hi @developit , thank you, I deleted preact-compat, but that did not fix the issue.
it is weird because it works when I run the project in development mode.
I have been looking at what piece of code is causing this problem, I found that it is not preact-render-to-string, but the css I wrote.

I have a loader component that looks like this

Loader/index.js

import { h } from 'preact';
import './style.css';

function Loader() {
  return (
    <div className="Loader">
      <div></div>
      <div></div>
      <div></div>
    </div>
  )
}

export default Loader;

Loader/style.css

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

.Loader {
  display: flex;
  justify-content: center;
}
// This css rules cause the issue
.Loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.Loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.Loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
// This css rules cause the issue end

preact.config.js

module.exports = function (config, env, helpers) {
  // disable css modules
  // uncomment the code below when https://github.com/preactjs/preact-cli/issues/897 gets a solution
  let css = helpers.getLoadersByName(config, 'css-loader')[0];
  css.loader.options.modules = false;
}

When I remove the Loader > div rules, the project builds, but when I add them back the build process fails.

I have also tried

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

.Loader {
  display: flex;
  justify-content: center;
}
// This css rules cause the issue
.Loader div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.Loader div:nth-child(2) {
  animation-delay: 0.2s;
}

.Loader div:nth-child(3) {
  animation-delay: 0.4s;
}
// This css rules cause the issue end

but I get the same error

angelsalazar on 3 Oct 2019

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

pimdewit on 12 Oct 2019

👍2

I'm currently experiencing the exact same issue, also using Preact X and animations. My code lives here: https://github.com/dsluijk/portfolio

Edit: I can confirm that this is an issue with the animations. When I comment out the animation properties (not even the keyframes definition), it compiles fine again.

dsluijk on 18 Oct 2019

Indeed, same issue here. When I comment out the animation css property it compiles again, otherwise I get the "Cannot read property 'trim' of undefined" error.

robinbakker on 18 Oct 2019

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