Material-ui: [Material-ui/Style v4.x] jss-extend plugin doesn't work properly 👀

[jonathangiamp]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.
• [x] This is not a v0.x issue.

Expected Behavior 🤔

  button: {
    display: "block",
    borderRadius: "50px",
    "&::first-letter": {
      textTransform: "uppercase",
    }
  },
  buttonHighlight: {
    extend: "button", // set all button properties
    color: "grey"
  }

Component with buttonHighlight class should include all CSS properties from button class and his color should be grey.

Current Behavior 😯

  button: {
    display: "block", ✅
    borderRadius: "50px", ❌
    "&::first-letter": {
      textTransform: "uppercase", ❌
    }
  },
  buttonHighlight: {
    extend: "button",
    color: "grey"
  }

display property is correctly inherit from button to buttonHighlight but unfortunately, borderRadius and textTransform properties aren't passed to buttonHighlight class.
The &::first-letter property is passed directly to the component without any works. Here a screen from Chrome Developer tools.

I suppose that properties aren't parsed, so only property valid in CSS (like display in my example) will work.

Steps to Reproduce 🕹

Link: Code sandbox

Context 🔦

I'm refactoring my code to use material-ui instead of my vanilla JSS solution. Everything works fine expect from my component which use the jss-extend plugin. This plugin worked properly with JSS only.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| @material-ui/code | v4.0.1 |
| @material-ui/styles | v4.0.1 |
| jss-extend | v6.2.0 |
| react | v.16.8.6 |

[oliviertassinari]

You need to use JSS v10. https://codesandbox.io/s/condescending-cherry-pko8t

import jssExtend from "jss-plugin-extend";

const jss = create({
  plugins: [jssExtend(), ...jssPreset().plugins]
});

[jonathangiamp]

Thanks for your help!