React Advanced

React Advanced 2023

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.

Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.

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

Negar Jamalifard

TS Congress

TypeScript Congress 2023

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.

Most of the ecosystem tools, like bundlers or transpilers, are based on AST. And Typescript provides one of the best Developer Experiences to work with the code base. This talk is about the experience of how beneficial it can be to use Type Hints and Typescript Language Server during the AST and static code analysis, based on the example of building a compile-time css-in-js library.

Enhanced AST Static Analysis with Typescript Language Server

Artur Kenzhaev

React Summit

React Summit 2023

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.

In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.

Moving on From Runtime Css-In-Js at Scale

Siddharth Kshetrapal

React Finland

React Finland 2021

CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.

Rethinking CSS - Introducing Stylex

Naman Goel

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

Mark Dalgleish

There are two mutually exclusive methods that CSS-in-JS libraries use to generate and ship styles to the browser. Both methods have benefits and downsides, so let’s analyze them in detail from the loading performance perspective. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

A thorough analysis of CSS-in-JS

Andrei Pfeiffer

React Summit Remote Edition

React Summit Remote Edition 2020

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.

Haris is talking about the newly open-sourced library Restyle (<a href="https://github.com/Shopify/restyle">https://github.com/Shopify/restyle</a>); how it addresses many problems and pain points developers experience when managing evolving styles and theme support (gotta have dark mode!) in a React Native app.

Styles and Theming with Restyle in React Native

Haris Mahmood

React Summit 2020

Welcome to Theming Gatsby apps with Theme UI. Gatsby is a React-based framework for building static websites and applications. Theme UI is a styling library that allows developers to configure designs for components using predefined values. In Theme UI, you can easily refer to your theme object throughout your project. Variants allow you to define styles for common components like buttons.

There are many CSS-in-JS libraries for us to choose from. Imagine being able to take your favorite parts of those libraries and using them in one. Learn about the power of Theme UI. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#css-in-js