next-style 1.2.1 → 2.0.0

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"}

package/dist/postcss-plugin/index.js

@@ -0,0 +1,48 @@
+import postcss from 'postcss';
+const IMPORT_RE = /^next-style$/;
+function nextStylePlugin(opts = {}) {
+    // Lazy-import the runtime collector so the plugin works even when
+    // the runtime module hasn't been evaluated yet (returns empty string then).
+    let collector = opts.collector ?? null;
+    const plugin = {
+        postcssPlugin: 'next-style',
+        Once(root) {
+            // Resolve collector from runtime if not provided
+            if (!collector) {
+                try {
+                    // Dynamic require so the plugin can be loaded before the
+                    // runtime module is on disk (e.g. during type-check only builds).
+                    // eslint-disable-next-line @typescript-eslint/no-var-requires
+                    const runtime = require('../runtime');
+                    collector = runtime.styleCollector;
+                }
+                catch {
+                    // Runtime not available — skip injection silently
+                    return;
+                }
+            }
+            const cssContent = collector.getAllStyles();
+            if (!cssContent.trim())
+                return;
+            // Walk @import "next-style" / @import 'next-style' declarations
+            let injected = false;
+            root.walkAtRules('import', atRule => {
+                const val = atRule.params.replace(/['"]/g, '').trim();
+                if (!IMPORT_RE.test(val))
+                    return;
+                const parsed = postcss.parse(cssContent);
+                atRule.replaceWith(parsed);
+                injected = true;
+            });
+            // If there was no @import directive, prepend styles at the top
+            if (!injected) {
+                const parsed = postcss.parse(cssContent);
+                root.prepend(parsed);
+            }
+        }
+    };
+    return plugin;
+}
+nextStylePlugin.postcss = true;
+export default nextStylePlugin;
+export const plugin = nextStylePlugin;

package/dist/runtime/index.d.ts

@@ -0,0 +1,104 @@
+import type { Properties, Pseudos } from 'csstype';
+import { StyleCollector } from '../compiler';
+/**
+ * CSS properties with full type safety and autocomplete via csstype.
+ * Accepts both string and number values (e.g. `fontSize: 16` or `fontSize: '16px'`).
+ */
+export type CSSProperties = Properties<string | number>;
+/** @internal Mapped type for pseudo-classes/elements — avoids index signature limitation */
+type PseudoStyles = {
+    [P in Pseudos]?: CSSProperties;
+};
+/** @internal At-rule keys (@media, @container, @supports, @layer, @keyframes) */
+type AtRuleStyles = {
+    '@sm'?: CSSProperties;
+    '@md'?: CSSProperties;
+    '@lg'?: CSSProperties;
+    '@xl'?: CSSProperties;
+    '@2xl'?: CSSProperties;
+    [media: `@media ${string}`]: CSSProperties;
+    [container: `@container ${string}`]: CSSProperties;
+    [supports: `@supports ${string}`]: CSSProperties;
+    [layer: `@layer ${string}`]: CSSProperties;
+    [keyframes: `@keyframes ${string}`]: Record<string, CSSProperties>;
+};
+/**
+ * Style object passed to `css()` and `global()`.
+ *
+ * Supports:
+ * - All CSS properties (typed via csstype)
+ * - Responsive breakpoints: `'@sm'`, `'@md'`, `'@lg'`, `'@xl'`, `'@2xl'`
+ * - Arbitrary media queries: `'@media (min-width: 900px)'`
+ * - Pseudo-classes and pseudo-elements: `':hover'`, `'::before'`, etc.
+ * - Container queries: `'@container sidebar (min-width: 300px)'`
+ * - 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)' } },
+ * }
+ */
+export type CSSObject = CSSProperties & PseudoStyles & AtRuleStyles & {
+    [key: string]: any;
+};
+/**
+ * Converts a style object into a unique CSS class name.
+ *
+ * Styles are collected at build time by the PostCSS plugin and emitted as
+ * a single static CSS file — there is zero runtime overhead in production.
+ * Identical style objects always return the same class name (deduplication).
+ *
+ * @param styles - A `CSSObject` describing the styles for this element.
+ * @returns A stable class name string (e.g. `"ns-1x2y3z"`).
+ *
+ * @example
+ * const button = css({
+ *   padding: '8px 16px',
+ *   borderRadius: '6px',
+ *   backgroundColor: '#7F77DD',
+ *   ':hover': { backgroundColor: '#534AB7' },
+ *   '@md': { padding: '10px 20px' },
+ * })
+ *
+ * export function Button() {
+ *   return <button className={button}>Click me</button>
+ * }
+ */
+export 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.
+ *
+ * @example
+ * global({
+ *   '*': { boxSizing: 'border-box', margin: '0' },
+ *   'body': { fontFamily: 'Inter, sans-serif', lineHeight: '1.6' },
+ *   'h1, h2, h3': { fontWeight: 500 },
+ * })
+ */
+export declare function global(styles: Record<string, CSSObject>): void;
+/**
+ * The shared `StyleCollector` instance.
+ *
+ * Consumed by the PostCSS plugin at build time to drain all registered styles
+ * into the output CSS file. Not intended for direct use in application code.
+ *
+ * @internal
+ */
+export { collector as styleCollector };
+declare const collector: StyleCollector;
+/** @deprecated Use `styleCollector` instead. */
+export declare const styleRegistry: {
+    get: (key: string) => import("..").CompiledStyle | undefined;
+    getAllStyles: () => string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAE5C;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAEvD,4FAA4F;AAC5F,KAAK,YAAY,GAAG;KAAG,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,aAAa;CAAE,CAAA;AAEtD,iFAAiF;AACjF,KAAK,YAAY,GAAG;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,CAAC,KAAK,EAAE,UAAU,MAAM,EAAE,GAAG,aAAa,CAAA;IAC1C,CAAC,SAAS,EAAE,cAAc,MAAM,EAAE,GAAG,aAAa,CAAA;IAClD,CAAC,QAAQ,EAAE,aAAa,MAAM,EAAE,GAAG,aAAa,CAAA;IAChD,CAAC,KAAK,EAAE,UAAU,MAAM,EAAE,GAAG,aAAa,CAAA;IAC1C,CAAC,SAAS,EAAE,cAAc,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;CAClE,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,SAAS,GAAG,aAAa,GACpC,YAAY,GACZ,YAAY,GAAG;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAClB,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,GAAG,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAE7C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAI,CAI9D;AAED;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,CAAA;AAEtC,QAAA,MAAM,SAAS,gBAAuB,CAAA;AAEtC,gDAAgD;AAChD,eAAO,MAAM,aAAa;eACd,MAAM;;CAEjB,CAAA"}

package/dist/runtime/index.js

@@ -0,0 +1,62 @@
+import { StyleCollector } from '../compiler';
+/**
+ * Converts a style object into a unique CSS class name.
+ *
+ * Styles are collected at build time by the PostCSS plugin and emitted as
+ * a single static CSS file — there is zero runtime overhead in production.
+ * Identical style objects always return the same class name (deduplication).
+ *
+ * @param styles - A `CSSObject` describing the styles for this element.
+ * @returns A stable class name string (e.g. `"ns-1x2y3z"`).
+ *
+ * @example
+ * const button = css({
+ *   padding: '8px 16px',
+ *   borderRadius: '6px',
+ *   backgroundColor: '#7F77DD',
+ *   ':hover': { backgroundColor: '#534AB7' },
+ *   '@md': { padding: '10px 20px' },
+ * })
+ *
+ * export function Button() {
+ *   return <button className={button}>Click me</button>
+ * }
+ */
+export function css(styles) {
+    return collector.addStyle(styles);
+}
+/**
+ * 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.
+ *
+ * @example
+ * global({
+ *   '*': { boxSizing: 'border-box', margin: '0' },
+ *   'body': { fontFamily: 'Inter, sans-serif', lineHeight: '1.6' },
+ *   'h1, h2, h3': { fontWeight: 500 },
+ * })
+ */
+export function global(styles) {
+    Object.entries(styles).forEach(([selector, styleObj]) => {
+        collector.addGlobalStyle(selector, styleObj);
+    });
+}
+/**
+ * The shared `StyleCollector` instance.
+ *
+ * Consumed by the PostCSS plugin at build time to drain all registered styles
+ * into the output CSS file. Not intended for direct use in application code.
+ *
+ * @internal
+ */
+export { collector as styleCollector };
+const collector = new StyleCollector();
+/** @deprecated Use `styleCollector` instead. */
+export const styleRegistry = {
+    get: (key) => collector.getStyleMap().get(key),
+    getAllStyles: () => collector.getAllStyles()
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 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"
+ */
+export 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.
+ */
+export 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)` |
+ */
+export 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)"
+ */
+export 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.
+ */
+export 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.
+ */
+export declare function deduplicateStyles(styles: Map<string, any>): Map<string, any>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CASrD;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM9C,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,OAAO,CAQrE;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAW5E"}

package/dist/utils/index.js

@@ -0,0 +1,97 @@
+/**
+ * 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"
+ */
+export function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+}
+/**
+ * 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.
+ */
+export function generateClassHash(styles) {
+    const str = typeof styles === 'string' ? styles : JSON.stringify(styles);
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36);
+}
+/**
+ * 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)` |
+ */
+export const BREAKPOINTS = {
+    '@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)'
+};
+/**
+ * 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)"
+ */
+export function normalizeMediaQuery(query) {
+    return BREAKPOINTS[query] ?? query;
+}
+/**
+ * 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.
+ */
+export function validateCSSProperty(_key, value) {
+    if (typeof value === 'string' || typeof value === 'number') {
+        return true;
+    }
+    if (typeof value === 'object' && !Array.isArray(value)) {
+        return true;
+    }
+    return false;
+}
+/**
+ * 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.
+ */
+export function deduplicateStyles(styles) {
+    const deduplicated = new Map();
+    const seen = new Set();
+    styles.forEach((value, key) => {
+        const serialized = JSON.stringify(value);
+        if (!seen.has(serialized)) {
+            seen.add(serialized);
+            deduplicated.set(key, value);
+        }
+    });
+    return deduplicated;
+}

package/package.json

@@ -1,65 +1,53 @@
 {
 	"name": "next-style",
-	"version": "1.2.1",
-	"description": "Lightweight runtime CSS-in-JS engine with nested pseudo selectors, media queries, global styles, keyframes, and font-face support.",
-	"author": {
-		"name": "kingslimes",
-		"email": "natontmp123@gmail.com",
-		"url": "https://github.com/kingslimes"
-	},
-	"license": "MIT",
-	"private": false,
-	"sideEffects": false,
+	"version": "2.0.0",
+	"description": "Zero-Runtime CSS-in-JS for Next.js + Turbopack",
 	"type": "module",
-	"files": [
-		"dist",
-		"LICENSE",
-		"README.md"
-	],
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/TiwPhiraphan/next-style.git"
+	},
+	"bugs": {
+		"url": "https://github.com/TiwPhiraphan/next-style/issues"
+	},
+	"homepage": "https://github.com/TiwPhiraphan/next-style#readme",
 	"exports": {
 		".": {
 			"import": "./dist/index.js",
 			"types": "./dist/index.d.ts"
+		},
+		"./plugin": {
+			"import": "./dist/postcss-plugin/index.js",
+			"types": "./dist/postcss-plugin/index.d.ts"
 		}
 	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/kingslimes/next-style.git"
-	},
-	"bugs": {
-		"url": "https://github.com/kingslimes/next-style/issues"
+	"publishConfig": {
+		"access": "public"
 	},
-	"homepage": "https://github.com/kingslimes/next-style#readme",
-	"keywords": [
-		"css",
-		"css-in-js",
-		"runtime-css",
-		"styled",
-		"style-engine",
-		"atomic-css",
-		"postcss",
-		"autoprefixer",
-		"nextjs",
-		"react",
-		"bun",
-		"typescript",
-		"design-system",
-		"theming",
-		"media-queries",
-		"keyframes",
-		"font-face"
-	],
-	"peerDependencies": {
-		"react": ">=18",
-		"postcss": "^8",
-		"autoprefixer": "^10"
+	"files": ["dist"],
+	"scripts": {
+		"export": "bun run build:ts && bun run build:types",
+		"build:ts": "tsc",
+		"build:types": "tsc --emitDeclarationOnly",
+		"dev": "tsc --watch",
+		"test": "bun test",
+		"lint": "biome lint",
+		"format": "biome format --write"
 	},
 	"devDependencies": {
-        "csstype": "latest"
+		"@biomejs/biome": "^2.4.15",
+		"@types/bun": "^1.3.14",
+		"@types/node": "^25.7.0",
+		"csstype": "^3.2.3",
+		"postcss": "^8.5.14",
+		"typescript": "^5"
 	},
-	"publishConfig": {
-		"access": "public"
-	}
+	"peerDependencies": {
+		"postcss": "^8.4.31"
+	},
+	"keywords": ["css-in-js", "zero-runtime", "next.js", "turbopack", "postcss", "style", "next-style", "css"],
+	"author": "TiwPhiraphan",
+	"license": "MIT"
 }