How to disable vendor prefixes in styled-components configuration?

user_340142 0
Viewed 1959

I am using styled-components library in my React project.
I would like to disable generating of vendor prefixes during the development time.
It is very cumbersome to find a specified CSS property among so many similar to toggle it and test in browser's dev tools.
Just take a look at this picture (borrowed from one of the issues regarding the same)

enter image description here

Anything I found on the Internet is to use the disableVendorPrefixes prop on StyleSheetManager which is no solution for me, because:

  1. I don't use StyleSheetManager
  2. I want to put this as configuration in my development Webpack config file

Things I found and don't satisfy my needs:

  1. https://github.com/styled-components/styled-components/issues/719
  2. https://github.com/styled-components/styled-components/issues/285
vendor-prefix styled-components webpack configuration
1 Answers

I was in your situation and also did not use StyleSheetManager. Since StyleSheetManager is the mechanism they use for applying settings like that you may want to reconsider. Just wrap your top level component in that component. If you only want to disable vendor prefixes in developement mode you could set it conditionally like this...

import { StyleSheetManager } from 'styled-components'

<StyleSheetManager disableVendorPrefixes={process.env.NODE_ENV === 'development'}>
    <YourApp />
</StyleSheetManager>
user_4546000
Related