next-style 1.1.2 → 1.1.4

package/README.md

@@ -3,7 +3,9 @@
 **next-style** is a lightweight runtime CSS-in-JS engine designed for React, Next.js, and Bun.
 
 It is intentionally designed to be **page-scoped and component-scoped**, ensuring predictable
-style isolation with zero global leakage between pages.
+style isolation with zero global leakage between pages or routes.
+
+The library is framework-agnostic at its core and does not depend on React internally.
 
 ---
 
@@ -13,11 +15,12 @@ style isolation with zero global leakage between pages.
 - No global singleton style registry
 - No cross-page or cross-route CSS leakage
 - Each page owns its own styles
-- Explicit style injection via `StyleProvider`
+- Explicit style injection via a `<style>` tag
+- No implicit DOM side effects
 
 Because of this design:
 - `new NextStyle()` must be created inside the page or component scope
-- `StyleProvider` must be rendered **on every page where styles are used**
+- Styles must be injected manually using `ns.StyleText`
 
 ---
 
@@ -27,12 +30,12 @@ Because of this design:
 - Deterministic hashing (same styles always produce the same class name)
 - Nested pseudo selectors (`_hover`, `_focus`, `_active`)
 - Built-in responsive media queries
-- Global styles (page-scoped)
+- Page-scoped global styles
 - `@keyframes` support
 - `@font-face` support
 - PostCSS + Autoprefixer integration
-- Automatic rule deduplication (within a page)
-- Single `<style>` injection per page
+- Automatic rule deduplication (per instance)
+- Single `<style>` injection per page or component
 - No side effects (`sideEffects: false`)
 
 ---
