[mdc-floating-label] shake-keyframes generates invalid CSS

[jathak]

Bug report

Twice within shake-keyframes (here and here), the calc expression calc(0 - #{$positionX}) is used. The default value for $positionX is 0%, so if no alternate value is passed, this generates calc(0 - 0%), which is invalid CSS, causing the property it's in to be ignored.

Actual behavior

The transform property assigned here will be ignored, since it contains an invalid calc expression.

Expected behavior

The calc expression should be valid, allowing the transform property to be set as expected.

Additional context

I discovered this in a somewhat odd edge case of someone trying to re-compile the already compiled mdc-floating-label.scss (which mean Sass's calc simplification threw an error), but the bug is present in all cases.

Possible solution

Numbers with and without units should not be mixed within a calc expression. You may also wish to remove the interpolation, which would mean that Sass's calc simplification would catch this sort of bug early.

[EstebanG23]

Hi there, can you provide some repro steps and error messages to further investigate?

[brandondiamond]

Looping in Liz who has some context on this after chatting during a triage meeting.

[asyncliz]

This could be solved by changing the expression to calc(0% - #{$positionX}) and adding a unit to the 0.

This might be a bit moot with upcoming changes to text field to use web animations.