From 05ca771e77538fb186347d74e3f53843416f3195 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 26 Feb 2024 18:14:05 -0300 Subject: [PATCH 01/12] add a Why section on the zero-runtime README --- packages/zero-runtime/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 1024a9d8078e94..5e0b2ff563f622 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -3,6 +3,7 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build-time. - [Getting started](#getting-started) + - [Why this project exists?](#why-this=project-exists?) - [Next.js](#nextjs) - [Vite](#vite) - [Basic usage](#basic-usage) @@ -23,6 +24,12 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own Zero-runtime supports Next.js and Vite with future support for more bundlers. You must install the corresponding plugin, as shown below. +### Why this project exists? + +The initial motivator to work on this zero-runtime CSS-in-JS package was to improve Material UI's performance when it comes to styling. That's been a frequent pain point we've heard about ever since we introduced Emotion in v5. But another reason a zero-runtime styling solution is excellent for the future of Material UI is compatibility with React Server Components (RSCs). + +All components must support this new pattern; today, most components would naturally apply. Emotion is the only blocker for those that don't (the layout components, such as Box, Typography, Stack, etc.). Additionally, restructuring the way we develop themes is also needed to comply with RSCs, given they need to be passed through a Provider component that typically uses React Context, which is not supported. + ### Next.js ```bash From e02b25a49f68229db6038833874977597d6a6e9d Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 27 Feb 2024 08:35:14 -0300 Subject: [PATCH 02/12] update based on reviews --- packages/zero-runtime/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 5e0b2ff563f622..f5878090608df7 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -26,9 +26,11 @@ Zero-runtime supports Next.js and Vite with future support for more bundlers. Yo ### Why this project exists? -The initial motivator to work on this zero-runtime CSS-in-JS package was to improve Material UI's performance when it comes to styling. That's been a frequent pain point we've heard about ever since we introduced Emotion in v5. But another reason a zero-runtime styling solution is excellent for the future of Material UI is compatibility with React Server Components (RSCs). +We first introduced an Emotion-based CSS-in-JS styling engine to Material UI back in the v4 to v5 transition. We wanted to support color transformations, theme variables, and other features that wouldn't be possible without a runtime solution. However, this has indeed impacted performance and has been a frequent feedback we've heard ever since. -All components must support this new pattern; today, most components would naturally apply. Emotion is the only blocker for those that don't (the layout components, such as Box, Typography, Stack, etc.). Additionally, restructuring the way we develop themes is also needed to comply with RSCs, given they need to be passed through a Provider component that typically uses React Context, which is not supported. +With the recent CSS progress with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. + +We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. {newProductName} is designed to have a smooth migration experience from styled-components and Emotion. ### Next.js From 713bf199d053bb0c75a69b1f1b548ed7fb5f8a9d Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 27 Feb 2024 08:36:59 -0300 Subject: [PATCH 03/12] iterate on the wording --- packages/zero-runtime/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index f5878090608df7..a00303febf3c60 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -28,7 +28,7 @@ Zero-runtime supports Next.js and Vite with future support for more bundlers. Yo We first introduced an Emotion-based CSS-in-JS styling engine to Material UI back in the v4 to v5 transition. We wanted to support color transformations, theme variables, and other features that wouldn't be possible without a runtime solution. However, this has indeed impacted performance and has been a frequent feedback we've heard ever since. -With the recent CSS progress with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. +As CSS keeps evolving rapidly with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. {newProductName} is designed to have a smooth migration experience from styled-components and Emotion. From 8fc78239a74dc88772f3653e4474e739a9911f55 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 28 Feb 2024 18:02:26 -0300 Subject: [PATCH 04/12] iterate on the wording --- packages/zero-runtime/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index a00303febf3c60..6df7934ad54a10 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -26,9 +26,9 @@ Zero-runtime supports Next.js and Vite with future support for more bundlers. Yo ### Why this project exists? -We first introduced an Emotion-based CSS-in-JS styling engine to Material UI back in the v4 to v5 transition. We wanted to support color transformations, theme variables, and other features that wouldn't be possible without a runtime solution. However, this has indeed impacted performance and has been a frequent feedback we've heard ever since. +We first introduced an Emotion-based CSS-in-JS styling engine to Material UI back in the v4 to v5 transition. We wanted to support color transformations, theme variables, and other features that wouldn't be possible without a runtime solution. However, this has notably impacted performance and has been a frequent piece of feedback we've heard ever since. -As CSS keeps evolving rapidly with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. +As CSS keeps rapidly evolving with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. {newProductName} is designed to have a smooth migration experience from styled-components and Emotion. From e065c55a27979ae6aa444a0845f8547675ee7275 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 1 Mar 2024 07:14:35 -0300 Subject: [PATCH 05/12] update based on review --- packages/pigment-react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 04a6c7974ad3b3..2ac0b0d1b01f06 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -30,7 +30,7 @@ We first introduced an Emotion-based CSS-in-JS styling engine to Material UI bac As CSS keeps rapidly evolving with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. -We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. {newProductName} is designed to have a smooth migration experience from styled-components and Emotion. +We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. Pigment CSS is built on top of [wyw-in-js](https://wyw-in-js.dev/) and is designed to have as smooth a migration experience as possible for Material UI users to go from v5 to v6. ### Next.js From d7013e9cb695746fdbde22f7bbc018ab97823ec8 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 1 Mar 2024 07:16:27 -0300 Subject: [PATCH 06/12] fix library name to go according to how they use it --- packages/pigment-react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 2ac0b0d1b01f06..66c93d6b67a13e 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -30,7 +30,7 @@ We first introduced an Emotion-based CSS-in-JS styling engine to Material UI bac As CSS keeps rapidly evolving with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. -We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. Pigment CSS is built on top of [wyw-in-js](https://wyw-in-js.dev/) and is designed to have as smooth a migration experience as possible for Material UI users to go from v5 to v6. +We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/) and is designed to have as smooth a migration experience as possible for Material UI users to go from v5 to v6. ### Next.js From 1223497bb639245821013402bb3d457b8f962fb6 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 1 Mar 2024 12:22:19 -0300 Subject: [PATCH 07/12] Sam's review --- packages/pigment-react/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 66c93d6b67a13e..389ee2d8f70d28 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -3,7 +3,7 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build-time. - [Getting started](#getting-started) - - [Why this project exists?](#why-this=project-exists?) + - [Why this project exists?](#why-this-project-exists) - [Next.js](#nextjs) - [Vite](#vite) - [Basic usage](#basic-usage) @@ -24,11 +24,11 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own Pigment CSS supports Next.js and Vite with support for more bundlers in future. You must install the corresponding plugin, as shown below. -### Why this project exists? +### Why this project exists We first introduced an Emotion-based CSS-in-JS styling engine to Material UI back in the v4 to v5 transition. We wanted to support color transformations, theme variables, and other features that wouldn't be possible without a runtime solution. However, this has notably impacted performance and has been a frequent piece of feedback we've heard ever since. -As CSS keeps rapidly evolving with features such as CSS variables and color-mix, to name a few, there's no practical reason to keep a runtime solution. Additionally, React Server Components entered the mix of functionalities Material UI should support. +As CSS keeps rapidly evolving with features such as CSS variables and color-mix—to name a few—there's no practical reason to keep a runtime solution. It's also necessary to move away from this pattern in order to support React Server Components. We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/) and is designed to have as smooth a migration experience as possible for Material UI users to go from v5 to v6. From 6593d15c3c54b11ce596a79b219de586cf6e6264 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 1 Mar 2024 18:20:53 -0300 Subject: [PATCH 08/12] Sam's writing refresh --- packages/pigment-react/README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 389ee2d8f70d28..da02f7e077dfde 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -26,11 +26,12 @@ Pigment CSS supports Next.js and Vite with support for more bundlers in future. ### Why this project exists -We first introduced an Emotion-based CSS-in-JS styling engine to Material UI back in the v4 to v5 transition. We wanted to support color transformations, theme variables, and other features that wouldn't be possible without a runtime solution. However, this has notably impacted performance and has been a frequent piece of feedback we've heard ever since. +Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. -As CSS keeps rapidly evolving with features such as CSS variables and color-mix—to name a few—there's no practical reason to keep a runtime solution. It's also necessary to move away from this pattern in order to support React Server Components. +Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. -We looked around and couldn't find anything that fit precisely, so we started a new bespoke project. Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/) and is designed to have as smooth a migration experience as possible for Material UI users to go from v5 to v6. +Compared to its predecessors it offers improved performance and DX, and it's compatible with React Server Components. +Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment in v6. ### Next.js From 4d2ac4a176ae3861e8ce27a4923670fb70573695 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 1 Mar 2024 18:21:36 -0300 Subject: [PATCH 09/12] add new title, too --- packages/pigment-react/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index da02f7e077dfde..cb709b3e1b8e05 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -3,7 +3,7 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build-time. - [Getting started](#getting-started) - - [Why this project exists?](#why-this-project-exists) + - [Why this project exists?](#why-choose-pigment-css) - [Next.js](#nextjs) - [Vite](#vite) - [Basic usage](#basic-usage) @@ -24,7 +24,7 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own Pigment CSS supports Next.js and Vite with support for more bundlers in future. You must install the corresponding plugin, as shown below. -### Why this project exists +### Why choose Pigment CSS Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. From 01ba744d6fbcae479da2bc2670ef86920962ee29 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 1 Mar 2024 18:43:38 -0300 Subject: [PATCH 10/12] fix lint (trailing spaces) --- packages/pigment-react/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index cb709b3e1b8e05..7cf94acb6de6d5 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -26,9 +26,9 @@ Pigment CSS supports Next.js and Vite with support for more bundlers in future. ### Why choose Pigment CSS -Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. +Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. -Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. +Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. Compared to its predecessors it offers improved performance and DX, and it's compatible with React Server Components. Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment in v6. From 6823db35d2fdd26eef9749d1166b117f147cab79 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 4 Mar 2024 12:15:55 -0300 Subject: [PATCH 11/12] Brijesh's suggestion --- packages/pigment-react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 7cf94acb6de6d5..49afd9405019e6 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -30,7 +30,7 @@ Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "tr Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. -Compared to its predecessors it offers improved performance and DX, and it's compatible with React Server Components. +Compared to its predecessors, it offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment in v6. ### Next.js From 6bc0cf614f027a979b57569714720093d116fb61 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 4 Mar 2024 16:17:02 -0300 Subject: [PATCH 12/12] Sam's suggestion --- packages/pigment-react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 49afd9405019e6..64b55af6df712e 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -30,7 +30,7 @@ Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "tr Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. -Compared to its predecessors, it offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. +Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment in v6. ### Next.js