npm - chi-css-engine - Versions diffs - 1.0.1 → 1.0.3 - Mend

chi-css-engine 1.0.1 → 1.0.3

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.

Files changed (9) hide show

package/README.md +126 -9
package/package.json +1 -1
package/test/index.html +0 -0
package/test/node_modules/.package-lock.json +0 -12
package/test/node_modules/chi-css-engine/LICENSE +0 -21
package/test/node_modules/chi-css-engine/README.md +0 -16
package/test/node_modules/chi-css-engine/index.js +0 -94
package/test/node_modules/chi-css-engine/package.json +0 -26
package/test/package.json +0 -16

package/README.md CHANGED Viewed

@@ -1,16 +1,133 @@
-# Chai CSS ☕
+☕ Chai CSS Engine
-A lightweight utility-first CSS engine written in JavaScript.
+A lightweight utility-first CSS engine built with vanilla JavaScript.
+Chai CSS dynamically scans the DOM, parses chai-\* utility classes, and applies corresponding inline styles at runtime — inspired by utility-first CSS frameworks.
-## Installation
+🚀 Features
+❌ No CSS files required
+❌ No build step
+❌ No dependencies
+✅ Pure JavaScript
+✅ Utility-first class syntax
+✅ Automatic DOM scanning
+✅ Works with npm and CDN
+✅ Easy to extend and customize
+📦 Installation (npm)
+npm install chi-css-engine
+🔧 Usage (npm / Vite / Bundlers)
+1️⃣ Import the package
+import "chi-css-engine";
-npm install chai-css-engine
+⚠️ No function call required.
+The engine runs automatically after DOMContentLoaded.
-## Usage
+2️⃣ Use utility classes in HTML
-import chaiCSS from "chai-css";
-chaiCSS();
+<div class="chai-p-3 chai-bg-blue chai-text-center chai-rounded-md">
+  Hello Chai CSS ☕
+</div>
+🌐 Usage via CDN (No Build Tools)
-## Example
+If you are not using npm or a bundler, include the CDN directly:
-<div class="chai-p-2 chai-bg-red">Hello</div>
+<script src="https://unpkg.com/chi-css-engine@latest"></script>
+Full CDN Example
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Chai CSS CDN Demo</title>
+</head>
+<body>
+  <div class="chai-p-3 chai-bg-blue chai-text-center chai-rounded-md">
+    Hello Chai CSS ☕
+  </div>
+  <script src="https://unpkg.com/chi-css-engine@latest"></script>
+</body>
+</html>
+✅ No Node.js
+✅ No npm
+✅ No bundler
+🧠 How It Works
+Waits for DOMContentLoaded
+Traverses all DOM elements
+Detects class names starting with chai-
+Parses utility patterns
+Applies inline styles dynamically
+📐 Supported Utilities
+🧱 Spacing
+Class Effect
+chai-p-0 padding: 0px
+chai-p-1 padding: 4px
+chai-p-2 padding: 8px
+chai-p-3 padding: 12px
+chai-p-4 padding: 16px
+chai-m-2 margin: 8px
+🎨 Colors
+Class Effect
+chai-bg-red background-color: red
+chai-bg-blue background-color: blue
+chai-text-black color: black
+✔ Any valid CSS color value is supported.
+✍ Typography
+Text Alignment
+Class Effect
+chai-text-center text-align: center
+chai-text-left text-align: left
+chai-text-right text-align: right
+Font Size
+Class Font Size
+chai-text-sm 12px
+chai-text-md 16px
+chai-text-lg 18px
+chai-text-xl 24px
+🧩 Borders
+Class Effect
+chai-border-1 1px solid black
+chai-border-2 2px solid black
+🔵 Border Radius
+Class Radius
+chai-rounded-sm 4px
+chai-rounded-md 6px
+chai-rounded-lg 12px
+chai-rounded-10 10px
+📦 Layout Utilities
+Class Effect
+chai-flex display: flex
+chai-items-center align-items: center
+chai-justify-center justify-content: center
+🧪 Example Layout
+<div class="chai-flex chai-justify-center chai-items-center chai-p-4 chai-bg-gray">
+  <p class="chai-text-lg chai-text-center">
+    Centered Content
+  </p>
+</div>
+🛠 Customization
+You can extend Chai CSS by modifying:
+spacingScale
+fontSizeMap
+radiusMap
+Add new rules inside the applyUtility() switch to support additional utilities.
+⚠️ Limitations
+Uses inline styles (overrides external CSS)
+No responsive utilities (yet)
+No hover / pseudo-class support (yet)
+📄 License
+MIT License © 2026
+⭐ Author
+Built with ☕ by Nitesh Shedge

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "chi-css-engine",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Lightweight utility-first CSS engine",
   "keywords": [
     "\"css\"",

package/test/index.html DELETED Viewed

File without changes

package/test/node_modules/.package-lock.json DELETED Viewed

@@ -1,12 +0,0 @@
-{
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "node_modules/chi-css-engine": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/chi-css-engine/-/chi-css-engine-1.0.0.tgz",
-      "integrity": "sha512-4Yuy7XvbtpJ2e60GfmH44AO4yfJzRx6547knHg4quJd0eGM0UFySNPq0GSJfoXLYCKIcr3csVqvAAApBoL5zng==",
-      "license": "MIT"
-    }
-  }
-}

