@alex.radulescu/styled-static 0.2.0

package/dist/hash.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Murmurhash2 implementation for generating short, deterministic hashes.
+ * Used to create unique class names from CSS content.
+ *
+ * Based on https://github.com/garycourt/murmurhash-js
+ * This is a well-known, fast, non-cryptographic hash function.
+ */
+export declare function hash(str?: string): string;
+//# sourceMappingURL=hash.d.ts.map

package/dist/hash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash.d.ts","sourceRoot":"","sources":["../src/hash.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,GAAG,SAAK,GAAG,MAAM,CA0CrC"}

package/dist/hash.js

@@ -0,0 +1,46 @@
+/**
+ * Murmurhash2 implementation for generating short, deterministic hashes.
+ * Used to create unique class names from CSS content.
+ *
+ * Based on https://github.com/garycourt/murmurhash-js
+ * This is a well-known, fast, non-cryptographic hash function.
+ */
+export function hash(str = "") {
+    let l = str.length;
+    let h = l ^ l;
+    let i = 0;
+    let k;
+    while (l >= 4) {
+        k =
+            (str.charCodeAt(i) & 0xff) |
+                ((str.charCodeAt(++i) & 0xff) << 8) |
+                ((str.charCodeAt(++i) & 0xff) << 16) |
+                ((str.charCodeAt(++i) & 0xff) << 24);
+        k =
+            (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+        k ^= k >>> 24;
+        k =
+            (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+        h =
+            ((h & 0xffff) * 0x5bd1e995 +
+                ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
+                k;
+        l -= 4;
+        ++i;
+    }
+    // Handle remaining bytes (1-3) without switch fallthrough
+    if (l >= 3)
+        h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+    if (l >= 2)
+        h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+    if (l >= 1) {
+        h ^= str.charCodeAt(i) & 0xff;
+        h =
+            (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+    }
+    h ^= h >>> 13;
+    h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+    h ^= h >>> 15;
+    return (h >>> 0).toString(36);
+}
+//# sourceMappingURL=hash.js.map

package/dist/hash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash.js","sourceRoot":"","sources":["../src/hash.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAAC,GAAG,GAAG,EAAE;IAC3B,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC;IACnB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,IAAI,CAAS,CAAC;IAEd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACd,CAAC;YACC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;gBAC1B,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACpC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAEvC,CAAC;YACC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAC3E,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACd,CAAC;YACC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAE3E,CAAC;YACC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU;gBACxB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;gBAC/C,CAAC,CAAC;QAEJ,CAAC,IAAI,CAAC,CAAC;QACP,EAAE,CAAC,CAAC;IACN,CAAC;IAED,0DAA0D;IAC1D,IAAI,CAAC,IAAI,CAAC;QAAE,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IACtD,IAAI,CAAC,IAAI,CAAC;QAAE,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QACX,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;QAC9B,CAAC;YACC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7E,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAEd,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AAChC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,118 @@
+/**
+ * styled-static
+ *
+ * Zero-runtime styled components for React 19+ with Vite.
+ * CSS is extracted to static files at build time.
+ *
+ * @example
+ * ```tsx
+ * import { styled, css, createGlobalStyle } from 'styled-static';
+ *
+ * // Style HTML elements
+ * const Button = styled.button`
+ *   padding: 0.5rem 1rem;
+ *   background: blue;
+ *   color: white;
+ *
+ *   &:hover {
+ *     background: darkblue;
+ *   }
+ * `;
+ *
+ * // Extend existing styled components
+ * const PrimaryButton = styled(Button)`
+ *   font-weight: bold;
+ * `;
+ *
+ * // Get a class name for mixing
+ * const activeClass = css`
+ *   outline: 2px solid blue;
+ * `;
+ *
+ * // Global styles
+ * const GlobalStyle = createGlobalStyle`
+ *   * { box-sizing: border-box; }
+ *   body { margin: 0; }
+ * `;
+ *
+ * // Usage
+ * <GlobalStyle />
+ * <Button>Click me</Button>
+ * <Button as="a" href="/link">Link button</Button>
+ * <PrimaryButton className={activeClass}>Active</PrimaryButton>
+ * ```
+ */
+export type { StyledComponent, StyledFunction, HTMLTag, PropsOf } from './types';
+/**
+ * Create styled React components with zero runtime overhead.
+ * CSS is extracted to static files at build time.
+ *
+ * @example
+ * // Style HTML elements
+ * const Button = styled.button`
+ *   padding: 0.5rem 1rem;
+ *   background: blue;
+ * `;
+ *
+ * // Extend existing styled components
+ * const PrimaryButton = styled(Button)`
+ *   font-weight: bold;
+ * `;
+ *
+ * // Use with `as` prop for polymorphism
+ * <Button as="a" href="/link">Click</Button>
+ *
+ * // Use transient props (won't reach DOM)
+ * <Button $primary={true}>Click</Button>
+ */
+export declare const styled: import("./types").StyledFunction;
+/**
+ * Get a scoped class name for CSS.
+ * Useful for conditional classes or mixing with styled components.
+ *
+ * @example
+ * const activeClass = css`
+ *   background: blue;
+ *   color: white;
+ * `;
+ *
+ * const highlightClass = css`
+ *   box-shadow: 0 0 10px yellow;
+ * `;
+ *
+ * <div className={isActive ? activeClass : ''} />
+ * <Button className={`${activeClass} ${highlightClass}`}>Mixed</Button>
+ */
+export declare function css(_strings: TemplateStringsArray, ..._interpolations: never[]): string;
+/**
+ * Create global (unscoped) styles.
+ * Returns a component that should be rendered once at the root of your app.
+ * The component renders nothing - CSS is extracted at build time.
+ *
+ * @example
+ * const GlobalStyle = createGlobalStyle`
+ *   * {
+ *     box-sizing: border-box;
+ *   }
+ *
+ *   body {
+ *     margin: 0;
+ *     font-family: system-ui, sans-serif;
+ *   }
+ *
+ *   :root {
+ *     --color-primary: #3b82f6;
+ *     --color-text: #1a1a1a;
+ *   }
+ * `;
+ *
+ * // In your app entry point
+ * createRoot(document.getElementById('root')!).render(
+ *   <StrictMode>
+ *     <GlobalStyle />
+ *     <App />
+ *   </StrictMode>
+ * );
+ */
+export declare function createGlobalStyle(_strings: TemplateStringsArray, ..._interpolations: never[]): () => null;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAcjF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAGb,OAAO,SAAS,EAAE,cAAc,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,GAAG,CACjB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,eAAe,EAAE,KAAK,EAAE,GAC1B,MAAM,CAER;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,eAAe,EAAE,KAAK,EAAE,GAC1B,MAAM,IAAI,CAEZ"}

package/dist/index.js

@@ -0,0 +1,133 @@
+/**
+ * styled-static
+ *
+ * Zero-runtime styled components for React 19+ with Vite.
+ * CSS is extracted to static files at build time.
+ *
+ * @example
+ * ```tsx
+ * import { styled, css, createGlobalStyle } from 'styled-static';
+ *
+ * // Style HTML elements
+ * const Button = styled.button`
+ *   padding: 0.5rem 1rem;
+ *   background: blue;
+ *   color: white;
+ *
+ *   &:hover {
+ *     background: darkblue;
+ *   }
+ * `;
+ *
+ * // Extend existing styled components
+ * const PrimaryButton = styled(Button)`
+ *   font-weight: bold;
+ * `;
+ *
+ * // Get a class name for mixing
+ * const activeClass = css`
+ *   outline: 2px solid blue;
+ * `;
+ *
+ * // Global styles
+ * const GlobalStyle = createGlobalStyle`
+ *   * { box-sizing: border-box; }
+ *   body { margin: 0; }
+ * `;
+ *
+ * // Usage
+ * <GlobalStyle />
+ * <Button>Click me</Button>
+ * <Button as="a" href="/link">Link button</Button>
+ * <PrimaryButton className={activeClass}>Active</PrimaryButton>
+ * ```
+ */
+function throwConfigError(name) {
+    throw new Error(`${name} was not transformed at build time. ` +
+        `Ensure the styled-static plugin is configured in vite.config.ts:\n\n` +
+        `  import { styledStatic } from 'styled-static/vite';\n` +
+        `  import react from '@vitejs/plugin-react';\n\n` +
+        `  export default defineConfig({\n` +
+        `    plugins: [styledStatic(), react()],\n` +
+        `  });`);
+}
+/**
+ * Create styled React components with zero runtime overhead.
+ * CSS is extracted to static files at build time.
+ *
+ * @example
+ * // Style HTML elements
+ * const Button = styled.button`
+ *   padding: 0.5rem 1rem;
+ *   background: blue;
+ * `;
+ *
+ * // Extend existing styled components
+ * const PrimaryButton = styled(Button)`
+ *   font-weight: bold;
+ * `;
+ *
+ * // Use with `as` prop for polymorphism
+ * <Button as="a" href="/link">Click</Button>
+ *
+ * // Use transient props (won't reach DOM)
+ * <Button $primary={true}>Click</Button>
+ */
+export const styled = new Proxy({}, {
+    get: () => () => throwConfigError('styled'),
+    apply: () => throwConfigError('styled'),
+});
+/**
+ * Get a scoped class name for CSS.
+ * Useful for conditional classes or mixing with styled components.
+ *
+ * @example
+ * const activeClass = css`
+ *   background: blue;
+ *   color: white;
+ * `;
+ *
+ * const highlightClass = css`
+ *   box-shadow: 0 0 10px yellow;
+ * `;
+ *
+ * <div className={isActive ? activeClass : ''} />
+ * <Button className={`${activeClass} ${highlightClass}`}>Mixed</Button>
+ */
+export function css(_strings, ..._interpolations) {
+    throwConfigError('css');
+}
+/**
+ * Create global (unscoped) styles.
+ * Returns a component that should be rendered once at the root of your app.
+ * The component renders nothing - CSS is extracted at build time.
+ *
+ * @example
+ * const GlobalStyle = createGlobalStyle`
+ *   * {
+ *     box-sizing: border-box;
+ *   }
+ *
+ *   body {
+ *     margin: 0;
+ *     font-family: system-ui, sans-serif;
+ *   }
+ *
+ *   :root {
+ *     --color-primary: #3b82f6;
+ *     --color-text: #1a1a1a;
+ *   }
+ * `;
+ *
+ * // In your app entry point
+ * createRoot(document.getElementById('root')!).render(
+ *   <StrictMode>
+ *     <GlobalStyle />
+ *     <App />
+ *   </StrictMode>
+ * );
+ */
+export function createGlobalStyle(_strings, ..._interpolations) {
+    throwConfigError('createGlobalStyle');
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAIH,SAAS,gBAAgB,CAAC,IAAY;IACpC,MAAM,IAAI,KAAK,CACb,GAAG,IAAI,sCAAsC;QAC3C,sEAAsE;QACtE,wDAAwD;QACxD,iDAAiD;QACjD,mCAAmC;QACnC,2CAA2C;QAC3C,OAAO,CACV,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,EAAW,EAAE;IAC3C,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;IAC3C,KAAK,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;CACxC,CAAqC,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,GAAG,CACjB,QAA8B,EAC9B,GAAG,eAAwB;IAE3B,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,iBAAiB,CAC/B,QAA8B,EAC9B,GAAG,eAAwB;IAE3B,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AACxC,CAAC"}

package/dist/runtime.d.ts

@@ -0,0 +1,58 @@
+/**
+ * styled-static runtime
+ *
+ * This is the minimal runtime required for styled-static (~300 bytes minified).
+ * It provides:
+ *
+ * - `as` prop polymorphism: render as different HTML element
+ * - Transient props filtering: $-prefixed props don't reach the DOM
+ * - className merging: styled classes + user classes in correct order
+ * - displayName: for React DevTools (dev mode only)
+ *
+ * React 19's automatic ref forwarding handles refs without explicit forwardRef.
+ */
+import { type ComponentType, type JSX } from 'react';
+type HTMLTag = keyof JSX.IntrinsicElements;
+/**
+ * Creates a styled component from an HTML tag.
+ *
+ * Supports the `as` prop for polymorphic rendering:
+ * @example
+ * const Button = __styled('button', 'ss-abc123');
+ * <Button as="a" href="/link">Link</Button> // Renders as <a>
+ *
+ * @param tag - Default HTML tag to render
+ * @param className - Generated class name from CSS
+ * @param displayName - Component name for DevTools (dev mode only)
+ */
+export declare function __styled<T extends HTMLTag>(tag: T, className: string, displayName?: string): ComponentType<any>;
+/**
+ * Creates a styled component by extending an existing component.
+ *
+ * The new className is merged with the base component's className,
+ * maintaining proper CSS cascade order:
+ * - Base component's styles apply first
+ * - Extension styles apply second (can override base)
+ * - User's className applies last (can override both)
+ *
+ * @example
+ * const Button = __styled('button', 'ss-base');
+ * const Primary = __styledExtend(Button, 'ss-primary');
+ * // <Primary /> renders with class="ss-base ss-primary"
+ * // <Primary className="custom" /> renders with class="ss-base ss-primary custom"
+ *
+ * @param Base - Component to extend
+ * @param className - Additional class name for this extension
+ * @param displayName - Component name for DevTools (dev mode only)
+ */
+export declare function __styledExtend<P extends {
+    className?: string;
+}>(Base: ComponentType<P>, className: string, displayName?: string): ComponentType<any>;
+/**
+ * GlobalStyle component - renders nothing.
+ * The CSS is extracted to a static file at build time.
+ * This component exists only to provide a familiar API.
+ */
+export declare const __GlobalStyle: ComponentType<Record<string, never>>;
+export {};
+//# sourceMappingURL=runtime.d.ts.map

package/dist/runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAiB,KAAK,aAAa,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAEpE,KAAK,OAAO,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAC;AAyB3C;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EACxC,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,MAAM,GACnB,aAAa,CAAC,GAAG,CAAC,CAepB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,EAC7D,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EACtB,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,MAAM,GACnB,aAAa,CAAC,GAAG,CAAC,CAkBpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAc,CAAC"}

package/dist/runtime.js

@@ -0,0 +1,99 @@
+/**
+ * styled-static runtime
+ *
+ * This is the minimal runtime required for styled-static (~300 bytes minified).
+ * It provides:
+ *
+ * - `as` prop polymorphism: render as different HTML element
+ * - Transient props filtering: $-prefixed props don't reach the DOM
+ * - className merging: styled classes + user classes in correct order
+ * - displayName: for React DevTools (dev mode only)
+ *
+ * React 19's automatic ref forwarding handles refs without explicit forwardRef.
+ */
+import { createElement } from 'react';
+/**
+ * Filters out transient props (those starting with $).
+ * This prevents React warnings about invalid DOM attributes.
+ */
+function filterTransientProps(props) {
+    const filtered = {};
+    for (const key in props) {
+        if (key[0] !== '$') {
+            filtered[key] = props[key];
+        }
+    }
+    return filtered;
+}
+/**
+ * Merges class names in the correct order for CSS cascade.
+ * Order: styled class(es) first, user className last
+ * This allows user classes to override styled classes when needed.
+ */
+function mergeClassNames(styledClass, userClass) {
+    return userClass ? `${styledClass} ${userClass}` : styledClass;
+}
+/**
+ * Creates a styled component from an HTML tag.
+ *
+ * Supports the `as` prop for polymorphic rendering:
+ * @example
+ * const Button = __styled('button', 'ss-abc123');
+ * <Button as="a" href="/link">Link</Button> // Renders as <a>
+ *
+ * @param tag - Default HTML tag to render
+ * @param className - Generated class name from CSS
+ * @param displayName - Component name for DevTools (dev mode only)
+ */
+export function __styled(tag, className, displayName) {
+    const Component = (props) => {
+        const { as: As = tag, className: userClass, ...rest } = props;
+        const domProps = filterTransientProps(rest);
+        domProps.className = mergeClassNames(className, userClass);
+        return createElement(As, domProps);
+    };
+    if (displayName) {
+        Component.displayName = displayName;
+    }
+    return Component;
+}
+/**
+ * Creates a styled component by extending an existing component.
+ *
+ * The new className is merged with the base component's className,
+ * maintaining proper CSS cascade order:
+ * - Base component's styles apply first
+ * - Extension styles apply second (can override base)
+ * - User's className applies last (can override both)
+ *
+ * @example
+ * const Button = __styled('button', 'ss-base');
+ * const Primary = __styledExtend(Button, 'ss-primary');
+ * // <Primary /> renders with class="ss-base ss-primary"
+ * // <Primary className="custom" /> renders with class="ss-base ss-primary custom"
+ *
+ * @param Base - Component to extend
+ * @param className - Additional class name for this extension
+ * @param displayName - Component name for DevTools (dev mode only)
+ */
+export function __styledExtend(Base, className, displayName) {
+    const Component = (props) => {
+        const { className: userClass, ...rest } = props;
+        const cleanProps = filterTransientProps(rest);
+        // Extension class comes after base class (base handles its own class)
+        // User class comes last for maximum override capability
+        cleanProps.className = mergeClassNames(className, userClass);
+        return createElement(Base, cleanProps);
+    };
+    if (displayName) {
+        Component.displayName = displayName;
+    }
+    return Component;
+}
+/**
+ * GlobalStyle component - renders nothing.
+ * The CSS is extracted to a static file at build time.
+ * This component exists only to provide a familiar API.
+ */
+export const __GlobalStyle = () => null;
+//# sourceMappingURL=runtime.js.map

package/dist/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../src/runtime.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,aAAa,EAAgC,MAAM,OAAO,CAAC;AAIpE;;;GAGG;AACH,SAAS,oBAAoB,CAAC,KAA8B;IAC1D,MAAM,QAAQ,GAA4B,EAAE,CAAC;IAC7C,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;YACnB,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED;;;;GAIG;AACH,SAAS,eAAe,CAAC,WAAmB,EAAE,SAAkB;IAC9D,OAAO,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;AACjE,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,QAAQ,CACtB,GAAM,EACN,SAAiB,EACjB,WAAoB;IAEpB,MAAM,SAAS,GAAG,CAAC,KAAU,EAAE,EAAE;QAC/B,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAE9D,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC5C,QAAQ,CAAC,SAAS,GAAG,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE3D,OAAO,aAAa,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QAChB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACtC,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,cAAc,CAC5B,IAAsB,EACtB,SAAiB,EACjB,WAAoB;IAEpB,MAAM,SAAS,GAAG,CAAC,KAAU,EAAE,EAAE;QAC/B,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAEhD,MAAM,UAAU,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAE9C,sEAAsE;QACtE,wDAAwD;QACxD,UAAU,CAAC,SAAS,GAAG,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE7D,OAAO,aAAa,CAAC,IAAI,EAAE,UAAe,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QAChB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IACtC,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAyC,GAAG,EAAE,CAAC,IAAI,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentType, JSX } from "react";
+/** All valid HTML tag names */
+export type HTMLTag = keyof JSX.IntrinsicElements;
+/** Extract props from an HTML tag or component */
+export type PropsOf<T> = T extends HTMLTag ? JSX.IntrinsicElements[T] : T extends ComponentType<infer P> ? P : never;
+/**
+ * Transient props - prefixed with $ to prevent forwarding to DOM.
+ * These props are filtered out before rendering, useful for conditional styling logic.
+ *
+ * @example
+ * <Button $primary={true} $size="large" />
+ * // $primary and $size won't appear in the DOM
+ */
+export type TransientProps = {
+    [K in `$${string}`]?: unknown;
+};
+/**
+ * The `as` prop enables polymorphic rendering.
+ * Allows a styled component to render as a different HTML element.
+ *
+ * @example
+ * const Button = styled.button`...`;
+ * <Button as="a" href="/link">Link styled as button</Button>
+ */
+export type AsProp = {
+    as?: HTMLTag;
+};
+/**
+ * A styled React component with full type inference.
+ *
+ * For HTML elements: includes original element props + transient props + as prop
+ * For components: includes component props + transient props (no as prop)
+ */
+export type StyledComponent<T extends HTMLTag | ComponentType<any>> = T extends HTMLTag ? ComponentType<PropsOf<T> & TransientProps & AsProp> : T extends ComponentType<infer P> ? ComponentType<P & TransientProps> : never;
+/**
+ * The main styled function type.
+ * Supports both `styled.element` and `styled(Component)` syntax.
+ */
+export type StyledFunction = {
+    /**
+     * Style an HTML element.
+     * @example
+     * const Button = styled.button`padding: 1rem;`;
+     */
+    <T extends HTMLTag>(tag: T): (strings: TemplateStringsArray, ...interpolations: never[]) => StyledComponent<T>;
+    /**
+     * Extend an existing styled component or any component with className prop.
+     * @example
+     * const PrimaryButton = styled(Button)`background: blue;`;
+     */
+    <P extends {
+        className?: string;
+    }>(component: ComponentType<P>): (strings: TemplateStringsArray, ...interpolations: never[]) => StyledComponent<ComponentType<P>>;
+} & {
+    [K in HTMLTag]: (strings: TemplateStringsArray, ...interpolations: never[]) => StyledComponent<K>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEhD,+BAA+B;AAC/B,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAC;AAElD,kDAAkD;AAClD,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,GACtC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACxB,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAChC,CAAC,GACD,KAAK,CAAC;AAEV;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;KAAG,CAAC,IAAI,IAAI,MAAM,EAAE,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAE/D;;;;;;;GAOG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,IAChE,CAAC,SAAS,OAAO,GACb,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,cAAc,GAAG,MAAM,CAAC,GACnD,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAChC,aAAa,CAAC,CAAC,GAAG,cAAc,CAAC,GACjC,KAAK,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,CAAC,CAAC,SAAS,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,CAC3B,OAAO,EAAE,oBAAoB,EAC7B,GAAG,cAAc,EAAE,KAAK,EAAE,KACvB,eAAe,CAAC,CAAC,CAAC,CAAC;IAExB;;;;OAIG;IACH,CAAC,CAAC,SAAS;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAC/D,OAAO,EAAE,oBAAoB,EAC7B,GAAG,cAAc,EAAE,KAAK,EAAE,KACvB,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,GAAG;KAQD,CAAC,IAAI,OAAO,GAAG,CACd,OAAO,EAAE,oBAAoB,EAC7B,GAAG,cAAc,EAAE,KAAK,EAAE,KACvB,eAAe,CAAC,CAAC,CAAC;CACxB,CAAC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/vite.d.ts

@@ -0,0 +1,87 @@
+/**
+ * styled-static Vite Plugin
+ *
+ * Transforms styled-static syntax into optimized React components with
+ * static CSS extraction.
+ *
+ * ## Why AST over Regex?
+ *
+ * We use Vite's built-in parser (via Rollup's acorn) instead of regex because:
+ *
+ * 1. **Robustness**: Regex breaks on edge cases like CSS containing backticks,
+ *    strings that look like styled calls, or complex nesting.
+ *
+ *    Example that would break regex:
+ *    ```tsx
+ *    const x = styled.div`content: "styled.button\`test\`";`;
+ *    const comment = "// styled.div`fake`"; // This isn't actually a styled call
+ *    ```
+ *
+ * 2. **No extra dependencies**: Vite provides `this.parse()` for free via Rollup.
+ *    We don't need acorn or acorn-walk as separate dependencies.
+ *
+ * 3. **Accuracy**: AST gives us exact node positions for surgical code replacement
+ *    with proper source maps. Regex can't reliably handle nested backticks or
+ *    escaped characters.
+ *
+ * 4. **Maintainability**: Adding new syntax patterns is straightforward with AST
+ *    visitors vs. increasingly complex regex patterns that become unmaintainable.
+ *
+ * ## Transformation Pipeline
+ *
+ * 1. Parse source with Vite's parser
+ * 2. Find all styled/css/createGlobalStyle tagged template literals
+ * 3. For each:
+ *    - Extract CSS content
+ *    - Hash it to generate unique class name
+ *    - Process CSS (nesting, autoprefixer)
+ *    - Create virtual CSS module
+ *    - Replace original code with runtime call + import
+ * 4. Return transformed code with source map
+ *
+ * ## className Order (CSS Cascade)
+ *
+ * When components are extended, classes are ordered for proper cascade:
+ * - Base styles first
+ * - Extension styles second (override base)
+ * - User className last (override all)
+ *
+ * Example:
+ * ```tsx
+ * const Button = styled.button`padding: 1rem;`;        // .ss-abc
+ * const Primary = styled(Button)`background: blue;`;   // .ss-def
+ * <Primary className="custom" />
+ * // Renders: class="ss-abc ss-def custom"
+ * // CSS cascade: padding → background → custom overrides
+ * ```
+ */
+import type { Plugin } from "vite";
+/** Plugin configuration options */
+export interface StyledStaticOptions {
+    /**
+     * Prefix for generated class names.
+     * @default 'ss'
+     */
+    classPrefix?: string;
+    /**
+     * Browsers to target for autoprefixer.
+     * Set to false to disable autoprefixer.
+     * @default ['last 2 Chrome versions', 'last 2 Firefox versions', 'last 2 Safari versions', 'last 2 Edge versions']
+     */
+    autoprefixer?: string[] | false;
+}
+/**
+ * Vite plugin for styled-static.
+ *
+ * @example
+ * import { defineConfig } from 'vite';
+ * import react from '@vitejs/plugin-react';
+ * import { styledStatic } from 'styled-static/vite';
+ *
+ * export default defineConfig({
+ *   plugins: [styledStatic(), react()],
+ * });
+ */
+export declare function styledStatic(options?: StyledStaticOptions): Plugin;
+export default styledStatic;
+//# sourceMappingURL=vite.d.ts.map

package/dist/vite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAuBnD,mCAAmC;AACnC,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;CACjC;AAyBD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,MAAM,CA8KtE;AAsOD,eAAe,YAAY,CAAC"}