vida-css 0.0.1 → 0.0.2

package/package.json

@@ -1,22 +1,46 @@
 {
   "name": "vida-css",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A lightweight utility CSS library",
+  "type": "module",
   "main": "dist/vida.css",
+  "style": "dist/vida.css",
+  "exports": {
+    ".": {
+      "default": "./dist/vida.css"
+    },
+    "./dist/vida.css": "./dist/vida.css"
+  },
   "files": [
-    "dist"
+    "dist",
+    "scripts",
+    "vida.config.js"
   ],
   "scripts": {
-    "build": "postcss src/index.css -o dist/vida.css"
+    "generate:jit": "node scripts/generate.js",
+    "generate:full": "node scripts/generate.js --full",
+    "build": "npm run generate:full && postcss dist/vida.css -o dist/vida.css",
+    "prepublishOnly": "npm run build",
+    "cli": "node scripts/cli.js"
+  },
+  "bin": {
+    "vida-css": "./scripts/cli.js"
   },
-  "keywords": ["css", "utility", "framework"],
-  "author": "Your Name",
+  "keywords": [
+    "css",
+    "utility",
+    "framework"
+  ],
+  "author": "Demilade Oyenuga",
   "license": "MIT",
   "devDependencies": {
+    "autoprefixer": "^10.4.0",
+    "cssnano": "^6.0.0",
     "postcss": "^8.4.0",
     "postcss-cli": "^10.1.0",
-    "postcss-import": "^14.0.2",
-    "autoprefixer": "^10.4.0",
-    "cssnano": "^6.0.0"
+    "postcss-import": "^14.0.2"
+  },
+  "dependencies": {
+    "chokidar": "^5.0.0"
   }
-}
+}

package/scripts/cli.js

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+import path from "path";
+import chokidar from "chokidar";
+import fs from "fs";
+import { generateCSS } from "./generator.js";
+import { scanClasses } from "./scanner.js";
+
+console.log("🚀 VidaCSS CLI starting...");
+
+const projectPath = process.argv[2] || process.cwd();
+
+function runBuild() {
+  console.log("🔎 Scanning project for classes...");
+  const classes = scanClasses(projectPath);
+  console.log(`✅ ${classes.length} classes found`);
+
+  fs.writeFileSync(".vida-classes.json", JSON.stringify(classes,null,2));
+  console.log("📦 Class list saved");
+
+  generateCSS();
+  console.log("✅ VidaCSS JIT build complete!");
+}
+
+// First build
+runBuild();
+
+// Watch for changes
+console.log("👀 Watching for file changes...");
+const root = projectPath.replace(/\\/g, "/");
+chokidar.watch([`${root}/**/*.{js,jsx,ts,tsx,html}`], {
+  // Avoid regenerating on our own outputs / dependencies.
+  ignored: [/node_modules/, /(^|[\\/])dist([\\/]|$)/, /\.vida-classes\.json$/],
+  persistent: true,
+})
+.on("change", file => {
+  console.log(`🔄 File changed: ${file}`);
+  runBuild();
+});

package/scripts/generate.js

