next-style 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kingslimes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,230 @@
+# NextStyle
+
+A lightweight runtime CSS-in-JS engine designed for React and Next.js.  
+It supports nested pseudo selectors, responsive media queries, and automatic vendor prefixing via PostCSS — all at runtime with zero build-time CSS extraction.
+
+NextStyle focuses on **runtime flexibility**, **type safety**, and **minimal abstraction**, making it suitable for design systems, theming, and dynamic UI styling.
+
+---
+
+## Features
+
+- Runtime CSS generation
+- Strongly typed style objects (powered by `csstype`)
+- Nested pseudo selectors (`_hover`, `_focus`, `_active`)
+- Responsive media queries (`_sm`, `_md`, `_lg`, `_xl`, `_xxl`)
+- Automatic vendor prefixing (PostCSS + Autoprefixer)
+- Deterministic hashed class names
+- React `<style>` provider component
+- No bundler or build-step CSS required
+
+---
+
+## Installation
+
+Install the package along with its peer dependencies:
+
+```bash
+npm install zed-style postcss autoprefixer react
+```
+
+or with Bun:
+
+```bash
+bun add zed-style postcss autoprefixer react
+```
+
+---
+
+## Basic Usage
+
+```tsx
+import { NextStyle } from "zed-style"
+
+const style = new NextStyle()
+
+const className = style.css({
+    display: "flex",
+    alignItems: "center",
+    padding: "12px",
+    backgroundColor: "#111",
+    color: "white",
+
+    _hover: {
+        backgroundColor: "#222"
+    },
+
+    _md: {
+        padding: "16px"
+    }
+})
+```
+
+Apply the generated class name to your component:
+
+```tsx
+export default function App() {
+    return (
+        <>
+            <div className={className}>
+                Hello NextStyle
+            </div>
+
+            <style.Provider />
+        </>
+    )
+}
+```
+
+---
+
+## Style Object API
+
+### Base Properties
+
+All standard CSS properties are supported and fully typed:
+
+```ts
+{
+    margin: "8px",
+    fontSize: "14px",
+    backgroundColor: "#000"
+}
+```
+
+Types are derived from `csstype`, ensuring correctness and editor autocomplete.
+
+---
+
+### Pseudo Selectors
+
+Use underscored keys for pseudo selectors:
+
+```ts
+{
+    _hover: {
+        opacity: 0.8
+    },
+    _focus: {
+        outline: "2px solid blue"
+    },
+    _active: {
+        transform: "scale(0.98)"
+    }
+}
+```
+
+Supported pseudos:
+- `_hover`
+- `_focus`
+- `_active`
+
+---
+
+### Responsive Media Queries
+
+NextStyle provides built-in responsive keys:
+
+| Key   | Media Query |
+|------|-------------|
+| `_sm` | `(min-width: 640px)` |
+| `_md` | `(min-width: 768px)` |
+| `_lg` | `(min-width: 1024px)` |
+| `_xl` | `(min-width: 1280px)` |
+| `_xxl` | `(min-width: 1536px)` |
+
+Example:
+
+```ts
+{
+    fontSize: "14px",
+    _lg: {
+        fontSize: "18px"
+    }
+}
+```
+
+---
+
+## `<style.Provider />`
+
+The `Provider` component injects all generated CSS rules into a `<style>` tag.
+
+Important notes:
+
+- It must be rendered **once per style instance**
+- It should be rendered **after** calling `css(...)`
+- It performs no side effects if no styles were generated
+
+```tsx
+<style.Provider />
+```
+
+---
+
+## Hashing Strategy
+
+Class names are generated using a deterministic hash based on the style object:
+
+```text
+zed_x9k3a2m1
+```
+
+This ensures:
+- Stable class names
+- No duplicates
+- Automatic caching of generated rules
+
+---
+
+## Runtime Behavior
+
+- CSS is generated lazily on first usage
+- Rules are cached in memory
+- PostCSS transformation runs only once per unique rule
+- No DOM mutation outside React rendering
+
+---
+
+## Type Safety
+
+NextStyle provides full TypeScript support:
+
+- All CSS properties are typed
+- Invalid properties are caught at compile time
+- Media and pseudo keys are strictly controlled
+
+Types are generated via `.d.ts` and require no runtime dependency on `csstype`.
+
+---
+
+## Requirements
+
+### Peer Dependencies
+
+- React >= 18
+- PostCSS >= 8
+- Autoprefixer >= 10
+
+### Runtime Environment
+
+- Node.js >= 18
+- Bun >= 1.0.0
+
+---
+
+## License
+
+MIT © kingslimes
+
+---
+
+## Philosophy
+
+NextStyle is intentionally minimal.
+
+- No build-time CSS extraction
+- No global runtime side effects
+- No magic conventions
+
+Just predictable runtime styling with strong types and explicit behavior.

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import type { Properties } from "csstype";
+export type NextStyleProperties = {
+    [K in keyof Properties<string | number>]?: Properties<string | number>[K];
+} & {
+    _hover?: NextStyleObject;
+    _focus?: NextStyleObject;
+    _active?: NextStyleObject;
+    _sm?: NextStyleObject;
+    _md?: NextStyleObject;
+    _lg?: NextStyleObject;
+    _xl?: NextStyleObject;
+    _xxl?: NextStyleObject;
+};
+type NextStyleObject = Omit<NextStyleProperties, "_sm" | "_md" | "_lg" | "_xl" | "_xxl">;
+export declare class NextStyle {
+    private prefix;
+    private rules;
+    constructor(prefix?: string);
+    css: (style: NextStyleProperties) => string;
+    Provider: () => import("react").JSX.Element | null;
+}
+export {};

