@devup-ui/next-plugin 1.0.42 → 1.0.44

package/README.md

@@ -0,0 +1,166 @@
+<div align="center">
+  <img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
+</div>
+
+<h3 align="center">
+    Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
+</h3>
+
+---
+
+<div>
+<img src='https://img.shields.io/npm/v/@devup-ui/react'>
+<img src='https://img.shields.io/bundlephobia/minzip/@devup-ui/react'>
+<img alt="Github Checks" src="https://badgen.net/github/checks/dev-five-git/devup-ui"/>
+<img alt="Apache-2.0 License" src="https://img.shields.io/github/license/dev-five-git/devup-ui"/>
+<a href="https://www.npmjs.com/package/@devup-ui/react">
+<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@devup-ui/react.svg?style=flat"/>
+</a>
+<a href="https://badgen.net/github/stars/dev-five-git/devup-ui">
+<img alt="Github Stars" src="https://badgen.net/github/stars/dev-five-git/devup-ui" />
+</a>
+<a href="https://discord.gg/8zjcGc7cWh">
+<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
+</a>
+<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
+ <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
+</a>
+</div>
+
+---
+
+English | [한국어](README_ko.md)
+
+## Install
+
+```sh
+npm install @devup-ui/react
+
+# on next.js
+npm install @devup-ui/next-plugin
+
+# on vite
+npm install @devup-ui/vite-plugin
+
+# on rsbuild
+npm install @devup-ui/rsbuild-plugin
+
+# on webpack
+npm install @devup-ui/webpack-plugin
+```
+
+## Features
+
+- Preprocessor
+- Zero Config
+- Zero FOUC
+- Zero Runtime
+- RSC Support
+- Must not use JavaScript, client-side logic, or hybrid solutions
+- Support Library mode
+- Zero Cost Dynamic Theme Support based on CSS Variables
+- Theme with Typing
+- Smallest size, fastest speed
+
+## Inspirations
+
+- Styled System
+- Chakra UI
+- Theme UI
+- Vanilla Extract
+- Rainbow Sprinkles
+- Kuma UI
+
+## Comparison Benchmarks
+
+Next.js Build Time and Build Size (github action - ubuntu-latest)
+
+| Library                | Version | Build Time | Build Size        |
+| ---------------------- | ------- | ---------- | ----------------- |
+| tailwindcss            | 4.1.13  | 20.22s     | 57,415,796 bytes  |
+| styleX                 | 0.15.4  | 38.97s     | 76,257,820 bytes  |
+| vanilla-extract        | 1.17.4  | 20.09s     | 59,366,237 bytes  |
+| kuma-ui                | 1.5.9   | 21.61s     | 67,422,085 bytes  |
+| panda-css              | 1.3.1   | 22.01s     | 62,431,065 bytes  |
+| chakra-ui              | 3.27.0  | 29.99s     | 210,122,493 bytes |
+| mui                    | 7.3.2   | 22.21s     | 94,231,958 bytes  |
+| devup-ui(per-file css) | 1.0.18  | 18.23s     | 57,440,953 bytes  |
+| devup-ui(single css)   | 1.0.18  | 18.35s     | 57,409,008 bytes  |
+
+## How it works
+
+Devup UI is a CSS in JS preprocessor that does not require runtime.
+Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
+We develop a preprocessor that considers all grammatical cases.
+
+```tsx
+const before = <Box bg="red" />
+
+const after = <div className="d0" />
+```
+
+Variables are fully supported.
+
+```tsx
+const before = <Box bg={colorVariable} />
+
+const after = (
+  <div
+    className="d0"
+    style={{
+      '--d0': colorVariable,
+    }}
+  />
+)
+```
+
+Various expressions and responsiveness are also fully supported.
+
+```tsx
+const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
+
+const after = (
+  <div
+    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
+    style={{
+      '--d2': variable,
+    }}
+  />
+)
+```
+
+Support Theme with Typing
+
+`devup.json`
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "text": "#000"
+      },
+      "dark": {
+        "text": "white"
+      }
+    }
+  }
+}
+```
+
+```tsx
+// Type Safe
+<Text color="$text" />
+```
+
+Support Responsive And Pseudo Selector
+
+You can use responsive and pseudo selector.
+
+```tsx
+// Responsive with Selector
+const box = <Box _hover={{ bg: ['red', 'blue'] }} />
+
+// Same
+const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+```

package/dist/plugin.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("node:fs"),r=require("node:path"),k=require("@devup-ui/webpack-plugin");function j(s,t={}){var l;if(process.env.TURBOPACK==="1"){s??(s={}),s.turbopack??(s.turbopack={}),(l=s.turbopack).rules??(l.rules={});const{package:a="@devup-ui/react",distDir:e="df",cssDir:c=r.resolve(e,"devup-ui"),singleCss:p=!1}=t,d=r.join(e,"sheet.json"),v=r.join(e,"classMap.json"),b=r.join(e,"fileMap.json"),n=r.join(e,".gitignore");u.existsSync(e)||u.mkdirSync(e),u.existsSync(c)||u.mkdirSync(c),u.existsSync(n)||u.writeFileSync(n,"*");const o={[r.basename(c)]:[{loader:"@devup-ui/webpack-plugin/css-loader",options:{watch:process.env.NODE_ENV==="development"}}],"*.{tsx,ts,js,mjs}":[{loader:"@devup-ui/webpack-plugin/loader",options:{package:a,cssDir:c,sheetFile:d,classMapFile:v,fileMapFile:b,watch:process.env.NODE_ENV==="development",singleCss:p}}]};return Object.assign(s.turbopack.rules,o),s}const{webpack:i}=s;return s.webpack=(a,e)=>(t.cssDir??(t.cssDir=r.resolve(e.dev?t.distDir??"df":".next/cache",`devup-ui_${e.buildId}`)),a.plugins.push(new k.DevupUIWebpackPlugin({...t,watch:e.dev})),typeof i=="function"?i(a,e):a),s}exports.DevupUI=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("node:fs"),r=require("node:path"),b=require("@devup-ui/webpack-plugin");function k(s,n={}){if(process.env.TURBOPACK==="1"){s??={},s.turbopack??={},s.turbopack.rules??={};const{package:i="@devup-ui/react",distDir:e="df",cssDir:u=r.resolve(e,"devup-ui"),singleCss:l=!1}=n,p=r.join(e,"sheet.json"),o=r.join(e,"classMap.json"),d=r.join(e,"fileMap.json"),a=r.join(e,".gitignore");t.existsSync(e)||t.mkdirSync(e),t.existsSync(u)||t.mkdirSync(u),t.existsSync(a)||t.writeFileSync(a,"*");const v={[r.basename(u)]:[{loader:"@devup-ui/webpack-plugin/css-loader",options:{watch:process.env.NODE_ENV==="development"}}],"*.{tsx,ts,js,mjs}":[{loader:"@devup-ui/webpack-plugin/loader",options:{package:i,cssDir:u,sheetFile:p,classMapFile:o,fileMapFile:d,watch:process.env.NODE_ENV==="development",singleCss:l}}]};return Object.assign(s.turbopack.rules,v),s}const{webpack:c}=s;return s.webpack=(i,e)=>(n.cssDir??=r.resolve(e.dev?n.distDir??"df":".next/cache",`devup-ui_${e.buildId}`),i.plugins.push(new b.DevupUIWebpackPlugin({...n,watch:e.dev})),typeof c=="function"?c(i,e):i),s}exports.DevupUI=k;

package/dist/plugin.js

@@ -1,19 +1,18 @@
-import { existsSync as l, mkdirSync as d, writeFileSync as w } from "node:fs";
-import { resolve as n, join as u, basename as D } from "node:path";
-import { DevupUIWebpackPlugin as h } from "@devup-ui/webpack-plugin";
-function E(s, r = {}) {
-  var c;
+import { existsSync as u, mkdirSync as l, writeFileSync as m } from "node:fs";
+import { resolve as n, join as i, basename as w } from "node:path";
+import { DevupUIWebpackPlugin as D } from "@devup-ui/webpack-plugin";
+function g(s, t = {}) {
   if (process.env.TURBOPACK === "1") {
-    s ?? (s = {}), s.turbopack ?? (s.turbopack = {}), (c = s.turbopack).rules ?? (c.rules = {});
+    s ??= {}, s.turbopack ??= {}, s.turbopack.rules ??= {};
     const {
-      package: a = "@devup-ui/react",
+      package: r = "@devup-ui/react",
       distDir: e = "df",
-      cssDir: t = n(e, "devup-ui"),
-      singleCss: v = !1
-    } = r, b = u(e, "sheet.json"), k = u(e, "classMap.json"), m = u(e, "fileMap.json"), i = u(e, ".gitignore");
-    l(e) || d(e), l(t) || d(t), l(i) || w(i, "*");
-    const o = {
-      [D(t)]: [
+      cssDir: a = n(e, "devup-ui"),
+      singleCss: o = !1
+    } = t, d = i(e, "sheet.json"), v = i(e, "classMap.json"), b = i(e, "fileMap.json"), c = i(e, ".gitignore");
+    u(e) || l(e), u(a) || l(a), u(c) || m(c, "*");
+    const k = {
+      [w(a)]: [
         {
           loader: "@devup-ui/webpack-plugin/css-loader",
           options: {
@@ -25,30 +24,30 @@ function E(s, r = {}) {
         {
           loader: "@devup-ui/webpack-plugin/loader",
           options: {
-            package: a,
-            cssDir: t,
-            sheetFile: b,
-            classMapFile: k,
-            fileMapFile: m,
+            package: r,
+            cssDir: a,
+            sheetFile: d,
+            classMapFile: v,
+            fileMapFile: b,
             watch: process.env.NODE_ENV === "development",
-            singleCss: v
+            singleCss: o
           }
         }
       ]
     };
-    return Object.assign(s.turbopack.rules, o), s;
+    return Object.assign(s.turbopack.rules, k), s;
   }
   const { webpack: p } = s;
-  return s.webpack = (a, e) => (r.cssDir ?? (r.cssDir = n(
-    e.dev ? r.distDir ?? "df" : ".next/cache",
+  return s.webpack = (r, e) => (t.cssDir ??= n(
+    e.dev ? t.distDir ?? "df" : ".next/cache",
     `devup-ui_${e.buildId}`
-  )), a.plugins.push(
-    new h({
-      ...r,
+  ), r.plugins.push(
+    new D({
+      ...t,
       watch: e.dev
     })
-  ), typeof p == "function" ? p(a, e) : a), s;
+  ), typeof p == "function" ? p(r, e) : r), s;
 }
 export {
-  E as DevupUI
+  g as DevupUI
 };

package/package.json

@@ -19,7 +19,7 @@
     "webpack"
   ],
   "type": "module",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "publishConfig": {
     "access": "public"
   },
@@ -39,13 +39,13 @@
   "dependencies": {
     "next": "^15.5",
     "browserslist": "latest",
-    "@devup-ui/webpack-plugin": "1.0.41"
+    "@devup-ui/webpack-plugin": "1.0.43"
   },
   "devDependencies": {
-    "vite": "^7.1.5",
+    "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "@types/webpack": "^5.28.5"
   },
   "peerDependencies": {