styled-components 6.4.0-prerelease.2 → 6.4.0-prerelease.3

package/native/dist/base.d.ts

@@ -1,5 +1,6 @@
 import { SC_VERSION } from './constants';
 import createGlobalStyle from './constructors/createGlobalStyle';
+import createTheme from './constructors/createTheme';
 import css from './constructors/css';
 import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
@@ -9,4 +10,4 @@ import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from './models/T
 import isStyledComponent from './utils/isStyledComponent';
 export * from './secretInternals';
 export { Attrs, DefaultTheme, Keyframes, ShouldForwardProp } from './types';
-export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };
+export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, createTheme, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };

package/native/dist/constants.d.ts

@@ -13,4 +13,5 @@ export declare const IS_BROWSER: boolean;
  */
 export declare const IS_RSC: boolean;
 export declare const DISABLE_SPEEDY: boolean;
+export declare const KEYFRAMES_ID_PREFIX = "sc-keyframes-";
 export declare const STATIC_EXECUTION_CONTEXT: {};

package/native/dist/constructors/createTheme.d.ts

@@ -0,0 +1,89 @@
+import createGlobalStyle from './createGlobalStyle';
+type ThemeLeaf = string | number;
+/**
+ * Recursively maps a theme object so every leaf value becomes
+ * a `var(--sc-path, fallback)` CSS string.
+ */
+type CSSVarTheme<T> = {
+    [K in keyof T]: T[K] extends ThemeLeaf ? string : CSSVarTheme<T[K]>;
+};
+/**
+ * The object returned by `createTheme`. Same shape as the input theme but
+ * every leaf is a CSS `var()` reference. Also carries a `GlobalStyle`
+ * component and the original `raw` theme object.
+ */
+type ThemeContract<T> = CSSVarTheme<T> & {
+    /**
+     * A `createGlobalStyle` component that emits `:root` CSS custom properties
+     * from the current ThemeProvider context. Mount this once at the root of
+     * your app so RSC components can consume theme values via CSS variables.
+     */
+    GlobalStyle: ReturnType<typeof createGlobalStyle>;
+    /** The original theme object, for passing to `ThemeProvider`. */
+    raw: T;
+    /**
+     * Read the current resolved CSS variable values from the DOM and return
+     * an object with the same shape as the original theme. Each leaf is the
+     * computed value (e.g. `"#0070f3"`), not the `var()` reference.
+     *
+     * Optionally pass a target element to read scoped variables from
+     * (defaults to `document.documentElement`).
+     *
+     * Client-only — throws if called on the server.
+     */
+    resolve(el?: Element): T;
+};
+interface CreateThemeOptions {
+    /**
+     * Prefix for CSS variable names. Defaults to `"sc"`.
+     * Useful for isolation when multiple design systems or microfrontends
+     * coexist on the same page.
+     *
+     * @example
+     * createTheme(theme, { prefix: 'ds' })
+     * // → var(--ds-colors-primary, #0070f3)
+     */
+    prefix?: string;
+    /**
+     * CSS selector for the variable declarations. Defaults to `":root"`.
+     * Use `":host"` for web components / Shadow DOM, or a class selector
+     * for scoped theming.
+     *
+     * @example
+     * createTheme(theme, { selector: ':host' })
+     * // → :host { --sc-colors-primary: #0070f3; }
+     */
+    selector?: string;
+}
+/**
+ * Create a theme contract that bridges `ThemeProvider` and CSS custom properties.
+ *
+ * Returns an object with the same shape as the input theme, but every leaf value
+ * is a `var(--prefix-*, fallback)` CSS string. Use these in styled component
+ * templates — they work in both client and RSC contexts.
+ *
+ * Mount the returned `GlobalStyle` component inside your `ThemeProvider` to emit
+ * the CSS variables. When the theme changes (e.g. light → dark), the variables
+ * update automatically.
+ *
+ * @example
+ * ```tsx
+ * const theme = createTheme({
+ *   colors: { primary: '#0070f3', text: '#111' },
+ * });
+ *
+ * // Root layout (client):
+ * <ThemeProvider theme={themes[preset]}>
+ *   <theme.GlobalStyle />
+ *   {children}
+ * </ThemeProvider>
+ *
+ * // Any RSC file:
+ * const Card = styled.div`
+ *   color: ${theme.colors.primary};
+ *   // → "var(--sc-colors-primary, #0070f3)"
+ * `;
+ * ```
+ */
+export default function createTheme<T extends Record<string, any>>(defaultTheme: T, options?: CreateThemeOptions): ThemeContract<T>;
+export {};

