From e6b7ba7da7d6d3603dc97e0482d9aaf9fbf2ba2c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 10 Apr 2024 08:50:12 -0500
Subject: [PATCH 01/35] starting over
---
packages/pigment-css-react/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md
index a949e580fa803a..f6c3f29a438a0a 100644
--- a/packages/pigment-css-react/README.md
+++ b/packages/pigment-css-react/README.md
@@ -812,7 +812,7 @@ const Flex = styled('div')((props) => ({
> đĄ Keep in mind that the `variants` key is for fixed values of props, for example, a component's colors, sizes, and states.
-2. **Programatically generated styles**
+2. **Programmatically generated styles**
For Emotion and styled-components, the styles are different on each render and instance because the styles are generated at runtime:
From 028eff7bd014c8198112145c9bb093ee61757a5e Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 10 Apr 2024 08:54:10 -0500
Subject: [PATCH 02/35] reverting
---
packages/pigment-css-react/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md
index f6c3f29a438a0a..a949e580fa803a 100644
--- a/packages/pigment-css-react/README.md
+++ b/packages/pigment-css-react/README.md
@@ -812,7 +812,7 @@ const Flex = styled('div')((props) => ({
> đĄ Keep in mind that the `variants` key is for fixed values of props, for example, a component's colors, sizes, and states.
-2. **Programmatically generated styles**
+2. **Programatically generated styles**
For Emotion and styled-components, the styles are different on each render and instance because the styles are generated at runtime:
From 5909f0cc62c672c4cb78fd742892e0e9d74a9518 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 10 May 2024 14:23:37 -0500
Subject: [PATCH 03/35] initializing
---
docs/pages/blog/introducing-pigment-css.js | 7 +++++++
docs/pages/blog/introducing-pigment-css.md | 8 ++++++++
2 files changed, 15 insertions(+)
create mode 100644 docs/pages/blog/introducing-pigment-css.js
create mode 100644 docs/pages/blog/introducing-pigment-css.md
diff --git a/docs/pages/blog/introducing-pigment-css.js b/docs/pages/blog/introducing-pigment-css.js
new file mode 100644
index 00000000000000..2c643a7f0c6647
--- /dev/null
+++ b/docs/pages/blog/introducing-pigment-css.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './introducing-pigment-css.md?muiMarkdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
new file mode 100644
index 00000000000000..9d0188aaecad52
--- /dev/null
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -0,0 +1,8 @@
+---
+title: 'Introducing Pigment CSS'
+description: 'TK'
+date: 2024-05-14T00:00:00.000Z
+authors: ['samuelsycamore']
+tags: ['Pigment CSS']
+card: false
+---
From a52212824ebcbe7ff0d918784d369e027d53e4a4 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 10 May 2024 14:33:02 -0500
Subject: [PATCH 04/35] outline
---
docs/pages/blog/introducing-pigment-css.md | 32 ++++++++++++++++++++++
1 file changed, 32 insertions(+)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 9d0188aaecad52..85ebed3e5f896e 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -6,3 +6,35 @@ authors: ['samuelsycamore']
tags: ['Pigment CSS']
card: false
---
+
+Introduction - start by stating the problem as clearly as possible: last genâs CSS-in-JS solutions are incompatible with the new paradigm of React Server Components and the Next.js App Router. Thatâs why we created Pigment CSS.
+
+## What are React Server Components?
+
+Briefly explain what RSCs are and why old CSS-in-JS solutions donât work with them.
+
+## Why Pigment CSS?
+
+Explain the shortcomings of Emotion/styled-components
+
+## How Pigment CSS works
+
+Show how Pigment CSS solves the problem outlined above. Explain how it works in 2-3 paragraphs with a few code snippets. Can derive this text from the doc on this topic.
+
+## Benefits of using Pigment CSS
+
+### Better performance
+
+Benchmarks - compare Pigment to Emotion and others
+
+### Familiar developer experience
+
+Use code snippets to show how similar it is to Emotion in terms of DX
+
+### Future-proof solution
+
+Elaborate on the idea that Material UI is keeping up with the latest and greatest React features, AND that Pigment is not exclusively for use with Material UI.
+
+## Get started with Pigment CSS
+
+Conclude by telling users where to go and what to do to get started. Link to Next.js and Vite starters. Invite users to star the repo and open issues.
\ No newline at end of file
From cc8681f8d096134c055e79164de4fd455203ca07 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 10 May 2024 14:45:48 -0500
Subject: [PATCH 05/35] dedupe and prettier
---
docs/pages/blog/introducing-pigment-css.md | 4 +-
pnpm-lock.yaml | 84 +++++++++++++---------
2 files changed, 51 insertions(+), 37 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 85ebed3e5f896e..5e0bb88cab964f 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -33,8 +33,8 @@ Use code snippets to show how similar it is to Emotion in terms of DX
### Future-proof solution
-Elaborate on the idea that Material UI is keeping up with the latest and greatest React features, AND that Pigment is not exclusively for use with Material UI.
+Elaborate on the idea that Material UI is keeping up with the latest and greatest React features, AND that Pigment is not exclusively for use with Material UI.
## Get started with Pigment CSS
-Conclude by telling users where to go and what to do to get started. Link to Next.js and Vite starters. Invite users to star the repo and open issues.
\ No newline at end of file
+Conclude by telling users where to go and what to do to get started. Link to Next.js and Vite starters. Invite users to star the repo and open issues.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee122eea0ba2d1..04fe2d466954e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -394,7 +394,7 @@ importers:
version: link:../local-ui-lib
next:
specifier: latest
- version: 14.1.4(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+ version: 14.2.3(@babel/core@7.24.4)(@playwright/test@1.42.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
react:
specifier: ^18.2.0
version: 18.2.0
@@ -5952,8 +5952,8 @@ packages:
/@next/env@13.5.1:
resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==}
- /@next/env@14.1.4:
- resolution: {integrity: sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==}
+ /@next/env@14.2.3:
+ resolution: {integrity: sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==}
dev: false
/@next/eslint-plugin-next@14.1.4:
@@ -5970,8 +5970,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-darwin-arm64@14.1.4:
- resolution: {integrity: sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==}
+ /@next/swc-darwin-arm64@14.2.3:
+ resolution: {integrity: sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -5987,8 +5987,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-darwin-x64@14.1.4:
- resolution: {integrity: sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==}
+ /@next/swc-darwin-x64@14.2.3:
+ resolution: {integrity: sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -6004,8 +6004,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-arm64-gnu@14.1.4:
- resolution: {integrity: sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==}
+ /@next/swc-linux-arm64-gnu@14.2.3:
+ resolution: {integrity: sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -6021,8 +6021,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-arm64-musl@14.1.4:
- resolution: {integrity: sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==}
+ /@next/swc-linux-arm64-musl@14.2.3:
+ resolution: {integrity: sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -6038,8 +6038,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-x64-gnu@14.1.4:
- resolution: {integrity: sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==}
+ /@next/swc-linux-x64-gnu@14.2.3:
+ resolution: {integrity: sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -6055,8 +6055,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-x64-musl@14.1.4:
- resolution: {integrity: sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==}
+ /@next/swc-linux-x64-musl@14.2.3:
+ resolution: {integrity: sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -6072,8 +6072,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-arm64-msvc@14.1.4:
- resolution: {integrity: sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==}
+ /@next/swc-win32-arm64-msvc@14.2.3:
+ resolution: {integrity: sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -6089,8 +6089,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-ia32-msvc@14.1.4:
- resolution: {integrity: sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==}
+ /@next/swc-win32-ia32-msvc@14.2.3:
+ resolution: {integrity: sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
@@ -6106,8 +6106,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-x64-msvc@14.1.4:
- resolution: {integrity: sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==}
+ /@next/swc-win32-x64-msvc@14.2.3:
+ resolution: {integrity: sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -6706,7 +6706,6 @@ packages:
hasBin: true
dependencies:
playwright: 1.42.1
- dev: true
/@polka/url@1.0.0-next.21:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
@@ -7647,11 +7646,22 @@ packages:
'@styled-system/css': 5.1.5
dev: false
+ /@swc/counter@0.1.3:
+ resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+ dev: false
+
/@swc/helpers@0.5.2:
resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
dependencies:
tslib: 2.6.2
+ /@swc/helpers@0.5.5:
+ resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
+ dependencies:
+ '@swc/counter': 0.1.3
+ tslib: 2.6.2
+ dev: false
+
/@szmarczak/http-timer@4.0.6:
resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
engines: {node: '>=10'}
@@ -16722,23 +16732,27 @@ packages:
- '@babel/core'
- babel-plugin-macros
- /next@14.1.4(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==}
+ /next@14.2.3(@babel/core@7.24.4)(@playwright/test@1.42.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==}
engines: {node: '>=18.17.0'}
hasBin: true
peerDependencies:
'@opentelemetry/api': ^1.1.0
+ '@playwright/test': ^1.41.2
react: ^18.2.0
react-dom: ^18.2.0
sass: ^1.3.0
peerDependenciesMeta:
'@opentelemetry/api':
optional: true
+ '@playwright/test':
+ optional: true
sass:
optional: true
dependencies:
- '@next/env': 14.1.4
- '@swc/helpers': 0.5.2
+ '@next/env': 14.2.3
+ '@playwright/test': 1.42.1
+ '@swc/helpers': 0.5.5
busboy: 1.6.0
caniuse-lite: 1.0.30001599
graceful-fs: 4.2.11
@@ -16747,15 +16761,15 @@ packages:
react-dom: 18.2.0(react@18.2.0)
styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0)
optionalDependencies:
- '@next/swc-darwin-arm64': 14.1.4
- '@next/swc-darwin-x64': 14.1.4
- '@next/swc-linux-arm64-gnu': 14.1.4
- '@next/swc-linux-arm64-musl': 14.1.4
- '@next/swc-linux-x64-gnu': 14.1.4
- '@next/swc-linux-x64-musl': 14.1.4
- '@next/swc-win32-arm64-msvc': 14.1.4
- '@next/swc-win32-ia32-msvc': 14.1.4
- '@next/swc-win32-x64-msvc': 14.1.4
+ '@next/swc-darwin-arm64': 14.2.3
+ '@next/swc-darwin-x64': 14.2.3
+ '@next/swc-linux-arm64-gnu': 14.2.3
+ '@next/swc-linux-arm64-musl': 14.2.3
+ '@next/swc-linux-x64-gnu': 14.2.3
+ '@next/swc-linux-x64-musl': 14.2.3
+ '@next/swc-win32-arm64-msvc': 14.2.3
+ '@next/swc-win32-ia32-msvc': 14.2.3
+ '@next/swc-win32-x64-msvc': 14.2.3
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros
From accf09b014a119358aa524b56c773eef53507265 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 10 May 2024 14:50:22 -0500
Subject: [PATCH 06/35] rever pnpm lockfile
---
pnpm-lock.yaml | 84 +++++++++++++++++++++-----------------------------
1 file changed, 35 insertions(+), 49 deletions(-)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 04fe2d466954e9..ee122eea0ba2d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -394,7 +394,7 @@ importers:
version: link:../local-ui-lib
next:
specifier: latest
- version: 14.2.3(@babel/core@7.24.4)(@playwright/test@1.42.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+ version: 14.1.4(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
react:
specifier: ^18.2.0
version: 18.2.0
@@ -5952,8 +5952,8 @@ packages:
/@next/env@13.5.1:
resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==}
- /@next/env@14.2.3:
- resolution: {integrity: sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==}
+ /@next/env@14.1.4:
+ resolution: {integrity: sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==}
dev: false
/@next/eslint-plugin-next@14.1.4:
@@ -5970,8 +5970,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-darwin-arm64@14.2.3:
- resolution: {integrity: sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==}
+ /@next/swc-darwin-arm64@14.1.4:
+ resolution: {integrity: sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -5987,8 +5987,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-darwin-x64@14.2.3:
- resolution: {integrity: sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==}
+ /@next/swc-darwin-x64@14.1.4:
+ resolution: {integrity: sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -6004,8 +6004,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-arm64-gnu@14.2.3:
- resolution: {integrity: sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==}
+ /@next/swc-linux-arm64-gnu@14.1.4:
+ resolution: {integrity: sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -6021,8 +6021,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-arm64-musl@14.2.3:
- resolution: {integrity: sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==}
+ /@next/swc-linux-arm64-musl@14.1.4:
+ resolution: {integrity: sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -6038,8 +6038,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-x64-gnu@14.2.3:
- resolution: {integrity: sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==}
+ /@next/swc-linux-x64-gnu@14.1.4:
+ resolution: {integrity: sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -6055,8 +6055,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-x64-musl@14.2.3:
- resolution: {integrity: sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==}
+ /@next/swc-linux-x64-musl@14.1.4:
+ resolution: {integrity: sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -6072,8 +6072,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-arm64-msvc@14.2.3:
- resolution: {integrity: sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==}
+ /@next/swc-win32-arm64-msvc@14.1.4:
+ resolution: {integrity: sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -6089,8 +6089,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-ia32-msvc@14.2.3:
- resolution: {integrity: sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==}
+ /@next/swc-win32-ia32-msvc@14.1.4:
+ resolution: {integrity: sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
@@ -6106,8 +6106,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-x64-msvc@14.2.3:
- resolution: {integrity: sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==}
+ /@next/swc-win32-x64-msvc@14.1.4:
+ resolution: {integrity: sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -6706,6 +6706,7 @@ packages:
hasBin: true
dependencies:
playwright: 1.42.1
+ dev: true
/@polka/url@1.0.0-next.21:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
@@ -7646,22 +7647,11 @@ packages:
'@styled-system/css': 5.1.5
dev: false
- /@swc/counter@0.1.3:
- resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
- dev: false
-
/@swc/helpers@0.5.2:
resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
dependencies:
tslib: 2.6.2
- /@swc/helpers@0.5.5:
- resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
- dependencies:
- '@swc/counter': 0.1.3
- tslib: 2.6.2
- dev: false
-
/@szmarczak/http-timer@4.0.6:
resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
engines: {node: '>=10'}
@@ -16732,27 +16722,23 @@ packages:
- '@babel/core'
- babel-plugin-macros
- /next@14.2.3(@babel/core@7.24.4)(@playwright/test@1.42.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==}
+ /next@14.1.4(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==}
engines: {node: '>=18.17.0'}
hasBin: true
peerDependencies:
'@opentelemetry/api': ^1.1.0
- '@playwright/test': ^1.41.2
react: ^18.2.0
react-dom: ^18.2.0
sass: ^1.3.0
peerDependenciesMeta:
'@opentelemetry/api':
optional: true
- '@playwright/test':
- optional: true
sass:
optional: true
dependencies:
- '@next/env': 14.2.3
- '@playwright/test': 1.42.1
- '@swc/helpers': 0.5.5
+ '@next/env': 14.1.4
+ '@swc/helpers': 0.5.2
busboy: 1.6.0
caniuse-lite: 1.0.30001599
graceful-fs: 4.2.11
@@ -16761,15 +16747,15 @@ packages:
react-dom: 18.2.0(react@18.2.0)
styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0)
optionalDependencies:
- '@next/swc-darwin-arm64': 14.2.3
- '@next/swc-darwin-x64': 14.2.3
- '@next/swc-linux-arm64-gnu': 14.2.3
- '@next/swc-linux-arm64-musl': 14.2.3
- '@next/swc-linux-x64-gnu': 14.2.3
- '@next/swc-linux-x64-musl': 14.2.3
- '@next/swc-win32-arm64-msvc': 14.2.3
- '@next/swc-win32-ia32-msvc': 14.2.3
- '@next/swc-win32-x64-msvc': 14.2.3
+ '@next/swc-darwin-arm64': 14.1.4
+ '@next/swc-darwin-x64': 14.1.4
+ '@next/swc-linux-arm64-gnu': 14.1.4
+ '@next/swc-linux-arm64-musl': 14.1.4
+ '@next/swc-linux-x64-gnu': 14.1.4
+ '@next/swc-linux-x64-musl': 14.1.4
+ '@next/swc-win32-arm64-msvc': 14.1.4
+ '@next/swc-win32-ia32-msvc': 14.1.4
+ '@next/swc-win32-x64-msvc': 14.1.4
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros
From 702d8ae89e5542087d82897960d5362cb3a9e959 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 10 May 2024 15:41:36 -0500
Subject: [PATCH 07/35] title
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 5e0bb88cab964f..dea192be1fe15c 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,5 +1,5 @@
---
-title: 'Introducing Pigment CSS'
+title: 'Introducing Pigment CSS: the next generaton of CSS-in-JS'
description: 'TK'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
From e41dc621edbacc834c60398368969972820298f5 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 10 May 2024 15:55:55 -0500
Subject: [PATCH 08/35] straight quotes
---
docs/pages/blog/introducing-pigment-css.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index dea192be1fe15c..1228c22e2628d0 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -7,11 +7,11 @@ tags: ['Pigment CSS']
card: false
---
-Introduction - start by stating the problem as clearly as possible: last genâs CSS-in-JS solutions are incompatible with the new paradigm of React Server Components and the Next.js App Router. Thatâs why we created Pigment CSS.
+Introduction - start by stating the problem as clearly as possible: last gen's CSS-in-JS solutions are incompatible with the new paradigm of React Server Components and the Next.js App Router. That's why we created Pigment CSS.
## What are React Server Components?
-Briefly explain what RSCs are and why old CSS-in-JS solutions donât work with them.
+Briefly explain what RSCs are and why old CSS-in-JS solutions don't work with them.
## Why Pigment CSS?
From c25dfdb31710edacf011aebca4c711590160eb9f Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 08:24:43 -0500
Subject: [PATCH 09/35] intro first pass, nbsps
---
docs/pages/blog/introducing-pigment-css.md | 28 +++++++++++++++-------
1 file changed, 19 insertions(+), 9 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 1228c22e2628d0..d4673e26e328e6 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,27 +1,37 @@
---
-title: 'Introducing Pigment CSS: the next generaton of CSS-in-JS'
+title: 'Introducing Pigment CSS: the next generaton of CSS-in-JS'
description: 'TK'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
-tags: ['Pigment CSS']
+tags: ['Pigment CSS']
card: false
---
-Introduction - start by stating the problem as clearly as possible: last gen's CSS-in-JS solutions are incompatible with the new paradigm of React Server Components and the Next.js App Router. That's why we created Pigment CSS.
+In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to the way they operate to support the latest patterns and reap the potential gains in performance.
+
+And 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.
+
+For a library as widely used as Material UI, the biggest challenge to keeping up with the times is to do so while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build components.
+
+That's where Pigment CSS comes in.
+
+Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build time.
+With Pigment CSS you get the latest and greatest advancements in CSS along with RSC compatibility, _plus_ significant performance improvements when compared with Emotion in Material UI v5.
+And though it's specially tailored to meet the needs of Material UI users, it's important to note that Pigment CSS can be used with _any_ React component library you prefer.
## What are React Server Components?
Briefly explain what RSCs are and why old CSS-in-JS solutions don't work with them.
-## Why Pigment CSS?
+## Why Pigment CSS?
Explain the shortcomings of Emotion/styled-components
-## How Pigment CSS works
+## How Pigment CSS works
-Show how Pigment CSS solves the problem outlined above. Explain how it works in 2-3 paragraphs with a few code snippets. Can derive this text from the doc on this topic.
+Show how Pigment CSS solves the problem outlined above. Explain how it works in 2-3 paragraphs with a few code snippets. Can derive this text from the doc on this topic.
-## Benefits of using Pigment CSS
+## Benefits of using Pigment CSS
### Better performance
@@ -33,8 +43,8 @@ Use code snippets to show how similar it is to Emotion in terms of DX
### Future-proof solution
-Elaborate on the idea that Material UI is keeping up with the latest and greatest React features, AND that Pigment is not exclusively for use with Material UI.
+Elaborate on the idea that Material UI is keeping up with the latest and greatest React features, AND that Pigment is not exclusively for use with Material UI.
-## Get started with Pigment CSS
+## Get started with Pigment CSS
Conclude by telling users where to go and what to do to get started. Link to Next.js and Vite starters. Invite users to star the repo and open issues.
From db5806bce27f186777bc23f16e056156a0a640b8 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 11:12:32 -0500
Subject: [PATCH 10/35] why pigment
---
docs/pages/blog/introducing-pigment-css.md | 33 ++++++++++++++++------
1 file changed, 25 insertions(+), 8 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index d4673e26e328e6..6a4c1d22c8a6ef 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -8,24 +8,41 @@ card: false
---
In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to the way they operate to support the latest patterns and reap the potential gains in performance.
+Trouble is, the "traditional" CSS-in-JS solutions we rely on, like Emotion and styled-componentsâcollectively favored by nearly half of the React ecosystemâaren't able to come along with us.
-And 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.
-
-For a library as widely used as Material UI, the biggest challenge to keeping up with the times is to do so while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build components.
+For a library as widely used as Material UI, the biggest challenge to keeping up with the times is to do so while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
That's where Pigment CSS comes in.
Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build time.
With Pigment CSS you get the latest and greatest advancements in CSS along with RSC compatibility, _plus_ significant performance improvements when compared with Emotion in Material UI v5.
-And though it's specially tailored to meet the needs of Material UI users, it's important to note that Pigment CSS can be used with _any_ React component library you prefer.
+And though it's specially tailored to meet the needs of Material UI users, Pigment CSS can be used with _any_ React component library you prefer.
-## What are React Server Components?
+## Why Pigment CSS?
-Briefly explain what RSCs are and why old CSS-in-JS solutions don't work with them.
+### Traditional CSS-in-JS is not enough
-## Why Pigment CSS?
+Emotion made a lot of sense for Material UI v5 in late 2021, but so much has changed in the React ecosystem since then.
+In early 2023 React introduced Server Components, and Next.js offered the first implementation of the new spec with the App Router shortly thereafter.
+
+RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully rendered at build time so we don't have to pass that burden on to the client at runtime.
+But working with RSCs requires us to let go of familiar APIs like `useContext`, which in turn becomes a major blocker for using the last generation's style engines like Emotion that rely heavily on this hook for theming.
+
+### Other options don't meet our needs
+
+For those of us who are perfectly happy with the patterns we know and love in CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again.
+We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class namesâso Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences.
+
+### Material UI is a unique use case
+
+Material UI is downloaded millions of times per month and is one of the most rigorously battle-tested UI libraries on the internet, with a GitHub history spanning all the way back to 2014.
+It's had to make some massive changes along the way to keep up with the times; most recently, migrating from JSS to Emotion from v4 to v5.
+While those breaking changes did bring many benefits overall, they unfortunately came with a notoriously painful migration experience.
+
+We learned our lesson!
+We can't do that to our users again.
-Explain the shortcomings of Emotion/styled-components
+So when it came time to seek out a new way to generate styles, we knew we needed to keep the composition and syntax as similar as possible to Emotion and styled-components, to minimize friction when migrating.
## How Pigment CSS works
From f4eb4f77ac6a52ac197bc27349612ed9914144e2 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 11:35:48 -0500
Subject: [PATCH 11/35] how pigment works
---
docs/pages/blog/introducing-pigment-css.md | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 6a4c1d22c8a6ef..b0b16134241628 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -28,6 +28,10 @@ In early 2023 React introduced Server Components, and Next.js offered the first
RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully rendered at build time so we don't have to pass that burden on to the client at runtime.
But working with RSCs requires us to let go of familiar APIs like `useContext`, which in turn becomes a major blocker for using the last generation's style engines like Emotion that rely heavily on this hook for theming.
+:::info
+To learn more about RSCs, we highly recommend reading [Making Sense of React Server Components](https://www.joshwcomeau.com/react/server-components/) by Josh Comeau.
+:::
+
### Other options don't meet our needs
For those of us who are perfectly happy with the patterns we know and love in CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again.
@@ -46,7 +50,18 @@ So when it came time to seek out a new way to generate styles, we knew we needed
## How Pigment CSS works
-Show how Pigment CSS solves the problem outlined above. Explain how it works in 2-3 paragraphs with a few code snippets. Can derive this text from the doc on this topic.
+Pigment CSS is a zero-runtime CSS-in-JS library.
+This means it does not have access to the end user's browser runtime which would be necessary to generate and insert authored CSS at runtime.
+Instead, it does all its processing at build time to pre-generate the CSS which then becomes part of the output bundle.
+
+Pigment CSS is built on top of the [WyW-in-JS](https://wyw-in-js.dev/) library that also powers [Linaria](https://linaria.dev/).
+It features a [processor](https://wyw-in-js.dev/how-to/custom-tagged-template#creating-a-processor) which makes it possible to create custom logic that's triggered by the presence of different imports from the library.
+The processor looks through the source code for `styled()`, `css()`, and other function calls and extracts the arguments to be evaluated.
+These values are then handed back to Pigment CSS for additional parsing and evaluation.
+
+:::info
+Check out [How Pigment CSS works](https://github.com/mui/pigment-css/blob/master/HOW_PIGMENT_CSS_WORKS.md) for complete details.
+:::
## Benefits of using Pigment CSS
From 4c017191a96494913b712bea8492918ecd8cf8f6 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 13:02:36 -0500
Subject: [PATCH 12/35] tailwind nbsp
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index b0b16134241628..81be5fef63c419 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -35,7 +35,7 @@ To learn more about RSCs, we highly recommend reading [Making Sense of React Ser
### Other options don't meet our needs
For those of us who are perfectly happy with the patterns we know and love in CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again.
-We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class namesâso Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences.
+We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class namesâso Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences.
### Material UI is a unique use case
From 215673e562f931f8a0dfd337c95ad7fe60e9a1b1 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 13:20:47 -0500
Subject: [PATCH 13/35] benefits
---
docs/pages/blog/introducing-pigment-css.md | 18 +++++++++++-------
1 file changed, 11 insertions(+), 7 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 81be5fef63c419..889bd51f061398 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -32,11 +32,6 @@ But working with RSCs requires us to let go of familiar APIs like `useContext`,
To learn more about RSCs, we highly recommend reading [Making Sense of React Server Components](https://www.joshwcomeau.com/react/server-components/) by Josh Comeau.
:::
-### Other options don't meet our needs
-
-For those of us who are perfectly happy with the patterns we know and love in CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again.
-We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class namesâso Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences.
-
### Material UI is a unique use case
Material UI is downloaded millions of times per month and is one of the most rigorously battle-tested UI libraries on the internet, with a GitHub history spanning all the way back to 2014.
@@ -48,10 +43,14 @@ We can't do that to our users again.
So when it came time to seek out a new way to generate styles, we knew we needed to keep the composition and syntax as similar as possible to Emotion and styled-components, to minimize friction when migrating.
+### Other options don't meet our needs
+
+For those of us who are perfectly happy with the patterns we know and love in CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again.
+We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class namesâso Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences.
+
## How Pigment CSS works
-Pigment CSS is a zero-runtime CSS-in-JS library.
-This means it does not have access to the end user's browser runtime which would be necessary to generate and insert authored CSS at runtime.
+Pigment CSS is a zero-runtime CSS-in-JS library: This means it doesn't have access to the end user's browser runtime, which would be necessary to generate and insert authored CSS at runtime.
Instead, it does all its processing at build time to pre-generate the CSS which then becomes part of the output bundle.
Pigment CSS is built on top of the [WyW-in-JS](https://wyw-in-js.dev/) library that also powers [Linaria](https://linaria.dev/).
@@ -65,6 +64,11 @@ Check out [How Pigment CSS works](https://github.com/mui/pigment-css/blob/maste
## Benefits of using Pigment CSS
+For Material UI users, the benefits of adopting Pigment CSS\* are clear: your users get better performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles.
+
+_\*These benefits extend to other component libraries beyond Material UI as well, but that's our focus for the sections that follow._
+_We intend for Pigment CSS to be a viable solution for the React ecosystem as a whole, but you can understand why we're prioritizing Material UI during early development._
+
### Better performance
Benchmarks - compare Pigment to Emotion and others
From f661b38f104456aa9989adde6ab9e27cae32b49a Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 13:21:55 -0500
Subject: [PATCH 14/35] for material ui
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 889bd51f061398..b2a01d32df4a84 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,5 +1,5 @@
---
-title: 'Introducing Pigment CSS: the next generaton of CSS-in-JS'
+title: 'Introducing Pigment CSS: the next generaton of CSS-in-JS for Material UI'
description: 'TK'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
From 7c4699b1b9a2217cad74b79d23a1f0336705d3bf Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 13:22:43 -0500
Subject: [PATCH 15/35] typo
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index b2a01d32df4a84..b052e02fb81505 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,5 +1,5 @@
---
-title: 'Introducing Pigment CSS: the next generaton of CSS-in-JS for Material UI'
+title: 'Introducing Pigment CSS: the next generation of CSS-in-JS for Material UI'
description: 'TK'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
From 7396c5092acf9c35769d9e133fdea46d4a5b581c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 14:18:22 -0500
Subject: [PATCH 16/35] state of css
---
docs/pages/blog/introducing-pigment-css.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index b052e02fb81505..8a6f2582c7f441 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -8,7 +8,9 @@ card: false
---
In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to the way they operate to support the latest patterns and reap the potential gains in performance.
-Trouble is, the "traditional" CSS-in-JS solutions we rely on, like Emotion and styled-componentsâcollectively favored by nearly half of the React ecosystemâaren't able to come along with us.
+
+Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us.
+And with nearly 50% of respondents indicating they use styled-components in [State of CSS 2023](https://2023.stateofcss.com/en-US/css-in-js/), we're looking at a whole lot of developers who have no clear path forward from here.
For a library as widely used as Material UI, the biggest challenge to keeping up with the times is to do so while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
From 3712171a2581a61cbcf314c6d8c8d39d2f085e6c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 14:25:01 -0500
Subject: [PATCH 17/35] briefly clarify whys in intro
---
docs/pages/blog/introducing-pigment-css.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 8a6f2582c7f441..ed6a8635aed03e 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -7,9 +7,9 @@ tags: ['Pigment CSS']
card: false
---
-In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to the way they operate to support the latest patterns and reap the potential gains in performance.
+In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes for better performance by moving more of the work of rendering the UI from run time to build time.
-Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us.
+Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens at run time.
And with nearly 50% of respondents indicating they use styled-components in [State of CSS 2023](https://2023.stateofcss.com/en-US/css-in-js/), we're looking at a whole lot of developers who have no clear path forward from here.
For a library as widely used as Material UI, the biggest challenge to keeping up with the times is to do so while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
From 89042b8dfcab1a869f4d1b42508d408a8415d0fb Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 14:26:02 -0500
Subject: [PATCH 18/35] rephrasing a little
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index ed6a8635aed03e..5725ed5dd60f20 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -7,7 +7,7 @@ tags: ['Pigment CSS']
card: false
---
-In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes for better performance by moving more of the work of rendering the UI from run time to build time.
+In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering the UI from run time to build time.
Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens at run time.
And with nearly 50% of respondents indicating they use styled-components in [State of CSS 2023](https://2023.stateofcss.com/en-US/css-in-js/), we're looking at a whole lot of developers who have no clear path forward from here.
From 0325259265bbc4d524a6ab0371a4a0bce6889549 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 14:57:30 -0500
Subject: [PATCH 19/35] perf, future
---
docs/pages/blog/introducing-pigment-css.md | 25 +++++++++++++++-------
1 file changed, 17 insertions(+), 8 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 5725ed5dd60f20..16f9bc3418f89e 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -10,9 +10,9 @@ card: false
In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering the UI from run time to build time.
Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens at run time.
-And with nearly 50% of respondents indicating they use styled-components in [State of CSS 2023](https://2023.stateofcss.com/en-US/css-in-js/), we're looking at a whole lot of developers who have no clear path forward from here.
+And with nearly 50% of respondents indicating they use styled-components in [State of CSS 2023](https://2023.stateofcss.com/en-US/css-in-js/), we're looking at a whole lot of React developers who have no clear path forward from here.
-For a library as widely used as Material UI, the biggest challenge to keeping up with the times is to do so while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
+For a library as widely used as Material UI, the biggest challenge is to stay up-to-date while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
That's where Pigment CSS comes in.
@@ -27,7 +27,7 @@ And though it's specially tailored to meet the needs of Material UI users, Pigm
Emotion made a lot of sense for Material UI v5 in late 2021, but so much has changed in the React ecosystem since then.
In early 2023 React introduced Server Components, and Next.js offered the first implementation of the new spec with the App Router shortly thereafter.
-RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully rendered at build time so we don't have to pass that burden on to the client at runtime.
+RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully rendered at build time so we don't have to pass that burden on to the client at run time.
But working with RSCs requires us to let go of familiar APIs like `useContext`, which in turn becomes a major blocker for using the last generation's style engines like Emotion that rely heavily on this hook for theming.
:::info
@@ -43,7 +43,7 @@ While those breaking changes did bring many benefits overall, they unfortunately
We learned our lesson!
We can't do that to our users again.
-So when it came time to seek out a new way to generate styles, we knew we needed to keep the composition and syntax as similar as possible to Emotion and styled-components, to minimize friction when migrating.
+So when it came time to seek out a new way to generate styles, we knew we needed to keep the syntax and authoring experience as similar as possible to Emotion and styled-components, to minimize friction when migrating.
### Other options don't meet our needs
@@ -52,7 +52,7 @@ We like the DX of colocated styles, and we'd rather not bloat the DOM with atomi
## How Pigment CSS works
-Pigment CSS is a zero-runtime CSS-in-JS library: This means it doesn't have access to the end user's browser runtime, which would be necessary to generate and insert authored CSS at runtime.
+Pigment CSS is a zero-runtime CSS-in-JS library: This means it doesn't have access to the end user's browser runtime, which would be necessary to generate and insert authored CSS at run time.
Instead, it does all its processing at build time to pre-generate the CSS which then becomes part of the output bundle.
Pigment CSS is built on top of the [WyW-in-JS](https://wyw-in-js.dev/) library that also powers [Linaria](https://linaria.dev/).
@@ -66,14 +66,19 @@ Check out [How Pigment CSS works](https://github.com/mui/pigment-css/blob/maste
## Benefits of using Pigment CSS
-For Material UI users, the benefits of adopting Pigment CSS\* are clear: your users get better performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles.
+For Material UI users, the benefits of adopting Pigment CSS\* are clear: your end users get better performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles.
_\*These benefits extend to other component libraries beyond Material UI as well, but that's our focus for the sections that follow._
_We intend for Pigment CSS to be a viable solution for the React ecosystem as a whole, but you can understand why we're prioritizing Material UI during early development._
### Better performance
-Benchmarks - compare Pigment to Emotion and others
+When comparing the same Material UI app built with Next.js and either Emotion or Pigment CSS, the latter led to:
+
+- 20% reduction in first load JS (104 kB vs. 131 kB)
+- 9% decrease in First Contentful Paint (455 ms vs. 503 ms)
+- 15% reduction in Time To First Byte
+- 7.5% reduction in page HTML (14.7 kB vs. 15.9 kB)
### Familiar developer experience
@@ -81,7 +86,11 @@ Use code snippets to show how similar it is to Emotion in terms of DX
### Future-proof solution
-Elaborate on the idea that Material UI is keeping up with the latest and greatest React features, AND that Pigment is not exclusively for use with Material UI.
+Though we're still quite early in the era of RSCs, it seems inevitable that the ecosystem as a whole will converge on this new paradigm for React.
+Next.js gave us our first glimpse with the App Router; RedwoodJS [recently released their own implementation](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and many other frameworks and meta-frameworks are currently working out POCs and RFCs to catch up.
+Regardless of how quickly RSCs catch on among developers, it's clear that library maintainers need to support [the two Reacts](https://overreacted.io/the-two-reacts/) (client-side and server-side) to stay relevant in the future.
+
+Pigment CSS, then, is yet another bet from MUI on the longevity and sustainability of the React ecosystemâand a promise that we'll continue to innovate in this space for years to come.
## Get started with Pigment CSS
From a6a356d2b473f2ff65fb3d17771f0890426b1863 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 15:46:21 -0500
Subject: [PATCH 20/35] first draft complete
---
docs/pages/blog/introducing-pigment-css.md | 39 ++++++++++++++++------
1 file changed, 28 insertions(+), 11 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 16f9bc3418f89e..daeabdf435df8e 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,16 +1,16 @@
---
title: 'Introducing Pigment CSS: the next generation of CSS-in-JS for Material UI'
-description: 'TK'
+description: 'Pigment CSS offers significant performance gains along with RSC and App Router support.'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
tags: ['Pigment CSS']
card: false
---
-In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering the UI from run time to build time.
+In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from run time to build time.
Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens at run time.
-And with nearly 50% of respondents indicating they use styled-components in [State of CSS 2023](https://2023.stateofcss.com/en-US/css-in-js/), we're looking at a whole lot of React developers who have no clear path forward from here.
+And with nearly 50% of respondents in the [State of CSS 2023 survey](https://2023.stateofcss.com/en-US/css-in-js/) indicating they use styled-components, we're looking at a whole lot of React developers with no clear path forward from here.
For a library as widely used as Material UI, the biggest challenge is to stay up-to-date while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
@@ -37,7 +37,7 @@ To learn more about RSCs, we highly recommend reading [Making Sense of React Ser
### Material UI is a unique use case
Material UI is downloaded millions of times per month and is one of the most rigorously battle-tested UI libraries on the internet, with a GitHub history spanning all the way back to 2014.
-It's had to make some massive changes along the way to keep up with the times; most recently, migrating from JSS to Emotion from v4 to v5.
+It's had to make some massive changes along the way to keep up with the times; most recently, moving from JSS to Emotion from v4 to v5.
While those breaking changes did bring many benefits overall, they unfortunately came with a notoriously painful migration experience.
We learned our lesson!
@@ -47,7 +47,7 @@ So when it came time to seek out a new way to generate styles, we knew we needed
### Other options don't meet our needs
-For those of us who are perfectly happy with the patterns we know and love in CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again.
+For those of us who are perfectly happy with the patterns we know and love from CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again.
We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class namesâso Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences.
## How Pigment CSS works
@@ -82,16 +82,33 @@ When comparing the same Material UI app built with Next.js and either Emotion o
### Familiar developer experience
-Use code snippets to show how similar it is to Emotion in terms of DX
+For developers migrating from Emotion or styled-components, you're probably already familiar with the most common patterns employed by Pigment CSS.
+`styled()` and `css()` are the two main functions used to define styles, and they mostly work the same as you'd expect them to (with some notable differences due to the nature of build-time CSS-in-JSâsee [Coming from Emotion or styled-components](https://github.com/mui/pigment-css/tree/master?tab=readme-ov-file#coming-from-emotion-or-styled-components) for details).
+
+We've also ported over the `sx` prop from MUI System, so you can still define styles directly in a given component, but now it's much more performant than before.
+And in Pigment CSS we've extended support for `sx` to include _all_ DOM nodesânot just Material UI componentsâso you don't need to wrap a simple `
` or `
` with a Box component to apply theme styles to it.
### Future-proof solution
-Though we're still quite early in the era of RSCs, it seems inevitable that the ecosystem as a whole will converge on this new paradigm for React.
-Next.js gave us our first glimpse with the App Router; RedwoodJS [recently released their own implementation](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and many other frameworks and meta-frameworks are currently working out POCs and RFCs to catch up.
-Regardless of how quickly RSCs catch on among developers, it's clear that library maintainers need to support [the two Reacts](https://overreacted.io/the-two-reacts/) (client-side and server-side) to stay relevant in the future.
+Though we're still quite early in RSC era, it seems inevitable that the ecosystem as a whole will converge on this new paradigm for React over time.
+Next.js gave us our first glimpse with the App Router; RedwoodJS [recently released their own implementation](https://redwoodjs.com/blog/rsc-now-in-redwoodjs); and many other frameworks and meta-frameworks are currently working out POCs and RFCs to catch up.
+Regardless of how quickly Server Components catch on among developers, it's clear that library maintainers now must support [the two Reacts](https://overreacted.io/the-two-reacts/) (client-side and server-side) to stay relevant into the future.
Pigment CSS, then, is yet another bet from MUI on the longevity and sustainability of the React ecosystemâand a promise that we'll continue to innovate in this space for years to come.
-## Get started with Pigment CSS
+And perhaps most importantly: because Pigment CSS is maintained by the same folks behind Material UI, we'll have a lot more control over how the tool evolves over time to continue to meet our users' needs.
+In a perfect world, this would be the last time you'd ever have to migrate your Material UI app to a new style engine.
+We'll do our best to make that a reality. đ¤
+
+## What's next
+
+Pigment CSS is currently in the early alpha stage of developmentâthe plan is to have a stable version ready to release alongside Material UI v6 later this year.
+When that happens, you'll have the choice to opt in to Pigment CSS incrementally after migrating to v6, giving you all the time you need to migrate on your own terms.
+
+That said, Pigment CSS is available now for experimentation, and we'd love for you to give it a try and let us know what you thinkâyour feedback at this stage could have a major impact on the final product.
+
+## Get started with Pigment CSS
-Conclude by telling users where to go and what to do to get started. Link to Next.js and Vite starters. Invite users to star the repo and open issues.
+Head to the [Pigment CSS repo](https://github.com/mui/pigment-css/) to learn how to set it up and start tinkering.
+Please feel free to [open a new issue](https://github.com/mui/pigment-css/issues) if you encounter any bugs or frustrations along the way.
+And while you're there, why not âď¸ star the repo âď¸ to let us know you're excited and help spread the word to others? đ
From e86ebf914a9cfac87be351ffaf27c22d14b070eb Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 16:06:54 -0500
Subject: [PATCH 21/35] run-time, build-time
---
docs/pages/blog/introducing-pigment-css.md | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index daeabdf435df8e..3537b2be6e0dbf 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -7,16 +7,16 @@ tags: ['Pigment CSS']
card: false
---
-In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from run time to build time.
+In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from run-time to build-time.
-Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens at run time.
+Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens at run-time.
And with nearly 50% of respondents in the [State of CSS 2023 survey](https://2023.stateofcss.com/en-US/css-in-js/) indicating they use styled-components, we're looking at a whole lot of React developers with no clear path forward from here.
For a library as widely used as Material UI, the biggest challenge is to stay up-to-date while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
That's where Pigment CSS comes in.
-Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build time.
+Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build-time.
With Pigment CSS you get the latest and greatest advancements in CSS along with RSC compatibility, _plus_ significant performance improvements when compared with Emotion in Material UI v5.
And though it's specially tailored to meet the needs of Material UI users, Pigment CSS can be used with _any_ React component library you prefer.
@@ -27,7 +27,7 @@ And though it's specially tailored to meet the needs of Material UI users, Pigm
Emotion made a lot of sense for Material UI v5 in late 2021, but so much has changed in the React ecosystem since then.
In early 2023 React introduced Server Components, and Next.js offered the first implementation of the new spec with the App Router shortly thereafter.
-RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully rendered at build time so we don't have to pass that burden on to the client at run time.
+RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully rendered at build-time so we don't have to pass that burden on to the client at run-time.
But working with RSCs requires us to let go of familiar APIs like `useContext`, which in turn becomes a major blocker for using the last generation's style engines like Emotion that rely heavily on this hook for theming.
:::info
@@ -52,8 +52,8 @@ We like the DX of colocated styles, and we'd rather not bloat the DOM with atomi
## How Pigment CSS works
-Pigment CSS is a zero-runtime CSS-in-JS library: This means it doesn't have access to the end user's browser runtime, which would be necessary to generate and insert authored CSS at run time.
-Instead, it does all its processing at build time to pre-generate the CSS which then becomes part of the output bundle.
+Pigment CSS is a zero-runtime CSS-in-JS library: This means it doesn't have access to the end user's browser runtime, which would be necessary to generate and insert authored CSS at run-time.
+Instead, it does all its processing at build-time to pre-generate the CSS which then becomes part of the output bundle.
Pigment CSS is built on top of the [WyW-in-JS](https://wyw-in-js.dev/) library that also powers [Linaria](https://linaria.dev/).
It features a [processor](https://wyw-in-js.dev/how-to/custom-tagged-template#creating-a-processor) which makes it possible to create custom logic that's triggered by the presence of different imports from the library.
@@ -90,9 +90,9 @@ And in Pigment CSS we've extended support for `sx` to include _all_ DOM nodes
### Future-proof solution
-Though we're still quite early in RSC era, it seems inevitable that the ecosystem as a whole will converge on this new paradigm for React over time.
+Though we're still quite early in the RSC era, it seems inevitable that the React ecosystem as a whole will converge on this new paradigm over time.
Next.js gave us our first glimpse with the App Router; RedwoodJS [recently released their own implementation](https://redwoodjs.com/blog/rsc-now-in-redwoodjs); and many other frameworks and meta-frameworks are currently working out POCs and RFCs to catch up.
-Regardless of how quickly Server Components catch on among developers, it's clear that library maintainers now must support [the two Reacts](https://overreacted.io/the-two-reacts/) (client-side and server-side) to stay relevant into the future.
+Regardless of how quickly Server Components catch on among developers, it's clear that library maintainers must now support [the two Reacts](https://overreacted.io/the-two-reacts/) (client-side and server-side) to stay relevant into the future.
Pigment CSS, then, is yet another bet from MUI on the longevity and sustainability of the React ecosystemâand a promise that we'll continue to innovate in this space for years to come.
From 48a33f36a6853c10e0a6d06bf6e0019470cc9621 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 16:07:36 -0500
Subject: [PATCH 22/35] nbsps
---
docs/pages/blog/introducing-pigment-css.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 3537b2be6e0dbf..799cb47e2a3fd5 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,5 +1,5 @@
---
-title: 'Introducing Pigment CSS: the next generation of CSS-in-JS for Material UI'
+title: 'Introducing Pigment CSS: the next generation of CSS-in-JS for Material UI'
description: 'Pigment CSS offers significant performance gains along with RSC and App Router support.'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
@@ -86,7 +86,7 @@ For developers migrating from Emotion or styled-components, you're probably alre
`styled()` and `css()` are the two main functions used to define styles, and they mostly work the same as you'd expect them to (with some notable differences due to the nature of build-time CSS-in-JSâsee [Coming from Emotion or styled-components](https://github.com/mui/pigment-css/tree/master?tab=readme-ov-file#coming-from-emotion-or-styled-components) for details).
We've also ported over the `sx` prop from MUI System, so you can still define styles directly in a given component, but now it's much more performant than before.
-And in Pigment CSS we've extended support for `sx` to include _all_ DOM nodesânot just Material UI componentsâso you don't need to wrap a simple `` or `
` with a Box component to apply theme styles to it.
+And in Pigment CSS we've extended support for `sx` to include _all_ DOM nodesânot just Material UI componentsâso you don't need to wrap a simple `` or `
` with a Box component to apply theme styles to it.
### Future-proof solution
@@ -97,7 +97,7 @@ Regardless of how quickly Server Components catch on among developers, it's clea
Pigment CSS, then, is yet another bet from MUI on the longevity and sustainability of the React ecosystemâand a promise that we'll continue to innovate in this space for years to come.
And perhaps most importantly: because Pigment CSS is maintained by the same folks behind Material UI, we'll have a lot more control over how the tool evolves over time to continue to meet our users' needs.
-In a perfect world, this would be the last time you'd ever have to migrate your Material UI app to a new style engine.
+In a perfect world, this would be the last time you'd ever have to migrate your Material UI app to a new style engine.
We'll do our best to make that a reality. đ¤
## What's next
@@ -107,8 +107,8 @@ When that happens, you'll have the choice to opt in to Pigment CSS incrementall
That said, Pigment CSS is available now for experimentation, and we'd love for you to give it a try and let us know what you thinkâyour feedback at this stage could have a major impact on the final product.
-## Get started with Pigment CSS
+## Get started with Pigment CSS
-Head to the [Pigment CSS repo](https://github.com/mui/pigment-css/) to learn how to set it up and start tinkering.
+Head to the [Pigment CSS repo](https://github.com/mui/pigment-css/) to learn how to set it up and start tinkering.
Please feel free to [open a new issue](https://github.com/mui/pigment-css/issues) if you encounter any bugs or frustrations along the way.
And while you're there, why not âď¸ star the repo âď¸ to let us know you're excited and help spread the word to others? đ
From b8696f072344b7724919ff08ffde587ce2b9f904 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 13 May 2024 16:26:45 -0500
Subject: [PATCH 23/35] more vale fixes
---
docs/pages/blog/introducing-pigment-css.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 799cb47e2a3fd5..89a3e28945542b 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -75,7 +75,7 @@ _We intend for Pigment CSS to be a viable solution for the React ecosystem as a
When comparing the same Material UI app built with Next.js and either Emotion or Pigment CSS, the latter led to:
-- 20% reduction in first load JS (104 kB vs. 131 kB)
+- 20% reduction in first load JavaScript (104 kB vs. 131 kB)
- 9% decrease in First Contentful Paint (455 ms vs. 503 ms)
- 15% reduction in Time To First Byte
- 7.5% reduction in page HTML (14.7 kB vs. 15.9 kB)
@@ -85,7 +85,7 @@ When comparing the same Material UI app built with Next.js and either Emotion o
For developers migrating from Emotion or styled-components, you're probably already familiar with the most common patterns employed by Pigment CSS.
`styled()` and `css()` are the two main functions used to define styles, and they mostly work the same as you'd expect them to (with some notable differences due to the nature of build-time CSS-in-JSâsee [Coming from Emotion or styled-components](https://github.com/mui/pigment-css/tree/master?tab=readme-ov-file#coming-from-emotion-or-styled-components) for details).
-We've also ported over the `sx` prop from MUI System, so you can still define styles directly in a given component, but now it's much more performant than before.
+We've also ported over the `sx` prop from MUIÂ System, so you can still define styles directly in a given component, but now it's much more performant than before.
And in Pigment CSS we've extended support for `sx` to include _all_ DOM nodesânot just Material UI componentsâso you don't need to wrap a simple `` or `
` with a Box component to apply theme styles to it.
### Future-proof solution
From c865606ffd2a12d7d632645e738687ceb5ad2a80 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Tue, 14 May 2024 08:17:14 -0500
Subject: [PATCH 24/35] Apply suggestions from code review
Co-authored-by: Brijesh Bittu
Co-authored-by: Marija Najdova
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
---
docs/pages/blog/introducing-pigment-css.md | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 89a3e28945542b..86a8e6a327c3c0 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -7,17 +7,17 @@ tags: ['Pigment CSS']
card: false
---
-In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from run-time to build-time.
+In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from client to server.
-Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens at run-time.
-And with nearly 50% of respondents in the [State of CSS 2023 survey](https://2023.stateofcss.com/en-US/css-in-js/) indicating they use styled-components, we're looking at a whole lot of React developers with no clear path forward from here.
+Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because so much of what they do happens on the client.
+And with nearly 70% of respondents in the [State of CSS 2023 survey](https://2023.stateofcss.com/en-US/css-in-js/) indicating they use styled-components and Emotion, we're looking at a whole lot of React developers with no clear path forward from here.
For a library as widely used as Material UI, the biggest challenge is to stay up-to-date while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components.
That's where Pigment CSS comes in.
Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build-time.
-With Pigment CSS you get the latest and greatest advancements in CSS along with RSC compatibility, _plus_ significant performance improvements when compared with Emotion in Material UI v5.
+With Pigment CSS you get the latest and greatest advancements in CSS along with RSC compatibility, _plus_ significant performance improvements when compared with Emotion, the styling engine used in Material UI v5.
And though it's specially tailored to meet the needs of Material UI users, Pigment CSS can be used with _any_ React component library you prefer.
## Why Pigment CSS?
@@ -27,7 +27,7 @@ And though it's specially tailored to meet the needs of Material UI users, Pigm
Emotion made a lot of sense for Material UI v5 in late 2021, but so much has changed in the React ecosystem since then.
In early 2023 React introduced Server Components, and Next.js offered the first implementation of the new spec with the App Router shortly thereafter.
-RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully rendered at build-time so we don't have to pass that burden on to the client at run-time.
+RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully renderable at build-time so we don't have to pass that burden on to the client at run-time.
But working with RSCs requires us to let go of familiar APIs like `useContext`, which in turn becomes a major blocker for using the last generation's style engines like Emotion that rely heavily on this hook for theming.
:::info
@@ -43,7 +43,7 @@ While those breaking changes did bring many benefits overall, they unfortunately
We learned our lesson!
We can't do that to our users again.
-So when it came time to seek out a new way to generate styles, we knew we needed to keep the syntax and authoring experience as similar as possible to Emotion and styled-components, to minimize friction when migrating.
+So when it came time to seek out a new way to generate styles, we knew we needed to keep the syntax and authoring experience as similar as possible to Emotion and styled-components, and provide codemods for most of the breaking changes, in order to minimize friction when migrating.
### Other options don't meet our needs
@@ -85,7 +85,7 @@ When comparing the same Material UI app built with Next.js and either Emotion o
For developers migrating from Emotion or styled-components, you're probably already familiar with the most common patterns employed by Pigment CSS.
`styled()` and `css()` are the two main functions used to define styles, and they mostly work the same as you'd expect them to (with some notable differences due to the nature of build-time CSS-in-JSâsee [Coming from Emotion or styled-components](https://github.com/mui/pigment-css/tree/master?tab=readme-ov-file#coming-from-emotion-or-styled-components) for details).
-We've also ported over the `sx` prop from MUIÂ System, so you can still define styles directly in a given component, but now it's much more performant than before.
+We've also ported over [the `sx` prop](/system/getting-started/the-sx-prop/) from MUIÂ System, so you can still define styles directly in a given component, but now it's much more performant than before.
And in Pigment CSS we've extended support for `sx` to include _all_ DOM nodesânot just Material UI componentsâso you don't need to wrap a simple `` or `
` with a Box component to apply theme styles to it.
### Future-proof solution
@@ -102,7 +102,7 @@ We'll do our best to make that a reality. đ¤
## What's next
-Pigment CSS is currently in the early alpha stage of developmentâthe plan is to have a stable version ready to release alongside Material UI v6 later this year.
+Pigment CSS is currently in the early alpha stage of developmentâthe plan is to have a fully featured version ready to release alongside Material UI v6 later this year.
When that happens, you'll have the choice to opt in to Pigment CSS incrementally after migrating to v6, giving you all the time you need to migrate on your own terms.
That said, Pigment CSS is available now for experimentation, and we'd love for you to give it a try and let us know what you thinkâyour feedback at this stage could have a major impact on the final product.
From 1271247c10481603ac674ebff18e188007fc1954 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Tue, 14 May 2024 09:43:32 -0500
Subject: [PATCH 25/35] title
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 86a8e6a327c3c0..464847e8c34dfc 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,5 +1,5 @@
---
-title: 'Introducing Pigment CSS: the next generation of CSS-in-JS for Material UI'
+title: 'Introducing Pigment CSS: the next generation of CSS-in-JS'
description: 'Pigment CSS offers significant performance gains along with RSC and App Router support.'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
From d14d96d5c0f7fe7b7da07cb46437360442635ff1 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Tue, 14 May 2024 09:58:55 -0500
Subject: [PATCH 26/35] review feedback
---
docs/pages/blog/introducing-pigment-css.md | 17 +++++++----------
1 file changed, 7 insertions(+), 10 deletions(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 464847e8c34dfc..85be8a961944c5 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -18,14 +18,14 @@ That's where Pigment CSS comes in.
Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build-time.
With Pigment CSS you get the latest and greatest advancements in CSS along with RSC compatibility, _plus_ significant performance improvements when compared with Emotion, the styling engine used in Material UI v5.
-And though it's specially tailored to meet the needs of Material UI users, Pigment CSS can be used with _any_ React component library you prefer.
+And though we're prioritizing the needs of Material UI users in early development, Pigment CSS can be used with _any_ React component library you prefer.
## Why Pigment CSS?
### Traditional CSS-in-JS is not enough
Emotion made a lot of sense for Material UI v5 in late 2021, but so much has changed in the React ecosystem since then.
-In early 2023 React introduced Server Components, and Next.js offered the first implementation of the new spec with the App Router shortly thereafter.
+After Next.js offered the first implementation of the React Server Components spec with [the App Router](https://nextjs.org/blog/next-13) towards the end of 2022, it became clear that there was a monumental shift on the horizon.
RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully renderable at build-time so we don't have to pass that burden on to the client at run-time.
But working with RSCs requires us to let go of familiar APIs like `useContext`, which in turn becomes a major blocker for using the last generation's style engines like Emotion that rely heavily on this hook for theming.
@@ -43,7 +43,7 @@ While those breaking changes did bring many benefits overall, they unfortunately
We learned our lesson!
We can't do that to our users again.
-So when it came time to seek out a new way to generate styles, we knew we needed to keep the syntax and authoring experience as similar as possible to Emotion and styled-components, and provide codemods for most of the breaking changes, in order to minimize friction when migrating.
+So when it came time to seek out a new way to generate styles, we knew we needed to keep the syntax and authoring experience as similar as possible to Emotion and styled-componentsâand provide codemods for most of the breaking changesâin order to minimize friction when migrating.
### Other options don't meet our needs
@@ -66,10 +66,7 @@ Check out [How Pigment CSS works](https://github.com/mui/pigment-css/blob/maste
## Benefits of using Pigment CSS
-For Material UI users, the benefits of adopting Pigment CSS\* are clear: your end users get better performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles.
-
-_\*These benefits extend to other component libraries beyond Material UI as well, but that's our focus for the sections that follow._
-_We intend for Pigment CSS to be a viable solution for the React ecosystem as a whole, but you can understand why we're prioritizing Material UI during early development._
+For users of Emotion and styled-components, the benefits of adopting Pigment CSS are clear: your end users get better performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles.
### Better performance
@@ -77,7 +74,7 @@ When comparing the same Material UI app built with Next.js and either Emotion o
- 20% reduction in first load JavaScript (104 kB vs. 131 kB)
- 9% decrease in First Contentful Paint (455 ms vs. 503 ms)
-- 15% reduction in Time To First Byte
+- 15% reduction in Time To First Byte (381.5 ms vs 447.5 ms)
- 7.5% reduction in page HTML (14.7 kB vs. 15.9 kB)
### Familiar developer experience
@@ -91,7 +88,7 @@ And in Pigment CSS we've extended support for `sx` to include _all_ DOM nodes
### Future-proof solution
Though we're still quite early in the RSC era, it seems inevitable that the React ecosystem as a whole will converge on this new paradigm over time.
-Next.js gave us our first glimpse with the App Router; RedwoodJS [recently released their own implementation](https://redwoodjs.com/blog/rsc-now-in-redwoodjs); and many other frameworks and meta-frameworks are currently working out POCs and RFCs to catch up.
+Next.js gave us our first glimpse with the App Router; RedwoodJS [recently released their own implementation](https://redwoodjs.com/blog/rsc-now-in-redwoodjs); and many other frameworks and meta-frameworks (like Remix) are currently working out [POCs and RFCs](https://github.com/remix-run/remix/discussions/8048) to catch up.
Regardless of how quickly Server Components catch on among developers, it's clear that library maintainers must now support [the two Reacts](https://overreacted.io/the-two-reacts/) (client-side and server-side) to stay relevant into the future.
Pigment CSS, then, is yet another bet from MUI on the longevity and sustainability of the React ecosystemâand a promise that we'll continue to innovate in this space for years to come.
@@ -103,7 +100,7 @@ We'll do our best to make that a reality. đ¤
## What's next
Pigment CSS is currently in the early alpha stage of developmentâthe plan is to have a fully featured version ready to release alongside Material UI v6 later this year.
-When that happens, you'll have the choice to opt in to Pigment CSS incrementally after migrating to v6, giving you all the time you need to migrate on your own terms.
+When that happens, you'll have the choice to opt in to Pigment CSS incrementally after upgrading to v6, giving you all the time you need to migrate on your own terms.
That said, Pigment CSS is available now for experimentation, and we'd love for you to give it a try and let us know what you thinkâyour feedback at this stage could have a major impact on the final product.
From 55ab13e45ee31fed7d86c733b4e96e151f3d865c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Tue, 14 May 2024 10:03:02 -0500
Subject: [PATCH 27/35] perf test app callout
---
docs/pages/blog/introducing-pigment-css.md | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 85be8a961944c5..8d926300950a7a 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -77,6 +77,11 @@ When comparing the same Material UI app built with Next.js and either Emotion o
- 15% reduction in Time To First Byte (381.5 ms vs 447.5 ms)
- 7.5% reduction in page HTML (14.7 kB vs. 15.9 kB)
+:::info
+Curious about where those performance numbers came from?
+[Check out this app](https://pigment-css-demo.vercel.app/perf) that compares Pigment CSS, Emotion, and styled-components across a variety of tests.
+:::
+
### Familiar developer experience
For developers migrating from Emotion or styled-components, you're probably already familiar with the most common patterns employed by Pigment CSS.
From 56cf3c9645a9c7fd12813b4483a6c850059520df Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Tue, 14 May 2024 10:10:53 -0500
Subject: [PATCH 28/35] nbsp
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 8d926300950a7a..3e291af22ce4a6 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -79,7 +79,7 @@ When comparing the same Material UI app built with Next.js and either Emotion o
:::info
Curious about where those performance numbers came from?
-[Check out this app](https://pigment-css-demo.vercel.app/perf) that compares Pigment CSS, Emotion, and styled-components across a variety of tests.
+[Check out this app](https://pigment-css-demo.vercel.app/perf) that compares Pigment CSS, Emotion, and styled-components across a variety of tests.
:::
### Familiar developer experience
From 00c43f7f8edf3d23d1f87e99af1710f739c07f7e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 14 May 2024 23:22:34 -0700
Subject: [PATCH 29/35] add Pigment as a tag
---
docs/lib/sourcing.ts | 1 +
docs/pages/blog/introducing-pigment-css.md | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
index 7ade883964584f..62eda396a074a4 100644
--- a/docs/lib/sourcing.ts
+++ b/docs/lib/sourcing.ts
@@ -40,6 +40,7 @@ const ALLOWED_TAGS = [
// Product tags
'Material UI',
'Base UI',
+ 'Pigment CSS',
'Joy UI',
'MUI X',
'MUI System',
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 3e291af22ce4a6..eff8f0032006ed 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -3,7 +3,7 @@ title: 'Introducing Pigment CSS: the next generation of CSS-in-JS'
description: 'Pigment CSS offers significant performance gains along with RSC and App Router support.'
date: 2024-05-14T00:00:00.000Z
authors: ['samuelsycamore']
-tags: ['Pigment CSS']
+tags: ['Pigment CSS']
card: false
---
From 41674b81a760039e54368c237314be7f0ee31fc9 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 14 May 2024 23:23:00 -0700
Subject: [PATCH 30/35] change publication date
---
docs/pages/blog/introducing-pigment-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index eff8f0032006ed..9dc9fb16551931 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -1,7 +1,7 @@
---
title: 'Introducing Pigment CSS: the next generation of CSS-in-JS'
description: 'Pigment CSS offers significant performance gains along with RSC and App Router support.'
-date: 2024-05-14T00:00:00.000Z
+date: 2024-05-15T00:00:00.000Z
authors: ['samuelsycamore']
tags: ['Pigment CSS']
card: false
From fb0abde73556996c15306034d364ec552df8d293 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 14 May 2024 23:32:26 -0700
Subject: [PATCH 31/35] add custom OG image
---
docs/pages/blog/introducing-pigment-css.md | 4 +++-
.../blog/introducing-pigment-css/card.png | Bin 0 -> 184363 bytes
2 files changed, 3 insertions(+), 1 deletion(-)
create mode 100644 docs/public/static/blog/introducing-pigment-css/card.png
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 9dc9fb16551931..0ae5bcec333fdc 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -4,7 +4,7 @@ description: 'Pigment CSS offers significant performance gains along with RSC a
date: 2024-05-15T00:00:00.000Z
authors: ['samuelsycamore']
tags: ['Pigment CSS']
-card: false
+manualCard: true
---
In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from client to server.
@@ -16,6 +16,8 @@ For a library as widely used as Material UI, the biggest challenge is to stay u
That's where Pigment CSS comes in.
+
+
Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build-time.
With Pigment CSS you get the latest and greatest advancements in CSS along with RSC compatibility, _plus_ significant performance improvements when compared with Emotion, the styling engine used in Material UI v5.
And though we're prioritizing the needs of Material UI users in early development, Pigment CSS can be used with _any_ React component library you prefer.
diff --git a/docs/public/static/blog/introducing-pigment-css/card.png b/docs/public/static/blog/introducing-pigment-css/card.png
new file mode 100644
index 0000000000000000000000000000000000000000..59bcae1a0dab0108581d27dcad06bca944b7f46b
GIT binary patch
literal 184363
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 @v};*0vt4arjpa1tUqJTgYU4Z
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 |