clean-css: BUG: Cannot read property '0' of undefined

@bjornharvold I got it to work when I set “extractCss” to false

“extractCss”: false,

Hi, please upgrade and fix this issue. At “node_modules@angular-devkit\build-angular\node_modules\clean-css\lib\optimizer\level-2\break-up.js:566:93”

throw new InvalidPropertyError('Invalid animation value at ' + formatPosition(value[2][0]) + '. Ignoring.');

[0] is undefined so throwing exception is also throwing exception, LOL. And I am getting this error at bootstrap.css process.

So this happened to me when I was trying to minify using and I’m not using an Angular stack:

transition: 500ms flex-basis ease-in-out;

Same happens with any flex property from as far as I could tell.

The couple fixes that I found was from @spiderpig and @lilcoder . However, I want all of the optimizations running if I can do so, and it seems to be possible. @umutcakirbm had directed me towards the correct path and there are probably multiple solutions to fix this particular issue. Without digging further and really understanding what’s going on under the hood I found that adding an additional if statement in the break-up.js file in clean-css\lib\optimizer\level-2 works well:

break-up.js in function transition(property, compactable, validator) starting on line 553

...
if (validator.isTime(value[1]) && !durationSet) {
      duration.value = [value];
      durationSet = true;
    } else if (validator.isTime(value[1]) && !delaySet) {
      delay.value = [value];
      delaySet = true;
    } else if ((validator.isGlobal(value[1]) || validator.isTimingFunction(value[1])) && !timingSet) {
      timing.value = [value];
      timingSet = true;
    } else if (validator.isIdentifier(value[1]) && !propSet) {
      prop.value = [value];
      propSet = true;
    } else {
      throw new InvalidPropertyError('Invalid animation value at ' + formatPosition(value[2][0]) + '. Ignoring.');
    }
...

Change this block to:

...
if (validator.isTime(value[1]) && !durationSet) {
      duration.value = [value];
      durationSet = true;
    } else if (validator.isTime(value[1]) && !delaySet) {
      delay.value = [value];
      delaySet = true;
    } else if ((validator.isGlobal(value[1]) || validator.isTimingFunction(value[1])) && !timingSet) {
      timing.value = [value];
      timingSet = true;
    } else if (validator.isIdentifier(value[1]) && !propSet) {
      prop.value = [value];
      propSet = true;
    } else if (undefined === value[2]) {
      throw new InvalidPropertyError('Invalid animation value at ' + formatPosition(value[1][0]) + '. Ignoring.');
    } else {
      throw new InvalidPropertyError('Invalid animation value at ' + formatPosition(value[2][0]) + '. Ignoring.');
    }
...

I’m sure there is a better way to mitigate the thrown error but to always check if the value[2] is defined before throwing the InvalidPropertyError is a start. Again, without a deep dive I’m not sure if this breaks other things but then the transition property works accordingly. I’d submit a merge request but I’m thinking this isn’t the best solution out there.

Can you say that again in Angular CLI speak 😉