@bizrk/leancss 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -24,10 +34,123 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_postcss = require("postcss");
+var import_path2 = __toESM(require("path"));
+
+// src/core/designParser.ts
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_fast_glob = __toESM(require("fast-glob"));
+var import_yaml = __toESM(require("yaml"));
+function processDesignMd(rootPath) {
+  const designMdPath = import_path.default.join(rootPath, "design.md");
+  if (!import_fs.default.existsSync(designMdPath)) {
+    return { generatedFile: null, tokens: null };
+  }
+  let content = import_fs.default.readFileSync(designMdPath, "utf8");
+  content = content.replace(/^\uFEFF/, "");
+  const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+  if (!match) {
+    console.log("LeanCSS: design.md found, but could not extract YAML frontmatter. Ensure it starts with ---");
+    return { generatedFile: null, tokens: null };
+  }
+  let parsed;
+  try {
+    parsed = import_yaml.default.parse(match[1]);
+  } catch (err) {
+    console.error("LeanCSS: Failed to parse design.md YAML frontmatter", err);
+    return { generatedFile: null, tokens: null };
+  }
+  let css = "/* Auto-generated by LeanCSS from design.md */\n";
+  css += ":root {\n";
+  const toKebabCase = (str) => str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  const resolveValue = (val) => {
+    if (typeof val === "string" && val.startsWith("{") && val.endsWith("}")) {
+      const refPath = val.slice(1, -1);
+      return `var(--${refPath.replace(/\./g, "-")})`;
+    }
+    return val;
+  };
+  const cssVars = [];
+  if (parsed.colors) {
+    for (const [key, val] of Object.entries(parsed.colors)) {
+      cssVars.push(`  --colors-${toKebabCase(key)}: ${val};`);
+    }
+  }
+  if (parsed.spacing) {
+    for (const [key, val] of Object.entries(parsed.spacing)) {
+      cssVars.push(`  --spacing-${toKebabCase(key)}: ${val};`);
+    }
+  }
+  if (parsed.rounded) {
+    for (const [key, val] of Object.entries(parsed.rounded)) {
+      cssVars.push(`  --rounded-${toKebabCase(key)}: ${val};`);
+    }
+  }
+  css += cssVars.join("\n") + "\n}\n\n";
+  if (parsed.typography) {
+    for (const [name, props] of Object.entries(parsed.typography)) {
+      css += `@set ${name} {
+`;
+      for (const [propName, propVal] of Object.entries(props)) {
+        const cssProp = toKebabCase(propName);
+        css += `  ${cssProp}: ${resolveValue(propVal)};
+`;
+      }
+      css += `}
+
+`;
+    }
+  }
+  if (parsed.components) {
+    for (const [name, props] of Object.entries(parsed.components)) {
+      css += `@set ${name} {
+`;
+      for (const [propName, propVal] of Object.entries(props)) {
+        let cssProp = toKebabCase(propName);
+        if (cssProp === "text-color") cssProp = "color";
+        if (cssProp === "rounded") cssProp = "border-radius";
+        if (cssProp === "size") {
+          css += `  width: ${resolveValue(propVal)};
+  height: ${resolveValue(propVal)};
+`;
+          continue;
+        }
+        css += `  ${cssProp}: ${resolveValue(propVal)};
+`;
+      }
+      css += `}
+
+`;
+    }
+  }
+  const matches = import_fast_glob.default.sync("**/design.lean.css", { cwd: rootPath, ignore: ["node_modules/**"] });
+  let outputPath = matches.length > 0 ? import_path.default.join(rootPath, matches[0]) : import_path.default.join(rootPath, "design.lean.css");
+  let existingCss = "";
+  if (import_fs.default.existsSync(outputPath)) {
+    existingCss = import_fs.default.readFileSync(outputPath, "utf8");
+  }
+  if (existingCss !== css) {
+    import_fs.default.writeFileSync(outputPath, css, "utf8");
+    console.log(`LeanCSS: Regenerated ${outputPath} from design.md`);
+  }
+  return { generatedFile: outputPath, tokens: parsed };
+}
+
+// src/index.ts
 var leancss = (opts = {}) => {
   return {
     postcssPlugin: "leancss",
     Once(root, { result }) {
+      const designResult = processDesignMd(process.cwd());
+      if (designResult.generatedFile) {
+        const designMdPath = import_path2.default.join(process.cwd(), "design.md");
+        result.messages.push({
+          type: "dependency",
+          plugin: "leancss",
+          file: designMdPath,
+          parent: root.source?.input.file
+        });
+      }
       const sets = /* @__PURE__ */ new Map();
       const mediaThresholds = /* @__PURE__ */ new Map([
         ["sm", "640px"],

package/dist/index.mjs

@@ -1,11 +1,122 @@
-import "./chunk-6DZX6EAA.mjs";
-
 // src/index.ts
 import { Rule } from "postcss";
+import path2 from "path";
+
+// src/core/designParser.ts
+import fs from "fs";
+import path from "path";
+import fg from "fast-glob";
+import yaml from "yaml";
+function processDesignMd(rootPath) {
+  const designMdPath = path.join(rootPath, "design.md");
+  if (!fs.existsSync(designMdPath)) {
+    return { generatedFile: null, tokens: null };
+  }
+  let content = fs.readFileSync(designMdPath, "utf8");
+  content = content.replace(/^\uFEFF/, "");
+  const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+  if (!match) {
+    console.log("LeanCSS: design.md found, but could not extract YAML frontmatter. Ensure it starts with ---");
+    return { generatedFile: null, tokens: null };
+  }
+  let parsed;
+  try {
+    parsed = yaml.parse(match[1]);
+  } catch (err) {
+    console.error("LeanCSS: Failed to parse design.md YAML frontmatter", err);
+    return { generatedFile: null, tokens: null };
+  }
+  let css = "/* Auto-generated by LeanCSS from design.md */\n";
+  css += ":root {\n";
+  const toKebabCase = (str) => str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  const resolveValue = (val) => {
+    if (typeof val === "string" && val.startsWith("{") && val.endsWith("}")) {
+      const refPath = val.slice(1, -1);
+      return `var(--${refPath.replace(/\./g, "-")})`;
+    }
+    return val;
+  };
+  const cssVars = [];
+  if (parsed.colors) {
+    for (const [key, val] of Object.entries(parsed.colors)) {
+      cssVars.push(`  --colors-${toKebabCase(key)}: ${val};`);
+    }
+  }
+  if (parsed.spacing) {
+    for (const [key, val] of Object.entries(parsed.spacing)) {
+      cssVars.push(`  --spacing-${toKebabCase(key)}: ${val};`);
+    }
+  }
+  if (parsed.rounded) {
+    for (const [key, val] of Object.entries(parsed.rounded)) {
+      cssVars.push(`  --rounded-${toKebabCase(key)}: ${val};`);
+    }
+  }
+  css += cssVars.join("\n") + "\n}\n\n";
+  if (parsed.typography) {
+    for (const [name, props] of Object.entries(parsed.typography)) {
+      css += `@set ${name} {
+`;
+      for (const [propName, propVal] of Object.entries(props)) {
+        const cssProp = toKebabCase(propName);
+        css += `  ${cssProp}: ${resolveValue(propVal)};
+`;
+      }
+      css += `}
+
+`;
+    }
+  }
+  if (parsed.components) {
+    for (const [name, props] of Object.entries(parsed.components)) {
+      css += `@set ${name} {
+`;
+      for (const [propName, propVal] of Object.entries(props)) {
+        let cssProp = toKebabCase(propName);
+        if (cssProp === "text-color") cssProp = "color";
+        if (cssProp === "rounded") cssProp = "border-radius";
+        if (cssProp === "size") {
+          css += `  width: ${resolveValue(propVal)};
+  height: ${resolveValue(propVal)};
+`;
+          continue;
+        }
+        css += `  ${cssProp}: ${resolveValue(propVal)};
+`;
+      }
+      css += `}
+
+`;
+    }
+  }
+  const matches = fg.sync("**/design.lean.css", { cwd: rootPath, ignore: ["node_modules/**"] });
+  let outputPath = matches.length > 0 ? path.join(rootPath, matches[0]) : path.join(rootPath, "design.lean.css");
+  let existingCss = "";
+  if (fs.existsSync(outputPath)) {
+    existingCss = fs.readFileSync(outputPath, "utf8");
+  }
+  if (existingCss !== css) {
+    fs.writeFileSync(outputPath, css, "utf8");
+    console.log(`LeanCSS: Regenerated ${outputPath} from design.md`);
+  }
+  return { generatedFile: outputPath, tokens: parsed };
+}
+
+// src/index.ts
 var leancss = (opts = {}) => {
   return {
     postcssPlugin: "leancss",
     Once(root, { result }) {
+      const designResult = processDesignMd(process.cwd());
+      if (designResult.generatedFile) {
+        const designMdPath = path2.join(process.cwd(), "design.md");
+        result.messages.push({
+          type: "dependency",
+          plugin: "leancss",
+          file: designMdPath,
+          parent: root.source?.input.file
+        });
+      }
       const sets = /* @__PURE__ */ new Map();
       const mediaThresholds = /* @__PURE__ */ new Map([
         ["sm", "640px"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bizrk/leancss",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.",
   "main": "dist/index.js",
   "bin": {
@@ -46,10 +46,13 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
-    "fast-glob": "^3.3.3",
     "postcss": "^8.4.38",
     "tsup": "^8.5.1",
     "typescript": "^5.4.5",
     "vitest": "^1.5.0"
+  },
+  "dependencies": {
+    "fast-glob": "^3.3.3",
+    "yaml": "^2.8.3"
   }
-}
+}

package/readme.md

@@ -102,6 +102,7 @@ LeanCSS is intentionally simple.
 • reusable style bundles via `@set` and `@drop`  
 • composition via `@lift`  
 • responsive shorthands (`@md`, `@c-lg`)  
+• **Zero-config `design.md` parsing & generation**
 • alias sets  
 • cascade layer friendly  
 • works with `.css` and `.scss`  
@@ -282,6 +283,46 @@ LeanCSS treats these properties as compile-time values and substitutes them grac
 
 * * *
 
+# Design System Generation (`design.md`)
+
+LeanCSS has built-in, zero-config support for parsing Google's **`design.md`** specification to automatically build your foundational design tokens and utility sets.
+
+If LeanCSS detects a `design.md` file in your project root, it will automatically parse the YAML frontmatter and generate a `design.lean.css` file containing:
+1. All your defined `colors`, `spacing`, and `rounded` tokens as native CSS `--variables` attached to `:root`.
+2. All your `typography` and `components` blocks as fully expanded LeanCSS `@set` bundles.
+
+Example `design.md`:
+```yaml
+---
+name: My Design System
+colors:
+  primary: "#1A1C1E"
+spacing:
+  sm: "8px"
+components:
+  card-sm:
+    backgroundColor: "{colors.primary}"
+    padding: "{spacing.sm}"
+---
+```
+
+When LeanCSS compiles, it automatically generates a `design.lean.css` file:
+```css
+:root {
+  --colors-primary: #1A1C1E;
+  --spacing-sm: 8px;
+}
+
+@set card-sm {
+  background-color: var(--colors-primary);
+  padding: var(--spacing-sm);
+}
+```
+
+You can then freely `@lift: card-sm;` anywhere in your project! No configuration required, and it automatically hot-reloads when running inside tools like Vite or Webpack.
+
+* * *
+
 # CLI Tools
 
 LeanCSS is reversible and comes with maintenance tools to keep your project clean.