preact build does not work with css "animation-name:[value]"

[Chalapathi01]

** reporting a _bug**

What is the current behaviour? Build fails with error If the current behaviour is a bug, please provide the steps to reproduce.

✖ ERROR   TypeError: Cannot read property 'trim' of undefined
  
  - critters.js:287 
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:287:53
  
  - critters.js:38 
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:38:16
  
  - Array.filter
  
  - critters.js:34 walkStyleRules
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:34:29
  
  - critters.js:33 walkStyleRules
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:33:18
  
  - critters.js:262 Critters.<anonymous>
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:262:9
  
  - new Promise
  
  - critters.js:245 Critters.processStyle
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:245:12
  
  - critters.js:130 
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:130:76
  
  - Array.map
  
  - critters.js:130 Critters.$If_3
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:130:39
  
  - critters.js:120 Critters.<anonymous>
    [pwa-gitlab]/[critters-webpack-plugin]/dist/critters.js:120:34
  
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

What is the expected behaviour? "build needs to happen successfully"

Please mention other relevant information.

.shine {
    background: no-repeat #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 10%, #ddded1 80%, #e6e7e8 10%, #f6f7f8 100%);
    position: relative;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
     -webkit-animation-name: placeholderShimmer;
    -webkit-animation-timing-function: linear;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
     animation-name: placeholderShimmer;
    animation-timing-function: linear
}
    @-webkit-keyframes placeholderShimmer {
        0% {
            background-position: -468px 0
        }
        100% {
            background-position: 468px 0
        }
    }
    @keyframes placeholderShimmer {
        0% {
            background-position: -468px 0
        }
        100% {
            background-position: 468px 0
        }
    }

Please paste the results of preact info here.

{
  "private": true,
  "name": "pwa-gitlab",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "per-env",
    "start:production": "npm run -s serve ",
    "start:development": "npm run -s dev ",
    "predev:build": "rm -rf devBuild/assets devBuild/content && mkdir -p devBuild",
    "prestag:build": "rm -rf stagBuild/assets stagBuild/content && mkdir -p stagBuild",
    "preprod:build": "rm -rf prodBuild/assets prodBuild/content && mkdir -p prodBuild",
    "dev:build": "preact build --template src/template.html --dest devBuild --NODE_ENV=development",
    "stag:build": "preact build --template src/template_stg.html --dest stagBuild --NODE_ENV=staging",
    "prod:build": "preact build --template src/template_prod.html --dest prodBuild --NODE_ENV=production",
    "serve": "preact build && serve build --single",
    "dev": "preact watch --template src/template.html",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "eslint-config-synacor"
  },
  "eslintIgnore": [
    "build/*"
  ],
  "devDependencies": {
    "enzyme": "^3.10.0",
    "enzyme-adapter-preact-pure": "^2.0.0",
    "eslint": "^6.0.1",
    "eslint-config-synacor": "^3.0.4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "jest-preset-preact": "^1.0.0",
    "per-env": "^1.0.2",
    "preact-cli": "^3.0.0-rc.6",
    "preact-render-spy": "^1.2.1",
    "serve": "^11.1.0"
  },
  "dependencies": {
    "@brightcove/react-player-loader": "^1.3.0",
    "@loadable/component": "^5.10.3",
    "abortcontroller-polyfill": "^1.4.0",
    "classnames": "^2.2.6",
    "flux": "^3.1.3",
    "history": "^4.10.1",
    "path-to-regexp": "^6.1.0",
    "preact": "^10.0.1",
    "preact-router": "^3.0.0"
  },
  "jest": {
    "preset": "jest-preset-preact",
    "setupFiles": [
      "<rootDir>/tests/__mocks__/browserMocks.js",
      "<rootDir>/tests/__mocks__/setupTests.js"
    ]
  }
}

[Chalapathi01]

Please someone can help me to resolve this issue

[developit]

@Chalapathi01 hmm - are you sure it's not caused by the @-webkit-keyframes section? In general, -webkit- prefixes should not be necessary in preact-cli, it will generate browser-compatible CSS for you.

[Chalapathi01]

@developit removed it and tried, still the issue is same