package/dist/index.jsx

@@ -0,0 +1,92 @@
+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 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 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 ? `${ctx.media}{${rule}}` : rule;
+  }
+  for (const pseudo of ["_hover", "_focus", "_active"]) {
+    const value = style[pseudo];
+    if (!value) continue;
+    css += serializeNested(value, {
+      ...ctx,
+      selector: `${ctx.selector}:${pseudo.slice(1)}`
+    });
+  }
+  for (const key in MEDIA_MAP) {
+    const mediaKey = key;
+    const value = style[mediaKey];
+    if (!value) continue;
+    css += serializeNested(value, {
+      ...ctx,
+      media: `@media ${MEDIA_MAP[mediaKey]}`
+    });
+  }
+  return css;
+}
+export class NextStyle {
+  rules = new Map();
+  constructor(prefix = "zed") {
+    this.prefix = prefix;
+  }
+  css = style => {
+    const hash = createHashName(JSON.stringify(style));
+    const className = `${this.prefix}_${hash}`;
+    if (!this.rules.has(className)) {
+      const raw = serializeNested(style, {
+        selector: `.${className}`
+      });
+      const cssText = postcssTransform(raw);
+      this.rules.set(className, cssText);
+    }
+    return className;
+  };
+  Provider = () => {
+    if (this.rules.size === 0) return null;
+    let cssText = "";
+    for (const rule of this.rules.values()) {
+      cssText += rule + "\n";
+    }
+    return <style>{cssText}</style>;
+  };
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+	"name": "next-style",
+	"version": "1.1.0",
+	"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,
+	"type": "module",
+	"files": [
+		"dist",
+		"LICENSE",
+		"README.md"
+	],
+	"main": "./dist/index.jsx",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.jsx",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/kingslimes/zed-style.git"
+	},
+	"bugs": {
+		"url": "https://github.com/kingslimes/zed-style/issues"
+	},
+	"homepage": "https://github.com/kingslimes/zed-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"
+	},
+	"devDependencies": {
+        "csstype": "^3"
+	},
+	"engines": {
+		"bun": ">=1.0.0",
+		"node": ">=18"
+	}
+}