babel-plugin-styled-system

Convert Styled System props to `css` prop

Usage no npm install needed!

<script type="module">
  import babelPluginStyledSystem from 'https://cdn.skypack.dev/babel-plugin-styled-system';
</script>

README

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