Files

T

Antigravity Agent 504fd5fb42 [G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00

5.3 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

Styletron

매 한 줄

"매 atomic CSS-in-JS 의 pioneer". Uber 가 만든 styling library — 매 declared style 을 atomic class (.a { color: red }) 로 deduplicate, 매 SSR-friendly. 2026 perspective: 매 historical interest — 현재 의 mainstream 은 zero-runtime (vanilla-extract, Linaria, Panda CSS) 또는 utility (Tailwind v4).

매 핵심

매 idea

매 styled component 의 declared CSS 를 atomic single-property class 로 split.
매 동일 declaration 은 한 class 의 share → 매 small bundle.
Runtime 의 dedupe + SSR 의 style extract.

매 Styletron 의 modern 위치

매 BaseWeb (Uber UI lib) 의 default styling engine.
Production 사용 의 still alive 그러나 매 new project 의 default 가 아님.
매 atomic 의 idea 는 Tailwind / UnoCSS 가 inherit (compile-time).

매 modern alternatives (2026)

vanilla-extract: zero-runtime, type-safe.
Panda CSS: build-time atomic.
Tailwind CSS v4: 매 utility-first mainstream.
CSS Modules + plain CSS: 매 simplest baseline.

매 응용

BaseWeb component library 사용.
Legacy Uber-stack codebase 유지보수.
매 historical case study (atomic CSS 의 origin).

💻 패턴

Setup (React)

import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";

const engine = new Styletron();

export function App() {
  return (
    <StyletronProvider value={engine}>
      <Page />
    </StyletronProvider>
  );
}

styled component

import { styled } from "styletron-react";

const Button = styled("button", {
  backgroundColor: "blue",
  color: "white",
  padding: "8px 16px",
  borderRadius: "4px",
});

// usage: <Button>Click</Button>

Dynamic prop-based styling

const Button = styled<"button", { $primary?: boolean }>("button", ({ $primary }) => ({
  backgroundColor: $primary ? "blue" : "gray",
  color: "white",
}));

useStyletron hook

import { useStyletron } from "styletron-react";

function Card() {
  const [css] = useStyletron();
  return <div className={css({ padding: "16px", boxShadow: "0 2px 4px rgba(0,0,0,0.1)" })}>Hello</div>;
}

SSR (Next.js)

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import { Server, Sheet } from "styletron-engine-atomic";
import { Provider } from "styletron-react";

export default class MyDoc extends Document {
  static async getInitialProps(ctx) {
    const engine = new Server();
    const initialProps = await Document.getInitialProps({
      ...ctx,
      renderPage: () => ctx.renderPage({
        enhanceApp: (App) => (props) => (
          <Provider value={engine}><App {...props} /></Provider>
        ),
      }),
    });
    return { ...initialProps, stylesheets: engine.getStylesheets() };
  }
  render() {
    return (
      <Html>
        <Head>
          {this.props.stylesheets.map((s, i) => (
            <style className="_styletron_hydrate_" dangerouslySetInnerHTML={{ __html: s.css }} key={i} />
          ))}
        </Head>
        <body><Main /><NextScript /></body>
      </Html>
    );
  }
}

Migration to vanilla-extract (modern)

// styles.css.ts
import { style } from "@vanilla-extract/css";
export const button = style({
  backgroundColor: "blue",
  color: "white",
  padding: "8px 16px",
});
// Component.tsx
import { button } from "./styles.css";
<button className={button}>Click</button>

매 결정 기준

상황	Approach
매 BaseWeb 사용 codebase	Styletron (forced)
매 new project (2026)	Tailwind v4 또는 vanilla-extract
매 type-safe + zero-runtime	vanilla-extract
매 quick prototype	Tailwind
매 library 배포 (no runtime)	Linaria / Panda CSS

기본값: 매 new code 는 Tailwind v4 또는 vanilla-extract. 매 Styletron 신규 채택 의 X.

🔗 Graph

부모: CSS-in-JS · Styling
변형: vanilla-extract · Panda-CSS · Linaria · Emotion
응용: BaseWeb · React
Adjacent: Tailwind-CSS · Atomic-CSS

🤖 LLM 활용

언제: BaseWeb codebase 의 maintenance, 매 atomic CSS history 의 understand. 언제 X: 매 greenfield project — modern alternatives 가 superior (zero-runtime, type-safe).

❌ 안티패턴

매 new project 의 Styletron 채택: 매 ecosystem momentum 이 vanilla-extract / Tailwind 로 이동 — 매 future-proof X.
Runtime dedupe overhead: 매 large app 에서 visible — 매 build-time atomic (Panda) 이 우월.
Styletron + Tailwind 동시: 매 conflicting paradigm — pick one.

🧪 검증 / 중복

Verified (styletron.org, GitHub uber/styletron, Uber engineering blog 2017).
신뢰도 A (매 historically), 매 modern adoption 의 declining.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — atomic CSS-in-JS + modern alternatives positioning

5.3 KiB Raw Blame History