package/native/dist/dist/base.d.ts

@@ -1,5 +1,6 @@
 import { SC_VERSION } from './constants';
 import createGlobalStyle from './constructors/createGlobalStyle';
+import createTheme from './constructors/createTheme';
 import css from './constructors/css';
 import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
@@ -9,4 +10,4 @@ import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from './models/T
 import isStyledComponent from './utils/isStyledComponent';
 export * from './secretInternals';
 export { Attrs, DefaultTheme, Keyframes, ShouldForwardProp } from './types';
-export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };
+export { IStyleSheetContext, IStyleSheetManager, IStylisContext, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, createGlobalStyle, createTheme, css, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme, };

package/native/dist/dist/constants.d.ts

@@ -13,4 +13,5 @@ export declare const IS_BROWSER: boolean;
  */
 export declare const IS_RSC: boolean;
 export declare const DISABLE_SPEEDY: boolean;
+export declare const KEYFRAMES_ID_PREFIX = "sc-keyframes-";
 export declare const STATIC_EXECUTION_CONTEXT: {};

package/native/dist/dist/constructors/createTheme.d.ts

@@ -0,0 +1,89 @@
+import createGlobalStyle from './createGlobalStyle';
+type ThemeLeaf = string | number;
+/**
+ * Recursively maps a theme object so every leaf value becomes
+ * a `var(--sc-path, fallback)` CSS string.
+ */
+type CSSVarTheme<T> = {
+    [K in keyof T]: T[K] extends ThemeLeaf ? string : CSSVarTheme<T[K]>;
+};
+/**
+ * The object returned by `createTheme`. Same shape as the input theme but
+ * every leaf is a CSS `var()` reference. Also carries a `GlobalStyle`
+ * component and the original `raw` theme object.
+ */
+type ThemeContract<T> = CSSVarTheme<T> & {
+    /**
+     * A `createGlobalStyle` component that emits `:root` CSS custom properties
+     * from the current ThemeProvider context. Mount this once at the root of
+     * your app so RSC components can consume theme values via CSS variables.
+     */
+    GlobalStyle: ReturnType<typeof createGlobalStyle>;
+    /** The original theme object, for passing to `ThemeProvider`. */
+    raw: T;
+    /**
+     * Read the current resolved CSS variable values from the DOM and return
+     * an object with the same shape as the original theme. Each leaf is the
+     * computed value (e.g. `"#0070f3"`), not the `var()` reference.
+     *
+     * Optionally pass a target element to read scoped variables from
+     * (defaults to `document.documentElement`).
+     *
+     * Client-only — throws if called on the server.
+     */
+    resolve(el?: Element): T;
+};
+interface CreateThemeOptions {
+    /**
+     * Prefix for CSS variable names. Defaults to `"sc"`.
+     * Useful for isolation when multiple design systems or microfrontends
+     * coexist on the same page.
+     *
+     * @example
+     * createTheme(theme, { prefix: 'ds' })
+     * // → var(--ds-colors-primary, #0070f3)
+     */
+    prefix?: string;
+    /**
+     * CSS selector for the variable declarations. Defaults to `":root"`.
+     * Use `":host"` for web components / Shadow DOM, or a class selector
+     * for scoped theming.
+     *
+     * @example
+     * createTheme(theme, { selector: ':host' })
+     * // → :host { --sc-colors-primary: #0070f3; }
+     */
+    selector?: string;
+}
+/**
+ * Create a theme contract that bridges `ThemeProvider` and CSS custom properties.
+ *
+ * Returns an object with the same shape as the input theme, but every leaf value
+ * is a `var(--prefix-*, fallback)` CSS string. Use these in styled component
+ * templates — they work in both client and RSC contexts.
+ *
+ * Mount the returned `GlobalStyle` component inside your `ThemeProvider` to emit
+ * the CSS variables. When the theme changes (e.g. light → dark), the variables
+ * update automatically.
+ *
+ * @example
+ * ```tsx
+ * const theme = createTheme({
+ *   colors: { primary: '#0070f3', text: '#111' },
+ * });
+ *
+ * // Root layout (client):
+ * <ThemeProvider theme={themes[preset]}>
+ *   <theme.GlobalStyle />
+ *   {children}
+ * </ThemeProvider>
+ *
+ * // Any RSC file:
+ * const Card = styled.div`
+ *   color: ${theme.colors.primary};
+ *   // → "var(--sc-colors-primary, #0070f3)"
+ * `;
+ * ```
+ */
+export default function createTheme<T extends Record<string, any>>(defaultTheme: T, options?: CreateThemeOptions): ThemeContract<T>;
+export {};

