\n
\n```\n\n#### Custom prop filtering\n\n```tsx\nconst Box = styled('div', {\n shouldForwardProp: (prop) => prop !== 'size',\n})`\n font-size: ${(p) => p.size}px;\n`\n```\n\n### `css`\n\nTagged template for composable CSS fragments:\n\n```tsx\nconst flexCenter = css`\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst Card = styled('div')`\n ${flexCenter};\n padding: 16px;\n`\n```\n\nSupports conditional patterns:\n\n```tsx\nconst Box = styled('div')`\n display: flex;\n ${(props) => props.$bordered && css`\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n `};\n`\n```\n\n### `keyframes`\n\nCreates `@keyframes` animations:\n\n```tsx\nconst fadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`\n\nconst FadeBox = styled('div')`\n animation: ${fadeIn} 300ms ease-in;\n`\n```\n\n### `createGlobalStyle`\n\nInjects global CSS rules (not scoped to a class):\n\n```tsx\nconst GlobalStyle = createGlobalStyle`\n *, *::before, *::after {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: ${({ theme }) => theme.font};\n }\n`\n\n// Renders nothing, injects CSS when mounted\n
\n```\n\n### `ThemeProvider` & `useTheme`\n\nProvides a theme object to all nested styled components via React context:\n\n```tsx\nconst theme = {\n colors: { primary: '#3b82f6', text: '#111' },\n spacing: (n: number) => `${n * 4}px`,\n}\n\n
\n \n\n```\n\nAccess the theme from any component:\n\n```tsx\nconst MyComponent = () => {\n const theme = useTheme()\n return
\n}\n```\n\n#### TypeScript theme augmentation\n\nExtend `DefaultTheme` for strict typing across your app:\n\n```ts\ndeclare module '@vitus-labs/styler' {\n interface DefaultTheme {\n colors: { primary: string; text: string }\n spacing: (n: number) => string\n }\n}\n```\n\n### `sheet` & `createSheet`\n\nThe singleton `sheet` manages CSS rule injection. For SSR, use `createSheet` for per-request isolation:\n\n```tsx\nimport { createSheet } from '@vitus-labs/styler'\n\n// Server-side rendering\nconst sheet = createSheet()\nconst html = renderToString(
)\nconst styleTags = sheet.getStyleTag() // \nsheet.reset()\n```\n\n#### `@layer` support\n\nWrap all scoped rules in a CSS Cascade Layer:\n\n```tsx\nimport { createSheet } from '@vitus-labs/styler'\n\nconst sheet = createSheet({ layer: 'components' })\n```\n\n#### HMR cleanup\n\n```tsx\nif (import.meta.hot) {\n import.meta.hot.accept(() => {\n sheet.clearAll()\n })\n}\n```\n\n## How It Works\n\n### FOUC-free SSR & Static Export\n\nStyler uses React 19's `` breakout — React 19 escapes style-element children, and the manual `getStyleTag()` path neutralizes the sequence as well.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}
![\"vitus·labs\"](\"https://raw.githubusercontent.com/vitus-labs/ui-system/main/.github/assets/vitus-labs-mark-dark.svg\")
\n ![\"@vitus-labs/styler\"](\"https://raw.githubusercontent.com/vitus-labs/ui-system/main/packages/styler/assets/logo-dark.svg\"){kind=logo}
\n