Compiled
Atlassian 出品的编译时原子化 CSS-in-JS 方案
Compiled 让开发者继续使用熟悉的 CSS-in-JS API，同时在构建阶段把样式提取为原子化静态 CSS，显著降低运行时开销。
Compiled
Atlassian 出品的编译时 CSS-in-JS 库——将样式在构建阶段提取为原子化静态 CSS，运行时零开销。
技术简介说明
Compiled 是由 Atlassian 团队开发并开源的 编译时 CSS-in-JS 库，专为 React 应用设计。它的核心理念是：开发者使用与 Emotion / styled-components 高度一致的 API（css prop、styled 组件、ClassNames 渲染属性）编写样式，但在构建阶段（build time），Babel 插件和 bundler loader 会将所有样式静态提取为 原子化 CSS 类（atomic CSS），最终运行时无需任何样式计算或注入逻辑。
与传统运行时 CSS-in-JS 方案不同，Compiled 不会在浏览器中动态生成 <style> 标签。它在编译阶段将 CSS-in-JS 代码转换为带有哈希类名的原子化样式规则，每条 CSS 声明对应一个独立类名，最大化样式复用率。运行时仅保留极小的样式注入层（将预生成的 CSS 规则移入 <head>），实现了"零运行时开销"与"熟悉开发体验"的兼顾。
自 2019 年底开源以来，Compiled 已成为 Atlassian 整个设计系统（Atlaskit）的基础样式方案。2024 年底 Atlassian 发布 RFC-73，正式将所有 Atlaskit 组件迁移至 Compiled，涵盖设计系统核心组件、编辑器（Editor）、媒体（Media）等模块。截至 2026 年 7 月，@compiled/react 最新版本为 v0.22.2，周下载量约 54 万次（主要由 @atlaskit/* 包的传递依赖贡献），项目持续活跃维护。
基本信息
| 项目 | 信息 |
|---|---|
| 官方网站 | https://compiledcssinjs.com/ |
| GitHub 仓库 | https://github.com/atlassian-labs/compiled |
| License | Apache-2.0 |
| 最新版本 | @compiled/[email protected]（2026-06-30 发布） |
| 主要维护者 | Atlassian（Atlassian Labs） |
| GitHub Stars | ~2.1k |
| 语言 | TypeScript 92%、MDX 6.3%、JavaScript 1.5% |
| 包管理器 | npm / pnpm / yarn |
| npm 周下载量 | ~54 万（含传递依赖） |
| Monorepo 管理 | pnpm + Turborepo |
| 创建时间 | 2019-12-13 |
快速上手
安装
# 核心包
npm install @compiled/react
# 根据 bundler 选择对应集成包
npm install @compiled/webpack-loader --save-dev # webpack
npm install @compiled/vite-plugin --save-dev # Vite
npm install @compiled/babel-plugin --save-dev # BabelWebpack 配置
// webpack.config.js
const CompiledExtractPlugin = require('@compiled/webpack-loader/extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.[jt]sx?$/,
use: [
{
loader: '@compiled/webpack-loader',
options: {
unstable_cssNestedComponents: true,
},
},
],
},
],
},
plugins: [new CompiledExtractPlugin()],
};Vite 配置
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import compiled from '@compiled/vite-plugin';
export default defineConfig({
plugins: [
compiled(),
react(),
],
});Babel 配置
{
"plugins": ["@compiled/babel-plugin"]
}最小示例
使用 css prop（推荐 API）
import React from 'react';
import { css } from '@compiled/react';
function App() {
return (
<div
css={{
display: 'flex',
flexDirection: 'column',
padding: 16,
backgroundColor: '#f4f5f7',
borderRadius: 8,
}}
>
<h1 css={{ fontSize: 24, color: '#172b4d', margin: 0 }}>
Hello Compiled
</h1>
<p css={{ fontSize: 14, color: '#6b778c', marginTop: 8 }}>
编译时 CSS-in-JS，运行时零开销
</p>
</div>
);
}使用 ClassNames 渲染属性
import React from 'react';
import { ClassNames } from '@compiled/react';
function Button({ children, variant = 'primary' }) {
return (
<ClassNames>
{({ css }) => (
<button
className={css({
padding: '8px 16px',
borderRadius: 4,
border: 'none',
cursor: 'pointer',
fontWeight: 600,
...(variant === 'primary'
? { backgroundColor: '#0052cc', color: '#fff' }
: { backgroundColor: '#dfe1e6', color: '#172b4d' }),
})}
>
{children}
</button>
)}
</ClassNames>
);
}核心概念与架构
编译时提取
Compiled 的核心机制是在 编译阶段 完成 CSS 的解析、转换与提取：
- Babel 解析：
@compiled/babel-plugin在 Babel 编译阶段扫描源码中的cssprop、styled组件和ClassNames组件中的样式定义。 - 静态分析与求值：对样式中的 JS 表达式进行静态分析，尝试在构建时计算最终值（如常量引用、纯函数调用结果等）。
- 原子化拆分：将每条 CSS 声明拆分为独立的原子类（如
color: blue→.cc-xyz { color: blue }），最大化类名复用率。 - CSS 规则注入：编译后的代码将原子化 CSS 规则以字符串常量形式内嵌，运行时由极小的注入层将规则移入
<head>中的<style>标签。 - JSX 转换：原始的
cssprop 和样式对象被替换为编译后的 JSX 组件，带有预计算的哈希类名引用。
原子化 CSS 策略
与 Tailwind CSS 类似，Compiled 默认采用原子化 CSS 输出：
// 源码
<div css={{ color: 'blue', padding: 8, fontSize: 14 }}>Hello</div>
// 编译后等价于三个原子类：
// .cc-a { color: blue }
// .cc-b { padding: 8px }
// .cc-c { font-size: 14px }
//
// 运行时 JSX 变为：
// <div className="cc-a cc-b cc-c">Hello</div>这种策略的优势在于：相同声明的样式规则只出现一次，不同组件共享原子类，CSS 总体积随组件数量增长趋于平缓而非线性增长。
运行时注入机制
虽然称为"零运行时开销"，Compiled 仍保留了一个极小的运行时层（约 2-3 KB），其职责仅为：
- 在组件挂载时，将预编译的 CSS 规则字符串通过
insertRule()注入到<head>中的<style>标签。 - 通过哈希去重机制确保相同规则不重复注入。
- 维护样式优先级排序（style bucketing），确保 CSS 层叠顺序正确。
与 styled-components 等方案的区别在于：运行时不执行任何 CSS 解析、序列化或计算逻辑，仅做规则注入。
cssMapScoped（实验性）
从 v0.22.0 开始，Compiled 引入了实验性的 cssMapScoped API，支持非原子化 CSS 输出：
// cssMapScoped 将多个声明分组到单个类中（类似 CSS Modules）
// 而非拆分为原子类
const variants = cssMapScoped({
primary: { color: 'blue', fontWeight: 'bold' },
secondary: { color: 'gray', fontWeight: 'normal' },
});
// 输出：.cc-<hash-primary> { color: blue; font-weight: bold }
// .cc-<hash-secondary> { color: gray; font-weight: normal }这种模式适用于需要保持样式声明顺序、使用复杂选择器或避免原子化副作用的场景。
核心特性
1. 编译时零运行时开销
所有 CSS 解析、求值和原子化拆分在构建阶段完成。运行时仅执行轻量级规则注入，不进行任何样式计算。JS 包体积显著减小，首屏渲染速度提升。
2. 原子化 CSS 输出
默认将样式拆分为最小粒度的原子类（每声明一个类），跨组件共享样式规则，CSS 总体积随组件增加趋于平缓，缓存命中率高。
3. 熟悉的 API 设计
提供 css prop、styled 组件（已弃用）和 ClassNames 渲染属性三种 API，与 Emotion / styled-components 语法高度一致，迁移学习成本低。
// css prop（推荐）
<div css={{ color: 'red', padding: 8 }}>Content</div>
// ClassNames 渲染属性
<ClassNames>
{({ css }) => <span className={css({ fontWeight: 'bold' })}>Bold</span>}
</ClassNames>4. 样式优先级分桶（Style Bucketing）
Compiled 将 CSS 规则按类型和优先级分组（布局、排版、颜色等），确保浏览器 CSSOM 构建顺序正确，避免层叠冲突。这一机制保证了样式输出顺序的可预测性。
5. 静态样式提取
通过 @compiled/webpack-loader 的 CompiledExtractPlugin，可将所有组件样式提取为独立的 CSS 文件，实现完全零运行时注入。提取后的 CSS 可被浏览器原生缓存，进一步提升性能。
6. TypeScript 原生支持
项目使用 TypeScript 编写，提供完整的类型定义。css prop 和 ClassNames API 均具备类型推导能力：
interface CardProps {
elevated?: boolean;
}
function Card({ elevated }: CardProps) {
return (
<div
css={{
padding: 16,
borderRadius: 8,
boxShadow: elevated
? '0 4px 12px rgba(0, 0, 0, 0.15)'
: '0 1px 3px rgba(0, 0, 0, 0.1)',
}}
/>
);
}7. 多 Bundler 支持
通过独立的集成包支持主流构建工具：
| Bundler | 集成包 | 版本 |
|---|---|---|
| Webpack | @compiled/webpack-loader | 0.20.3 |
| Vite | @compiled/vite-plugin | 1.1.6 |
| Parcel v2 | @compiled/parcel-config | 0.5.6 |
| Babel | @compiled/babel-plugin | 0.40.0 |
8. Design Token 集成
支持在样式中直接引用 JavaScript 变量和模块作为 Design Token：
import { tokens } from '@atlaskit/tokens';
function Card() {
return (
<div
css={{
backgroundColor: tokens.colorBackgroundNeutralBold,
padding: tokens.space200,
borderRadius: tokens.borderRadius,
}}
/>
);
}9. React 18+ 兼容
编译时方案天然兼容 React 18 的并发渲染（Concurrent Rendering）和流式 SSR（Streaming Server-Side Rendering），不会因运行时样式注入导致渲染中断或闪烁。
10. CSS 确定性输出
从 v0.22.1 开始，Compiled 确保跨所有 bundler（Webpack、Vite、Parcel、Babel）的 CSS 输出顺序完全确定（deterministic），解决了不同构建环境下样式优先级不一致的问题。
生态图
Compiled 生态（@compiled/*）
│
├── 核心包
│ ├── @compiled/react # React 运行时 + css prop / ClassNames API
│ └── @compiled/css # CSS 解析、转换与原子化核心引擎
│
├── 编译插件
│ ├── @compiled/babel-plugin # Babel 转换插件（核心编译能力）
│ ├── @compiled/babel-plugin-strip-runtime # 运行时剥离插件（用于静态提取模式）
│ └── @compiled/ts-transform-css-in-js # TypeScript 编译器转换（实验性）
│
├── Bundler 集成
│ ├── @compiled/webpack-loader # Webpack loader + 提取插件
│ ├── @compiled/vite-plugin # Vite 插件
│ ├── @compiled/parcel-config # Parcel v2 配置预设
│ ├── @compiled/parcel-optimizer # Parcel v2 优化器
│ └── @compiled/parcel-transformer # Parcel v2 转换器
│
├── 社区集成
│ ├── @nitedani/vite-plugin-compiled-react # 社区 Vite 插件（替代方案）
│ └── 各 bundler 的社区适配方案
│
├── Atlassian 内部使用
│ ├── @atlaskit/*（Atlaskit 设计系统全面基于 Compiled）
│ ├── Jira / Confluence / Bitbucket 等 Atlassian 产品
│ └── Forge Custom UI / Connect 应用
│
└── 工具链
├── ESLint 插件（no-css-map-scoped 规则）
└── 自动化迁移脚本（从 styled-components / Emotion 迁移）
适用场景
1. Atlassian 生态应用
直接使用或依赖 @atlaskit/* 组件库的应用天然需要 Compiled 的编译支持。如果你的项目基于 Atlaskit，Compiled 是默认的样式方案。
2. 高性能 Web 应用
对首屏加载速度和运行时性能要求极高的应用（如 Jira、Confluence 等大型 SaaS 产品），Compiled 的编译时提取和原子化 CSS 可显著减小 JS 包体积、提升渲染性能。
3. 从 styled-components / Emotion 迁移到零运行时
团队希望消除 CSS-in-JS 运行时开销，但又不想完全放弃 JS 样式开发体验。Compiled 的 API 与 Emotion / styled-components 高度相似，是迁移路径较短的零运行时方案之一。
4. 大型设计系统
需要集中管理 Design Token 并在数百个组件中共享样式逻辑的场景。Compiled 的原子化策略使样式规则高度复用，Atlassian Design System 自身即基于此方案。
5. SSR / Streaming SSR 应用
编译时提取的 CSS 规则可在服务端直接输出，无需 ServerStyleSheet 等额外机制。天然兼容 React 18 的流式 SSR，避免运行时样式注入导致的首屏闪烁。
6. 需要 CSS 缓存优化的场景
当静态提取模式开启时，CSS 作为独立文件输出，可被浏览器原生缓存。对于重复访问的应用，样式文件可直接从缓存加载，无需等待 JS 执行。
7. 需要兼容 React 并发特性的应用
运行时 CSS-in-JS 方案与 React Concurrent Mode 存在已知兼容性问题。Compiled 的编译时方案不存在此问题，适合需要使用 useTransition、useDeferredValue 等并发特性的应用。
开发与工程化
TypeScript 支持
Compiled 使用 TypeScript 编写，提供完整的类型定义。css prop 需要在 tsconfig.json 中配置 JSX 命名空间：
// types/compiled.d.ts
import '@compiled/react';
declare module '@compiled/react' {
interface CSSProp {
// 自定义扩展（如需要）
}
}// 组件中使用 - 自动类型推导
interface Props {
primary?: boolean;
size?: 'sm' | 'md' | 'lg';
}
function Badge({ primary, size = 'md' }: Props) {
return (
<span
css={{
display: 'inline-flex',
alignItems: 'center',
padding: size === 'sm' ? '2px 8px' : '4px 12px',
borderRadius: 9999,
fontSize: size === 'sm' ? 12 : 14,
backgroundColor: primary ? '#0052cc' : '#dfe1e6',
color: primary ? '#fff' : '#172b4d',
fontWeight: 500,
}}
/>
);
}主题方案
Compiled 支持多种主题实现方式：
// 方式一：Design Token + CSS 变量（推荐）
import { tokens } from '@atlaskit/tokens';
function ThemedCard() {
return (
<div
css={{
backgroundColor: tokens.colorBackgroundNeutralBold,
color: tokens.colorText,
border: `1px solid ${tokens.colorBorder}`,
}}
/>
);
}
// 方式二：Props 驱动的动态样式
interface ThemeProps {
bgColor: string;
textColor: string;
}
function ThemeBox({ bgColor, textColor }: ThemeProps) {
return (
<div css={{ backgroundColor: bgColor, color: textColor, padding: 16 }}>
Themed content
</div>
);
}测试
Compiled 组件可在 Jest / Vitest 中正常测试，需要配置 Babel 插件：
// jest.config.ts
export default {
transform: {
'^.+\\.[jt]sx?$': [
'babel-jest',
{
plugins: ['@compiled/babel-plugin'],
},
],
},
};ESLint 集成
Compiled 提供了 no-css-map-scoped ESLint 规则，用于控制实验性 cssMapScoped API 的使用（需团队明确审批后放开）：
{
"rules": {
"@compiled/no-css-map-scoped": "error"
}
}Monorepo 工作流
Compiled 自身使用 pnpm + Turborepo 管理 Monorepo，支持在多包项目中独立编译和提取各包样式。@atlaskit/* 生态中的数百个包均基于 Compiled 构建。
性能与安全
性能优势
| 指标 | Compiled（编译时） | styled-components（运行时） |
|---|---|---|
| 运行时 JS 体积 | ~2-3 KB（仅注入层） | ~12-15 KB（含序列化、哈希、注入逻辑） |
| CSS 生成时机 | 构建时 | 浏览器运行时 |
| CSS 缓存 | 可提取为独立文件，浏览器原生缓存 | 不可独立缓存（运行时生成） |
| 首屏渲染 | 静态 CSS 可在 JS 加载前生效 | 需等待 JS 执行后注入 <style> |
| 样式计算 | 零运行时计算 | 每次渲染执行模板求值和序列化 |
| CSS 产物体积 | 原子化去重，体积增长趋缓 | 随组件线性增长 |
| React 18 兼容 | 天然兼容并发渲染 | 存在已知兼容性问题 |
| FID / INP 影响 | 极小 | 有一定影响 |
构建性能
- Babel 插件的编译开销可控，增量编译下不会显著影响开发体验。
- Webpack loader 的
CompiledExtractPlugin支持并行提取。 - Vite 插件利用 Vite 的 ESM 原生模块加载，开发服务器启动速度快。
- 从 v0.22.1 起，CSS 输出顺序的确定性保证了缓存一致性。
安全考量
- XSS 防护：Compiled 在编译阶段处理样式，运行时不接受动态 CSS 字符串注入，攻击面较小。
- CSS 注入：动态样式值通过
cssprop 的对象属性传入，受 React 的内联样式安全边界约束，不存在原始 CSS 注入风险。 - 依赖安全：样式中引用的 JS 模块在编译时求值，不会引入运行时外部依赖。
- No SSRF：编译时方案不涉及网络请求，无 SSRF 风险。
技术对比
编译时 / 零运行时 CSS-in-JS 方案对比
| 特性 | Compiled | Linaria | vanilla-extract | Panda CSS | StyleX |
|---|---|---|---|---|---|
| 零运行时 | ✅（极小注入层） | ✅ 完全零运行时 | ✅ 完全零运行时 | ✅ 完全零运行时 | ✅ 完全零运行时 |
| API 风格 | css prop + ClassNames | tagged template literal | .css.ts + style() | tagged template + recipes | stylex.create() |
| 语法熟悉度 | ⭐⭐⭐⭐⭐（与 Emotion 一致） | ⭐⭐⭐⭐⭐（与 SC/Emotion 一致） | ⭐⭐⭐（需学习新 API） | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| 原子化 CSS | ✅ 默认原子化 | ✅ @linaria/atomic | ❌ 需手动 | ✅ 默认原子化 | ✅ 默认原子化 |
| 动态样式 | ✅ 对象属性条件 | ✅ CSS 变量 | ✅ CSS 变量 + 条件类 | ✅ 条件样式 | ✅ CSS 变量 |
| 框架绑定 | React | React（可扩展） | 框架无关 | React / Vue / Svelte | React |
| TypeScript 类型安全 | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Bundler 支持 | Webpack / Vite / Parcel / Babel | Webpack / Vite / Rollup / esbuild | Webpack / Vite / esbuild / Rollup | Webpack / Vite / PostCSS | Webpack / Vite / esbuild |
| GitHub Stars | ~2.1k | ~12.3k | ~9.5k | ~5.5k | ~8k+ |
| 主要使用者 | Atlassian | 社区 + 企业 | Shopify / Canva 等 | 社区 | Meta |
Compiled vs styled-components
| 维度 | Compiled | styled-components |
|---|---|---|
| 运行时 | 极小注入层（~2-3 KB） | ~12-15 KB 运行时 |
| CSS 输出 | 原子化类 + 可选静态提取 | 运行时 <style> 标签 |
| API | css prop / ClassNames | styled 标签 |
| 动态样式 | 对象属性条件 + CSS 变量 | JS 运行时求值 |
| SSR | 天然支持 | 需 ServerStyleSheet |
| React 18 并发 | 天然兼容 | 存在兼容性问题 |
| 维护状态 | 活跃（2026 年持续更新） | 不再积极维护 |
最佳实践
1. 优先使用 css prop
css prop 是 Compiled 当前推荐的 API，styled API 已标记为弃用。css prop 更灵活，且与 React 组件组合模式天然契合：
// ✅ 推荐：使用 css prop
function Card({ children, elevated }: { children: React.ReactNode; elevated?: boolean }) {
return (
<div
css={{
padding: 16,
borderRadius: 8,
boxShadow: elevated
? '0 4px 12px rgba(0, 0, 0, 0.15)'
: '0 1px 3px rgba(0, 0, 0, 0.1)',
}}
>
{children}
</div>
);
}
// ❌ 避免：使用已弃用的 styled API
const Card = styled.div<{ elevated?: boolean }>`
padding: 16px;
border-radius: 8px;
box-shadow: ${props =>
props.elevated
? '0 4px 12px rgba(0, 0, 0, 0.15)'
: '0 1px 3px rgba(0, 0, 0, 0.1)'};
`;2. 封装可复用的样式组件
将复杂样式封装为独立组件，避免在业务组件中重复样式定义：
// ✅ 推荐：封装可复用组件
function PrimaryButton({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
return (
<button
css={{
padding: '8px 16px',
borderRadius: 4,
border: 'none',
backgroundColor: '#0052cc',
color: '#fff',
fontWeight: 600,
cursor: 'pointer',
'&:hover': { backgroundColor: '#0065ff' },
'&:active': { backgroundColor: '#0747a6' },
}}
{...props}
>
{children}
</button>
);
}3. 使用 Design Token 而非硬编码值
// ✅ 推荐：使用 Design Token
import { tokens } from '@atlaskit/tokens';
<div css={{ color: tokens.colorText, padding: tokens.space200 }} />
// ❌ 避免：硬编码值
<div css={{ color: '#172b4d', padding: 8 }} />4. 分离静态与动态样式
将可静态提取的样式与需要动态计算的部分分离，最大化编译时优化效果：
// ✅ 推荐：静态部分 + 动态 CSS 变量
function Progress({ percent }: { percent: number }) {
return (
<div css={{ width: '100%', height: 8, backgroundColor: '#dfe1e6', borderRadius: 4 }}>
<div
css={{
height: '100%',
backgroundColor: '#0052cc',
borderRadius: 4,
width: `${percent}%`, // 动态值通过内联处理
}}
/>
</div>
);
}5. 启用静态提取模式
对性能要求极高的场景，使用 CompiledExtractPlugin 将 CSS 完全提取为独立文件：
// webpack.config.js
const CompiledExtractPlugin = require('@compiled/webpack-loader/extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.[jt]sx?$/,
use: ['@compiled/webpack-loader'],
},
],
},
plugins: [new CompiledExtractPlugin()],
};6. 谨慎使用 cssMapScoped
cssMapScoped 是实验性 API，需团队审批后使用。适用于需要保持声明顺序或避免原子化副作用的场景：
// 仅在明确需要时使用 cssMapScoped
const variantStyles = cssMapScoped({
danger: { color: 'red', borderColor: 'red' },
success: { color: 'green', borderColor: 'green' },
});技术局限与边界
1. 仅支持 React
Compiled 专门为 React 设计，不支持 Vue、Svelte、Angular 等其他框架。@compiled/react 是唯一的核心运行时包。
2. Bundler 插件依赖
Compiled 深度依赖 Babel 编译管线和特定 bundler 插件。项目使用非标准构建工具（如纯 SWC、Turbo 等）时，可能缺乏直接支持，需要额外的适配层。
3. Create React App 限制
使用 Create React App 的项目需要 eject 或使用 craco / react-app-rewired 等工具修改构建配置才能集成 Compiled。官方文档明确提到这一限制。
4. 动态样式限制
与 Linaria 的 CSS 变量方案不同，Compiled 的动态样式通过对象属性条件判断实现，编译时可能无法完全静态化所有动态路径。复杂的条件样式逻辑可能增加编译后产物的体积。
5. 运行时注入层
虽然开销极小，Compiled 并非完全零运行时——仍保留约 2-3 KB 的运行时注入层。在极端性能敏感场景下，需要使用静态提取模式（CompiledExtractPlugin）完全消除运行时。
6. 社区规模相对较小
相比 Linaria（12.3k stars）、vanilla-extract（9.5k stars）等方案，Compiled 的 GitHub 社区规模（2.1k stars）较小。社区文档、教程和第三方集成方案相对有限，主要依赖 Atlassian 官方维护。
7. 模块求值限制
样式中引用的 JS 模块必须可被编译时静态求值。依赖浏览器 API（window、document）或运行时环境的表达式无法在构建时处理。
8. 实验性 API 稳定性
cssMapScoped 等新 API 仍处于实验阶段，ESLint 默认将其标记为错误（no-css-map-scoped 规则），生产环境使用需团队明确审批。API 可能在未来版本中变更。
9. 样式优先级管理
原子化 CSS 的类名组合方式可能产生样式优先级冲突。Compiled 通过 style bucketing 机制缓解此问题，但在复杂选择器场景下仍需开发者注意 CSS 层叠顺序。
学习资源
官方文档
Atlassian 相关
技术博客与文章
- Compiled: A CSS-in-JS library without the runtime cost — LogRocket
- 迈向 Atomic CSS-in-JS：从运行时回到编译时 — 稀土掘金
- The State of CSS-in-JS in 2026 — PkgPulse
- The State of CSS-in-JS in 2026 — OpenReplay
- CSS-in-JS is dead, long live CSS-in-JS — Oleh Vdovenko
社区讨论
- Show HN: Compiled, buildtime atomic CSS in JavaScript — Hacker News
- Compiled CSS-in-JS GitHub Discussions
- Create React App + Compiled #846
视频与演讲
- Atlassian 团队在 React 相关会议上的 CSS-in-JS 技术分享
- YouTube 搜索 "Compiled CSS-in-JS Atlassian" 可查看社区教程与实战演示
2026 年现状
版本演进
2026 年上半年，Compiled 保持活跃迭代，主要版本更新包括：
- v0.22.2（2026-06-30）：修复
JSX命名空间导入，兼容 React 18 和 React 19 类型定义。 - v0.22.1（2026-06-22）：使提取的 CSS 输出确定性（deterministic），保持
cssMapScoped的源码顺序，跨所有 bundler 统一行为。 - v0.22.0（2026-06-18）：引入实验性
cssMapScopedAPI，支持非原子化 CSS 输出模式。 - v0.21.x 系列：持续修复 bug、更新依赖、改进构建稳定性。
Atlassian 全面迁移
RFC-73 迁移已于 2025 年全面展开，所有 @atlaskit/* 包以 Major 版本方式切换到 Compiled。截至 2026 年，Atlassian 旗下 Jira、Confluence、Bitbucket 等核心产品的前端组件均基于 Compiled 构建。
行业趋势
2025—2026 年，CSS-in-JS 领域持续演变：
- 运行时方案衰退：styled-components 不再积极维护，Emotion 增长停滞。社区共识转向零运行时方案。
- 编译时方案崛起：Linaria、vanilla-extract、Panda CSS、StyleX 等零运行时方案获得越来越多采用。Compiled 作为 Atlassian 内部验证的方案，属于这一阵营的重要成员。
- Tailwind CSS 主导：Tailwind CSS 以约 1200 万周下载量占据绝对主导地位，但 Compiled 等编译时 CSS-in-JS 方案为需要 JS 样式开发体验的团队提供了替代选择。
- React Server Components 兼容：编译时方案天然兼容 RSC，在 Next.js App Router 等现代架构中具有优势。
维护状态
Compiled 由 Atlassian Labs 持续维护，GitHub 仓库活跃（2.1k stars，1,680+ 次提交，最后推送 2026-07-06）。作为 Atlassian 设计系统的基础样式方案，其维护优先级高且长期稳定。
npm 下载量说明
@compiled/react 周下载量约 54 万次，月下载量约 250 万次。这一数字主要由 @atlaskit/* 包的传递依赖贡献——每个使用 Atlaskit 组件的项目都会自动拉入 Compiled。直接使用 Compiled 的项目数量相对较少，主要集中在 Atlassian 生态和少数外部团队。
总结：Compiled 是 Atlassian 为自家大规模 SaaS 产品打造的编译时 CSS-in-JS 方案。它通过将样式在构建阶段提取为原子化静态 CSS，在保留熟悉开发体验的同时消除了运行时开销。虽然社区规模相对较小，但依托 Atlassian 设计系统的全面采用和持续投入，Compiled 在零运行时 CSS-in-JS 领域占有一席之地，尤其适合 Atlassian 生态应用和对性能有严格要求的大型 Web 应用。