style9-ghost

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);
}

Usage

// babel config
{
  "presets": [
    "style9-ghost"
  ]
}

Installation

yarn add -D git+https://github.com/johanholmerin/style9-ghost#semver:^0.2.0