Material-ui: Remove JSS v9 @keyframes styles

[felixknox]

Hi

I am trying to use the makeStyles api, which seems to work great for most cases.

But when I use @keyframes the keyframe name gets scrabbled along side the other style names.
so referring to my keyframe name via animation does not work as the keyframe name has been scrabbled.

Expected Behavior 🤔

Current Behavior 😯

Steps to Reproduce 🕹

Use makeStyles from @material-ui/[email protected]

Context 🔦

I am trying to use keyframes via useStyles/makeStyles

Your Environment 🌎

"react": "^16.8.1",
"react-dom": "^16.8.1",
"@material-ui/core": "3.9.2",
"@material-ui/icons": "3.0.2",
"@material-ui/lab": "4.0.0-alpha.2",
"@material-ui/styles": "4.0.0-alpha.2",

[VincentLanglet]

Does this help you ? https://github.com/mui-org/material-ui/issues/14066

Use

animation: $priceLine ...

[oliviertassinari]

@felixnielsen Thank you for the reminder, we are using the follow backward compatibility logic internally:
https://github.com/mui-org/material-ui/blob/617c095262b02a79d59705535d4b89ed58f6fde2/packages/material-ui/src/ButtonBase/TouchRipple.js#L60-L63

The keyframes behavior has change between JSS v9 and v10: https://cssinjs.org/jss-syntax/?v=v10.0.0-alpha.12#keyframes-animation. We should remove the old logic in the core of Material-UI :).

[oliviertassinari]

@felixnielsen To be more specific, we need to perform the following changes in the codebase:

--- a/packages/material-ui/src/ButtonBase/TouchRipple.js
+++ b/packages/material-ui/src/ButtonBase/TouchRipple.js
@@ -36,10 +36,7 @@ export const styles = theme => ({
   rippleVisible: {
     opacity: 0.3,
     transform: 'scale(1)',
-    animation: `mui-ripple-enter ${DURATION}ms ${theme.transitions.easing.easeInOut}`,
-    // Backward compatible logic between JSS v9 and v10.
-    // To remove with the release of Material-UI v4
-    animationName: '$mui-ripple-enter',
+    animation: `$mui-ripple-enter ${DURATION}ms ${theme.transitions.easing.easeInOut}`,
   },
   /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */
   ripplePulsate: {

If you have some time to help us, we would love to review a pull request :).

[felixknox]

@VincentLanglet this works👍🏻thanks
@oliviertassinari let's see if time allows, would love to contribute.

[oliviertassinari]

@felixnielsen Anytime you want, we can release v4 without it but it's a code debt we should clear :).

[neeschit]

Will the fix for this issue help us get core to jss v10?

[oliviertassinari]

@neeschit We should merge #14767 before handling the problem discussed in this pull request. It's more about removing dead code than getting to JSS v10.