@compiled/css-in-js v0.4.7

@compiled/css-in-js

Typescript first CSS in JS library that compiles away to nothing 🔧🚧

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 (but actually no runtime)
• 🌍 Server side rendering out-of-the-box (run anywhere with zero config)
• 📦 Made for consumers consumers (developers who consume your components)

Currently in initial development. Reach out to me @itsmadou if this sounds interesting to you.

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>
</>;