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)
- 🌍 Run anywhere with zero config (server side rendering out-of-the-box)
- ⛓️ Optional transformer to extract styles to stylesheets
- 📦 Made for consumers consumers (developers who consume your components)
Currently in initial development. Reach out to me @itsmadou if this sounds interesting to you.
Transforms:
import { jsx } from '@compiled/css-in-js';
() => <div css={{ color: 'blue' }}>hello, world!</div>;Into:
() => (
<>
<style>{'.a { color: blue; }'}</style>
<div className="a">hello, world!</div>
</>
);Transforms:
import { styled } from '@compiled/css-in-js';
styled.div`
color: blue;
`;Into:
props => (
<>
<style>{'.a { color: blue; }'}</style>
<div className="a">{props.children}</div>
</>
);Transforms:
import { ClassNames } from '@compiled/css-in-js';
() => (
<ClassNames>
{({ css }) => <div className={css({ color: 'blue' })}>hello, world!</div>}
</ClassNames>
);To:
() => (
<>
<style>{'.a { color: blue; }'}</style>
<div className="a">hello, world!</div>
</>
);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>
</>
);