Crash with animation properties

[mikestreety]

Hello.

When I use animation & animation-* properties together, I get a crash on level 2 optimisations. I currently use gulp-clean-css but this seems like an isse with clean-css itself. It looks similar to #940

This error can be skipped by combing the animation properties for now.

Error:

Expand to see the error

/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/properties/every-values-pair.js:4
                     ^


TypeError: Cannot read property 'value' of undefined
    at everyValuesPair (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/properties/every-values-pair.js:4:22)
    at overrideProperties (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/properties/override-properties.js:367:13)
    at optimizeProperties (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/properties/optimize.js:33:5)
    at recursivelyOptimizeProperties (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/optimize.js:63:9)
    at level2Optimize (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/optimize.js:77:3)
    at recursivelyOptimizeBlocks (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/optimize.js:52:7)
    at level2Optimize (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/optimizer/level-2/optimize.js:76:3)
    at optimize (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/clean.js:131:5)
    at /usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/read-sources.js:26:64
    at loadOriginalSources (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/load-original-sources.js:26:5)
    at loadOriginalSources (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/load-original-sources.js:26:5)
    at /usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/read-sources.js:26:14
    at applySourceMaps (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/apply-source-maps.js:34:5)
    at Object.callback (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/read-sources.js:25:12)
    at doInlineImports (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/read-sources.js:200:25)
    at fromStyles (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/read-sources.js:151:5)
    at fromString (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/read-sources.js:48:10)
    at readSources (/usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/reader/read-sources.js:24:10)
    at /usr/lib/node_modules/gulp-clean-css/node_modules/clean-css/lib/clean.js:99:12
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)

Environment

Expand to see the environment

• clean-css version - npm ls clean-css:

+-- gulp-clean-css@3.2.0
| `-- clean-css@4.1.1

• node.js version - node -v:

v6.10.3

• operating system:

Debian GNU/Linux 8 (jessie)

Configuration options

{
	level: {
		1: {
			inline: false,
			selectorsSortingMethod: false,
			specialComments: false,
		},
		2: {
			mergeAdjacentRules: true,
			mergeNonAdjacentRules: false,
			mergeIntoShorthands: false,
			removeDuplicateRules: true
		}
	}
}

Adding skipProperties: ['animation'] does not work

Input CSS

/* the shorter the better! */
li {
	animation: introGrow 0.4s ease-in;
	animation-delay: 0.2s;
}

animation-delay is calculated by SCSS and process before being run through clean-css. The reason this is split out is for readability.

Actual output CSS

None, it crashes

Expected output CSS

li:nth-child(#{$i}) {
	animation: introGrow 0.4s ease-in;
	animation-delay: 0.2s;
}

[jakubpawlowicz]

Hi @mikestreety - this is an output I get with 4.1.1:

li{animation:.4s ease-in .2s introGrow}

Could the problem lie somewhere else?
Could you also check with skipProperties: ['animation', 'animation-delay']?

[mikestreety]

@jakubpawlowicz Thanks for the quick reply. I tried the skipProperties (placing after removeDuplicateRules) with the same result.

It's interesting you get that output. I've had the same thing on a different project, with the same animation property problem.

[jakubpawlowicz]

You should be able to workaround the issue by using overrideProperties: false as that's where the bug happens.

Would you be able to share, either publicly or privately, a bigger excerpt of your CSS so I can try to replicate this bug locally?

[ngyikp]

Coincidentally, I came upon this same exception, and it turns out to be a problem with -webkit- prefix handling:

.abc {
  -webkit-animation: something 0.5s 1 ease-in-out;
  -webkit-animation-fill-mode: both;
}

[jakubpawlowicz]

@ngyikp looks like it! 👍

[mikestreety]

Ah yes! I autoprefix before I run it through clean-css. That must be it!

[mikestreety]

Thanks @jakubpawlowicz

[jakubpawlowicz]

The fix is out in 4.1.2.