Skip to content

Commit ddd792c

Browse files
committed
docs: remove hardcoded values from AGENTS.md, update blog post date
1 parent 8e5e59c commit ddd792c

File tree

2 files changed

+11
-9
lines changed

2 files changed

+11
-9
lines changed

AGENTS.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ Before editing anything that touches styled-components APIs (`createTheme`, `The
4747
- Releases page uses `markdown-to-jsx`, not MDX.
4848
- `${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} &`).
4949
- 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/C tiers: `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.
52-
- OKLCH hue reference: = pink/magenta, 25-30° = red, 40° = orange, 90° = yellow, 150° = green, 210° = cyan, 270° = blue, 330° = magenta. Warmer = higher hue toward orange.
50+
- `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.
5353
- `mix-blend-mode` and `filter` on children of `preserve-3d` elements flattens 3D. Use alpha in background colors or `color-mix` instead.
5454
- 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`.
5555
- `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.

sections/blog/2026-04-09-celebrating-a-decade-of-styled-components.mdx renamed to sections/blog/2026-04-10-celebrating-a-decade-of-styled-components.mdx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const meta = {
22
title: "Celebrating a Decade of styled-components",
33
author: "Evan Jacobs",
4-
date: "2026-04-09",
4+
date: "2026-04-10",
55
slug: "celebrating-a-decade-of-styled-components",
66
description: "We're so back! A retrospective on the past decade of styled-components and where we're headed.",
77
originalUrl: "https://styled-components.com/blog/celebrating-a-decade-of-styled-components",
@@ -37,15 +37,15 @@ Adoption was swift. Startups and enterprises alike picked it up. The npm downloa
3737

3838
---
3939

40-
## A Decade in Motion
40+
## The Journey So Far
4141

4242
**October 2016:** **The First Commit.** Glen Maddern and Max Stoiber release styled-components, introducing tagged template literal CSS to the React world.
4343

4444
**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.
4545

4646
**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.
4747

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.
4949

5050
**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.
5151

@@ -59,13 +59,15 @@ Adoption was swift. Startups and enterprises alike picked it up. The npm downloa
5959

6060
## "Maintenance Mode" ≠ Dead
6161

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.
6365

6466
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.
6567

6668
styled-components fills an important niche in the ecosystem:
6769

68-
- It handles dynamic styling easily.
70+
- It handles a wide range of dynamic styling patterns naturally.
6971
- 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.
7072
- It doesn't require a build step.
7173

@@ -75,7 +77,7 @@ And, most importantly, people still use it and usage is _growing_. The vibe codi
7577

7678
## What's Happening Right Now
7779

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):
7981

8082
- **`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.
8183
- **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

Comments
 (0)