forgecss 0.5.0 → 0.7.0

package/fx.js

@@ -1,3 +1,3 @@
-import forgeCSSExpressionTransformer from "./client/fx.js";
+import forgeCSSExpressionTransformer from "./lib/fx.js";
 
 export default forgeCSSExpressionTransformer;

package/index.d.ts

@@ -6,6 +6,7 @@ export type ForgeCSSOptions = {
     [key: string]: string;
   };
   verbose?: boolean;
+  minify?: boolean;
 };
 
 export type ForgeInstance = {

package/index.js

@@ -1,17 +1,20 @@
 import path from 'path';
 import { writeFile } from "fs/promises";
-import getAllFiles from "./lib/getAllFiles.js";
-import { extractStyles, invalidateInvetory } from "./lib/inventory.js";
-import { invalidateUsageCache, findUsages } from "./lib/usages.js";
-import { generateOutputCSS } from "./lib/generator.js";
 import chokidar from "chokidar";
 
+import { extractStyles, getStylesByClassName, invalidateInventory, resolveApplys } from "./lib/inventory.js";
+import { invalidateUsageCache, findUsages, getUsages } from "./lib/usages.js";
+import { astToRules, rulesToCSS } from './lib/forge-lang/Compiler.js';
+import { toAST } from './lib/forge-lang/Parser.js';
+import { getAllFiles } from './lib/helpers.js';
+
 const DEFAULT_OPTIONS = {
   inventoryFiles: ["css", "less", "scss"],
   usageFiles: ["html", "jsx", "tsx"],
   usageAttributes: ["class", "className"],
   breakpoints: {},
-  verbose: true
+  verbose: true,
+  minify: true
 };
 
 export default function ForgeCSS(options) {
@@ -22,14 +25,30 @@ export default function ForgeCSS(options) {
   config.usageFiles = options?.usageFiles ?? DEFAULT_OPTIONS.usageFiles;
   config.usageAttributes = options?.usageAttributes ?? DEFAULT_OPTIONS.usageAttributes;
   config.verbose = options?.verbose ?? DEFAULT_OPTIONS.verbose;
+  config.minify = options?.minify ?? DEFAULT_OPTIONS.minify;
 
   async function result(output) {
     try {
-      const css = await generateOutputCSS(config);
+      const cache = {};
+      const usages = getUsages();
+      const ast = toAST(
+        Object.values(usages).reduce((acc, i) => {
+          return acc.concat(i);
+        }, [])
+      );
+      let rules = astToRules(ast, {
+        getStylesByClassName,
+        cache,
+        config
+      });
+      rules.push(resolveApplys());
+      const css = rulesToCSS(rules.filter(Boolean), config);
       if (output) {
-        await writeFile(output, `/* ForgeCSS autogenerated file */\n${css}`, "utf-8");
+        await writeFile(output, `/* ForgeCSS auto-generated file */\n${css}`, "utf-8");
+      }
+      if (config.verbose) {
+        console.log("forgecss: Output CSS generated successfully.");
       }
-      console.log("forgecss: Output CSS generated successfully.");
       return css;
     } catch (err) {
       console.error(`forgecss: error generating output CSS: ${err}`);
@@ -44,6 +63,8 @@ export default function ForgeCSS(options) {
     });
     watcher.on("change", async (filePath) => {
       if (config.verbose) {
+        invalidateUsageCache(filePath)
+        invalidateInventory(filePath);
         console.log(`forgecss: Detected change in ${filePath}`);
       }
       callback();
@@ -117,7 +138,7 @@ export default function ForgeCSS(options) {
       if (!html && !jsx) {
         throw new Error('forgecss: parse requires "html" or "jsx".');
       }
-      invalidateInvetory();
+      invalidateInventory();
       invalidateUsageCache();
       // filling the inventory
       try {

package/lib/forge-lang/Compiler.js

@@ -0,0 +1,122 @@
+import postcss from "postcss";
+import { NODE_TYPE, ALLOWED_PSEUDO_CLASSES } from "./constants.js";
+import { minifyCSS } from './utils.js'
+import { normalizeLabel } from "../fx.js";
+
+export function astToRules(ast, options) {
+  let rules = [];
+  const { getStylesByClassName, cache = {}, config } = options
+  // console.log(
+  //   "\n====================================================================== ^\n",
+  //   JSON.stringify(ast, null, 2),
+  //   "\n====================================================================== $\n"
+  // );
+
+  for(let node of ast) {
+    switch (node.type) {
+      case NODE_TYPE.TOKEN:
+        // ignoring ... just tokens
+        break;
+      case NODE_TYPE.VARIANT:
+        let variantSelector = node.selector;
+        let classes = (node?.payload?.value ?? "").split(",").map((c) => c.trim()).filter(Boolean);
+        let childRules;
+        if (!node.payload.value && typeof node.payload === 'object') {
+          childRules = astToRules([node.payload], options);
+        }
+
+        // -------------------------------------------------------- pseudo
+        if (ALLOWED_PSEUDO_CLASSES.includes(variantSelector)) {
+          classes.forEach(cls => {
+            let selector = `.${variantSelector}_${cls}`;
+            const rule = createRule(`${selector}:${variantSelector}`, cls, cache);
+            if (rule) {
+              rules.push(rule);
+            }
+          });
+        // -------------------------------------------------------- media queries
+        } else if (config.breakpoints[variantSelector]) {
+          let mediaRule;
+          if (cache[config.breakpoints[variantSelector]]) {
+            mediaRule = cache[config.breakpoints[variantSelector]];
+          } else {
+            mediaRule = cache[config.breakpoints[variantSelector]] = postcss.atRule({
+              name: "media",
+              params: config.breakpoints[variantSelector]
+            });
+            rules.push(mediaRule);
+          }
+          if (childRules) {
+            childRules.forEach(r => {
+              mediaRule.append(r);
+            })
+          } else {
+            classes.forEach((cls) => {
+              let selector = `.${variantSelector}_${cls}`;
+              const rule = createRule(selector, cls, cache);
+              if (rule) {
+                mediaRule.append(rule);
+              }
+            });
+          }
+        } else if (node.payload?.type === NODE_TYPE.TOKEN && node.simple === true) {
+          console.warn(`forgecss: there is no breakpoint defined for label "${variantSelector}".`);
+        // -------------------------------------------------------- arbitrary
+        } else {
+          classes.forEach(cls => {
+            if (Array.isArray(variantSelector)) {
+              variantSelector = variantSelector
+                .map(({ type, value, selector, payload }) => {
+                  if (type === "token") {
+                    return value;
+                  }
+                })
+                .filter(Boolean)
+                .join(" ");
+            }
+            if (["", "true"].includes(variantSelector)) {
+              return;
+            }
+            const I = normalizeLabel(variantSelector) + "_" + cls;
+            const selector = evaluateArbitrary(variantSelector, I);
+            const rule = createRule(selector, cls, cache);
+            if (rule) {
+              rules.push(rule);
+            }
+          })
+        }
+        break;
+    }
+  }
+
+  function createRule(selector, pickStylesFrom, cache = {}) {
+    if (cache[selector]) {
+      return;
+    }
+    const newRule = cache[selector] = postcss.rule({ selector });
+    const decls = getStylesByClassName(pickStylesFrom);
+    if (decls.length === 0) {
+      return;
+    }
+    decls.forEach((d) => {
+      newRule.append(
+        postcss.decl({
+          prop: d.prop,
+          value: d.value,
+          important: d.important
+        })
+      );
+    });
+    return newRule;
+  }
+  function evaluateArbitrary(variant, I) {
+    variant = variant.replace(/[&]/g, `.${I}`);
+    return variant;
+  }
+  
+  return rules;
+}
+
+export function rulesToCSS(rules, { minify } = { minify: true }) {
+  return minify ? minifyCSS(rules.map((r) => r.toString()).join("")) : rules.map((r) => r.toString()).join("\n");
+}

package/lib/forge-lang/Parser.js

@@ -0,0 +1,208 @@
+export function toAST(input, cache = {}) {
+  if (cache[input]) return cache[input];
+
+  if (Array.isArray(input)) {
+    const optimized = [];
+    input.forEach((str) => {
+      str
+        .trim()
+        .split(" ")
+        .forEach((part) => {
+          if (!optimized.includes(part)) optimized.push(part);
+        });
+    });
+    input = optimized.join(" ");
+  }
+
+  const s = String(input ?? "").trim();
+  let i = 0;
+
+  const isWS = (ch) => ch === " " || ch === "\n" || ch === "\t" || ch === "\r";
+
+  function skipWS() {
+    while (i < s.length && isWS(s[i])) i++;
+  }
+
+  function parseSequence(stopChar) {
+    const nodes = [];
+    while (i < s.length) {
+      skipWS();
+      if (stopChar && s[i] === stopChar) break;
+      if (i >= s.length) break;
+      nodes.push(parseItem());
+    }
+    return nodes;
+  }
+
+  function readIdentUntilDelimiter() {
+    let out = "";
+    while (i < s.length) {
+      const ch = s[i];
+      // stop at whitespace, "(", ")", ":" (variant separator)
+      if (isWS(ch) || ch === "(" || ch === ")" || ch === ":") break;
+      // IMPORTANT: DO NOT consume "[" here; it may be:
+      //  - leading bracket variant (handled in parseItem when ch === "[")
+      //  - attribute selector suffix (handled in parseItem after reading head)
+      if (ch === "[") break;
+
+      out += ch;
+      i++;
+    }
+    return out.trim();
+  }
+
+  function isVariantLabel(str) {
+    return /^[A-Za-z_][A-Za-z0-9_-]*$/.test(str);
+  }
+
+  function isCallName(str) {
+    return /^[A-Za-z_][A-Za-z0-9_-]*$/.test(str);
+  }
+
+  function parseItem() {
+    skipWS();
+    const ch = s[i];
+
+    // Bracket variant: [selector]:payload
+    if (ch === "[") {
+      const selectorRaw = parseBracketContent(); // returns content WITHOUT outer []
+      const selectorAst = toAST(selectorRaw, cache);
+
+      if (s[i] === ":") {
+        i++;
+        const payload = parseItem();
+        return { type: "variant", selector: selectorAst, payload };
+      }
+
+      // If it's just a standalone bracket chunk (not a variant),
+      // keep it as a token string. (You can change this if you prefer AST here.)
+      return { type: "token", value: `[${selectorRaw}]` };
+    }
+
+    // Read label/name/token
+    let head = readIdentUntilDelimiter();
+
+    // NEW: absorb attribute selector suffixes: foo[...][...]
+    // This handles &\[type=...\] and similar.
+    while (s[i] === "[") {
+      const inner = parseBracketContent(); // consumes the bracket block
+      head += `[${inner}]`;
+    }
+
+    // Label variant: hover:..., desktop:..., focus:...
+    if (s[i] === ":" && isVariantLabel(head)) {
+      i++; // consume ":"
+      const payload = parseItem();
+      return { type: "variant", selector: head, payload, simple: true };
+    }
+
+    // Call: name(...)
+    if (s[i] === "(" && isCallName(head)) {
+      i++; // consume "("
+      const args = [];
+      while (i < s.length) {
+        skipWS();
+        if (s[i] === ")") {
+          i++;
+          break;
+        }
+        args.push(parseItem());
+        skipWS();
+        if (s[i] === ",") i++;
+      }
+      return { type: "call", name: head, args };
+    }
+
+    if (s[i] === ":") {
+      head += ":";
+      i++; // consume ":"
+
+      // absorb following identifier / call / selector chunk
+      while (i < s.length) {
+        const ch = s[i];
+        if (isWS(ch) || ch === ")" || ch === ",") break;
+
+        if (ch === "[") {
+          const inner = parseBracketContent();
+          head += `[${inner}]`;
+          continue;
+        }
+
+        if (ch === "(") {
+          head += "(";
+          i++;
+          let depth = 1;
+          while (i < s.length && depth > 0) {
+            if (s[i] === "(") depth++;
+            if (s[i] === ")") depth--;
+            head += s[i++];
+          }
+          continue;
+        }
+
+        head += ch;
+        i++;
+      }
+    }
+
+    return { type: "token", value: head };
+  }
+
+  function parseBracketContent() {
+    // assumes s[i] === "["
+    i++; // consume "["
+    let out = "";
+    let bracket = 1;
+    let quote = null;
+
+    while (i < s.length) {
+      const ch = s[i];
+
+      if (quote) {
+        out += ch;
+        if (ch === "\\" && i + 1 < s.length) {
+          i++;
+          out += s[i];
+        } else if (ch === quote) {
+          quote = null;
+        }
+        i++;
+        continue;
+      }
+
+      if (ch === "'" || ch === '"') {
+        quote = ch;
+        out += ch;
+        i++;
+        continue;
+      }
+
+      if (ch === "[") {
+        bracket++;
+        out += ch;
+        i++;
+        continue;
+      }
+
+      if (ch === "]") {
+        bracket--;
+        if (bracket === 0) {
+          i++; // consume final "]"
+          break;
+        }
+        out += ch;
+        i++;
+        continue;
+      }
+
+      out += ch;
+      i++;
+    }
+
+    return out;
+  }
+
+  const ast = parseSequence(null);
+  cache[input] = ast;
+  return ast;
+}

package/lib/forge-lang/constants.js

@@ -0,0 +1,27 @@
+export const NODE_TYPE = {
+  VARIANT: "variant",
+  CALL: "call",
+  TOKEN: "token"
+};
+export const ALLOWED_PSEUDO_CLASSES = [
+  "hover",
+  "active",
+  "focus",
+  "focus-visible",
+  "focus-within",
+  "disabled",
+  "enabled",
+  "read-only",
+  "read-write",
+  "checked",
+  "indeterminate",
+  "valid",
+  "invalid",
+  "required",
+  "optional",
+  "in-range",
+  "out-of-range",
+  "placeholder-shown",
+  "autofill",
+  "user-invalid"
+];

package/lib/forge-lang/utils.js

@@ -0,0 +1,18 @@
+export function minifyCSS(css) {
+  return (
+    css
+      // remove comments
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      // remove whitespace around symbols
+      .replace(/\s*([{}:;,])\s*/g, "$1")
+      // remove trailing semicolons
+      .replace(/;}/g, "}")
+      // collapse multiple spaces
+      .replace(/\s+/g, " ")
+      // remove spaces before/after braces
+      .replace(/\s*{\s*/g, "{")
+      .replace(/\s*}\s*/g, "}")
+      // trim
+      .trim()
+  );
+}

package/{client → lib}/fx.js

@@ -1,18 +1,4 @@
-export default function fx(classes) {
-  return parseClass(classes).map((className) => {
-      let [label, rest] = splitClassName(className);
-      if (!label || label === "[true]") return rest;
-      if (label === "[false]") return false;
-      label = normalizeLabel(label);
-      return rest
-        .split(",")
-        .map((cls) => `${label}--${cls}`)
-        .join(" ");
-    })
-    .filter(Boolean)
-    .join(" ");
-}
-export function splitClassName(label) {
+function splitClassName(label) {
   const lastColonIndex = label.lastIndexOf(":");
   if (lastColonIndex === -1) {
     return [null, label];
@@ -21,16 +7,7 @@ export function splitClassName(label) {
   const rest = label.slice(lastColonIndex + 1);
   return [prefix, rest];
 }
-
-export function normalizeLabel(label) {
-  let normalized = label.trim();
-  normalized = normalized.replace(/[&]/g, "I");
-  normalized = normalized.replace(/[:| =]/g, "-");
-  normalized = normalized.replace(/[^a-zA-Z0-9_-]/g, '');
-  return normalized;
-}
-
-export function parseClass(str) {
+function parseClass(str) {
   const out = [];
   let buf = "";
 
@@ -71,4 +48,25 @@ export function parseClass(str) {
   if (buf) out.push(buf);
   return out;
 }
-
+export default function fx(classes) {
+  return parseClass(classes)
+    .map((className) => {
+      let [label, rest] = splitClassName(className);
+      if (!label || label === "[true]") return rest;
+      if (label === "[false]") return false;
+      label = normalizeLabel(label);
+      return rest
+        .split(",")
+        .map((cls) => `${label}_${cls}`)
+        .join(" ");
+    })
+    .filter(Boolean)
+    .join(" ");
+}
+export function normalizeLabel(label) {
+  let normalized = label.trim();
+  normalized = normalized.replace(/[&]/g, "I");
+  normalized = normalized.replace(/[:| =]/g, "-");
+  normalized = normalized.replace(/[^a-zA-Z0-9_-]/g, "");
+  return normalized;
+}

package/lib/helpers.js

@@ -1,19 +1,30 @@
-import postcss from "postcss";
-import { getStylesByClassName } from "./inventory.js";
+import fs from "fs/promises";
+import path from "path";
 
-export function setDeclarations(selector, rule) {
-  const decls = getStylesByClassName(selector);
-  if (decls.length === 0) {
-    console.warn(`forgecss: no class ".${selector}" found`);
-    return;
+export async function getAllFiles(dir, matchFiles) {
+  const result = [];
+  const stack = [dir];
+
+  while (stack.length > 0) {
+    const currentDir = stack.pop();
+
+    let dirHandle;
+    try {
+      dirHandle = await fs.opendir(currentDir);
+    } catch (err) {
+      throw err;
+    }
+
+    for await (const entry of dirHandle) {
+      const fullPath = path.join(currentDir, entry.name);
+
+      if (entry.isDirectory()) {
+        stack.push(fullPath);
+      } else if (matchFiles.includes(fullPath.split(".").pop()?.toLowerCase())) {
+        result.push(fullPath);
+      }
+    }
   }
-  decls.forEach((d) => {
-    rule.append(
-      postcss.decl({
-        prop: d.prop,
-        value: d.value,
-        important: d.important
-      })
-    );
-  });
+
+  return result;
 }

package/lib/usages.js

@@ -2,7 +2,6 @@ import swc from "@swc/core";
 import { readFile, writeFile } from "fs/promises";
 import { fromHtml } from "hast-util-from-html";
 import { visit } from "unist-util-visit";
-import { parseClass } from "../client/fx.js";
 
 const FUNC_NAME = 'fx';
 let USAGES = {};
@@ -15,7 +14,7 @@ export async function findUsages(filePath, fileContent = null) {
       // already processed
       return;
     }
-    USAGES[filePath] = {};
+    USAGES[filePath] = [];
     const content = fileContent ? fileContent : await readFile(filePath, "utf-8");
     const extension = filePath.split('.').pop().toLowerCase();
 
@@ -24,7 +23,7 @@ export async function findUsages(filePath, fileContent = null) {
       const ast = fromHtml(content);
       visit(ast, "element", (node) => {
         if (node.properties.className) {
-          storeUsage(filePath, node.properties.className.join(' '));
+          USAGES[filePath].push(node.properties.className.join(" "));
         }
       });
       return;
@@ -47,7 +46,7 @@ export async function findUsages(filePath, fileContent = null) {
               let quasis = arg.expression.quasis.map((elem) => elem?.cooked || "");
               value = quasis.join("");
             }
-            storeUsage(filePath, value);
+            USAGES[filePath].push(value);
           }
         }
       }
@@ -68,27 +67,6 @@ export function invalidateUsageCache(filePath) {
 export function getUsages() {
   return USAGES;
 }
-function storeUsage(filePath, classesString = "") {
-  if (!classesString) return;
-
-  parseClass(classesString).forEach((part) => {
-    if (part.includes(":")) {
-      const lastColonIndex = part.lastIndexOf(":");
-      const label = part.slice(0, lastColonIndex); // "desktop" or "[&:hover]"
-      const clsPart = part.slice(lastColonIndex + 1); // e.g. "mt1"
-      const classes = clsPart.split(",");
-
-      if (label === "[]") return;
-
-      if (!USAGES[filePath][label]) {
-        USAGES[filePath][label] = [];
-      }
-      classes.forEach((cls) => {
-        USAGES[filePath][label].push(cls);
-      });
-    }
-  });
-}
 function traverseASTNode(node, visitors, stack = []) {
   if (!node || typeof node.type !== "string") {
     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forgecss",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "ForgeCSS turns strings into fully generated responsive CSS using a custom DSL.",
   "author": "Krasimir Tsonev",

package/scripts/build.js

@@ -11,15 +11,21 @@ const minify = true;
 
 (async function () {
   await esbuild.build({
-    entryPoints: [path.join(__dirname, "..", "client", "index.js")],
+    entryPoints: [path.join(__dirname, "..", "standalone", "client.js")],
+    bundle: true,
+    minify,
+    outfile: path.join(__dirname, "..", "dist", "client.min.js"),
+    platform: "browser",
+    sourcemap: false,
+    plugins: []
+  });
+  await esbuild.build({
+    entryPoints: [path.join(__dirname, "..", "standalone", "forgecss.js")],
     bundle: true,
     minify,
     outfile: path.join(__dirname, "..", "dist", "forgecss.min.js"),
     platform: "browser",
     sourcemap: false,
-    plugins: [],
-    define: {
-      __VERSION__: JSON.stringify(pkg.version)
-    }
+    plugins: []
   });
 })();

package/{client/index.js → standalone/client.js}

@@ -1,4 +1,4 @@
-import fxFn from "./fx.js";
+import fxFn from "../lib/fx.js";
 
 function forgecss(root) {
   var rootNode = root || document;