#css-in-js
SubscribeCSS-in-JS is a type of programming approach that allows developers to write CSS code within the same JavaScript file. This approach helps to keep the styling and logic of an application together, making it easier to maintain and debug. It also helps to reduce the number of files needed for a project and makes it easier to share styles throughout the application. Additionally, it enables developers to use features such as variables, functions, and conditionals, which are not normally available in traditional CSS.
Type-safe Styling for React Component Packages: Vanilla Extract CSSWatch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS
Type-safe Styling for React Component Packages: Vanilla Extract CSS
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.
Enhanced AST Static Analysis with Typescript Language Server
TypeScript Congress 2023
12 min
Enhanced AST Static Analysis with Typescript Language Server
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.
Moving on From Runtime Css-In-Js at ScaleWatch video: Moving on From Runtime Css-In-Js at Scale
React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
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.
Rethinking CSS - Introducing Stylex
React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top ContentCSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
Zero-runtime CSS-in-TypeScript with vanilla-extract
React Finland 2021
29 min
Zero-runtime CSS-in-TypeScript with vanilla-extract
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 thorough analysis of CSS-in-JS
React Finland 2021
24 min
A thorough analysis of CSS-in-JS
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.
Styles and Theming with Restyle in React Native
Styles and Theming with Restyle in React Native
Top ContentToday'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.
Theming Gatsby Apps with Theme UI
React Summit 2020
6 min
Theming Gatsby Apps with Theme UI
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.