#css-in-js

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.

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.

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.

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

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.

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.

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.

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.