Zero-Runtime CSS-in-JS Without Giving Up Syntax: Inside a Rust Style Extractor

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

CSS-in-JS made styling React components feel natural, but it came with a cost: style work at runtime, and libraries that rely on a Provider and context do not fit easily into React Server Components. Many zero-runtime alternatives remove that cost by changing how you write styles, with separate style files or static-only values.

Devup UI takes another path. You keep conditionals, dynamic values, responsive arrays and pseudo-selectors in your JSX, and a Rust extractor compiles them into plain class names and CSS variables at build time. In this talk, I will open up that extractor, show what happens to each pattern, and share the trade-offs we found while bringing it to Next.js, Vite, Rsbuild and Webpack.

This talk has been presented at React Summit Asia 2027, check out the latest edition of this React Conference.

css-in-js

Jeong Min Oh

Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Rethinking CSS - Introducing Stylex

React Finland 2021

25 min

Rethinking CSS - Introducing Stylex

Top Content

Haris Mahmood

Shopify

Today's Talk focuses on styles and theming in React Native, specifically from the perspective of the arrive app. The challenges faced with managing colors and font styles are addressed by Restyle, which provides a type-enforced system for building UI components with themability. The implementation of color palettes, spacing, and dark mode is discussed, along with the benefits of using Restyle's predefined components. TypeScript's autocompletion and other advantages are highlighted, and listeners are encouraged to explore the project on GitHub for more features.

react native css-in-js shopify react native

Type-safe Styling for React Component Packages: Vanilla Extract CSS

React Advanced 2023

19 min

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

Frontend Developer

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

design systems css typescript css-in-js vanilla react

Moving on From Runtime Css-In-Js at Scale

React Summit 2023

29 min

Moving on From Runtime Css-In-Js at Scale

Siddharth Kshetrapal

GitHub

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

performance architecture css css-in-js case study

Zero-runtime CSS-in-TypeScript with vanilla-extract

React Finland 2021

29 min

Zero-runtime CSS-in-TypeScript with vanilla-extract

Mark Dalgleish

Shopify

Can we have themeable CSS-in-TypeScript without the runtime cost? In this talk we'll have a quick look at how this can be achieved with vanilla-extract.

performance typescript css-in-js

Enhanced AST Static Analysis with Typescript Language Server

TypeScript Congress 2023

12 min

Enhanced AST Static Analysis with Typescript Language Server

Artur Kenzhaev

I'm a Tech Lead at Zoa in Apps Platform team.

Today's Talk discusses enhancing static code analysis using TypeScript language server and abstract syntax tree (AST). TypeScript can help with static analysis by providing types based on function signatures. By integrating TSMorph into a Babel plugin, we can check types for specific nodes in the abstract syntax tree. Enhancements to static analysis include checking console.log arguments and removing unnecessary expressions. TypeScript's type information can be used to compile CSS and extract it into a separate stylesheet, enabling better compilation and build time performance.

typescript css-in-js typescript libraries