style-convert

A babel-plugin-macros macro for converting CSS strings to a JavaScript object notation, popular in CSS-in-JS libraries. Helpful for libraries that only accept object notation, such as TailwindCSS's component API.

Usage

1import css from 'style-convert/macro';
2import theme from './theme';
3
4const styles = css`
5  .btn {
6    color: red;
7    width: ${theme.borderWidth} ${theme.borderColor} solid;
8  }
9`;

becomes:

1import theme from './theme';
2
3const styles = {
4  '.btn': {
5    color: 'red',
6    width: `${theme()} 1px solid`,
7  },
8};

Use with Tailwind API

1import css from 'style-convert/macro';
2import plugin from 'tailwindcss/plugin';
3
4export default plugin(({ theme, addComponents }) => {
5  const components = css`
6    .btn {
7      color: red;
8      width: PLACEHOLDER_1 1px solid;
9    }
10  `;
11
12  addComponents(components);
13});