Search code examples
styled-componentscss-in-js

CSS browser compatibility with styled-components

I'm styling my Gatsby.js site with styled-components CSS-in-JS.

Is styled-components making my CSS compatible across browsers for me?

For example, say I'm styling a form. With traditional CSS I would do something like:

button, input, select, textarea {
  margin: 0;
  width: 100%;
       border-sizing: border-box;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

With styled-components, I'd like to do this:

const Form = styled.form`
  button, input, select, textarea {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
`

Can I omit these -moz or -webkit declarations and still end up with cross-browser compatible CSS?

Solution

  • styled-components library has opted for auto prefixing vendor styles, so you do not need to provide -moz or -webkit extensions.

    The library will have it dealt for you. It is done with stylis the parser that styled-components uses underneath. You can check their live preview to see which ones are added.