Migrate from styled-components

In most of case, you can safely migrate your code from styled-components and use @xstyled/styled-components instead. xstyled is just a wrapper around styled-components, it is not another engine. xstyled is just a little more strict, if you don't follow the rule it will work but the magic will not apply!

CSS as object

CSS as object already does magic on your properties, for example a margin is automatically converted in px. To avoid any problem of migration, xstyled magic only applies on string properties.

import styled from '@xstyled/styled-components'
const Box = styled.div({
margin: 2, // '2px' (not transformed by xstyled)
marginTop: '2', // '8px' (transformed by styled)
})

You can safely migrate a code base to @xstyled/styled-components without any issue.

css utility is required

With xstyled, you need to explicitely transforms your CSS using css utility:

import styled, { css } from '@xstyled/styled-components'
// 🚫 Not good
const Box = styled.div`
${p => ({ margin: p.margin })}
`
// ✅ Good
const Box = styled.div`
${p => css({ margin: p.margin })}
`

Complete CSS property

xstyled transforms css properties. You have to write complete CSS properties and not use function interpolation in the middle of your CSS declaration.

import styled from '@xstyled/styled-components'
// 🚫 Not good
const Box = styled.div`
margin: ${p => p.margin};
`
// ✅ Good
const Box = styled.div`
${p => css`
margin: ${p.margin};
`}
`

CSS property

Styled Components CSS property is not supported by xstyled and it will not be supported.

Styled Components CSS property rely on a Babel transformation to work. Some edge-cases like using state in a CSS property are not supported:

function Example() {
const [value, setValue] = useState(false)
return (
<div
css={`
color: ${value ? 'red' : 'blue'};
`}
/>
)
}

The above code does not work. Since CSS property support is not good, I prefer to not encourage its usage in xstyled.