package/native/dist/dist/models/ComponentStyle.d.ts

@@ -11,8 +11,5 @@ export default class ComponentStyle {
     rules: RuleSet<any>;
     staticRulesId: string;
     constructor(rules: RuleSet<any>, componentId: string, baseStyle?: ComponentStyle | undefined);
-    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): {
-        className: string;
-        css: string;
-    };
+    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): string;
 }

package/native/dist/dist/sheet/Sheet.d.ts

@@ -13,6 +13,8 @@ type NamesAllocationMap = Map<string, Set<string>>;
 /** Contains the main stylesheet logic for stringification and caching */
 export default class StyleSheet implements Sheet {
     gs: GlobalStylesAllocationMap;
+    /** Keyframe component IDs for efficient RSC rendering (avoids scanning all names) */
+    keyframeIds: Set<string>;
     names: NamesAllocationMap;
     options: SheetOptions;
     server: boolean;

package/native/dist/models/ComponentStyle.d.ts

@@ -11,8 +11,5 @@ export default class ComponentStyle {
     rules: RuleSet<any>;
     staticRulesId: string;
     constructor(rules: RuleSet<any>, componentId: string, baseStyle?: ComponentStyle | undefined);
-    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): {
-        className: string;
-        css: string;
-    };
+    generateAndInjectStyles(executionContext: ExecutionContext, styleSheet: StyleSheet, stylis: Stringifier): string;
 }

package/native/dist/sheet/Sheet.d.ts

@@ -13,6 +13,8 @@ type NamesAllocationMap = Map<string, Set<string>>;
 /** Contains the main stylesheet logic for stringification and caching */
 export default class StyleSheet implements Sheet {
     gs: GlobalStylesAllocationMap;
+    /** Keyframe component IDs for efficient RSC rendering (avoids scanning all names) */
+    keyframeIds: Set<string>;
     names: NamesAllocationMap;
     options: SheetOptions;
     server: boolean;

package/native/dist/sheet/Tag.d.ts

@@ -2,21 +2,21 @@ import { InsertionTarget } from '../types';
 import { SheetOptions } from './types';
 /** Create a CSSStyleSheet-like tag depending on the environment */
 export declare const makeTag: ({ isServer, useCSSOMInjection, target, nonce }: SheetOptions) => {
-    rules: string[];
+    element: HTMLStyleElement;
+    sheet: CSSStyleSheet;
     length: number;
     insertRule(index: number, rule: string): boolean;
     deleteRule(index: number): void;
     getRule(index: number): string;
 } | {
     element: HTMLStyleElement;
-    sheet: CSSStyleSheet;
+    nodes: NodeListOf<Node>;
     length: number;
     insertRule(index: number, rule: string): boolean;
     deleteRule(index: number): void;
     getRule(index: number): string;
 } | {
-    element: HTMLStyleElement;
-    nodes: NodeListOf<Node>;
+    rules: string[];
     length: number;
     insertRule(index: number, rule: string): boolean;
     deleteRule(index: number): void;