@@ -0,0 +1,302 @@
+import fs from "fs";
+import path from "path";
+import config from "../vida.config.js";
+import { scanClasses } from "./scanner.js";
+import { generateCSS } from "./generator.js";
+
+const args = process.argv.slice(2);
+const fullBuild = args.includes("--full");
+
+// Optional argument: project path for JIT scanning.
+const projectArg = args.find(a => !a.startsWith("--"));
+const projectPath = projectArg ? path.resolve(projectArg) : process.cwd();
+
+function addToSet(set, value) {
+  if (value && typeof value === "string") set.add(value);
+}
+
+function generateAllSupportedBaseUtilities() {
+  const baseUtilities = new Set();
+
+  // Width/Height
+  for (const k of Object.keys(config.sizeScale || {})) {
+    baseUtilities.add(`w-${k}`);
+    baseUtilities.add(`h-${k}`);
+  }
+  baseUtilities.add("w-full");
+  baseUtilities.add("h-full");
+  baseUtilities.add("w-screen");
+  baseUtilities.add("h-screen");
+  baseUtilities.add("min-h-screen");
+  baseUtilities.add("min-w-0");
+  baseUtilities.add("min-h-0");
+  baseUtilities.add("max-w-full");
+  baseUtilities.add("min-w-full");
+  baseUtilities.add("max-w-1/2");
+  baseUtilities.add("min-w-1/2");
+  for (const k of Object.keys(config.screens || {})) addToSet(baseUtilities, `max-w-screen-${k}`);
+
+  // Background colors
+  for (const [name, value] of Object.entries(config.colors || {})) {
+    if (typeof value === "string") {
+      addToSet(baseUtilities, `bg-${name}`);
+    } else if (value && typeof value === "object") {
+      for (const shade of Object.keys(value)) {
+        addToSet(baseUtilities, `bg-${name}-${shade}`);
+      }
+    }
+  }
+  for (const v of ["0","5","10","20","25","30","40","50","60","70","75","80","90","95","100"]) addToSet(baseUtilities, `bg-opacity-${v}`);
+  for (const s of ["auto","cover","contain"]) addToSet(baseUtilities, `bg-${s}`);
+  for (const p of ["center","top","bottom","left","right"]) addToSet(baseUtilities, `bg-${p}`);
+  for (const r of ["repeat","repeat-x","repeat-y","no-repeat"]) addToSet(baseUtilities, `bg-${r}`);
+  for (const a of ["fixed","scroll"]) addToSet(baseUtilities, `bg-${a}`);
+
+  // Text colors
+  for (const [name, value] of Object.entries(config.colors || {})) {
+    if (typeof value === "string") {
+      addToSet(baseUtilities, `text-${name}`);
+    } else if (value && typeof value === "object") {
+      for (const shade of Object.keys(value)) {
+        addToSet(baseUtilities, `text-${name}-${shade}`);
+      }
+    }
+  }
+
+  // Gradients
+  for (const dir of ["t","tr","r","br","b","bl","l","tl"]) addToSet(baseUtilities, `bg-gradient-to-${dir}`);
+  for (const [name, value] of Object.entries(config.colors || {})) {
+    if (typeof value === "string") {
+      addToSet(baseUtilities, `from-${name}`);
+      addToSet(baseUtilities, `via-${name}`);
+      addToSet(baseUtilities, `to-${name}`);
+    } else if (value && typeof value === "object") {
+      for (const shade of Object.keys(value)) {
+        addToSet(baseUtilities, `from-${name}-${shade}`);
+        addToSet(baseUtilities, `via-${name}-${shade}`);
+        addToSet(baseUtilities, `to-${name}-${shade}`);
+      }
+    }
+  }
+
+  // Text align
+  for (const t of config.textAlign || []) addToSet(baseUtilities, t);
+
+  // Typography
+  for (const s of ["xs","sm","base","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl","8xl","9xl"]) addToSet(baseUtilities, `text-${s}`);
+  for (const w of ["light","normal","medium","semibold","bold"]) addToSet(baseUtilities, `font-${w}`);
+  for (const f of Object.keys(config.fontFamily || {})) addToSet(baseUtilities, `font-${f}`);
+  for (const l of ["none","tight","snug","normal","relaxed","loose"]) addToSet(baseUtilities, `leading-${l}`);
+  for (const t of ["tighter","tight","normal","wide","wider","widest"]) addToSet(baseUtilities, `tracking-${t}`);
+  for (const t of ["uppercase","lowercase","capitalize","normal-case"]) addToSet(baseUtilities, t);
+  for (const t of ["underline","no-underline","truncate"]) addToSet(baseUtilities, t);
+
+  // Display
+  for (const d of ["block","inline-block","inline","hidden"]) addToSet(baseUtilities, d);
+
+  // Flex / Grid
+  for (const f of config.flex || []) addToSet(baseUtilities, f);
+  addToSet(baseUtilities, "flex-1");
+  for (const fd of config.flexDirection || []) addToSet(baseUtilities, fd);
+  // justify/items
+  addToSet(baseUtilities, "justify-start");
+  addToSet(baseUtilities, "justify-center");
+  addToSet(baseUtilities, "justify-end");
+  addToSet(baseUtilities, "justify-between");
+  addToSet(baseUtilities, "justify-around");
+  addToSet(baseUtilities, "justify-evenly");
+  addToSet(baseUtilities, "items-start");
+  addToSet(baseUtilities, "items-center");
+  addToSet(baseUtilities, "items-end");
+  addToSet(baseUtilities, "items-stretch");
+
+  addToSet(baseUtilities, "grid");
+  for (const gc of config.grid || []) {
+    // config.grid includes "grid" already, but it's harmless to add again.
+    addToSet(baseUtilities, gc);
+  }
+  for (let i = 1; i <= 6; i++) addToSet(baseUtilities, `grid-cols-${i}`);
+  for (const gap of Object.keys(config.spacing || {})) addToSet(baseUtilities, `gap-${gap}`);
+
+  // Overflow
+  for (const o of ["hidden","auto","scroll"]) addToSet(baseUtilities, `overflow-${o}`);
+
+  // Accessibility
+  addToSet(baseUtilities, "sr-only");
+  addToSet(baseUtilities, "not-sr-only");
+
+  // Positioning
+  for (const p of ["static","relative","absolute","fixed","sticky"]) addToSet(baseUtilities, p);
+
+  // Offsets (top/left/right/bottom + inset)
+  const offsetVals = new Set(["0"]);
+  for (const v of Object.keys(config.spacing || {})) offsetVals.add(v);
+  for (const v of Object.keys(config.sizeScale || {})) offsetVals.add(v);
+  for (const n of offsetVals) {
+    addToSet(baseUtilities, `top-${n}`);
+    addToSet(baseUtilities, `left-${n}`);
+    addToSet(baseUtilities, `right-${n}`);
+    addToSet(baseUtilities, `bottom-${n}`);
+    addToSet(baseUtilities, `inset-${n}`);
+    addToSet(baseUtilities, `inset-x-${n}`);
+    addToSet(baseUtilities, `inset-y-${n}`);
+  }
+
+  // Z index (subset)
+  for (const z of ["0","10","20","30","40","50","60","70","80","90","100"]) addToSet(baseUtilities, `z-${z}`);
+
+  // Border radius
+  for (const r of ["sm","md","lg"]) addToSet(baseUtilities, `rounded-${r}`);
+
+  // Borders
+  for (const b of ["border","border-0","border-2","border-4"]) addToSet(baseUtilities, b);
+  for (const [name, value] of Object.entries(config.colors || {})) {
+    if (typeof value === "string") {
+      addToSet(baseUtilities, `border-${name}`);
+    } else if (value && typeof value === "object") {
+      for (const shade of Object.keys(value)) {
+        addToSet(baseUtilities, `border-${name}-${shade}`);
+      }
+    }
+  }
+
+  // Padding / Margin (subset)
+  const spacingVals = new Set(["1/2"]);
+  for (const v of Object.keys(config.spacing || {})) spacingVals.add(v);
+  for (const v of Object.keys(config.sizeScale || {})) spacingVals.add(v);
+  const axes = ["","x","y","t","r","b","l"];
+  for (const v of spacingVals) {
+    for (const axis of axes) {
+      const prefix = axis === "" ? "" : axis;
+      if (axis === "") {
+        addToSet(baseUtilities, `p-${v}`);
+        addToSet(baseUtilities, `m-${v}`);
+      } else {
+        addToSet(baseUtilities, `p${prefix}-${v}`); // px/py/pt/pr/pb/pl
+        addToSet(baseUtilities, `m${prefix}-${v}`); // mx/my/mt/mr/mb/ml
+      }
+    }
+  }
+
+  // Shadows
+  addToSet(baseUtilities, "shadow-none");
+  for (const s of ["sm","md","lg","xl","2xl"]) addToSet(baseUtilities, `shadow-${s}`);
+
+  // Transitions
+  addToSet(baseUtilities, "transition");
+  addToSet(baseUtilities, "transition-all");
+  addToSet(baseUtilities, "transition-none");
+  for (const d of ["75","100","150","200","300","500","700","1000"]) addToSet(baseUtilities, `duration-${d}`);
+  for (const d of ["75","100","150","200","300","500"]) addToSet(baseUtilities, `delay-${d}`);
+  for (const e of ["linear","in","out","in-out"]) addToSet(baseUtilities, `ease-${e}`);
+
+  // Animations
+  addToSet(baseUtilities, "animate-spin");
+  addToSet(baseUtilities, "animate-ping");
+  addToSet(baseUtilities, "animate-pulse");
+
+  // Rings (focus utilities)
+  addToSet(baseUtilities, "ring-inset");
+  for (const n of ["0","1","2","4"]) addToSet(baseUtilities, `ring-${n}`);
+  for (const n of ["0","1","2","4"]) addToSet(baseUtilities, `ring-offset-${n}`);
+  // Ring colors (using only 500-shades where present)
+  for (const c of ["blue","red","green","yellow","purple"]) addToSet(baseUtilities, `ring-${c}-500`);
+  for (const c of ["blue","red","green","yellow","purple"]) addToSet(baseUtilities, `ring-offset-${c}-500`);
+  addToSet(baseUtilities, "ring-offset-white");
+
+  // Transforms
+  for (const n of ["0","1","2","4"]) {
+    addToSet(baseUtilities, `translate-x-${n}`);
+    addToSet(baseUtilities, `translate-y-${n}`);
+  }
+  for (const d of ["0","1","2","3","6","12","45","90"]) addToSet(baseUtilities, `rotate-${d}`);
+  for (const s of ["75","90","95","100","105","110"]) {
+    addToSet(baseUtilities, `scale-${s}`);
+    addToSet(baseUtilities, `scale-x-${s}`);
+    addToSet(baseUtilities, `scale-y-${s}`);
+  }
+  for (const d of ["0","6","12"]) {
+    addToSet(baseUtilities, `skew-x-${d}`);
+    addToSet(baseUtilities, `skew-y-${d}`);
+  }
+
+  // Filters
+  for (const b of ["0","1","2","3","4"]) addToSet(baseUtilities, `blur-${b}`);
+  for (const v of ["50","75","90","100","125","150","200"]) {
+    addToSet(baseUtilities, `brightness-${v}`);
+    addToSet(baseUtilities, `contrast-${v}`);
+    addToSet(baseUtilities, `saturate-${v}`);
+  }
+  for (const v of ["0","50","100"]) {
+    addToSet(baseUtilities, `grayscale-${v}`);
+    addToSet(baseUtilities, `sepia-${v}`);
+    addToSet(baseUtilities, `invert-${v}`);
+  }
+  for (const v of ["0","5","10","20","25","30","40","50","60","70","75","80","90","95","100"]) addToSet(baseUtilities, `opacity-${v}`);
+  for (const v of ["0","15","30","45"]) addToSet(baseUtilities, `hue-rotate-${v}`);
+  addToSet(baseUtilities, "filter-none");
+
+  // Pseudo-elements (subset used for marketing/demo)
+  for (const util of ["absolute","relative"]) addToSet(baseUtilities, `before:${util}`);
+  addToSet(baseUtilities, `before:content-['']`);
+  addToSet(baseUtilities, `before:content-['•']`);
+  for (const n of ["0","1","2","3","4"]) {
+    addToSet(baseUtilities, `before:top-${n}`);
+    addToSet(baseUtilities, `before:left-${n}`);
+    addToSet(baseUtilities, `before:inset-${n}`);
+  }
+  for (const c of ["blue-500","red-500","purple-500","yellow-500"]) addToSet(baseUtilities, `before:bg-${c}`);
+  for (const r of ["sm","md","lg"]) addToSet(baseUtilities, `before:rounded-${r}`);
+  addToSet(baseUtilities, "before:w-10");
+  addToSet(baseUtilities, "before:h-10");
+
+  return baseUtilities;
+}
+
+function generateAllClassesFromBase(baseUtilities) {
+  const classes = new Set();
+
+  const screens = Object.keys(config.screens || {});
+  const pseudos = ["hover","focus","focus-visible","active","disabled","visited"];
+
+  function withVariants(util) {
+    addToSet(classes, util);
+
+    // Responsive
+    for (const bp of screens) addToSet(classes, `${bp}:${util}`);
+
+    // Pseudo-class variants
+    for (const p of pseudos) addToSet(classes, `${p}:${util}`);
+
+    // Dark mode (class-based)
+    addToSet(classes, `dark:${util}`);
+
+    // Responsive + pseudo variants (md:hover:...)
+    for (const bp of screens) {
+      for (const p of pseudos) addToSet(classes, `${bp}:${p}:${util}`);
+    }
+
+    // Dark + pseudo variants (dark:hover:...)
+    for (const p of pseudos) addToSet(classes, `dark:${p}:${util}`);
+  }
+
+  baseUtilities.forEach(util => withVariants(util));
+  return Array.from(classes);
+}
+
+const classFile = path.join(process.cwd(), ".vida-classes.json");
+
+let classes;
+if (fullBuild) {
+  const baseUtilities = generateAllSupportedBaseUtilities();
+  classes = generateAllClassesFromBase(baseUtilities);
+  console.log(`✅ Full build: ${baseUtilities.size} base utilities -> ${classes.length} classes`);
+} else {
+  classes = scanClasses(projectPath);
+  console.log(`✅ JIT build: ${classes.length} classes found`);
+}
+
+fs.writeFileSync(classFile, JSON.stringify(classes, null, 2));
+console.log("📦 Class list saved");
+generateCSS();
+