next-style 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs ADDED
@@ -0,0 +1,31 @@
1
+ "use strict";var U=Object.create;var x=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var ee=(r,e)=>{for(var t in e)x(r,t,{get:e[t],enumerable:!0})},N=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of X(e))!q.call(r,s)&&s!==t&&x(r,s,{get:()=>e[s],enumerable:!(n=V(e,s))||n.enumerable});return r};var g=(r,e,t)=>(t=r!=null?U(Y(r)):{},N(e||!r||!r.__esModule?x(t,"default",{value:r,enumerable:!0}):t,r)),te=r=>N(x({},"__esModule",{value:!0}),r);var ne={};ee(ne,{BREAKPOINTS:()=>S,StyleCollector:()=>m,camelToKebab:()=>P,createTransformer:()=>z,css:()=>G,deduplicateStyles:()=>T,generateClassHash:()=>h,global:()=>J,normalizeMediaQuery:()=>O,plugin:()=>k,postcssPlugin:()=>_,styleCollector:()=>u,validateCSSProperty:()=>Q});module.exports=te(ne);var F=g(require("fs"),1),I=g(require("os"),1),K=g(require("path"),1);function P(r){return r.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}function h(r){let e=typeof r=="string"?r:JSON.stringify(r),t=0;for(let n=0;n<e.length;n++){let s=e.charCodeAt(n);t=(t<<5)-t+s,t=t&t}return Math.abs(t).toString(36)}var S={"@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(r){return S[r]??r}function Q(r,e){return typeof e=="string"||typeof e=="number"||typeof e=="object"&&!Array.isArray(e)}function T(r){let e=new Map,t=new Set;return r.forEach((n,s)=>{let o=JSON.stringify(n);t.has(o)||(t.add(o),e.set(s,n))}),e}var m=class{constructor(){this.styles=new Map}addStyle(e){let n=`ns-${h(e)}`;if(this.styles.has(n))return n;let s=this.compileStyle(e);return this.styles.set(n,s),n}addGlobalStyle(e,t){let n=`global:${e}`;if(this.styles.has(n))return;let s=this.buildDeclarations(t);s&&this.styles.set(n,{className:n,css:`${e} {
2
+ ${s}}`,mediaQueries:{},pseudoClasses:{},keyframes:"",supports:{},layers:{}})}compileStyle(e){let{mediaQueries:t,pseudoClasses:n,normalStyles:s,keyframes:o,supports:d,container:y,layer:C}=this.parseStyles(e),a=`ns-${h(e)}`,E=this.buildDeclarations(s),v=`.${a} {
3
+ ${E}}`,f={};Object.entries(t).forEach(([l,p])=>{let c=O(l),$=this.buildDeclarations(p," ");if(f[c]){let Z=f[c].split(`
4
+ `).slice(2,-2).join(`
5
+ `);f[c]=`${c} {
6
+ .${a} {
7
+ ${Z}
8
+ ${$} }
9
+ }`}else f[c]=`${c} {
10
+ .${a} {
11
+ ${$} }
12
+ }`}),Object.entries(y).forEach(([l,p])=>{let c=this.buildDeclarations(p," ");f[l]=`${l} {
13
+ .${a} {
14
+ ${c} }
15
+ }`});let w={};Object.entries(n).forEach(([l,p])=>{let c=this.buildDeclarations(p);w[l]=`.${a}${l} {
16
+ ${c}}`});let b="";Object.entries(o).forEach(([l,p])=>{b+=`@keyframes ${l} {
17
+ `,Object.entries(p).forEach(([c,$])=>{let D=this.buildDeclarations($," ");b+=` ${c} {
18
+ ${D} }
19
+ `}),b+=`}
20
+ `});let A={};Object.entries(d).forEach(([l,p])=>{let c=this.buildDeclarations(p," ");A[l]=`@supports ${l} {
21
+ .${a} {
22
+ ${c} }
23
+ }`});let W={};return Object.entries(C).forEach(([l,p])=>{let c=this.buildDeclarations(p," ");W[l]=`@layer ${l} {
24
+ ${c}}`}),{className:a,css:v,mediaQueries:f,pseudoClasses:w,keyframes:b,supports:A,layers:W}}parseStyles(e){let t={},n={},s={},o={},d={},y={},C={};return Object.entries(e).forEach(([i,a])=>{if(i.startsWith("@keyframes "))o[i.slice(11)]=a;else if(i==="@keyframes"&&typeof a=="object")Object.assign(o,a);else if(i.startsWith("@supports")){let E=i.slice(0,9)==="@supports"?i.slice(9).trim():i;d[E]=a}else i.startsWith("@container")?y[i]=a:i.startsWith("@layer")?C[i.slice(7)||"default"]=a:i in S||i.startsWith("@media")?n[i]=a:i.startsWith(":")||i.startsWith("::")?s[i]=a:t[i]=a}),{normalStyles:t,mediaQueries:n,pseudoClasses:s,keyframes:o,supports:d,container:y,layer:C}}buildDeclarations(e,t=" "){let n="";return Object.entries(e).forEach(([s,o])=>{(typeof o=="string"||typeof o=="number")&&(n+=`${t}${P(s)}: ${o};
25
+ `)}),n}getAllStyles(){let e="";return this.styles.forEach(t=>{t.keyframes&&(e+=`${t.keyframes}
26
+ `),t.css&&(e+=`${t.css}
27
+ `),Object.values(t.pseudoClasses).forEach(s=>{e+=`${s}
28
+ `}),Object.values(t.layers).forEach(s=>{e+=`${s}
29
+ `}),Object.values(t.supports).forEach(s=>{e+=`${s}
30
+ `}),Object.entries(t.mediaQueries).sort(([s],[o])=>this.extractMinWidth(s)-this.extractMinWidth(o)).forEach(([,s])=>{e+=`${s}
31
+ `})}),e}extractMinWidth(e){let t=e.match(/min-width:\s*(\d+)px/);return t?parseInt(t[1],10):0}flush(e){try{let t=e??K.default.join(I.default.tmpdir(),"next-style.css");F.default.writeFileSync(t,this.getAllStyles(),"utf-8")}catch(t){console.error("Failed to flush styles to cache file:",t)}}getStyleMap(){return new Map(this.styles)}};function z(){let r=new m;return{collector:r,transformCssCall(e){return r.addStyle(e)}}}var H=g(require("fs"),1),B=g(require("os"),1),L=g(require("path"),1),j=g(require("postcss"),1),se=/^next-style$/,re=L.default.join(B.default.tmpdir(),"next-style.css");function M(r={}){let e=r.cacheFile??re;return{postcssPlugin:"next-style",Once(n){let s="";try{s=H.default.readFileSync(e,"utf-8")}catch{}let o=!1;n.walkAtRules("import",d=>{let y=d.params.replace(/['"]/g,"").trim();se.test(y)&&(s.trim()?d.replaceWith(j.default.parse(s)):d.remove(),o=!0)}),!o&&s.trim()&&n.prepend(j.default.parse(s))}}}M.postcss=!0;var _=M,k=M;function G(r){let e=u.addStyle(r);return u.flush(),e}function J(r){Object.entries(r).forEach(([e,t])=>{u.addGlobalStyle(e,t)}),u.flush()}var u=new m;0&&(module.exports={BREAKPOINTS,StyleCollector,camelToKebab,createTransformer,css,deduplicateStyles,generateClassHash,global,normalizeMediaQuery,plugin,postcssPlugin,styleCollector,validateCSSProperty});
@@ -0,0 +1,259 @@
1
+ export { plugin, default as postcssPlugin } from './postcss-plugin/index.cjs';
2
+ import { Properties, Pseudos } from 'csstype';
3
+ import 'postcss';
4
+
5
+ /**
6
+ * The compiled representation of a single `css({})` call.
7
+ * Produced by `StyleCollector` and consumed by the PostCSS plugin.
8
+ */
9
+ interface CompiledStyle {
10
+ /** Scoped class name, e.g. `"ns-1x2y3z"`. */
11
+ className: string;
12
+ /** Base CSS rule block for this class. */
13
+ css: string;
14
+ /** Map of normalized media query string → CSS rule block. */
15
+ mediaQueries: Record<string, string>;
16
+ /** Map of pseudo selector (e.g. `":hover"`) → CSS rule block. */
17
+ pseudoClasses: Record<string, string>;
18
+ /** Concatenated `@keyframes` blocks referenced by this style. */
19
+ keyframes: string;
20
+ /** Map of `@supports` condition → CSS rule block. */
21
+ supports: Record<string, string>;
22
+ /** Map of `@layer` name → CSS rule block. */
23
+ layers: Record<string, string>;
24
+ }
25
+ /**
26
+ * Collects, compiles, and deduplicates styles registered via `css()` and `global()`.
27
+ *
28
+ * A single shared instance is held by the runtime module. The PostCSS plugin
29
+ * calls `getAllStyles()` at build time to drain the collected CSS.
30
+ *
31
+ * @example
32
+ * const collector = new StyleCollector()
33
+ * const className = collector.addStyle({ color: 'red' }) // "ns-abc123"
34
+ * const css = collector.getAllStyles() // ".ns-abc123 { color: red; }"
35
+ */
36
+ declare class StyleCollector {
37
+ private styles;
38
+ /**
39
+ * Compiles a style object and registers it in the collector.
40
+ * Returns the same class name for identical style objects (deduplication).
41
+ *
42
+ * @param styleObj - Raw style object from a `css({})` call.
43
+ * @returns Scoped class name string.
44
+ */
45
+ addStyle(styleObj: any): string;
46
+ /**
47
+ * Registers a global style rule (no scoped class).
48
+ * Subsequent calls with the same selector are ignored (idempotent).
49
+ *
50
+ * @param selector - CSS selector string, e.g. `"body"` or `"h1, h2"`.
51
+ * @param styleObj - Style properties to apply to the selector.
52
+ */
53
+ addGlobalStyle(selector: string, styleObj: any): void;
54
+ private compileStyle;
55
+ private parseStyles;
56
+ private buildDeclarations;
57
+ /**
58
+ * Serialises all collected styles into a single CSS string.
59
+ *
60
+ * Output order:
61
+ * 1. `@keyframes` blocks
62
+ * 2. Base class rules
63
+ * 3. Pseudo-class/element rules
64
+ * 4. `@layer` blocks
65
+ * 5. `@supports` blocks
66
+ * 6. Media queries (ascending `min-width`, mobile-first)
67
+ *
68
+ * @returns Full CSS string ready to be injected or written to a file.
69
+ */
70
+ getAllStyles(): string;
71
+ private extractMinWidth;
72
+ /**
73
+ * Writes all collected styles to a temp file so the PostCSS plugin
74
+ * (which runs in a separate process) can read them.
75
+ *
76
+ * Call this after all `css()` / `global()` calls have been evaluated,
77
+ * e.g. at the end of a build-time entry point.
78
+ *
79
+ * @param filePath - Destination file path. Defaults to `os.tmpdir()/next-style.css`.
80
+ */
81
+ flush(filePath?: string): void;
82
+ /**
83
+ * Returns a snapshot of the internal style map.
84
+ * Intended for inspection and testing — not for direct mutation.
85
+ */
86
+ getStyleMap(): Map<string, CompiledStyle>;
87
+ }
88
+ /**
89
+ * Creates an isolated `StyleCollector` paired with a transform helper.
90
+ *
91
+ * Primarily used by SWC/Babel transforms and test harnesses that need
92
+ * a fresh collector per file or per test, independent of the shared
93
+ * runtime instance.
94
+ *
95
+ * @example
96
+ * const { collector, transformCssCall } = createTransformer()
97
+ * const className = transformCssCall({ color: 'red' })
98
+ * const css = collector.getAllStyles()
99
+ */
100
+ declare function createTransformer(): {
101
+ collector: StyleCollector;
102
+ /**
103
+ * Equivalent to calling `css()` against this transformer's isolated collector.
104
+ * @param styleObj - Raw style object.
105
+ * @returns Scoped class name string.
106
+ */
107
+ transformCssCall(styleObj: any): string;
108
+ };
109
+
110
+ /**
111
+ * CSS properties with full type safety and autocomplete via csstype.
112
+ * Accepts both string and number values (e.g. `fontSize: 16` or `fontSize: '16px'`).
113
+ */
114
+ type CSSProperties = Properties<string | number>;
115
+ /** @internal Mapped type for pseudo-classes/elements — avoids index signature limitation */
116
+ type PseudoStyles = {
117
+ [P in Pseudos]?: CSSProperties;
118
+ };
119
+ /** @internal At-rule keys (@media, @container, @supports, @layer, @keyframes) */
120
+ type AtRuleStyles = {
121
+ '@sm'?: CSSProperties;
122
+ '@md'?: CSSProperties;
123
+ '@lg'?: CSSProperties;
124
+ '@xl'?: CSSProperties;
125
+ '@2xl'?: CSSProperties;
126
+ [media: `@media ${string}`]: CSSProperties;
127
+ [container: `@container ${string}`]: CSSProperties;
128
+ [supports: `@supports ${string}`]: CSSProperties;
129
+ [layer: `@layer ${string}`]: CSSProperties;
130
+ [keyframes: `@keyframes ${string}`]: Record<string, CSSProperties>;
131
+ };
132
+ /**
133
+ * Style object passed to `css()` and `global()`.
134
+ *
135
+ * Supports:
136
+ * - All CSS properties (typed via csstype)
137
+ * - Responsive breakpoints: `'@sm'`, `'@md'`, `'@lg'`, `'@xl'`, `'@2xl'`
138
+ * - Arbitrary media queries: `'@media (min-width: 900px)'`
139
+ * - Pseudo-classes and pseudo-elements: `':hover'`, `'::before'`, etc.
140
+ * - Container queries: `'@container sidebar (min-width: 300px)'`
141
+ * - Feature queries: `'@supports (display: grid)'`
142
+ * - Keyframe animations: `'@keyframes fadeIn'`
143
+ * - Cascade layers: `'@layer utilities'`
144
+ *
145
+ * @example
146
+ * const style: CSSObject = {
147
+ * fontSize: '16px',
148
+ * '@md': { fontSize: '20px' },
149
+ * ':hover': { color: 'blue' },
150
+ * '@keyframes spin': { to: { transform: 'rotate(360deg)' } },
151
+ * }
152
+ */
153
+ type CSSObject = CSSProperties & PseudoStyles & AtRuleStyles & {
154
+ [key: string]: any;
155
+ };
156
+ /**
157
+ * Converts a style object into a unique CSS class name.
158
+ *
159
+ * Styles are collected at build time by the PostCSS plugin and emitted as
160
+ * a single static CSS file — there is zero runtime overhead in production.
161
+ * Identical style objects always return the same class name (deduplication).
162
+ *
163
+ * @param styles - A `CSSObject` describing the styles for this element.
164
+ * @returns A stable class name string (e.g. `"ns-1x2y3z"`).
165
+ *
166
+ * @example
167
+ * const button = css({
168
+ * padding: '8px 16px',
169
+ * borderRadius: '6px',
170
+ * backgroundColor: '#7F77DD',
171
+ * ':hover': { backgroundColor: '#534AB7' },
172
+ * '@md': { padding: '10px 20px' },
173
+ * })
174
+ *
175
+ * export function Button() {
176
+ * return <button className={button}>Click me</button>
177
+ * }
178
+ */
179
+ declare function css(styles: CSSObject): string;
180
+ /**
181
+ * Registers global CSS styles applied directly to selectors (no scoped class).
182
+ *
183
+ * Useful for CSS resets, base typography, and third-party element overrides.
184
+ * Like `css()`, styles are extracted at build time — no runtime cost.
185
+ *
186
+ * @param styles - A record mapping CSS selectors to `CSSObject` style definitions.
187
+ *
188
+ * @example
189
+ * global({
190
+ * '*': { boxSizing: 'border-box', margin: '0' },
191
+ * 'body': { fontFamily: 'Inter, sans-serif', lineHeight: '1.6' },
192
+ * 'h1, h2, h3': { fontWeight: 500 },
193
+ * })
194
+ */
195
+ declare function global(styles: Record<string, CSSObject>): void;
196
+
197
+ declare const collector: StyleCollector;
198
+
199
+ /**
200
+ * Converts a camelCase CSS property name to kebab-case.
201
+ *
202
+ * @param str - camelCase string, e.g. `"backgroundColor"`.
203
+ * @returns kebab-case string, e.g. `"background-color"`.
204
+ *
205
+ * @example
206
+ * camelToKebab('fontSize') // "font-size"
207
+ * camelToKebab('borderTopWidth') // "border-top-width"
208
+ */
209
+ declare function camelToKebab(str: string): string;
210
+ /**
211
+ * Generates a short, stable hash string from a style object or string.
212
+ * Used to produce unique class name suffixes (e.g. `"ns-1x2y3z"`).
213
+ *
214
+ * @param styles - Style object or pre-serialised string.
215
+ * @returns Base-36 hash string.
216
+ */
217
+ declare function generateClassHash(styles: any): string;
218
+ /**
219
+ * Shorthand breakpoint aliases mapped to their full `@media` query strings.
220
+ *
221
+ * | Key | Expands to |
222
+ * |--------|-------------------------------------|
223
+ * | `@sm` | `@media (min-width: 640px)` |
224
+ * | `@md` | `@media (min-width: 768px)` |
225
+ * | `@lg` | `@media (min-width: 1024px)` |
226
+ * | `@xl` | `@media (min-width: 1280px)` |
227
+ * | `@2xl` | `@media (min-width: 1536px)` |
228
+ */
229
+ declare const BREAKPOINTS: Record<string, string>;
230
+ /**
231
+ * Resolves a breakpoint shorthand to its full `@media` query string.
232
+ * Passes through unrecognised strings unchanged.
233
+ *
234
+ * @param query - Shorthand key (e.g. `"@md"`) or an arbitrary media query.
235
+ * @returns Full media query string (e.g. `"@media (min-width: 768px)"`).
236
+ *
237
+ * @example
238
+ * normalizeMediaQuery('@md') // "@media (min-width: 768px)"
239
+ * normalizeMediaQuery('@media (max-width: 600px)') // "@media (max-width: 600px)"
240
+ */
241
+ declare function normalizeMediaQuery(query: string): string;
242
+ /**
243
+ * Returns `true` if the value is a valid CSS property value that can be
244
+ * serialised to a declaration (string, number, or nested object).
245
+ *
246
+ * @param _key - CSS property name (unused, reserved for future validation).
247
+ * @param value - Value to check.
248
+ */
249
+ declare function validateCSSProperty(_key: string, value: any): boolean;
250
+ /**
251
+ * Removes duplicate entries from a style map, keeping the first occurrence.
252
+ * Two entries are considered duplicates when their serialised values are identical.
253
+ *
254
+ * @param styles - Map of class name → style data.
255
+ * @returns New map with duplicates removed.
256
+ */
257
+ declare function deduplicateStyles(styles: Map<string, any>): Map<string, any>;
258
+
259
+ export { BREAKPOINTS, type CSSObject, type CSSProperties, type CompiledStyle, StyleCollector, camelToKebab, createTransformer, css, deduplicateStyles, generateClassHash, global, normalizeMediaQuery, collector as styleCollector, validateCSSProperty };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,259 @@
1
- export { type CompiledStyle, createTransformer, StyleCollector } from './compiler';
2
- export { default as postcssPlugin, plugin } from './postcss-plugin';
3
- export { type CSSObject, type CSSProperties, css, global, styleCollector } from './runtime';
4
- export { BREAKPOINTS, camelToKebab, deduplicateStyles, generateClassHash, normalizeMediaQuery, validateCSSProperty } from './utils';
5
- //# sourceMappingURL=index.d.ts.map
1
+ export { plugin, default as postcssPlugin } from './postcss-plugin/index.js';
2
+ import { Properties, Pseudos } from 'csstype';
3
+ import 'postcss';
4
+
5
+ /**
6
+ * The compiled representation of a single `css({})` call.
7
+ * Produced by `StyleCollector` and consumed by the PostCSS plugin.
8
+ */
9
+ interface CompiledStyle {
10
+ /** Scoped class name, e.g. `"ns-1x2y3z"`. */
11
+ className: string;
12
+ /** Base CSS rule block for this class. */
13
+ css: string;
14
+ /** Map of normalized media query string → CSS rule block. */
15
+ mediaQueries: Record<string, string>;
16
+ /** Map of pseudo selector (e.g. `":hover"`) → CSS rule block. */
17
+ pseudoClasses: Record<string, string>;
18
+ /** Concatenated `@keyframes` blocks referenced by this style. */
19
+ keyframes: string;
20
+ /** Map of `@supports` condition → CSS rule block. */
21
+ supports: Record<string, string>;
22
+ /** Map of `@layer` name → CSS rule block. */
23
+ layers: Record<string, string>;
24
+ }
25
+ /**
26
+ * Collects, compiles, and deduplicates styles registered via `css()` and `global()`.
27
+ *
28
+ * A single shared instance is held by the runtime module. The PostCSS plugin
29
+ * calls `getAllStyles()` at build time to drain the collected CSS.
30
+ *
31
+ * @example
32
+ * const collector = new StyleCollector()
33
+ * const className = collector.addStyle({ color: 'red' }) // "ns-abc123"
34
+ * const css = collector.getAllStyles() // ".ns-abc123 { color: red; }"
35
+ */
36
+ declare class StyleCollector {
37
+ private styles;
38
+ /**
39
+ * Compiles a style object and registers it in the collector.
40
+ * Returns the same class name for identical style objects (deduplication).
41
+ *
42
+ * @param styleObj - Raw style object from a `css({})` call.
43
+ * @returns Scoped class name string.
44
+ */
45
+ addStyle(styleObj: any): string;
46
+ /**
47
+ * Registers a global style rule (no scoped class).
48
+ * Subsequent calls with the same selector are ignored (idempotent).
49
+ *
50
+ * @param selector - CSS selector string, e.g. `"body"` or `"h1, h2"`.
51
+ * @param styleObj - Style properties to apply to the selector.
52
+ */
53
+ addGlobalStyle(selector: string, styleObj: any): void;
54
+ private compileStyle;
55
+ private parseStyles;
56
+ private buildDeclarations;
57
+ /**
58
+ * Serialises all collected styles into a single CSS string.
59
+ *
60
+ * Output order:
61
+ * 1. `@keyframes` blocks
62
+ * 2. Base class rules
63
+ * 3. Pseudo-class/element rules
64
+ * 4. `@layer` blocks
65
+ * 5. `@supports` blocks
66
+ * 6. Media queries (ascending `min-width`, mobile-first)
67
+ *
68
+ * @returns Full CSS string ready to be injected or written to a file.
69
+ */
70
+ getAllStyles(): string;
71
+ private extractMinWidth;
72
+ /**
73
+ * Writes all collected styles to a temp file so the PostCSS plugin
74
+ * (which runs in a separate process) can read them.
75
+ *
76
+ * Call this after all `css()` / `global()` calls have been evaluated,
77
+ * e.g. at the end of a build-time entry point.
78
+ *
79
+ * @param filePath - Destination file path. Defaults to `os.tmpdir()/next-style.css`.
80
+ */
81
+ flush(filePath?: string): void;
82
+ /**
83
+ * Returns a snapshot of the internal style map.
84
+ * Intended for inspection and testing — not for direct mutation.
85
+ */
86
+ getStyleMap(): Map<string, CompiledStyle>;
87
+ }
88
+ /**
89
+ * Creates an isolated `StyleCollector` paired with a transform helper.
90
+ *
91
+ * Primarily used by SWC/Babel transforms and test harnesses that need
92
+ * a fresh collector per file or per test, independent of the shared
93
+ * runtime instance.
94
+ *
95
+ * @example
96
+ * const { collector, transformCssCall } = createTransformer()
97
+ * const className = transformCssCall({ color: 'red' })
98
+ * const css = collector.getAllStyles()
99
+ */
100
+ declare function createTransformer(): {
101
+ collector: StyleCollector;
102
+ /**
103
+ * Equivalent to calling `css()` against this transformer's isolated collector.
104
+ * @param styleObj - Raw style object.
105
+ * @returns Scoped class name string.
106
+ */
107
+ transformCssCall(styleObj: any): string;
108
+ };
109
+
110
+ /**
111
+ * CSS properties with full type safety and autocomplete via csstype.
112
+ * Accepts both string and number values (e.g. `fontSize: 16` or `fontSize: '16px'`).
113
+ */
114
+ type CSSProperties = Properties<string | number>;
115
+ /** @internal Mapped type for pseudo-classes/elements — avoids index signature limitation */
116
+ type PseudoStyles = {
117
+ [P in Pseudos]?: CSSProperties;
118
+ };
119
+ /** @internal At-rule keys (@media, @container, @supports, @layer, @keyframes) */
120
+ type AtRuleStyles = {
121
+ '@sm'?: CSSProperties;
122
+ '@md'?: CSSProperties;
123
+ '@lg'?: CSSProperties;
124
+ '@xl'?: CSSProperties;
125
+ '@2xl'?: CSSProperties;
126
+ [media: `@media ${string}`]: CSSProperties;
127
+ [container: `@container ${string}`]: CSSProperties;
128
+ [supports: `@supports ${string}`]: CSSProperties;
129
+ [layer: `@layer ${string}`]: CSSProperties;
130
+ [keyframes: `@keyframes ${string}`]: Record<string, CSSProperties>;
131
+ };
132
+ /**
133
+ * Style object passed to `css()` and `global()`.
134
+ *
135
+ * Supports:
136
+ * - All CSS properties (typed via csstype)
137
+ * - Responsive breakpoints: `'@sm'`, `'@md'`, `'@lg'`, `'@xl'`, `'@2xl'`
138
+ * - Arbitrary media queries: `'@media (min-width: 900px)'`
139
+ * - Pseudo-classes and pseudo-elements: `':hover'`, `'::before'`, etc.
140
+ * - Container queries: `'@container sidebar (min-width: 300px)'`
141
+ * - Feature queries: `'@supports (display: grid)'`
142
+ * - Keyframe animations: `'@keyframes fadeIn'`
143
+ * - Cascade layers: `'@layer utilities'`
144
+ *
145
+ * @example
146
+ * const style: CSSObject = {
147
+ * fontSize: '16px',
148
+ * '@md': { fontSize: '20px' },
149
+ * ':hover': { color: 'blue' },
150
+ * '@keyframes spin': { to: { transform: 'rotate(360deg)' } },
151
+ * }
152
+ */
153
+ type CSSObject = CSSProperties & PseudoStyles & AtRuleStyles & {
154
+ [key: string]: any;
155
+ };
156
+ /**
157
+ * Converts a style object into a unique CSS class name.
158
+ *
159
+ * Styles are collected at build time by the PostCSS plugin and emitted as
160
+ * a single static CSS file — there is zero runtime overhead in production.
161
+ * Identical style objects always return the same class name (deduplication).
162
+ *
163
+ * @param styles - A `CSSObject` describing the styles for this element.
164
+ * @returns A stable class name string (e.g. `"ns-1x2y3z"`).
165
+ *
166
+ * @example
167
+ * const button = css({
168
+ * padding: '8px 16px',
169
+ * borderRadius: '6px',
170
+ * backgroundColor: '#7F77DD',
171
+ * ':hover': { backgroundColor: '#534AB7' },
172
+ * '@md': { padding: '10px 20px' },
173
+ * })
174
+ *
175
+ * export function Button() {
176
+ * return <button className={button}>Click me</button>
177
+ * }
178
+ */
179
+ declare function css(styles: CSSObject): string;
180
+ /**
181
+ * Registers global CSS styles applied directly to selectors (no scoped class).
182
+ *
183
+ * Useful for CSS resets, base typography, and third-party element overrides.
184
+ * Like `css()`, styles are extracted at build time — no runtime cost.
185
+ *
186
+ * @param styles - A record mapping CSS selectors to `CSSObject` style definitions.
187
+ *
188
+ * @example
189
+ * global({
190
+ * '*': { boxSizing: 'border-box', margin: '0' },
191
+ * 'body': { fontFamily: 'Inter, sans-serif', lineHeight: '1.6' },
192
+ * 'h1, h2, h3': { fontWeight: 500 },
193
+ * })
194
+ */
195
+ declare function global(styles: Record<string, CSSObject>): void;
196
+
197
+ declare const collector: StyleCollector;
198
+
199
+ /**
200
+ * Converts a camelCase CSS property name to kebab-case.
201
+ *
202
+ * @param str - camelCase string, e.g. `"backgroundColor"`.
203
+ * @returns kebab-case string, e.g. `"background-color"`.
204
+ *
205
+ * @example
206
+ * camelToKebab('fontSize') // "font-size"
207
+ * camelToKebab('borderTopWidth') // "border-top-width"
208
+ */
209
+ declare function camelToKebab(str: string): string;
210
+ /**
211
+ * Generates a short, stable hash string from a style object or string.
212
+ * Used to produce unique class name suffixes (e.g. `"ns-1x2y3z"`).
213
+ *
214
+ * @param styles - Style object or pre-serialised string.
215
+ * @returns Base-36 hash string.
216
+ */
217
+ declare function generateClassHash(styles: any): string;
218
+ /**
219
+ * Shorthand breakpoint aliases mapped to their full `@media` query strings.
220
+ *
221
+ * | Key | Expands to |
222
+ * |--------|-------------------------------------|
223
+ * | `@sm` | `@media (min-width: 640px)` |
224
+ * | `@md` | `@media (min-width: 768px)` |
225
+ * | `@lg` | `@media (min-width: 1024px)` |
226
+ * | `@xl` | `@media (min-width: 1280px)` |
227
+ * | `@2xl` | `@media (min-width: 1536px)` |
228
+ */
229
+ declare const BREAKPOINTS: Record<string, string>;
230
+ /**
231
+ * Resolves a breakpoint shorthand to its full `@media` query string.
232
+ * Passes through unrecognised strings unchanged.
233
+ *
234
+ * @param query - Shorthand key (e.g. `"@md"`) or an arbitrary media query.
235
+ * @returns Full media query string (e.g. `"@media (min-width: 768px)"`).
236
+ *
237
+ * @example
238
+ * normalizeMediaQuery('@md') // "@media (min-width: 768px)"
239
+ * normalizeMediaQuery('@media (max-width: 600px)') // "@media (max-width: 600px)"
240
+ */
241
+ declare function normalizeMediaQuery(query: string): string;
242
+ /**
243
+ * Returns `true` if the value is a valid CSS property value that can be
244
+ * serialised to a declaration (string, number, or nested object).
245
+ *
246
+ * @param _key - CSS property name (unused, reserved for future validation).
247
+ * @param value - Value to check.
248
+ */
249
+ declare function validateCSSProperty(_key: string, value: any): boolean;
250
+ /**
251
+ * Removes duplicate entries from a style map, keeping the first occurrence.
252
+ * Two entries are considered duplicates when their serialised values are identical.
253
+ *
254
+ * @param styles - Map of class name → style data.
255
+ * @returns New map with duplicates removed.
256
+ */
257
+ declare function deduplicateStyles(styles: Map<string, any>): Map<string, any>;
258
+
259
+ export { BREAKPOINTS, type CSSObject, type CSSProperties, type CompiledStyle, StyleCollector, camelToKebab, createTransformer, css, deduplicateStyles, generateClassHash, global, normalizeMediaQuery, collector as styleCollector, validateCSSProperty };
package/dist/index.js CHANGED
@@ -1,4 +1,31 @@
1
- export { createTransformer, StyleCollector } from './compiler';
2
- export { default as postcssPlugin, plugin } from './postcss-plugin';
3
- export { css, global, styleCollector } from './runtime';
4
- export { BREAKPOINTS, camelToKebab, deduplicateStyles, generateClassHash, normalizeMediaQuery, validateCSSProperty } from './utils';
1
+ import F from"fs";import I from"os";import K from"path";function P(n){return n.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}function $(n){let e=typeof n=="string"?n:JSON.stringify(n),t=0;for(let r=0;r<e.length;r++){let s=e.charCodeAt(r);t=(t<<5)-t+s,t=t&t}return Math.abs(t).toString(36)}var x={"@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(n){return x[n]??n}function Q(n,e){return typeof e=="string"||typeof e=="number"||typeof e=="object"&&!Array.isArray(e)}function T(n){let e=new Map,t=new Set;return n.forEach((r,s)=>{let o=JSON.stringify(r);t.has(o)||(t.add(o),e.set(s,r))}),e}var y=class{constructor(){this.styles=new Map}addStyle(e){let r=`ns-${$(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} {
2
+ ${s}}`,mediaQueries:{},pseudoClasses:{},keyframes:"",supports:{},layers:{}})}compileStyle(e){let{mediaQueries:t,pseudoClasses:r,normalStyles:s,keyframes:o,supports:d,container:g,layer:u}=this.parseStyles(e),a=`ns-${$(e)}`,R=this.buildDeclarations(s),D=`.${a} {
3
+ ${R}}`,m={};Object.entries(t).forEach(([l,p])=>{let c=O(l),S=this.buildDeclarations(p," ");if(m[c]){let N=m[c].split(`
4
+ `).slice(2,-2).join(`
5
+ `);m[c]=`${c} {
6
+ .${a} {
7
+ ${N}
8
+ ${S} }
9
+ }`}else m[c]=`${c} {
10
+ .${a} {
11
+ ${S} }
12
+ }`}),Object.entries(g).forEach(([l,p])=>{let c=this.buildDeclarations(p," ");m[l]=`${l} {
13
+ .${a} {
14
+ ${c} }
15
+ }`});let j={};Object.entries(r).forEach(([l,p])=>{let c=this.buildDeclarations(p);j[l]=`.${a}${l} {
16
+ ${c}}`});let h="";Object.entries(o).forEach(([l,p])=>{h+=`@keyframes ${l} {
17
+ `,Object.entries(p).forEach(([c,S])=>{let A=this.buildDeclarations(S," ");h+=` ${c} {
18
+ ${A} }
19
+ `}),h+=`}
20
+ `});let M={};Object.entries(d).forEach(([l,p])=>{let c=this.buildDeclarations(p," ");M[l]=`@supports ${l} {
21
+ .${a} {
22
+ ${c} }
23
+ }`});let w={};return Object.entries(u).forEach(([l,p])=>{let c=this.buildDeclarations(p," ");w[l]=`@layer ${l} {
24
+ ${c}}`}),{className:a,css:D,mediaQueries:m,pseudoClasses:j,keyframes:h,supports:M,layers:w}}parseStyles(e){let t={},r={},s={},o={},d={},g={},u={};return Object.entries(e).forEach(([i,a])=>{if(i.startsWith("@keyframes "))o[i.slice(11)]=a;else if(i==="@keyframes"&&typeof a=="object")Object.assign(o,a);else if(i.startsWith("@supports")){let R=i.slice(0,9)==="@supports"?i.slice(9).trim():i;d[R]=a}else i.startsWith("@container")?g[i]=a:i.startsWith("@layer")?u[i.slice(7)||"default"]=a:i in x||i.startsWith("@media")?r[i]=a:i.startsWith(":")||i.startsWith("::")?s[i]=a:t[i]=a}),{normalStyles:t,mediaQueries:r,pseudoClasses:s,keyframes:o,supports:d,container:g,layer:u}}buildDeclarations(e,t=" "){let r="";return Object.entries(e).forEach(([s,o])=>{(typeof o=="string"||typeof o=="number")&&(r+=`${t}${P(s)}: ${o};
25
+ `)}),r}getAllStyles(){let e="";return this.styles.forEach(t=>{t.keyframes&&(e+=`${t.keyframes}
26
+ `),t.css&&(e+=`${t.css}
27
+ `),Object.values(t.pseudoClasses).forEach(s=>{e+=`${s}
28
+ `}),Object.values(t.layers).forEach(s=>{e+=`${s}
29
+ `}),Object.values(t.supports).forEach(s=>{e+=`${s}
30
+ `}),Object.entries(t.mediaQueries).sort(([s],[o])=>this.extractMinWidth(s)-this.extractMinWidth(o)).forEach(([,s])=>{e+=`${s}
31
+ `})}),e}extractMinWidth(e){let t=e.match(/min-width:\s*(\d+)px/);return t?parseInt(t[1],10):0}flush(e){try{let t=e??K.join(I.tmpdir(),"next-style.css");F.writeFileSync(t,this.getAllStyles(),"utf-8")}catch(t){console.error("Failed to flush styles to cache file:",t)}}getStyleMap(){return new Map(this.styles)}};function z(){let n=new y;return{collector:n,transformCssCall(e){return n.addStyle(e)}}}import H from"fs";import B from"os";import L from"path";import W from"postcss";var _=/^next-style$/,k=L.join(B.tmpdir(),"next-style.css");function E(n={}){let e=n.cacheFile??k;return{postcssPlugin:"next-style",Once(r){let s="";try{s=H.readFileSync(e,"utf-8")}catch{}let o=!1;r.walkAtRules("import",d=>{let g=d.params.replace(/['"]/g,"").trim();_.test(g)&&(s.trim()?d.replaceWith(W.parse(s)):d.remove(),o=!0)}),!o&&s.trim()&&r.prepend(W.parse(s))}}}E.postcss=!0;var G=E,J=E;function v(n){let e=f.addStyle(n);return f.flush(),e}function Z(n){Object.entries(n).forEach(([e,t])=>{f.addGlobalStyle(e,t)}),f.flush()}var f=new y;export{x as BREAKPOINTS,y as StyleCollector,P as camelToKebab,z as createTransformer,v as css,T as deduplicateStyles,$ as generateClassHash,Z as global,O as normalizeMediaQuery,J as plugin,G as postcssPlugin,f as styleCollector,Q as validateCSSProperty};
@@ -0,0 +1 @@
1
+ "use strict";var y=Object.create;var i=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var C=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of d(e))!O.call(t,s)&&s!==r&&i(t,s,{get:()=>e[s],enumerable:!(n=P(e,s))||n.enumerable});return t};var c=(t,e,r)=>(r=t!=null?y(F(t)):{},m(e||!t||!t.__esModule?i(r,"default",{value:t,enumerable:!0}):r,t)),E=t=>m(i({},"__esModule",{value:!0}),t);var S={};C(S,{CACHE_FILE:()=>x,default:()=>A,plugin:()=>I});module.exports=E(S);var u=c(require("fs"),1),f=c(require("os"),1),g=c(require("path"),1),p=c(require("postcss"),1),v=/^next-style$/,x=g.default.join(f.default.tmpdir(),"next-style.css");function l(t={}){let e=t.cacheFile??x;return{postcssPlugin:"next-style",Once(n){let s="";try{s=u.default.readFileSync(e,"utf-8")}catch{}let a=!1;n.walkAtRules("import",o=>{let h=o.params.replace(/['"]/g,"").trim();v.test(h)&&(s.trim()?o.replaceWith(p.default.parse(s)):o.remove(),a=!0)}),!a&&s.trim()&&n.prepend(p.default.parse(s))}}}l.postcss=!0;var A=l,I=l;0&&(module.exports={CACHE_FILE,plugin});
@@ -0,0 +1,19 @@
1
+ import postcss from 'postcss';
2
+
3
+ /** Path to the temp file used as IPC bridge between runtime and PostCSS. */
4
+ declare const CACHE_FILE: string;
5
+ interface PluginOptions {
6
+ /**
7
+ * Override the cache file path.
8
+ * Defaults to `os.tmpdir()/next-style.css`.
9
+ */
10
+ cacheFile?: string;
11
+ }
12
+ declare function nextStylePlugin(opts?: PluginOptions): postcss.Plugin;
13
+ declare namespace nextStylePlugin {
14
+ var postcss: boolean;
15
+ }
16
+
17
+ declare const plugin: typeof nextStylePlugin;
18
+
19
+ export { CACHE_FILE, nextStylePlugin as default, plugin };
@@ -1,6 +1,7 @@
1
1
  import postcss from 'postcss';
2
+
2
3
  /** Path to the temp file used as IPC bridge between runtime and PostCSS. */
3
- export declare const CACHE_FILE: string;
4
+ declare const CACHE_FILE: string;
4
5
  interface PluginOptions {
5
6
  /**
6
7
  * Override the cache file path.
@@ -12,6 +13,7 @@ declare function nextStylePlugin(opts?: PluginOptions): postcss.Plugin;
12
13
  declare namespace nextStylePlugin {
13
14
  var postcss: boolean;
14
15
  }
15
- export default nextStylePlugin;
16
- export declare const plugin: typeof nextStylePlugin;
17
- //# sourceMappingURL=index.d.ts.map
16
+
17
+ declare const plugin: typeof nextStylePlugin;
18
+
19
+ export { CACHE_FILE, nextStylePlugin as default, plugin };