next-style 2.1.6 → 2.2.0

package/README.md

@@ -246,7 +246,6 @@ All CSS properties and values are typed via [csstype](https://github.com/frenic/
 ```tsx
 import { css, type CSSObject } from "next-style"
 
-// Type a reusable style object before passing it to css()
 const base: CSSObject = {
   fontSize: "16px",   // ✅
   colour: "red",      // ❌ TypeScript error: unknown property
@@ -263,48 +262,7 @@ const el = css(base)
 | `CSSObject` | Full style object — properties, at-rules, and pseudos |
 | `CSSProperties` | CSS properties only, no at-rules or pseudos |
 
-## Advanced
-
-### `createTransformer`
-
-For build tooling, SWC/Babel plugins, and test harnesses that need an isolated style collector independent of the global runtime:
-
-```ts
-import { createTransformer } from "next-style"
-
-const { collector, transformCssCall } = createTransformer()
-
-const className = transformCssCall({ color: "red", fontSize: "16px" })
-// → "ns-abc123"
-
-const css = collector.getAllStyles()
-// → ".ns-abc123 { color: red; font-size: 16px; }"
-```
-
-### `StyleCollector`
-
-The class powering both the runtime and `createTransformer`. Exposed for custom integrations:
-
-```ts
-import { StyleCollector } from "next-style"
-
-const collector = new StyleCollector()
-collector.addStyle({ color: "red" })          // → "ns-abc123"
-collector.addGlobalStyle("body", { margin: "0" })
-collector.getAllStyles()                       // full CSS string
-collector.flush("/custom/path/styles.css")    // write to disk
-```
-
-### How the PostCSS bridge works
-
-Because PostCSS runs in a separate process from the module graph, in-memory style collectors cannot be shared. next-style solves this with a file-based bridge:
-
-1. Every `css()` / `global()` call writes compiled CSS to `node_modules/.cache/next-style.css`
-2. The PostCSS plugin reads that file and replaces `@import "next-style"` with its contents
-
-This is why `@import "next-style"` must appear in `globals.css` — it's the injection point.
-
-### CSS Variables
+## CSS Variables
 
 next-style pairs naturally with CSS custom properties for design tokens:
 
@@ -328,6 +286,15 @@ const card = css({
 })
 ```
 
+## How it works
+
+Because PostCSS runs in a separate process from the module graph, next-style uses a file-based bridge:
+
+1. Every `css()` / `global()` call registers styles into an in-memory collector during module evaluation
+2. The PostCSS plugin reads the collector and replaces `@import "next-style"` with the compiled CSS
+
+This is why `@import "next-style"` must appear in `globals.css` — it's the injection point.
+
 ## CSS output order
 
 Styles are emitted in this order to ensure correct cascade:

package/dist/index.cjs

@@ -1,31 +1,31 @@
-"use strict";var P=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var I=(n,e)=>{for(var t in e)P(n,t,{get:e[t],enumerable:!0})},B=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of z(e))!F.call(n,s)&&s!==t&&P(n,s,{get:()=>e[s],enumerable:!(r=K(e,s))||r.enumerable});return n};var H=n=>B(P({},"__esModule",{value:!0}),n);var k={};I(k,{BREAKPOINTS:()=>m,StyleCollector:()=>d,camelToKebab:()=>$,createTransformer:()=>D,css:()=>N,deduplicateStyles:()=>A,generateClassHash:()=>f,global:()=>Q,normalizeMediaQuery:()=>R,styleCollector:()=>g,validateCSSProperty:()=>M});module.exports=H(k);function $(n){return n.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}function f(n){let e=typeof n=="string"?n:JSON.stringify(n),t=2166136261;for(let r=0;r<e.length;r++)t^=e.charCodeAt(r),t=t*16777619>>>0;return t.toString(36)}var m={"@sm":"@media (min-width: 640px)","@md":"@media (min-width: 768px)","@lg":"@media (min-width: 1024px)","@xl":"@media (min-width: 1280px)","@2xl":"@media (min-width: 1536px)"};function R(n){return m[n]??n}function M(n,e){return typeof e=="string"||typeof e=="number"||typeof e=="object"&&!Array.isArray(e)}function A(n){let e=new Map,t=new Set;return n.forEach((r,s)=>{let l=JSON.stringify(r);t.has(l)||(t.add(l),e.set(s,r))}),e}var d=class n{constructor(){this.styles=new Map}addStyle(e){let r=`ns-${f(e)}`;if(this.styles.has(r))return r;let s=this.compileStyle(e);return this.styles.set(r,s),r}addGlobalStyle(e,t){let r=`global:${e}`;if(this.styles.has(r))return;let s=this.buildDeclarations(t);s&&this.styles.set(r,{className:r,css:`${e} {
-${s}}`,mediaQueries:{},pseudoClasses:{},keyframes:"",supports:{},layers:{}})}compileStyle(e){let{mediaQueries:t,pseudoClasses:r,normalStyles:s,keyframes:l,supports:h,container:u,layer:S}=this.parseStyles(e),o=`ns-${f(e)}`,x=this.buildDeclarations(s),W=`.${o} {
-${x}}`,y={};Object.entries(t).forEach(([c,p])=>{let a=R(c),b=this.buildDeclarations(p,"    ");if(y[a]){let T=y[a].split(`
+"use strict";var $=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var T=(n,s)=>{for(var e in s)$(n,e,{get:s[e],enumerable:!0})},z=(n,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of N(s))!K.call(n,t)&&t!==e&&$(n,t,{get:()=>s[t],enumerable:!(r=Q(s,t))||r.enumerable});return n};var I=n=>z($({},"__esModule",{value:!0}),n);var B={};T(B,{css:()=>w,global:()=>D});module.exports=I(B);function O(n){return n.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`)}function b(n){let s=typeof n=="string"?n:JSON.stringify(n),e=2166136261;for(let r=0;r<s.length;r++)e^=s.charCodeAt(r),e=e*16777619>>>0;return e.toString(36)}var R={"@sm":"@media (min-width: 640px)","@md":"@media (min-width: 768px)","@lg":"@media (min-width: 1024px)","@xl":"@media (min-width: 1280px)","@2xl":"@media (min-width: 1536px)"};function E(n){return R[n]??n}var u=class{constructor(){this.styles=new Map}addStyle(s){let r=`ns-${b(s)}`;if(this.styles.has(r))return r;let t=this.compileStyle(s);return this.styles.set(r,t),r}addGlobalStyle(s,e){let r=`global:${s}`;if(this.styles.has(r))return;let t=this.buildDeclarations(e);t&&this.styles.set(r,{className:r,css:`${s} {
+${t}}`,mediaQueries:{},pseudoClasses:{},keyframes:"",supports:{},layers:{}})}compileStyle(s){let{mediaQueries:e,pseudoClasses:r,normalStyles:t,keyframes:l,supports:g,container:y,layer:m}=this.parseStyles(s),o=`ns-${b(s)}`,S=this.buildDeclarations(t),A=`.${o} {
+${S}}`,d={};Object.entries(e).forEach(([c,p])=>{let a=E(c),f=this.buildDeclarations(p,"    ");if(d[a]){let M=d[a].split(`
 `).slice(2,-2).join(`
-`);y[a]=`${a} {
+`);d[a]=`${a} {
   .${o} {
-${T}
-${b}  }
-}`}else y[a]=`${a} {
+${M}
+${f}  }
+}`}else d[a]=`${a} {
   .${o} {
-${b}  }
-}`}),Object.entries(u).forEach(([c,p])=>{let a=this.buildDeclarations(p,"    ");y[c]=`${c} {
+${f}  }
+}`}),Object.entries(y).forEach(([c,p])=>{let a=this.buildDeclarations(p,"    ");d[c]=`${c} {
   .${o} {
 ${a}  }
-}`});let O={};Object.entries(r).forEach(([c,p])=>{let a=this.buildDeclarations(p);O[c]=`.${o}${c} {
-${a}}`});let C="";Object.entries(l).forEach(([c,p])=>{C+=`@keyframes ${c} {
-`,Object.entries(p).forEach(([a,b])=>{let w=this.buildDeclarations(b,"    ");C+=`  ${a} {
-${w}  }
-`}),C+=`}
-`});let j={};Object.entries(h).forEach(([c,p])=>{let a=this.buildDeclarations(p,"    ");j[c]=`@supports ${c} {
+}`});let C={};Object.entries(r).forEach(([c,p])=>{let a=this.buildDeclarations(p);C[c]=`.${o}${c} {
+${a}}`});let h="";Object.entries(l).forEach(([c,p])=>{h+=`@keyframes ${c} {
+`,Object.entries(p).forEach(([a,f])=>{let j=this.buildDeclarations(f,"    ");h+=`  ${a} {
+${j}  }
+`}),h+=`}
+`});let x={};Object.entries(g).forEach(([c,p])=>{let a=this.buildDeclarations(p,"    ");x[c]=`@supports ${c} {
   .${o} {
 ${a}  }
-}`});let E={};return Object.entries(S).forEach(([c,p])=>{let a=this.buildDeclarations(p,"  ");E[c]=`@layer ${c} {
-${a}}`}),{className:o,css:W,mediaQueries:y,pseudoClasses:O,keyframes:C,supports:j,layers:E}}parseStyles(e){let t={},r={},s={},l={},h={},u={},S={};return Object.entries(e).forEach(([i,o])=>{if(i.startsWith("@keyframes "))l[i.slice(11)]=o;else if(i==="@keyframes"&&typeof o=="object")Object.assign(l,o);else if(i.startsWith("@supports")){let x=i.slice(0,9)==="@supports"?i.slice(9).trim():i;h[x]=o}else i.startsWith("@container")?u[i]=o:i.startsWith("@layer")?S[i.slice(7)||"default"]=o:i in m||i.startsWith("@media")?r[i]=o:i.startsWith(":")||i.startsWith("::")?s[i]=o:t[i]=o}),{normalStyles:t,mediaQueries:r,pseudoClasses:s,keyframes:l,supports:h,container:u,layer:S}}buildDeclarations(e,t="  "){let r="";return Object.entries(e).forEach(([s,l])=>{(typeof l=="string"||typeof l=="number")&&(r+=`${t}${$(s)}: ${l};
-`)}),r}getAllStyles(){let e="";return this.styles.forEach(t=>{t.keyframes&&(e+=`${t.keyframes}
-`),t.css&&(e+=`${t.css}
-`),Object.values(t.pseudoClasses).forEach(s=>{e+=`${s}
-`}),Object.values(t.layers).forEach(s=>{e+=`${s}
-`}),Object.values(t.supports).forEach(s=>{e+=`${s}
-`}),Object.entries(t.mediaQueries).sort(([s],[l])=>this.extractMinWidth(s)-this.extractMinWidth(l)).forEach(([,s])=>{e+=`${s}
-`})}),e}extractMinWidth(e){let t=e.match(/min-width:\s*(\d+)px/);return t?parseInt(t[1],10):0}flush(e){if(!(typeof process>"u"||process.versions?.node==null))try{let t=require("fs"),r=require("path"),s=e??n.defaultCacheFile();t.mkdirSync(r.dirname(s),{recursive:!0}),t.writeFileSync(s,this.getAllStyles(),"utf-8")}catch(t){console.error("Failed to flush styles to cache file:",t)}}static defaultCacheFile(){return require("path").join(process.cwd(),"node_modules",".cache","next-style","styles.css")}getStyleMap(){return new Map(this.styles)}};function D(){let n=new d;return{collector:n,transformCssCall(e){return n.addStyle(e)}}}function N(n){let e=g.addStyle(n);return g.flush(),e}function Q(n){Object.entries(n).forEach(([e,t])=>{g.addGlobalStyle(e,t)}),g.flush()}var g=new d;0&&(module.exports={BREAKPOINTS,StyleCollector,camelToKebab,createTransformer,css,deduplicateStyles,generateClassHash,global,normalizeMediaQuery,styleCollector,validateCSSProperty});
+}`});let P={};return Object.entries(m).forEach(([c,p])=>{let a=this.buildDeclarations(p,"  ");P[c]=`@layer ${c} {
+${a}}`}),{className:o,css:A,mediaQueries:d,pseudoClasses:C,keyframes:h,supports:x,layers:P}}parseStyles(s){let e={},r={},t={},l={},g={},y={},m={};return Object.entries(s).forEach(([i,o])=>{if(i.startsWith("@keyframes "))l[i.slice(11)]=o;else if(i==="@keyframes"&&typeof o=="object")Object.assign(l,o);else if(i.startsWith("@supports")){let S=i.slice(0,9)==="@supports"?i.slice(9).trim():i;g[S]=o}else i.startsWith("@container")?y[i]=o:i.startsWith("@layer")?m[i.slice(7)||"default"]=o:i in R||i.startsWith("@media")?r[i]=o:i.startsWith(":")||i.startsWith("::")?t[i]=o:e[i]=o}),{normalStyles:e,mediaQueries:r,pseudoClasses:t,keyframes:l,supports:g,container:y,layer:m}}buildDeclarations(s,e="  "){let r="";return Object.entries(s).forEach(([t,l])=>{(typeof l=="string"||typeof l=="number")&&(r+=`${e}${O(t)}: ${l};
+`)}),r}getAllStyles(){let s="";return this.styles.forEach(e=>{e.keyframes&&(s+=`${e.keyframes}
+`),e.css&&(s+=`${e.css}
+`),Object.values(e.pseudoClasses).forEach(t=>{s+=`${t}
+`}),Object.values(e.layers).forEach(t=>{s+=`${t}
+`}),Object.values(e.supports).forEach(t=>{s+=`${t}
+`}),Object.entries(e.mediaQueries).sort(([t],[l])=>this.extractMinWidth(t)-this.extractMinWidth(l)).forEach(([,t])=>{s+=`${t}
+`})}),s}extractMinWidth(s){let e=s.match(/min-width:\s*(\d+)px/);return e?parseInt(e[1],10):0}getStyleMap(){return new Map(this.styles)}};function w(n){return W.addStyle(n)}function D(n){Object.entries(n).forEach(([s,e])=>{W.addGlobalStyle(s,e)})}var W=new u;0&&(module.exports={css,global});

package/dist/index.d.ts

@@ -1,122 +1,11 @@
 import { Properties, Pseudos } from 'csstype';
 
-/**
- * The compiled representation of a single `css({})` call.
- * Produced by `StyleCollector` and consumed by the PostCSS plugin.
- */
-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; }"
- */
-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;
-    /**
-     * Writes all collected styles to a temp file so the PostCSS plugin
-     * (which runs in a separate process) can read them.
-     *
-     * Call this after all `css()` / `global()` calls have been evaluated,
-     * e.g. at the end of a build-time entry point.
-     *
-     * @param filePath - Destination file path. Defaults to `os.tmpdir()/next-style.css`.
-     */
-    flush(filePath?: string): void;
-    /**
-     * Returns the default cache file path, resolved at call-time from
-     * `process.cwd()` so it reflects the actual working directory of the
-     * running process rather than the directory at module-load time.
-     */
-    static defaultCacheFile(): string;
-    /**
-     * 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()
- */
-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;
-};
-
 /**
  * CSS properties with full type safety and autocomplete via csstype.
  * Accepts both string and number values (e.g. `fontSize: 16` or `fontSize: '16px'`).
  */
 type CSSProperties = Properties<string | number>;
-/** @internal Mapped type for pseudo-classes/elements — avoids index signature limitation */
+/** @internal Mapped type for pseudo-classes/elements */
 type PseudoStyles = {
     [P in Pseudos]?: CSSProperties;
 };
@@ -145,14 +34,6 @@ type AtRuleStyles = {
  * - Feature queries: `'@supports (display: grid)'`
  * - Keyframe animations: `'@keyframes fadeIn'`
  * - Cascade layers: `'@layer utilities'`
- *
- * @example
- * const style: CSSObject = {
- *   fontSize: '16px',
- *   '@md': { fontSize: '20px' },
- *   ':hover': { color: 'blue' },
- *   '@keyframes spin': { to: { transform: 'rotate(360deg)' } },
- * }
  */
 type CSSObject = CSSProperties & PseudoStyles & AtRuleStyles & {
     [key: string]: any;
@@ -185,7 +66,6 @@ declare function css(styles: CSSObject): string;
  * Registers global CSS styles applied directly to selectors (no scoped class).
  *
  * Useful for CSS resets, base typography, and third-party element overrides.
- * Like `css()`, styles are extracted at build time — no runtime cost.
  *
  * @param styles - A record mapping CSS selectors to `CSSObject` style definitions.
  *
@@ -193,71 +73,8 @@ declare function css(styles: CSSObject): string;
  * global({
  *   '*': { boxSizing: 'border-box', margin: '0' },
  *   'body': { fontFamily: 'Inter, sans-serif', lineHeight: '1.6' },
- *   'h1, h2, h3': { fontWeight: 500 },
  * })
  */
 declare function global(styles: Record<string, CSSObject>): void;
 
-declare const collector: StyleCollector;
-
-/**
- * Converts a camelCase CSS property name to kebab-case.
- *
- * @param str - camelCase string, e.g. `"backgroundColor"`.
- * @returns kebab-case string, e.g. `"background-color"`.
- *
- * @example
- * camelToKebab('fontSize')        // "font-size"
- * camelToKebab('borderTopWidth')  // "border-top-width"
- */
-declare function camelToKebab(str: string): string;
-/**
- * Generates a short, stable hash string from a style object or string.
- * Used to produce unique class name suffixes (e.g. `"ns-1x2y3z"`).
- *
- * @param styles - Style object or pre-serialised string.
- * @returns Base-36 hash string.
- */
-declare function generateClassHash(styles: any): string;
-/**
- * Shorthand breakpoint aliases mapped to their full `@media` query strings.
- *
- * | Key    | Expands to                          |
- * |--------|-------------------------------------|
- * | `@sm`  | `@media (min-width: 640px)`  |
- * | `@md`  | `@media (min-width: 768px)`  |
- * | `@lg`  | `@media (min-width: 1024px)` |
- * | `@xl`  | `@media (min-width: 1280px)` |
- * | `@2xl` | `@media (min-width: 1536px)` |
- */
-declare const BREAKPOINTS: Record<string, string>;
-/**
- * Resolves a breakpoint shorthand to its full `@media` query string.
- * Passes through unrecognised strings unchanged.
- *
- * @param query - Shorthand key (e.g. `"@md"`) or an arbitrary media query.
- * @returns Full media query string (e.g. `"@media (min-width: 768px)"`).
- *
- * @example
- * normalizeMediaQuery('@md')                        // "@media (min-width: 768px)"
- * normalizeMediaQuery('@media (max-width: 600px)')  // "@media (max-width: 600px)"
- */
-declare function normalizeMediaQuery(query: string): string;
-/**
- * Returns `true` if the value is a valid CSS property value that can be
- * serialised to a declaration (string, number, or nested object).
- *
- * @param _key - CSS property name (unused, reserved for future validation).
- * @param value - Value to check.
- */
-declare function validateCSSProperty(_key: string, value: any): boolean;
-/**
- * Removes duplicate entries from a style map, keeping the first occurrence.
- * Two entries are considered duplicates when their serialised values are identical.
- *
- * @param styles - Map of class name → style data.
- * @returns New map with duplicates removed.
- */
-declare function deduplicateStyles(styles: Map<string, any>): Map<string, any>;
-
-export { BREAKPOINTS, type CSSObject, type CSSProperties, type CompiledStyle, StyleCollector, camelToKebab, createTransformer, css, deduplicateStyles, generateClassHash, global, normalizeMediaQuery, collector as styleCollector, validateCSSProperty };
+export { type CSSObject, css, global };

package/dist/index.js

@@ -1,31 +1,31 @@
-var R=(n=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(n,{get:(e,t)=>(typeof require<"u"?require:e)[t]}):n)(function(n){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+n+'" is not supported')});function x(n){return n.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}function C(n){let e=typeof n=="string"?n:JSON.stringify(n),t=2166136261;for(let s=0;s<e.length;s++)t^=e.charCodeAt(s),t=t*16777619>>>0;return t.toString(36)}var b={"@sm":"@media (min-width: 640px)","@md":"@media (min-width: 768px)","@lg":"@media (min-width: 1024px)","@xl":"@media (min-width: 1280px)","@2xl":"@media (min-width: 1536px)"};function P(n){return b[n]??n}function D(n,e){return typeof e=="string"||typeof e=="number"||typeof e=="object"&&!Array.isArray(e)}function N(n){let e=new Map,t=new Set;return n.forEach((s,r)=>{let l=JSON.stringify(s);t.has(l)||(t.add(l),e.set(r,s))}),e}var y=class n{constructor(){this.styles=new Map}addStyle(e){let s=`ns-${C(e)}`;if(this.styles.has(s))return s;let r=this.compileStyle(e);return this.styles.set(s,r),s}addGlobalStyle(e,t){let s=`global:${e}`;if(this.styles.has(s))return;let r=this.buildDeclarations(t);r&&this.styles.set(s,{className:s,css:`${e} {
-${r}}`,mediaQueries:{},pseudoClasses:{},keyframes:"",supports:{},layers:{}})}compileStyle(e){let{mediaQueries:t,pseudoClasses:s,normalStyles:r,keyframes:l,supports:f,container:m,layer:h}=this.parseStyles(e),o=`ns-${C(e)}`,$=this.buildDeclarations(r),M=`.${o} {
-${$}}`,d={};Object.entries(t).forEach(([c,p])=>{let a=P(c),S=this.buildDeclarations(p,"    ");if(d[a]){let A=d[a].split(`
+function j(c){return c.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`)}function $(c){let s=typeof c=="string"?c:JSON.stringify(c),e=2166136261;for(let t=0;t<s.length;t++)e^=s.charCodeAt(t),e=e*16777619>>>0;return e.toString(36)}var b={"@sm":"@media (min-width: 640px)","@md":"@media (min-width: 768px)","@lg":"@media (min-width: 1024px)","@xl":"@media (min-width: 1280px)","@2xl":"@media (min-width: 1536px)"};function O(c){return b[c]??c}var u=class{constructor(){this.styles=new Map}addStyle(s){let t=`ns-${$(s)}`;if(this.styles.has(t))return t;let r=this.compileStyle(s);return this.styles.set(t,r),t}addGlobalStyle(s,e){let t=`global:${s}`;if(this.styles.has(t))return;let r=this.buildDeclarations(e);r&&this.styles.set(t,{className:t,css:`${s} {
+${r}}`,mediaQueries:{},pseudoClasses:{},keyframes:"",supports:{},layers:{}})}compileStyle(s){let{mediaQueries:e,pseudoClasses:t,normalStyles:r,keyframes:l,supports:g,container:y,layer:m}=this.parseStyles(s),i=`ns-${$(s)}`,S=this.buildDeclarations(r),w=`.${i} {
+${S}}`,d={};Object.entries(e).forEach(([a,p])=>{let o=O(a),f=this.buildDeclarations(p,"    ");if(d[o]){let D=d[o].split(`
 `).slice(2,-2).join(`
-`);d[a]=`${a} {
-  .${o} {
-${A}
-${S}  }
-}`}else d[a]=`${a} {
-  .${o} {
-${S}  }
-}`}),Object.entries(m).forEach(([c,p])=>{let a=this.buildDeclarations(p,"    ");d[c]=`${c} {
-  .${o} {
-${a}  }
-}`});let O={};Object.entries(s).forEach(([c,p])=>{let a=this.buildDeclarations(p);O[c]=`.${o}${c} {
-${a}}`});let u="";Object.entries(l).forEach(([c,p])=>{u+=`@keyframes ${c} {
-`,Object.entries(p).forEach(([a,S])=>{let w=this.buildDeclarations(S,"    ");u+=`  ${a} {
-${w}  }
-`}),u+=`}
-`});let j={};Object.entries(f).forEach(([c,p])=>{let a=this.buildDeclarations(p,"    ");j[c]=`@supports ${c} {
-  .${o} {
-${a}  }
-}`});let E={};return Object.entries(h).forEach(([c,p])=>{let a=this.buildDeclarations(p,"  ");E[c]=`@layer ${c} {
-${a}}`}),{className:o,css:M,mediaQueries:d,pseudoClasses:O,keyframes:u,supports:j,layers:E}}parseStyles(e){let t={},s={},r={},l={},f={},m={},h={};return Object.entries(e).forEach(([i,o])=>{if(i.startsWith("@keyframes "))l[i.slice(11)]=o;else if(i==="@keyframes"&&typeof o=="object")Object.assign(l,o);else if(i.startsWith("@supports")){let $=i.slice(0,9)==="@supports"?i.slice(9).trim():i;f[$]=o}else i.startsWith("@container")?m[i]=o:i.startsWith("@layer")?h[i.slice(7)||"default"]=o:i in b||i.startsWith("@media")?s[i]=o:i.startsWith(":")||i.startsWith("::")?r[i]=o:t[i]=o}),{normalStyles:t,mediaQueries:s,pseudoClasses:r,keyframes:l,supports:f,container:m,layer:h}}buildDeclarations(e,t="  "){let s="";return Object.entries(e).forEach(([r,l])=>{(typeof l=="string"||typeof l=="number")&&(s+=`${t}${x(r)}: ${l};
-`)}),s}getAllStyles(){let e="";return this.styles.forEach(t=>{t.keyframes&&(e+=`${t.keyframes}
-`),t.css&&(e+=`${t.css}
-`),Object.values(t.pseudoClasses).forEach(r=>{e+=`${r}
-`}),Object.values(t.layers).forEach(r=>{e+=`${r}
-`}),Object.values(t.supports).forEach(r=>{e+=`${r}
-`}),Object.entries(t.mediaQueries).sort(([r],[l])=>this.extractMinWidth(r)-this.extractMinWidth(l)).forEach(([,r])=>{e+=`${r}
-`})}),e}extractMinWidth(e){let t=e.match(/min-width:\s*(\d+)px/);return t?parseInt(t[1],10):0}flush(e){if(!(typeof process>"u"||process.versions?.node==null))try{let t=R("fs"),s=R("path"),r=e??n.defaultCacheFile();t.mkdirSync(s.dirname(r),{recursive:!0}),t.writeFileSync(r,this.getAllStyles(),"utf-8")}catch(t){console.error("Failed to flush styles to cache file:",t)}}static defaultCacheFile(){return R("path").join(process.cwd(),"node_modules",".cache","next-style","styles.css")}getStyleMap(){return new Map(this.styles)}};function Q(){let n=new y;return{collector:n,transformCssCall(e){return n.addStyle(e)}}}function W(n){let e=g.addStyle(n);return g.flush(),e}function T(n){Object.entries(n).forEach(([e,t])=>{g.addGlobalStyle(e,t)}),g.flush()}var g=new y;export{b as BREAKPOINTS,y as StyleCollector,x as camelToKebab,Q as createTransformer,W as css,N as deduplicateStyles,C as generateClassHash,T as global,P as normalizeMediaQuery,g as styleCollector,D as validateCSSProperty};
+`);d[o]=`${o} {
+  .${i} {
+${D}
+${f}  }
+}`}else d[o]=`${o} {
+  .${i} {
+${f}  }
+}`}),Object.entries(y).forEach(([a,p])=>{let o=this.buildDeclarations(p,"    ");d[a]=`${a} {
+  .${i} {
+${o}  }
+}`});let R={};Object.entries(t).forEach(([a,p])=>{let o=this.buildDeclarations(p);R[a]=`.${i}${a} {
+${o}}`});let h="";Object.entries(l).forEach(([a,p])=>{h+=`@keyframes ${a} {
+`,Object.entries(p).forEach(([o,f])=>{let P=this.buildDeclarations(f,"    ");h+=`  ${o} {
+${P}  }
+`}),h+=`}
+`});let C={};Object.entries(g).forEach(([a,p])=>{let o=this.buildDeclarations(p,"    ");C[a]=`@supports ${a} {
+  .${i} {
+${o}  }
+}`});let x={};return Object.entries(m).forEach(([a,p])=>{let o=this.buildDeclarations(p,"  ");x[a]=`@layer ${a} {
+${o}}`}),{className:i,css:w,mediaQueries:d,pseudoClasses:R,keyframes:h,supports:C,layers:x}}parseStyles(s){let e={},t={},r={},l={},g={},y={},m={};return Object.entries(s).forEach(([n,i])=>{if(n.startsWith("@keyframes "))l[n.slice(11)]=i;else if(n==="@keyframes"&&typeof i=="object")Object.assign(l,i);else if(n.startsWith("@supports")){let S=n.slice(0,9)==="@supports"?n.slice(9).trim():n;g[S]=i}else n.startsWith("@container")?y[n]=i:n.startsWith("@layer")?m[n.slice(7)||"default"]=i:n in b||n.startsWith("@media")?t[n]=i:n.startsWith(":")||n.startsWith("::")?r[n]=i:e[n]=i}),{normalStyles:e,mediaQueries:t,pseudoClasses:r,keyframes:l,supports:g,container:y,layer:m}}buildDeclarations(s,e="  "){let t="";return Object.entries(s).forEach(([r,l])=>{(typeof l=="string"||typeof l=="number")&&(t+=`${e}${j(r)}: ${l};
+`)}),t}getAllStyles(){let s="";return this.styles.forEach(e=>{e.keyframes&&(s+=`${e.keyframes}
+`),e.css&&(s+=`${e.css}
+`),Object.values(e.pseudoClasses).forEach(r=>{s+=`${r}
+`}),Object.values(e.layers).forEach(r=>{s+=`${r}
+`}),Object.values(e.supports).forEach(r=>{s+=`${r}
+`}),Object.entries(e.mediaQueries).sort(([r],[l])=>this.extractMinWidth(r)-this.extractMinWidth(l)).forEach(([,r])=>{s+=`${r}
+`})}),s}extractMinWidth(s){let e=s.match(/min-width:\s*(\d+)px/);return e?parseInt(e[1],10):0}getStyleMap(){return new Map(this.styles)}};function W(c){return E.addStyle(c)}function A(c){Object.entries(c).forEach(([s,e])=>{E.addGlobalStyle(s,e)})}var E=new u;export{W as css,A as global};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "next-style",
-	"version": "2.1.6",
+	"version": "2.2.0",
 	"description": "Zero-Runtime CSS-in-JS for Next.js + Turbopack",
 	"type": "module",
 	"repository": {