babel-plugin-styled-system v0.0.5

babel-plugin-styled-system

Convert Styled System props to css prop

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
  plugins: [
    'babel-plugin-emotion',
    'babel-plugin-styled-system',
  ]
}

// in
<div color='tomato' px={32} />

// out
<div
  css={{
    color: 'tomato',
    paddingLeft: 32,
    paddingRight: 32,
  }}
/>

• Handle existing css prop functions
• Handle responsive array props
• Use values from theme
• Parse css prop for Styled System props