Building a “Universal” CSS-in-JS library

on YouTube ↗27m

" summary

Claims a universal CSS-in-JS that maps one JS API to React Native and web, supports full CSS features (variables, media queries, pseudo selectors), and keeps near-zero runtime by emitting CSS at build time plus platform-specific JS at runtime. Implements tokens, variants, style composition via StyleSheet.create and array merging, SSR media queries to avoid flicker, and a plugin system for Webpack/Babel/SWC; used in BlueStack Style and Glue Stack UI and achieves Lighthouse 100 on a landing page.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to Universal
2. 1:15Universal vs Cross-Platform
3. 2:34Adoption of Universal Apps
4. 4:05Debunking Myths of RN Web
5. 6:15Overcoming Technical Challenges
6. 8:53Accessibility in Shared Code
7. 10:18The Need for CSS-in-JS
8. 13:27Styling API Inspirations
9. 17:34Building the Styled Library
10. 20:49Theming and Responsiveness
11. 24:00Plugin System and Conclusion

" related talks

• 45mCSS-in-JS: FTWBruce Lawson · CSS Day + UX Special 2018
• 23mCSS-in-JSMax Stoiber · ReactConf AU 2020
• 33mThe past, present and future of CSS-in-JSMax Stoiber · Agent Conf 2020
• 28mSee the Past, Present, and Future of CSS-in-JSMax Stoiber · React Day Berlin 2019
• 31mUnique Value Proposition of CSSinJS and the FutureOleg Slobodskoi · ReactiveConf 2017
• 04mThe Road to Styled ComponentsMax Stoiber · React Conf 2017
• 38mA Unified Styling LanguageMark Dalgleish · JSHeroes 2017
• 39m"CSS in JS - The good, The bad and The ugly"Maya Shavin · JSCamp Barcelona 2019