Babel preset for transforming JSX attribute string literals to atomic CSS using style9, style9-jsx-prop, and css-to-js.macro.
// Input
import { css } from 'css-to-js.macro';
<div
css={css`
color: red;
font-size: ${props.fontSize};
${props.isBlue && css`
color: blue;
`}
`}
/>
// Output
<div
className={(props.isBlue ? "c1r9f2e5 " : "cyyg6ey ") + "cg0eup6 "},
style={{ "--c3520804954": props.fontSize }},
/>
/* CSS output */
.c1r9f2e5 {
color: blue;
}
.cyyg6ey {
color: red;
}
.cg0eup6 {
font-size: var(--c3520804954);
}
// babel config
{
"presets": [
"style9-ghost"
]
}
yarn add -D git+https://github.com/johanholmerin/style9-ghost#semver:^0.2.0