next-style 1.2.0 → 2.0.0

package/dist/compiler/index.d.ts

@@ -0,0 +1,95 @@
+/**
+ * The compiled representation of a single `css({})` call.
+ * Produced by `StyleCollector` and consumed by the PostCSS plugin.
+ */
+export interface CompiledStyle {
+    /** Scoped class name, e.g. `"ns-1x2y3z"`. */
+    className: string;
+    /** Base CSS rule block for this class. */
+    css: string;
+    /** Map of normalized media query string → CSS rule block. */
+    mediaQueries: Record<string, string>;
+    /** Map of pseudo selector (e.g. `":hover"`) → CSS rule block. */
+    pseudoClasses: Record<string, string>;
+    /** Concatenated `@keyframes` blocks referenced by this style. */
+    keyframes: string;
+    /** Map of `@supports` condition → CSS rule block. */
+    supports: Record<string, string>;
+    /** Map of `@layer` name → CSS rule block. */
+    layers: Record<string, string>;
+}
+/**
+ * Collects, compiles, and deduplicates styles registered via `css()` and `global()`.
+ *
+ * A single shared instance is held by the runtime module. The PostCSS plugin
+ * calls `getAllStyles()` at build time to drain the collected CSS.
+ *
+ * @example
+ * const collector = new StyleCollector()
+ * const className = collector.addStyle({ color: 'red' }) // "ns-abc123"
+ * const css = collector.getAllStyles() // ".ns-abc123 { color: red; }"
+ */
+export declare class StyleCollector {
+    private styles;
+    /**
+     * Compiles a style object and registers it in the collector.
+     * Returns the same class name for identical style objects (deduplication).
+     *
+     * @param styleObj - Raw style object from a `css({})` call.
+     * @returns Scoped class name string.
+     */
+    addStyle(styleObj: any): string;
+    /**
+     * Registers a global style rule (no scoped class).
+     * Subsequent calls with the same selector are ignored (idempotent).
+     *
+     * @param selector - CSS selector string, e.g. `"body"` or `"h1, h2"`.
+     * @param styleObj - Style properties to apply to the selector.
+     */
+    addGlobalStyle(selector: string, styleObj: any): void;
+    private compileStyle;
+    private parseStyles;
+    private buildDeclarations;
+    /**
+     * Serialises all collected styles into a single CSS string.
+     *
+     * Output order:
+     * 1. `@keyframes` blocks
+     * 2. Base class rules
+     * 3. Pseudo-class/element rules
+     * 4. `@layer` blocks
+     * 5. `@supports` blocks
+     * 6. Media queries (ascending `min-width`, mobile-first)
+     *
+     * @returns Full CSS string ready to be injected or written to a file.
+     */
+    getAllStyles(): string;
+    private extractMinWidth;
+    /**
+     * Returns a snapshot of the internal style map.
+     * Intended for inspection and testing — not for direct mutation.
+     */
+    getStyleMap(): Map<string, CompiledStyle>;
+}
+/**
+ * Creates an isolated `StyleCollector` paired with a transform helper.
+ *
+ * Primarily used by SWC/Babel transforms and test harnesses that need
+ * a fresh collector per file or per test, independent of the shared
+ * runtime instance.
+ *
+ * @example
+ * const { collector, transformCssCall } = createTransformer()
+ * const className = transformCssCall({ color: 'red' })
+ * const css = collector.getAllStyles()
+ */
+export declare function createTransformer(): {
+    collector: StyleCollector;
+    /**
+     * Equivalent to calling `css()` against this transformer's isolated collector.
+     * @param styleObj - Raw style object.
+     * @returns Scoped class name string.
+     */
+    transformCssCall(styleObj: any): string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/compiler/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compiler/index.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC7B,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,GAAG,EAAE,MAAM,CAAA;IACX,6DAA6D;IAC7D,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAA;IACjB,qDAAqD;IACrD,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC9B;AAED;;;;;;;;;;GAUG;AACH,qBAAa,cAAc;IAC1B,OAAO,CAAC,MAAM,CAAmC;IAEjD;;;;;;OAMG;IACH,QAAQ,CAAC,QAAQ,EAAE,GAAG,GAAG,MAAM;IAW/B;;;;;;OAMG;IACH,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,GAAG,IAAI;IAgBrD,OAAO,CAAC,YAAY;IA+DpB,OAAO,CAAC,WAAW;IAwCnB,OAAO,CAAC,iBAAiB;IAUzB;;;;;;;;;;;;OAYG;IACH,YAAY,IAAI,MAAM;IAwBtB,OAAO,CAAC,eAAe;IAKvB;;;OAGG;IACH,WAAW;CAGX;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB;;IAI/B;;;;OAIG;+BACwB,GAAG,GAAG,MAAM;EAIxC"}

package/dist/compiler/index.js

@@ -0,0 +1,229 @@
+import { BREAKPOINTS, camelToKebab, generateClassHash, normalizeMediaQuery } from '../utils';
+/**
+ * Collects, compiles, and deduplicates styles registered via `css()` and `global()`.
+ *
+ * A single shared instance is held by the runtime module. The PostCSS plugin
+ * calls `getAllStyles()` at build time to drain the collected CSS.
+ *
+ * @example
+ * const collector = new StyleCollector()
+ * const className = collector.addStyle({ color: 'red' }) // "ns-abc123"
+ * const css = collector.getAllStyles() // ".ns-abc123 { color: red; }"
+ */
+export class StyleCollector {
+    constructor() {
+        this.styles = new Map();
+    }
+    /**
+     * Compiles a style object and registers it in the collector.
+     * Returns the same class name for identical style objects (deduplication).
+     *
+     * @param styleObj - Raw style object from a `css({})` call.
+     * @returns Scoped class name string.
+     */
+    addStyle(styleObj) {
+        const hash = generateClassHash(styleObj);
+        const className = `ns-${hash}`;
+        if (this.styles.has(className)) {
+            return className;
+        }
+        const compiled = this.compileStyle(styleObj);
+        this.styles.set(className, compiled);
+        return className;
+    }
+    /**
+     * Registers a global style rule (no scoped class).
+     * Subsequent calls with the same selector are ignored (idempotent).
+     *
+     * @param selector - CSS selector string, e.g. `"body"` or `"h1, h2"`.
+     * @param styleObj - Style properties to apply to the selector.
+     */
+    addGlobalStyle(selector, styleObj) {
+        const key = `global:${selector}`;
+        if (this.styles.has(key))
+            return;
+        const props = this.buildDeclarations(styleObj);
+        if (!props)
+            return;
+        this.styles.set(key, {
+            className: key,
+            css: `${selector} {\n${props}}`,
+            mediaQueries: {},
+            pseudoClasses: {},
+            keyframes: '',
+            supports: {},
+            layers: {}
+        });
+    }
+    compileStyle(styleObj) {
+        const { mediaQueries, pseudoClasses, normalStyles, keyframes, supports, container, layer } = this.parseStyles(styleObj);
+        const hash = generateClassHash(styleObj);
+        const className = `ns-${hash}`;
+        const declarations = this.buildDeclarations(normalStyles);
+        const css = `.${className} {\n${declarations}}`;
+        const compiledMedia = {};
+        Object.entries(mediaQueries).forEach(([query, styles]) => {
+            const normalized = normalizeMediaQuery(query);
+            const inner = this.buildDeclarations(styles, '    ');
+            const existing = compiledMedia[normalized];
+            compiledMedia[normalized] = existing
+                ? `${normalized} {\n  .${className} {\n${existing.split('\n').slice(2, -1).join('\n')}\n${inner}  }\n}`
+                : `${normalized} {\n  .${className} {\n${inner}  }\n}`;
+        });
+        Object.entries(container).forEach(([query, styles]) => {
+            const inner = this.buildDeclarations(styles, '    ');
+            compiledMedia[query] = `${query} {\n  .${className} {\n${inner}  }\n}`;
+        });
+        const compiledPseudos = {};
+        Object.entries(pseudoClasses).forEach(([pseudo, styles]) => {
+            const inner = this.buildDeclarations(styles);
+            compiledPseudos[pseudo] = `.${className}${pseudo} {\n${inner}}`;
+        });
+        let keyframesCss = '';
+        Object.entries(keyframes).forEach(([name, frames]) => {
+            keyframesCss += `@keyframes ${name} {\n`;
+            Object.entries(frames).forEach(([stop, props]) => {
+                const inner = this.buildDeclarations(props, '    ');
+                keyframesCss += `  ${stop} {\n${inner}  }\n`;
+            });
+            keyframesCss += '}\n';
+        });
+        const compiledSupports = {};
+        Object.entries(supports).forEach(([condition, styles]) => {
+            const inner = this.buildDeclarations(styles, '    ');
+            compiledSupports[condition] = `@supports ${condition} {\n  .${className} {\n${inner}  }\n}`;
+        });
+        const compiledLayers = {};
+        Object.entries(layer).forEach(([name, styles]) => {
+            const inner = this.buildDeclarations(styles, '  ');
+            compiledLayers[name] = `@layer ${name} {\n${inner}}`;
+        });
+        return {
+            className,
+            css,
+            mediaQueries: compiledMedia,
+            pseudoClasses: compiledPseudos,
+            keyframes: keyframesCss,
+            supports: compiledSupports,
+            layers: compiledLayers
+        };
+    }
+    parseStyles(styleObj) {
+        const normalStyles = {};
+        const mediaQueries = {};
+        const pseudoClasses = {};
+        const keyframes = {};
+        const supports = {};
+        const container = {};
+        const layer = {};
+        Object.entries(styleObj).forEach(([key, value]) => {
+            if (key.startsWith('@keyframes ')) {
+                keyframes[key.slice('@keyframes '.length)] = value;
+            }
+            else if (key === '@keyframes' && typeof value === 'object') {
+                Object.assign(keyframes, value);
+            }
+            else if (key.startsWith('@supports')) {
+                supports[key.slice('@supports '.length)] = value;
+            }
+            else if (key.startsWith('@container')) {
+                container[key] = value;
+            }
+            else if (key.startsWith('@layer')) {
+                layer[key.slice('@layer '.length) || 'default'] = value;
+            }
+            else if (key in BREAKPOINTS || key.startsWith('@media')) {
+                mediaQueries[key] = value;
+            }
+            else if (key.startsWith(':') || key.startsWith('::')) {
+                pseudoClasses[key] = value;
+            }
+            else {
+                normalStyles[key] = value;
+            }
+        });
+        return { normalStyles, mediaQueries, pseudoClasses, keyframes, supports, container, layer };
+    }
+    buildDeclarations(styles, indent = '  ') {
+        let css = '';
+        Object.entries(styles).forEach(([key, value]) => {
+            if (typeof value === 'string' || typeof value === 'number') {
+                css += `${indent}${camelToKebab(key)}: ${value};\n`;
+            }
+        });
+        return css;
+    }
+    /**
+     * Serialises all collected styles into a single CSS string.
+     *
+     * Output order:
+     * 1. `@keyframes` blocks
+     * 2. Base class rules
+     * 3. Pseudo-class/element rules
+     * 4. `@layer` blocks
+     * 5. `@supports` blocks
+     * 6. Media queries (ascending `min-width`, mobile-first)
+     *
+     * @returns Full CSS string ready to be injected or written to a file.
+     */
+    getAllStyles() {
+        let allCss = '';
+        this.styles.forEach(style => {
+            if (style.keyframes)
+                allCss += `${style.keyframes}\n`;
+            if (style.css)
+                allCss += `${style.css}\n`;
+            Object.values(style.pseudoClasses).forEach(css => {
+                allCss += `${css}\n`;
+            });
+            Object.values(style.layers).forEach(css => {
+                allCss += `${css}\n`;
+            });
+            Object.values(style.supports).forEach(css => {
+                allCss += `${css}\n`;
+            });
+            const mediaEntries = Object.entries(style.mediaQueries).sort(([a], [b]) => this.extractMinWidth(a) - this.extractMinWidth(b));
+            mediaEntries.forEach(([, css]) => {
+                allCss += `${css}\n`;
+            });
+        });
+        return allCss;
+    }
+    extractMinWidth(query) {
+        const match = query.match(/min-width:\s*(\d+)px/);
+        return match ? parseInt(match[1], 10) : 0;
+    }
+    /**
+     * Returns a snapshot of the internal style map.
+     * Intended for inspection and testing — not for direct mutation.
+     */
+    getStyleMap() {
+        return new Map(this.styles);
+    }
+}
+/**
+ * Creates an isolated `StyleCollector` paired with a transform helper.
+ *
+ * Primarily used by SWC/Babel transforms and test harnesses that need
+ * a fresh collector per file or per test, independent of the shared
+ * runtime instance.
+ *
+ * @example
+ * const { collector, transformCssCall } = createTransformer()
+ * const className = transformCssCall({ color: 'red' })
+ * const css = collector.getAllStyles()
+ */
+export function createTransformer() {
+    const collector = new StyleCollector();
+    return {
+        collector,
+        /**
+         * Equivalent to calling `css()` against this transformer's isolated collector.
+         * @param styleObj - Raw style object.
+         * @returns Scoped class name string.
+         */
+        transformCssCall(styleObj) {
+            return collector.addStyle(styleObj);
+        }
+    };
+}

package/dist/index.d.ts

@@ -1,297 +1,5 @@
-import type { Properties } from "csstype";
-import type { DetailedReactHTMLElement } from "react";
-/**
- * Style object used by NextStyle.
- *
- * Supports:
- * - Standard CSS properties (camelCase)
- * - Pseudo states via `_hover`, `_focus`, `_active`
- * - Responsive media queries via `_sm` ~ `_xxl`
- *
- * Example:
- * ```ts
- * const button = css({
- *   padding: "8px 16px",
- *   backgroundColor: "black",
- *   color: "white",
- *   _hover: { opacity: 0.8 },
- *   _md: { padding: "12px 20px" }
- * })
- * ```
- */
-export type NextStyleProperties = {
-    [K in keyof Properties<string | number>]?: Properties<string | number>[K];
-} & {
-    _hover?: NextStyleObject;
-    _focus?: NextStyleObject;
-    _active?: NextStyleObject;
-    _sm?: NextStyleObject;
-    _md?: NextStyleObject;
-    _lg?: NextStyleObject;
-    _xl?: NextStyleObject;
-    _xxl?: NextStyleObject;
-};
-type NextStyleObject = Omit<NextStyleProperties, "_sm" | "_md" | "_lg" | "_xl" | "_xxl">;
-type KeyframesObject = {
-    [step: string]: Properties<string | number>;
-};
-type FontFaceObject = {
-    fontFamily: string;
-    src: string;
-    fontWeight?: string | number;
-    fontStyle?: string;
-    fontDisplay?: string;
-    unicodeRange?: string;
-};
-type PseudoState = "hover" | "focus" | "active";
-/**
- * Builder for defining relations starting from a generated class name.
- *
- * This builder should only be created via `NextStyle.when(...)`.
- */
-declare class RelationBuilder {
-    private ns;
-    private source;
-    private pseudo?;
-    /**
-     * @internal
-     * @param ns NextStyle instance
-     * @param source Source class name generated by `css()`
-     * @param pseudo Optional pseudo state applied to the source
-     */
-    constructor(ns: NextStyle, source: string, pseudo?: PseudoState | undefined);
-    /**
-     * Apply `:hover` pseudo state to the source selector.
-     *
-     * All subsequent relations will be scoped under `:hover`.
-     *
-     * @returns RelationBuilder
-     *
-     * Example:
-     * ```ts
-     * when(card)
-     *   .hover()
-     *   .child(icon, { opacity: 1 })
-     * ```
-     */
-    hover(): RelationBuilder;
-    /**
-     * Apply `:focus` pseudo state to the source selector.
-     *
-     * @returns RelationBuilder
-     */
-    focus(): RelationBuilder;
-    /**
-     * Apply `:active` pseudo state to the source selector.
-     *
-     * @returns RelationBuilder
-     */
-    active(): RelationBuilder;
-    /**
-     * Define styles for an adjacent sibling selector.
-     *
-     * CSS equivalent:
-     * `.source + .target`
-     *
-     * @param target Target class name generated by `css()`
-     * @param style Style applied to the target element
-     *
-     * Example:
-     * ```ts
-     * when(input)
-     *   .focus()
-     *   .adjacent(label, { color: "red" })
-     * ```
-     */
-    adjacent(target: string, style: NextStyleProperties): void;
-    /**
-     * Define styles for a direct child selector.
-     *
-     * CSS equivalent:
-     * `.source > .target`
-     *
-     * @param target Target class name generated by `css()`
-     * @param style Style applied to the target element
-     */
-    child(target: string, style: NextStyleProperties): void;
-    /**
-     * Define styles for a general sibling selector.
-     *
-     * CSS equivalent:
-     * `.source ~ .target`
-     *
-     * @param target Target class name generated by `css()`
-     * @param style Style applied to the target element
-     */
-    sibling(target: string, style: NextStyleProperties): void;
-    /**
-     * Define styles for a descendant selector.
-     *
-     * CSS equivalent:
-     * `.source .target`
-     *
-     * @param target Target class name generated by `css()`
-     * @param style Style applied to the target element
-     */
-    descendant(target: string, style: NextStyleProperties): void;
-    /**
-     * @internal
-     * Emit a global relational rule.
-     */
-    private emit;
-}
-/**
- * NextStyle
- *
- * Lightweight runtime CSS-in-JS engine with deterministic class names.
- *
- * Features:
- * - Scoped class generation
- * - Nested pseudo selectors
- * - Responsive media queries
- * - Global styles
- * - Keyframes and font-face support
- *
- * Example:
- * ```ts
- * const ns = new NextStyle("app")
- * ```
- */
-export declare class NextStyle {
-    private prefix;
-    private rules;
-    private globalStore;
-    constructor(prefix?: string);
-    /**
-     * Generate a scoped class name from a style object.
-     *
-     * The returned value is a branded class name and is intended
-     * to be used with `when(...)` and relational APIs.
-     *
-     * @param style Style definition object
-     * @returns Scoped class name
-     *
-     * Example:
-     * ```ts
-     * const button = css({ padding: 8 })
-     * ```
-     */
-    css: (style: NextStyleProperties) => string;
-    /**
-     * Define a global CSS selector.
-     *
-     * Styles are merged at property level instead of overwritten.
-     *
-     * @param selector CSS selector
-     * @param style Style definition
-     *
-     * Example:
-     * ```ts
-     * global("body", {
-     *   fontFamily: "Kanit, sans-serif"
-     * })
-     * ```
-     */
-    global: (selector: string, style: NextStyleProperties) => void;
-    /**
-     * Apply default browser reset styles
-     * ```css
-     * html, body {
-     *     max-width: 100vw;
-     *     overflow-x: hidden;
-     * }
-     * body {
-     *     color: "black";
-     *     background: "white";
-     *     -moz-osx-font-smoothing: grayscale;
-     *     -webkit-font-smoothing: antialiased;
-     *     font-family: "Arial, Helvetica, sans-serif"
-     * }
-     * *,
-     * *::before,
-     * *::after {
-     *     margin: 0;
-     *     padding: 0;
-     *     box-sizing: border-box;
-     * }
-     * a {
-     *     color: inherit;
-     *     text-decoration: none
-     * }
-     * ```
-     */
-    resetStyle: () => this;
-    /**
-     * Create relational selectors based on a class generated by `css(...)`.
-     *
-     * ⚠️ This method only accepts class names returned from `css`.
-     *
-     * @param source Class name generated by `css`
-     *
-     * Example:
-     * ```ts
-     * const card = css({ ... })
-     *
-     * when(card)
-     *   .hover()
-     *   .child("icon", { opacity: 1 })
-     * ```
-     */
-    when: (source: string) => RelationBuilder;
-    /**
-     * Register keyframes animation.
-     *
-     * @param frames Keyframes definition
-     * @returns Generated animation name
-     *
-     * Example:
-     * ```ts
-     * const fadeIn = keyframes({
-     *   from: { opacity: 0 },
-     *   to: { opacity: 1 }
-     * })
-     * ```
-     */
-    keyframes: (frames: KeyframesObject) => string;
-    /**
-     * Register a `@font-face` rule.
-     *
-     * Each unique definition is injected only once.
-     *
-     * @param font Font-face definition
-     *
-     * Example:
-     * ```ts
-     * fontFace({
-     *   fontFamily: "Kanit",
-     *   src: "url(/kanit.woff2) format('woff2')",
-     *   fontWeight: 400
-     * })
-     * ```
-     */
-    fontFace: (font: FontFaceObject) => void;
-    /**
-     * Serialize all generated CSS into a single string.
-     *
-     * Intended for:
-     * - Manual `<style>` injection
-     * - SSR environments
-     *
-     * @returns CSS text or `null` if no styles exist
-     */
-    toTextCss: () => string | null;
-    /**
-     * React component that injects generated CSS into a `<style>` tag.
-     *
-     * Returns `null` if no styles are registered.
-     *
-     * Example:
-     * ```tsx
-     * <StyleProvider />
-     * ```
-     */
-    StyleProvider: () => DetailedReactHTMLElement<{
-        children: string;
-    }, HTMLStyleElement> | null;
-}
-export {};
+export { type CompiledStyle, createTransformer, StyleCollector } from './compiler';
+export { default as postcssPlugin, plugin } from './postcss-plugin';
+export { type CSSObject, type CSSProperties, css, global, styleCollector } from './runtime';
+export { BREAKPOINTS, camelToKebab, deduplicateStyles, generateClassHash, normalizeMediaQuery, validateCSSProperty } from './utils';
+//# 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,OAAO,EAAE,KAAK,aAAa,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC3F,OAAO,EACN,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -1,3 +1,4 @@
-import postcss from"postcss";import{createElement}from"react";import autoprefixer from"autoprefixer";var processor=postcss([autoprefixer({overrideBrowserslist:[">0.2%","not dead","not op_mini all"]})]),postcssCache=new Map;function postcssTransform(cssText){let cached=postcssCache.get(cssText);if(cached)return cached;let result=processor.process(cssText,{from:void 0}).css;return postcssCache.set(cssText,result),result}function stableStringify(value){if(value==null||typeof value!=="object")return JSON.stringify(value);if(Array.isArray(value))return`[${value.map(stableStringify).join(",")}]`;return`{${Object.keys(value).sort().map((k)=>`"${k}":${stableStringify(value[k])}`).join(",")}}`}function createHashName(seed){let hash=BigInt("0xcbf29ce484222325"),prime=BigInt("0x100000001b3");for(let i=0;i<seed.length;i++)hash^=BigInt(seed.charCodeAt(i)),hash*=prime,hash&=BigInt("0xffffffffffffffff");return hash.toString(36).slice(0,9)}function toKebabCase(prop){return prop.replace(/[A-Z]/g,(m)=>`-${m.toLowerCase()}`)}var MEDIA_MAP={_sm:"(min-width:640px)",_md:"(min-width:768px)",_lg:"(min-width:1024px)",_xl:"(min-width:1280px)",_xxl:"(min-width:1536px)"};function mergeMedia(parent,current){if(!parent)return current;if(!current)return parent;return`${parent} and ${current}`}function serializeNested(style,ctx){let css="",declarations=[];for(let key in style){let value=style[key];if(value==null||typeof value==="object"||key.startsWith("_"))continue;declarations.push(`${toKebabCase(key)}:${value}`)}if(declarations.length){let rule=`${ctx.selector}{${declarations.join(";")}}`;css+=ctx.media?`@media ${ctx.media}{${rule}}`:rule}for(let pseudo of["_hover","_focus","_active"]){let value=style[pseudo];if(!value)continue;css+=serializeNested(value,{selector:`${ctx.selector}:${pseudo.slice(1)}`,media:ctx.media})}for(let key in MEDIA_MAP){let mediaKey=key,value=style[mediaKey];if(!value)continue;css+=serializeNested(value,{selector:ctx.selector,media:mergeMedia(ctx.media,MEDIA_MAP[mediaKey])})}return css}class RelationBuilder{ns;source;pseudo;constructor(ns,source,pseudo){this.ns=ns;this.source=source;this.pseudo=pseudo}hover(){return new RelationBuilder(this.ns,this.source,"hover")}focus(){return new RelationBuilder(this.ns,this.source,"focus")}active(){return new RelationBuilder(this.ns,this.source,"active")}adjacent(target,style){this.emit("+",target,style)}child(target,style){this.emit(">",target,style)}sibling(target,style){this.emit("~",target,style)}descendant(target,style){this.emit(" ",target,style)}emit(combinator,target,style){let pseudo=this.pseudo?`:${this.pseudo}`:"",selector=`.${this.source}${pseudo}${combinator}.${target}`;this.ns.global(selector,style)}}class NextStyle{prefix;rules=new Map;globalStore=new Map;constructor(prefix="next"){this.prefix=prefix}css=(style)=>{let seed=stableStringify(style),hash=createHashName(seed),className=`${this.prefix}_${hash}`,key=`class:${className}`;if(!this.rules.has(key)){let raw=serializeNested(style,{selector:`.${className}`}),cssText=postcssTransform(raw);this.rules.set(key,cssText)}return className};global=(selector,style)=>{let key=`global:${selector}`,merged={...this.globalStore.get(key)??{},...style};this.globalStore.set(key,merged);let raw=serializeNested(merged,{selector}),cssText=postcssTransform(raw);if(this.rules.has(key))this.rules.delete(key);this.rules.set(key,cssText)};resetStyle=()=>{return this.global("html,body",{maxWidth:"100vw",overflowX:"hidden"}),this.global("body",{color:"black",background:"white",MozOsxFontSmoothing:"grayscale",WebkitFontSmoothing:"antialiased",fontFamily:"Arial, Helvetica, sans-serif"}),this.global("*,*::before,*::after",{margin:0,padding:0,boxSizing:"border-box"}),this.global("a",{color:"inherit",textDecoration:"none"}),this};when=(source)=>new RelationBuilder(this,source);keyframes=(frames)=>{let seed=stableStringify(frames),hash=createHashName(seed),name=`${this.prefix}_${hash}`,key=`@keyframes:${name}`;if(!this.rules.has(key)){let body="";for(let step in frames){let declarations=[],frame=frames[step];for(let prop in frame)declarations.push(`${toKebabCase(prop)}:${frame[prop]}`);body+=`${step}{ ${declarations.join(";")} }`}let cssText=postcssTransform(`@keyframes ${name}{ ${body} }`);this.rules.set(key,cssText)}return name};fontFace=(font)=>{let seed=stableStringify(font),key=`@font-face:${createHashName(seed)}`;if(!this.rules.has(key)){let declarations=[];for(let prop in font)declarations.push(`${toKebabCase(prop)}:${font[prop]}`);let cssText=postcssTransform(`@font-face{ ${declarations.join(";")} }`);this.rules.set(key,cssText)}};toTextCss=()=>{if(this.rules.size===0)return null;let cssText="";for(let rule of this.rules.values())cssText+=rule+`
-`;return cssText};StyleProvider=()=>{if(this.rules.size===0)return null;let cssText="";for(let rule of this.rules.values())cssText+=rule+`
-`;return createElement("style",{children:cssText})}}export{NextStyle};
+export { createTransformer, StyleCollector } from './compiler';
+export { default as postcssPlugin, plugin } from './postcss-plugin';
+export { css, global, styleCollector } from './runtime';
+export { BREAKPOINTS, camelToKebab, deduplicateStyles, generateClassHash, normalizeMediaQuery, validateCSSProperty } from './utils';

package/dist/postcss-plugin/index.d.ts

@@ -0,0 +1,28 @@
+import postcss from 'postcss';
+import type { StyleCollector } from '../compiler';
+/**
+ * PostCSS plugin for next-style.
+ *
+ * Replaces `@import "next-style";` (or `@import 'next-style';`) in CSS files
+ * with the compiled CSS collected by the StyleCollector.
+ *
+ * The collector is populated by the runtime `css()` / `global()` calls that
+ * run during the build-time module evaluation (SWC / tsc transform pass).
+ * At that point all `css({})` calls have been executed and their styles are
+ * sitting in the collector — the PostCSS plugin just needs to drain it.
+ *
+ * Usage in postcss.config.js:
+ *   import nextStylePlugin from 'next-style/plugin'
+ *   export default { plugins: { 'next-style/plugin': {} } }
+ */
+interface PluginOptions {
+    /** Provide a custom collector (useful for testing / server integration). */
+    collector?: StyleCollector;
+}
+declare function nextStylePlugin(opts?: PluginOptions): postcss.Plugin;
+declare namespace nextStylePlugin {
+    var postcss: boolean;
+}
+export default nextStylePlugin;
+export declare const plugin: typeof nextStylePlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/postcss-plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/postcss-plugin/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAA;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAIjD;;;;;;;;;;;;;;GAcG;AAEH,UAAU,aAAa;IACtB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,cAAc,CAAA;CAC1B;AAED,iBAAS,eAAe,CAAC,IAAI,GAAE,aAAkB,kBA6ChD;kBA7CQ,eAAe;;;AAiDxB,eAAe,eAAe,CAAA;AAC9B,eAAO,MAAM,MAAM,wBAAkB,CAAA"}