untitled-css-in-js-project

Typescript first css-in-js library that compiles away all your problems. Inspired by the css prop and zero config SSR of Emotion, the zero runtime of Linaria, and the styled api from Styled Components to create the css-in-js solution for component libraries. No runtime, server side rendering out-of-the-box, made for component libraries.

Currently in initial development - Typescript transformer first, Babel plugin later.

css prop

Transforms:

<div css={{ color: 'blue' }}>hello, world!</div>

Into:

<>
  <style>{'.a { color: blue; }'}</style>
  <div className="a">hello, world!</div>
</>

styled component

Transforms:

const Item = styled.div`
  color: blue;
`;

Into:

const Item = props => (
  <>
    <style>{'.a { color: blue; }'}</style>
    <div className="a">{props.children}</div>
  </>
);

ClassNames component

Transforms:

<ClassNames>{({ css }) => <div className={css({ color: 'blue' })}>hello, world!</div>}</ClassNames>

To:

<>
  <style>{'.a { font-size: 20px; }'}</style>
  <div className="a">hello, world!</div>
</>

Dynamic behaviour

Dynamic behaviour is powered by CSS variables, which can be applied to every api described so far.

If we take the css prop example it would look like...

Transforms:

const [color] = useState('blue');

<div css={{ color }}>hello, world!</div>;

Into:

const [color] = useState('blue');

<>
  <style>{'.a { color: var(--color-a); }'}</style>
  <div className="a" style={{ '--color-a': color }}>
    hello, world!
  </div>
</>;