[question] No vendor prefixes generated when using withStyles

TheHolyWaffle commented 6 years ago

When I make use of the built-in withStyles HOC I don't get the automatic vendor prefixing despite the following pieces of documentation claiming otherwise:

When should I use inline-style vs withStyles()? it says that we can make use of withStyles in order to gain the benefit of vendor prefixing.
CSS-in-JS states that Material UI uses JSS at its core with the jss-preset-default which includes the jss-vendor-prefixer plugin.

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

Expected Behavior

Vendor prefixes should be generated for certain style rules like display: 'flex' or transform: 'translateX(100px)'

Current Behavior

No vendor prefixes are generated

Steps to Reproduce (for bugs)

https://codesandbox.io/s/985r6o933w

Inspect the element Test
Notice that no vendor prefixes are generated when looking at the class .ExampleContainer-root-1

Your Environment

Tech	Version
Material-UI	1.0.0 beta 21
React	16.1.1
browser	Chrome 62

mbrookes commented 6 years ago

@kof Would you be able to take a look at this one please?

oliviertassinari commented 6 years ago

@TheHolyWaffle The prefixes are only added when needed (based on features detection client side). We have already discussed this point in:

The only downside of this approach is that the prefixes need to be added for the server-side rendering: https://github.com/mui-org/material-ui/blob/b97dad65a4495fb68b9d864e11d25521cf9befce/pages/_document.js#L110-L112

depiction commented 5 years ago

Automatic prefixing when needed is not working as expected. I'm trying to use clip-path, which needs to be prefixed in Safari.

myStyle: { clipPath: 'polygon(0% 0%, 100% 0%, 100% 250px, 0% 100%)', }

When I view my page in Safari and inspect that code, there is no vendor prefix for clip-path. I'm using Material UI core v3.9.0 and JSS v9.8.7 with jss-preset-default.

eps1lon commented 5 years ago

@depiction Do you see that output for server-side rendering or client-side?

oliviertassinari commented 5 years ago

@depiction I confirm the problem, we miss the clipPath prefix on Safari: https://codesandbox.io/s/o40xvvrq25.

Could you open an issue on JSS side? cc @kof.

kof commented 5 years ago

Opened an issue

acejusto11 commented 5 years ago

Hi, Is the issue still exist? We are using version 4.0.2. thank you

mui / material-ui