package/test/node_modules/chi-css-engine/LICENSE DELETED Viewed

@@ -1,21 +0,0 @@
-MIT License
-Copyright (c) 2026 nitesh011y
-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/test/node_modules/chi-css-engine/README.md DELETED Viewed

@@ -1,16 +0,0 @@
-# Chai CSS ☕
-A lightweight utility-first CSS engine written in JavaScript.
-## Installation
-npm install chai-css
-## Usage
-import chaiCSS from "chai-css";
-chaiCSS();
-## Example
-<div class="chai-p-2 chai-bg-red">Hello</div>

package/test/node_modules/chi-css-engine/index.js DELETED Viewed

@@ -1,94 +0,0 @@
-const spacingScale = {
-  0: "0px",
-  1: "4px",
-  2: "8px",
-  3: "12px",
-  4: "16px",
-};
-const fontSizeMap = {
-  sm: "12px",
-  md: "16px",
-  lg: "18px",
-  xl: "24px",
-};
-const radiusMap = {
-  sm: "4px",
-  md: "6px",
-  lg: "12px",
-};
-document.addEventListener("DOMContentLoaded", () => {
-  const elements = document.querySelectorAll("*");
-  elements.forEach((el) => {
-    [...el.classList].forEach((className) => {
-      if (!className.startsWith("chai-")) return;
-      const parts = className.replace("chai-", "").split("-");
-      applyUtility(el, parts);
-    });
-  });
-});
-function applyUtility(el, parts) {
-  const [type, value] = parts;
-  switch (type) {
-    /* SPACING */
-    case "p":
-      el.style.padding = spacingScale[value] || value + "px";
-      break;
-    case "m":
-      el.style.margin = spacingScale[value] || value + "px";
-      break;
-    /* COLORS */
-    case "bg":
-      el.style.backgroundColor = value;
-      break;
-    case "text":
-      if (value === "center" || value === "left" || value === "right") {
-        el.style.textAlign = value;
-      } else {
-        el.style.color = value;
-      }
-      break;
-    /* TYPOGRAPHY */
-    case "text":
-      if (fontSizeMap[value]) {
-        el.style.fontSize = fontSizeMap[value];
-      }
-      break;
-    /* BORDERS */
-    case "border":
-      el.style.border = `${value}px solid black`;
-      break;
-    case "rounded":
-      el.style.borderRadius = radiusMap[value] || value + "px";
-      break;
-    /* LAYOUT */
-    case "flex":
-      el.style.display = "flex";
-      break;
-    case "items":
-      el.style.alignItems = value;
-      break;
-    case "justify":
-      el.style.justifyContent = value;
-      break;
-    default:
-      console.warn("Unknown utility:", parts.join("-"));
-  }
-}

package/test/node_modules/chi-css-engine/package.json DELETED Viewed

@@ -1,26 +0,0 @@
-{
-  "name": "chi-css-engine",
-  "version": "1.0.0",
-  "description": "Lightweight utility-first CSS engine",
-  "keywords": [
-    "\"css\"",
-    "\"utility\"",
-    "\"tailwind\"",
-    "\"dom\""
-  ],
-  "homepage": "https://github.com/nitesh011y/Chai-tailwind#readme",
-  "bugs": {
-    "url": "https://github.com/nitesh011y/Chai-tailwind/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nitesh011y/Chai-tailwind.git"
-  },
-  "license": "MIT",
-  "author": "nitesh011y",
-  "type": "commonjs",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  }
-}

package/test/package.json DELETED Viewed

@@ -1,16 +0,0 @@
-{
-  "name": "test",
-  "version": "1.0.0",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs",
-  "description": "",
-  "dependencies": {
-    "chi-css-engine": "^1.0.0"
-  }
-}