A familiar and performant compile time CSS-in-JS library for React made by @atlassian.

Sydney, Australia
Joined February 2021
Include

Only show posts containing:

Exclude

Hide posts containing:

Time range
-
Minimum likes
Hello! Sort of. The dynamic declarations that can't be statically extracted will be powered by CSS variables which aren't supported in IE11.
...for those wanting to see more — you can see CSS being used in this example compiledcssinjs.com/docs/api…
5
Few bug fixes went out for the webpack loader! Now working much better, and also working a treat with Webpack 4 for CSS extraction. + @​compiled/[email protected] ✨ Give it a go and let us know how you went? #cssinjs #javascript #webdev #react
1
7
9
Replying to @KnitterGirl39
Hello! In the short term no. Open to it in the future however.
1
No data for you right now unfortunately! Hopefully in the future. No plans for rollup at this time, would take a contribution however ☺️
2
And most importantly, styles from node modules are extracted (and stripped) as well! Import a component from your favorite component library or design system, and it's extracted! HOW AWESOME IS THAT!?
2
7
Finally, styles are extracted to a static style sheet. It's currently extracted to a single style sheet, but we're planning on enabling code split styles later on.
1
1
1
8
Next, the runtime is stripped away. This is most noticeable when looking through React DevTools! It's ALL removed!
2
8
This is one of the features we've been most excited to implement. Let's talk about what it all means! Style your components exactly as you've done before. The APIs, style composition, conditional styles, it's all there! Nothing needs to change, even when extracting your styles.
1
9
Compiled exists to support the wider distributed ecosystem. To support composition/conditional CSS one constraint is the generated classnames must be of a specific format - no customization allowed. We do have optimization ideas however: github.com/atlassian-labs/co… 2/2
1
Replying to @tailwindcss
There is an issue to add an identifying class name which will link back to a source map of the defining component, but the "atomic class names" will still be defined on the DOM element. See: github.com/atlassian-labs/co… for more info. For context (next tweet) 1/2
1
No. If you're looking for semantic class names I'd recommend just using @tailwindcss?
With all the same behavior you know and love from other runtime CSS-in-JS libraries but now optionally extracted to an external style sheet. When it lands, why not give it a try? It's going to change the game for component libraries and design systems that are published to NPM.
1
1
3
I'm still pretty experimental! But have big dreams. If you've ever used styled-components or emotion you'll feel right at home - all the behaviour works a treat! Composing styles together, conditional styles, and so on.