babel-plugin-styled-jss

babel-plugin-styled-jss

This plugin created for styled-jss on top of PreJSS.

Install

npm install --save babel-plugin-styled-jss

Usage

.babelrc

{
  plugin: 'styled-jss'
}

This plugin transforms

const Button = styled.button`
  padding: 10;
  color: ${({color}) => color}
`

to

const Button = styled('button', {
  padding: 10,
  color: ({color}) => color
})

And you can also use plain objects:

const Button = styled.button({
  color: 'red'
})

Recognition

babel-plugin-styled-jss can recognize this patterns:

// you can also use your custom names like:
// import styledCustom from 'styled-jss'
import styled, {Styled} from 'styled-jss'

const Button = styled.button({
  color: 'blue'
})

const scoped = Styled({
  baseButton: {
    color: 'green'
  }
})
const AnotherButton = scoped.button({
  composes: '$baseButton'
})

And you can also use DI for example, but you need to name it as styled:

export default (styled) => {
  const Button = styled.button({color: 'red'})
}

Links

• styled-jss
• PreJSS

License

MIT