@@ -82,17 +85,17 @@ You may optionally provide a **custom prefix** to control generated class names.
 import { NextStyle } from "next-style"
 
 export default function Page() {
-    const style = new NextStyle("home")
-    const button = style.css({
+    const ns = new NextStyle("home")
+    const btn = ns.css({
         padding: "8px 16px",
         backgroundColor: "black",
         color: "white",
-        borderRadius: 6
+        borderRadius: "6px"
     })
     return (
         <>
-            <style.StyleProvider />
-            <button className={ button }>Click me</button>
+            <style>{ ns.StyleText }</style>
+            <button className={ btn }>Click me</button>
         </>
     )
 }
@@ -106,25 +109,10 @@ home_ab12cd3
 
 Notes:
 - The prefix is optional
-- If omitted, the default prefix is used
+- If omitted, a default prefix is used
 - Prefixes help identify styles per page or component
 - Each page or component should create its own `NextStyle` instance
 
-
-## Why StyleProvider Is Required Per Page
-
-`next-style` does not use a global style registry.
-
-Each `NextStyle` instance:
-- Collects styles locally
-- Injects a single `<style>` tag
-- Is destroyed when the page/component unmounts
-
-This ensures:
-- No stale CSS after route changes
-- No style conflicts between pages
-- Predictable SSR and CSR behavior
-
 ---
 
 ## Pseudo Selectors
@@ -132,7 +120,7 @@ This ensures:
 Pseudo selectors are defined using keys prefixed with `_`.
 
 ```ts
-const card = style.css({
+const card = ns.css({
     backgroundColor: "#fff",
     transition: "0.2s ease",
     _hover: {
@@ -162,7 +150,7 @@ Built-in breakpoints:
 - `_xxl` → min-width: 1536px
 
 ```ts
-const box = style.css({
+const box = ns.css({
     width: 100,
     _md: {
         width: 200
@@ -179,16 +167,16 @@ Media queries can be nested and are automatically merged.
 
 ## Global Styles (Page Scoped)
 
-Global styles are **scoped to the current page**.
+Global styles are scoped to the current page or component instance.
 
 ```ts
-style.global("body", {
+ns.global("body", {
     margin: 0,
     fontFamily: "Inter, sans-serif"
 })
 ```
 
-These styles are removed automatically when the page unmounts.
+These styles exist only for the lifetime of the page or component.
 
 ---
 
@@ -197,14 +185,16 @@ These styles are removed automatically when the page unmounts.
 Create animations using `keyframes()`:
 
 ```ts
-const fadeIn = style.keyframes({
+const fadeIn = ns.keyframes({
     from: { opacity: 0 },
     to: { opacity: 1 }
 })
 ```
 
+Use the animation in styles:
+
 ```ts
-const modal = style.css({
+const modal = ns.css({
     animation: `${ fadeIn } 0.3s ease-out`
 })
 ```
@@ -218,7 +208,7 @@ Keyframes are scoped to the current `NextStyle` instance.
 Declare fonts using `fontFace()`:
 
 ```ts
-style.fontFace({
+ns.fontFace({
     fontFamily: "Inter",
     src: "url(/fonts/inter.woff2) format('woff2')",
     fontWeight: 400,
@@ -227,7 +217,7 @@ style.fontFace({
 })
 ```
 
-Font-face rules are injected only for the current page.
+Font-face rules are injected only for the current page or component.
 
 ---
 
@@ -240,12 +230,31 @@ Font-face rules are injected only for the current page.
 
 ---
 
-## Performance
+## Server-Side Rendering (SSR)
+
+`next-style` is SSR-safe.
+
+Because the core API only generates strings:
+- No JSX is exported from the library
+- No React runtime is required
+- No side effects occur during render
+
+You can safely inject styles during SSR:
+
+```tsx
+<style>{ ns.StyleText }</style>
+```
+
+The same output will be produced on both the server and the client.
+
+---
+
+## Performance Characteristics
 
-- CSS rules are generated and injected only once per page
+- CSS rules are generated and deduplicated per instance
 - PostCSS and Autoprefixer results are cached
-- One `<style>` tag per page
-- No global runtime mutation
+- Only one `<style>` tag is required per page or component
+- No global runtime mutations
 
 Ideal for:
 - Next.js App Router
@@ -254,6 +263,15 @@ Ideal for:
 
 ---
 
+## Common Gotchas
+
+- Do not create a shared `NextStyle` instance across pages
+- Do not treat `next-style` as a global style manager
+- Always inject `ns.StyleText` before elements that use generated class names
+- Avoid calling `ns.css()` conditionally with different order between renders
+
+---
+
 ## Package Information
 
 - Name: `next-style`
@@ -275,8 +293,8 @@ https://github.com/kingslimes/next-style/issues
 - `&` selector nesting
 - `_dark` / `_light` helpers
 - `@layer` support
-- SSR collection utilities
-- Framework adapters (Solid, Preact)
+- Optional React helpers
+- Dev-time warnings for incorrect usage
 
 ---
 

package/dist/index.d.ts

@@ -31,6 +31,6 @@ export declare class NextStyle {
     global: (selector: string, style: NextStyleProperties) => void;
     keyframes: (frames: KeyframesObject) => string;
     fontFace: (font: FontFaceObject) => void;
-    StyleProvider: () => import("react").JSX.Element | null;
+    get StyleText(): string | null;
 }
 export {};

package/dist/index.js

@@ -0,0 +1,2 @@
+import postcss from"postcss";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="",base="";for(let key in style){let value=style[key];if(value==null||typeof value==="object"||key.startsWith("_"))continue;base+=`${toKebabCase(key)}:${value};`}if(base){let rule=`${ctx.selector}{${base}}`;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 NextStyle{prefix;rules=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}`;if(!this.rules.has(key)){let raw=serializeNested(style,{selector}),cssText=postcssTransform(raw);this.rules.set(key,cssText)}};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 props="",frame=frames[step];for(let prop in frame)props+=`${toKebabCase(prop)}:${frame[prop]};`;body+=`${step}{${props}}`}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 body="";for(let prop in font)body+=`${toKebabCase(prop)}:${font[prop]};`;let cssText=postcssTransform(`@font-face{${body}}`);this.rules.set(key,cssText)}};get StyleText(){if(this.rules.size===0)return null;let cssText="";for(let rule of this.rules.values())cssText+=rule+`
+`;return cssText}}export{NextStyle};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "next-style",
-	"version": "1.1.2",
+	"version": "1.1.4",
 	"description": "Lightweight runtime CSS-in-JS engine with nested pseudo selectors, media queries, global styles, keyframes, and font-face support.",
 	"author": {
 		"name": "kingslimes",
@@ -16,11 +16,11 @@
 		"LICENSE",
 		"README.md"
 	],
-	"main": "./dist/index.jsx",
+	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
-			"import": "./dist/index.jsx",
+			"import": "./dist/index.js",
 			"types": "./dist/index.d.ts"
 		}
 	},
@@ -52,7 +52,6 @@
 		"font-face"
 	],
 	"peerDependencies": {
-        "react": ">=18",
 		"postcss": "^8",
 		"autoprefixer": "^10"
 	},
@@ -60,7 +59,9 @@
         "csstype": "latest"
 	},
 	"engines": {
-		"bun": ">=1.0.0",
 		"node": ">=18"
+	},
+	"publishConfig": {
+		"access": "public"
 	}
 }

package/dist/index.jsx

@@ -1,148 +0,0 @@
-import postcss from "postcss";
-import autoprefixer from "autoprefixer";
-const processor = postcss([autoprefixer({
-  overrideBrowserslist: [">0.2%", "not dead", "not op_mini all"]
-})]);
-const postcssCache = new Map();
-function postcssTransform(cssText) {
-  const cached = postcssCache.get(cssText);
-  if (cached) return cached;
-  const result = processor.process(cssText, {
-    from: undefined
-  }).css;
-  postcssCache.set(cssText, result);
-  return result;
-}
-function stableStringify(value) {
-  if (value == null || typeof value !== "object") return JSON.stringify(value);
-  if (Array.isArray(value)) return `[${value.map(stableStringify).join(",")}]`;
-  const keys = Object.keys(value).sort();
-  return `{${keys.map(k => `"${k}":${stableStringify(value[k])}`).join(",")}}`;
-}
-function createHashName(seed) {
-  let hash = BigInt("0xcbf29ce484222325");
-  const 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()}`);
-}
-const 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 = "";
-  let base = "";
-  for (const key in style) {
-    const value = style[key];
-    if (value == null || typeof value === "object" || key.startsWith("_")) continue;
-    base += `${toKebabCase(key)}:${value};`;
-  }
-  if (base) {
-    const rule = `${ctx.selector}{${base}}`;
-    css += ctx.media ? `@media ${ctx.media}{${rule}}` : rule;
-  }
-  for (const pseudo of ["_hover", "_focus", "_active"]) {
-    const value = style[pseudo];
-    if (!value) continue;
-    css += serializeNested(value, {
-      selector: `${ctx.selector}:${pseudo.slice(1)}`,
-      media: ctx.media
-    });
-  }
-  for (const key in MEDIA_MAP) {
-    const mediaKey = key;
-    const value = style[mediaKey];
-    if (!value) continue;
-    css += serializeNested(value, {
-      selector: ctx.selector,
-      media: mergeMedia(ctx.media, MEDIA_MAP[mediaKey])
-    });
-  }
-  return css;
-}
-export class NextStyle {
-  rules = new Map();
-  constructor(prefix = "next") {
-    this.prefix = prefix;
-  }
-  css = style => {
-    const seed = stableStringify(style);
-    const hash = createHashName(seed);
-    const className = `${this.prefix}_${hash}`;
-    const key = `class:${className}`;
-    if (!this.rules.has(key)) {
-      const raw = serializeNested(style, {
-        selector: `.${className}`
-      });
-      const cssText = postcssTransform(raw);
-      this.rules.set(key, cssText);
-    }
-    return className;
-  };
-  global = (selector, style) => {
-    const key = `global:${selector}`;
-    if (!this.rules.has(key)) {
-      const raw = serializeNested(style, {
-        selector
-      });
-      const cssText = postcssTransform(raw);
-      this.rules.set(key, cssText);
-    }
-  };
-  keyframes = frames => {
-    const seed = stableStringify(frames);
-    const hash = createHashName(seed);
-    const name = `${this.prefix}_${hash}`;
-    const key = `@keyframes:${name}`;
-    if (!this.rules.has(key)) {
-      let body = "";
-      for (const step in frames) {
-        let props = "";
-        const frame = frames[step];
-        for (const prop in frame) {
-          props += `${toKebabCase(prop)}:${frame[prop]};`;
-        }
-        body += `${step}{${props}}`;
-      }
-      const cssText = postcssTransform(`@keyframes ${name}{${body}}`);
-      this.rules.set(key, cssText);
-    }
-    return name;
-  };
-  fontFace = font => {
-    const seed = stableStringify(font);
-    const hash = createHashName(seed);
-    const key = `@font-face:${hash}`;
-    if (!this.rules.has(key)) {
-      let body = "";
-      for (const prop in font) {
-        body += `${toKebabCase(prop)}:${font[prop]};`;
-      }
-      const cssText = postcssTransform(`@font-face{${body}}`);
-      this.rules.set(key, cssText);
-    }
-  };
-  StyleProvider = () => {
-    if (this.rules.size === 0) return null;
-    let cssText = "";
-    for (const rule of this.rules.values()) {
-      cssText += rule + "\n";
-    }
-    return <style>{cssText}</style>;
-  };
-}