You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: AGENTS.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -47,9 +47,9 @@ Before editing anything that touches styled-components APIs (`createTheme`, `The
47
47
- Releases page uses `markdown-to-jsx`, not MDX.
48
48
-`${ClientComponent} &` selector interpolation in a styled template calls the referenced component's `.toString()`, which trips RSC's client-reference guard from a server module. Any styled component using this pattern must stay `'use client'`. Currently applies to `CodeBlock.tsx` (uses `${Note} &`).
49
49
- Import code mixins (`codeTextMixin`, `editorMixin`) from `components/codeMixins.ts`, not from `LiveEdit`. Importing from `LiveEdit` pulls `react-live-runner` + `sucrase` into the client bundle of every consumer.
50
-
-`utils/logoPalette.ts` is the single source of the 20-step hue ring (offset 30°). Three L/Ctiers: `logoPalette` (bright L=0.82, for see-through mode), `lightPalette` (CVD-optimized, ΔE 8.58), `darkPalette` (CVD-optimized, ΔE 8.69). `theme.palette[N]` switches light/dark automatically. Don't hand-pick oklch values — derive from palette indices. Accent variants: L/C shifts on the same hue as P[13], never adjacent palette indices.
51
-
- Palette generation: seed at target L/C/H → `qlab separate --adaptive --tolerance tight --gamut p3` → `qlab harmonize --adaptive --tolerance tight --gamut p3`. Both passes, in order.
-`utils/logoPalette.ts` is the single source of the hue ring. Read it for step count, offset, L/C. Three palette tiers in `utils/theme.ts`: `lightPalette`, `darkPalette` (both CVD-optimized via qlab), and the ring colors from `logoPalette.ts` (bright, for see-through mode). `theme.palette[N]` switches light/dark automatically. Don't hand-pick oklch values — derive from palette indices. Accent variants: L/C shifts on the same hue as the base palette entry, never adjacent indices.
51
+
- Palette generation: seed at target L/C/H → `qlab separate --adaptive --tolerance tight --gamut p3` → `qlab harmonize --adaptive --tolerance tight --gamut p3`. Both passes, in order. Read palette comments in `theme.ts` for current ΔE and seed values.
52
+
- OKLCH hue 0° is pink/magenta, not red. Warmer = higher hue toward orange. Read `logoPalette.ts` for the offset that places red at step 0.
53
53
-`mix-blend-mode` and `filter` on children of `preserve-3d` elements flattens 3D. Use alpha in background colors or `color-mix` instead.
54
54
- Blog posts are assembled dynamically from MDX files at build time by `utils/blog.server.ts`. No JSON index to maintain — just create the MDX file with `export const meta`.
55
55
-`PlatonicLogo.tsx` faces must NOT use `backface-visibility: hidden`. Per-face axis-angle interpolation during morph transitions can briefly flip a face normal and cull mid-animation. `transform-style: preserve-3d` z-sorts back faces naturally.
@@ -37,15 +37,15 @@ Adoption was swift. Startups and enterprises alike picked it up. The npm downloa
37
37
38
38
---
39
39
40
-
## A Decade in Motion
40
+
## The Journey So Far
41
41
42
42
**October 2016:****The First Commit.** Glen Maddern and Max Stoiber release styled-components, introducing tagged template literal CSS to the React world.
43
43
44
44
**2017:****Community Explosion.** Phil Plückthun joins as core contributor, building the Babel plugin that powers server-side rendering and smaller bundles. The ecosystem grows rapidly—jest-styled-components, the VS Code extension, and more.
45
45
46
46
**2017–2018:****v2, v3, v4 — Rapid Evolution.** A series of major releases bring dramatic performance improvements (including a 10x speed boost in v3.1), along with native theming, React Native support, and the [`.attrs`](/docs/api#.attrs) API.
47
47
48
-
**2017–Mid-2019:****Evan Jacobs Becomes Primary Maintainer.** While working at Zocdoc, Evan (then **@probablyup**, now [@quantizor](https://github.com/quantizor)) started contributing in 2017. His team wanted to use React 16's new streaming server rendering, but styled-components didn't support it, so he built the first streaming SSR implementation and [contributed it upstream](https://github.com/styled-components/styled-components/pull/1430) in January 2018. That pulled him deeper into the codebase. By mid-2019, after Phil Plückthun's last major merge (the hooks rewrite into the v5 canary branch), Evan had become the project's primary maintainer.
48
+
**2017–Mid-2019:****Evan Jacobs Becomes Primary Maintainer.** While working at Zocdoc, Evan ([quantizor](https://github.com/quantizor), formally known as probablyup) started contributing in 2017. His team wanted to use React 16's new streaming server rendering, but styled-components didn't support it, so he built the first streaming SSR implementation and [contributed it upstream](https://github.com/styled-components/styled-components/pull/1430) in January 2018. That pulled him deeper into the codebase. By mid-2019, after Phil Plückthun's last major merge (the hooks rewrite into the v5 canary branch), Evan had become the project's primary maintainer.
49
49
50
50
**January 2020:****v5 "Beast Mode".** A rebuilt core stylesheet engine delivers 50% faster SSR, 22% faster client-side rendering, and a 31% smaller bundle. Hooks replace class components under the hood.
51
51
@@ -59,13 +59,15 @@ Adoption was swift. Startups and enterprises alike picked it up. The npm downloa
59
59
60
60
## "Maintenance Mode" ≠ Dead
61
61
62
-
When the project entered maintenance mode in March 2025, a lot of people heard "abandonware." Blog posts titled "RIP styled-components" started appearing. The simple truth is I was burnt out and the future was hazy. I had recently been laid off from my full-time job and open source had to take a back seat for a time.
62
+
When the project entered maintenance mode in March 2025, a lot of people heard "abandonware." Blog posts titled "RIP styled-components" started appearing.
63
+
64
+
The simple truth is I felt that the API surface of the library with few exceptions was well-formed and stable, I was burnt out, and the future was hazy. I had recently been laid off from my full-time job and open source had to take a back seat for a time.
63
65
64
66
I started doing some consulting and through that process I tried a lot of the newer ecosystem frameworks like Tailwind and Shadcn. Simply put, they're great. They solve a particular class of problem very well, but they're not the _only_ solution.
65
67
66
68
styled-components fills an important niche in the ecosystem:
67
69
68
-
- It handles dynamic styling easily.
70
+
- It handles a wide range of dynamic styling patterns naturally.
69
71
- It is inherently portable; template literal CSS, CSS objects, and other supported CSS formats can be used for web, native, and perhaps other platforms in time.
70
72
- It doesn't require a build step.
71
73
@@ -75,7 +77,7 @@ And, most importantly, people still use it and usage is _growing_. The vibe codi
75
77
76
78
## What's Happening Right Now
77
79
78
-
Newer agentic coding models like Anthropic's 4.x Opus allow me to experiment 10x faster than I ever could have before, especially with limited free time. You're seeing the fruits of that technological renaissance in this most recent [6.4.0 release](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.4.0):
80
+
Newer agentic coding models like Anthropic's 4.x Opus allow me to experiment 10x faster than I ever could have before, especially with limited free time. You're seeing the early fruits of this technological renaissance in this most recent [6.4.0 release](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.4.0):
79
81
80
82
-**`createTheme` for CSS Variable Theming:** A new [`createTheme`](/docs/api#createtheme) utility enables CSS custom property theming that works across both RSC and client components (no React context needed). Includes `theme.resolve()` for reading computed values from the DOM.
81
83
-**Significant Performance Gains:** Re-renders that don't change styling now skip style resolution entirely. Many algorithmic improvements and careful introduction of safe caching. Most applications will see a 1.5-3.5x improvement depending on workload.
0 commit comments