search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.14k stars 2.15k forks source link

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

Open jathak opened 3 years ago

jathak commented 3 years ago

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 commented 3 years ago

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

brandondiamond commented 3 years ago

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

asyncLiz commented 3 years ago

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.