forgecss 0.2.0 → 0.3.0

package/cli.js

@@ -55,9 +55,9 @@ async function runForgeCSS(lookAtPath = null) {
     }
   }
   if (lookAtPath) {
-    instance.parseFile(lookAtPath, config.output);
+    instance.parseFile({ file: lookAtPath, output: config.output });
   } else {
-    instance.parseDirectory(config.dir, config.output);
+    instance.parseDirectory({ dir: config.dir, output: config.output });
   }
   if (options.verbose) {
     console.log(`forgecss: ${config.output} generated successfully.`);

package/client/fx.js

@@ -1,16 +1,74 @@
 export default function fx(classes) {
-  return classes
-    .split(" ")
-    .map((className) => {
-      const [label, rest] = className.split(":");
-      if (!rest) return label;
+  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}`)
-        .filter(Boolean)
+        .map((cls) => `${label}--${cls}`)
         .join(" ");
     })
     .filter(Boolean)
     .join(" ");
-};
+}
+export function splitClassName(label) {
+  const lastColonIndex = label.lastIndexOf(":");
+  if (lastColonIndex === -1) {
+    return [null, label];
+  }
+  const prefix = label.slice(0, lastColonIndex);
+  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) {
+  const out = [];
+  let buf = "";
+
+  let depth = 0;
+  let quote = null;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str[i];
+    if (depth > 0) {
+      if (quote) {
+        buf += ch;
+        if (ch === quote && str[i - 1] !== "\\") quote = null;
+        continue;
+      } else if (ch === "'" || ch === '"') {
+        quote = ch;
+        buf += ch;
+        continue;
+      }
+    }
+    if (ch === "[") {
+      depth++;
+      buf += ch;
+      continue;
+    }
+    if (ch === "]" && depth > 0) {
+      depth--;
+      buf += ch;
+      continue;
+    }
+    if (depth === 0 && /\s/.test(ch)) {
+      if (buf) out.push(buf);
+      buf = "";
+      while (i + 1 < str.length && /\s/.test(str[i + 1])) i++;
+      continue;
+    }
+    buf += ch;
+  }
+
+  if (buf) out.push(buf);
+  return out;
+}
 

package/dist/forgecss.min.js

@@ -1 +1 @@
-(()=>{function o(i){return i.split(" ").map(s=>{let[e,t]=s.split(":");return t?t.split(",").map(n=>`${e}_${n}`).filter(Boolean).join(" "):e}).filter(Boolean).join(" ")}function r(i){for(var s=i||document,e=s.querySelectorAll("[class]"),t=0;t<e.length;t++){var n=e[t],a=n.getAttribute("class");if(a){var f=o(a);typeof f=="string"&&f!==a&&n.setAttribute("class",f)}}}window.fx=o;window.forgecss=r;document.readyState!=="loading"?r():document.addEventListener("DOMContentLoaded",function(){r()});window.addEventListener("load",function(){r()});})();
+(()=>{function s(n){return a(n).map(t=>{let[e,i]=f(t);return!e||e==="[true]"?i:e==="[false]"?!1:(e=c(e),i.split(",").map(l=>`${e}--${l}`).join(" "))}).filter(Boolean).join(" ")}function f(n){let t=n.lastIndexOf(":");if(t===-1)return[null,n];let e=n.slice(0,t),i=n.slice(t+1);return[e,i]}function c(n){let t=n.trim();return t=t.replace(/[&]/g,"I"),t=t.replace(/[:| =]/g,"-"),t=t.replace(/[^a-zA-Z0-9_-]/g,""),t}function a(n){let t=[],e="",i=0,l=null;for(let r=0;r<n.length;r++){let o=n[r];if(i>0){if(l){e+=o,o===l&&n[r-1]!=="\\"&&(l=null);continue}else if(o==="'"||o==='"'){l=o,e+=o;continue}}if(o==="["){i++,e+=o;continue}if(o==="]"&&i>0){i--,e+=o;continue}if(i===0&&/\s/.test(o)){for(e&&t.push(e),e="";r+1<n.length&&/\s/.test(n[r+1]);)r++;continue}e+=o}return e&&t.push(e),t}function u(n){for(var t=n||document,e=t.querySelectorAll("[class]"),i=0;i<e.length;i++){var l=e[i],r=l.getAttribute("class");if(r){var o=s(r);typeof o=="string"&&o!==r&&l.setAttribute("class",o)}}}window.fx=s;window.forgecss=u;document.readyState!=="loading"?u():document.addEventListener("DOMContentLoaded",function(){u()});window.addEventListener("load",function(){u()});})();

package/index.d.ts

@@ -10,9 +10,9 @@ export type ForgeCSSOptions = {
 };
 
 export type ForgeInstance = {
-  parseDirectory: (directoryPath: string, outputFile?: string) => Promise<string>;
-  parseFile: (filePath: string, outputFile?: string) => Promise<string>;
-  parse: (css: string, html: string, outputFile?: string) => Promise<string>;
+  parseDirectory: (options: { dir: string; output?: string }) => Promise<string>;
+  parseFile: (options: { file: string; output?: string }) => Promise<string>;
+  parse: (options: { css: string; html?: string; jsx?: string; output?: string }) => Promise<string>;
 };
 
 declare function ForgeCSS(options?: ForgeCSSOptions): ForgeInstance;

package/index.js

@@ -1,7 +1,7 @@
 import { writeFile } from "fs/promises";
 import getAllFiles from "./lib/getAllFiles.js";
 import { extractStyles, invalidateInvetory } from "./lib/inventory.js";
-import { invalidateUsageCache, findUsages } from "./lib/processor.js";
+import { invalidateUsageCache, findUsages } from "./lib/usages.js";
 import { generateOutputCSS } from "./lib/generator.js";
 
 const DEFAULT_OPTIONS = {
@@ -34,7 +34,7 @@ export default function ForgeCSS(options) {
   }
 
   return {
-    async parseDirectory(dir, output = null) {
+    async parseDirectory({ dir, output = null }) {
       if (!dir) {
         throw new Error('forgecss: parseDirectory requires "dir" as an argument.');
       }
@@ -59,7 +59,7 @@ export default function ForgeCSS(options) {
       // generating the output CSS
       return result(output);
     },
-    async parseFile(file, output = null) {
+    async parseFile({ file, output = null }) {
       if (!file) {
         throw new Error('forgecss: parseFile requires "file" as an argument.');
       }
@@ -84,12 +84,12 @@ export default function ForgeCSS(options) {
       // generating the output CSS
       return result(output);
     },
-    async parse(css, html, output = null) {
+    async parse({ css, html, jsx, output = null }) {
       if (!css) {
-        throw new Error('forgecss: parse requires "css" as an argument.');
+        throw new Error('forgecss: parse requires "css".');
       }
-      if (!html) {
-        throw new Error('forgecss: parse requires "html" as an argument.');
+      if (!html && !jsx) {
+        throw new Error('forgecss: parse requires "html" or "jsx".');
       }
       invalidateInvetory();
       invalidateUsageCache();
@@ -101,7 +101,11 @@ export default function ForgeCSS(options) {
       }
       // finding the usages
       try {
-        await findUsages("usage.html", html);
+        if (html) {
+          await findUsages("usage.html", html);
+        } else if (jsx) {
+          await findUsages("usage.jsx", jsx);
+        }
       } catch (err) {
         console.error(`forgecss: error extracting usages.`, err);
       }

package/lib/generator.js

@@ -1,4 +1,5 @@
-import { getUsages } from "./processor.js";
+import { getUsages } from "./usages.js";
+import arbitraryTransformer from "./transformers/arbitrary.js";
 import mediaQueryTransformer from "./transformers/mediaQuery.js";
 import pseudoClassTransformer from "./transformers/pseudo.js";
 
@@ -12,6 +13,8 @@ export async function generateOutputCSS(config) {
           return;
         } else if (pseudoClassTransformer(label, usages[file][label], bucket)) {
           return;
+        } else if (arbitraryTransformer(label, usages[file][label], bucket)) {
+          return;
         }
       } catch (err) {
         console.error(

package/lib/helpers.js

@@ -0,0 +1,19 @@
+import postcss from "postcss";
+import { getStylesByClassName } from "./inventory.js";
+
+export function setDeclarations(selector, rule) {
+  const decls = getStylesByClassName(selector);
+  if (decls.length === 0) {
+    console.warn(`forgecss: no class ".${selector}" found`);
+    return;
+  }
+  decls.forEach((d) => {
+    rule.append(
+      postcss.decl({
+        prop: d.prop,
+        value: d.value,
+        important: d.important
+      })
+    );
+  });
+}

package/lib/transformers/arbitrary.js

@@ -0,0 +1,32 @@
+import postcss from "postcss";
+
+import { normalizeLabel } from "../../client/fx.js";
+import { setDeclarations } from "../helpers.js";
+
+export default function arbitraryTransformer(label, classes, bucket) {
+  if (label.startsWith("[") && label.endsWith("]")) {
+    let arbitrarySelector = label.slice(1, -1).trim();
+    if (['', 'true'].includes(arbitrarySelector)) {
+      return true;
+    }
+    classes.forEach((cls) => {
+      const I = normalizeLabel(label) + "--" + cls;
+      const selector = evaluateArbitrary(arbitrarySelector, I);
+      const root = postcss.root();
+      if (bucket[I]) {
+        return;
+      }
+      const rule = postcss.rule({ selector });
+      setDeclarations(cls, rule);
+      root.append(rule);
+      bucket[I] = root;
+    });
+    return true;
+  }
+  return false;
+}
+
+function evaluateArbitrary(label, I) {
+  label = label.replace(/[&]/g, `.${I}`);
+  return label;
+}

package/lib/transformers/mediaQuery.js

@@ -1,8 +1,9 @@
 import postcss from "postcss";
 
-import { getStylesByClassName } from "../inventory.js";
+import { setDeclarations } from "../helpers.js";
+import {normalizeLabel} from "../../client/fx.js";
 
-export default function mediaQueryTransformer(config, label, selectors, bucket) {
+export default function mediaQueryTransformer(config, label, classes, bucket) {
   if (!config?.mapping?.queries[label]) {
     return false;
   }
@@ -16,28 +17,14 @@ export default function mediaQueryTransformer(config, label, selectors, bucket)
     };
   }
   const rules = bucket[label].rules;
-  selectors.forEach((selector) => {
-    const prefixedSelector = `.${label}_${selector}`;
-    if (bucket[label].classes[prefixedSelector]) {
+  classes.forEach((cls) => {
+    const selector = `.${normalizeLabel(label)}--${cls}`;
+    if (bucket[label].classes[selector]) {
       return;
     }
-    bucket[label].classes[prefixedSelector] = true; // caching
-    const rule = postcss.rule({ selector: prefixedSelector });
-    const decls = getStylesByClassName(selector);
-    if (decls.length === 0) {
-      console.warn(`forgecss: no styles found for class ".${selector}" used in media query "${label}"`);
-      delete bucket[label];
-      return;
-    }
-    decls.forEach((d) => {
-      rule.append(
-        postcss.decl({
-          prop: d.prop,
-          value: d.value,
-          important: d.important
-        })
-      );
-    });
+    bucket[label].classes[selector] = true; // caching
+    const rule = postcss.rule({ selector });
+    setDeclarations(cls, rule);
     rules.append(rule);
   });
   return true;

package/lib/transformers/pseudo.js

@@ -1,5 +1,7 @@
 import postcss from "postcss";
-import { getStylesByClassName } from "../inventory.js";
+
+import {setDeclarations} from "../helpers.js";
+import {normalizeLabel} from "../../client/fx.js";
 
 const ALLOWED_PSEUDO_CLASSES = [
   "hover",
@@ -24,34 +26,21 @@ const ALLOWED_PSEUDO_CLASSES = [
   "user-invalid"
 ];
 
-export default function pseudoClassTransformer(label, selectors, bucket) {
-  if (!ALLOWED_PSEUDO_CLASSES.includes(label)) {
-    return false;
-  }
-  const root = postcss.root();
-  selectors.forEach((selector) => {
-    const key = `${label}_${selector}`;
-    if (bucket[key]) {
-      // already have that
-      return;
-    }
-    const rule = postcss.rule({ selector: `.${key}:${label}` });
-    const decls = getStylesByClassName(selector);
-    if (decls.length === 0) {
-      console.warn(`forgecss: no styles found for class ".${selector}" used in pseudo class "${label}"`);
-      return;
-    }
-    decls.forEach((d) => {
-      rule.append(
-        postcss.decl({
-          prop: d.prop,
-          value: d.value,
-          important: d.important
-        })
-      );
+export default function pseudoClassTransformer(label, classes, bucket) {
+  if (ALLOWED_PSEUDO_CLASSES.includes(label)) {
+    classes.forEach((cls) => {
+      const selector = `.${normalizeLabel(label)}--${cls}:${label}`;
+      const root = postcss.root();
+      if (bucket[selector]) {
+        // already have that
+        return;
+      }
+      const rule = postcss.rule({ selector });
+      setDeclarations(cls, rule);
+      root.append(rule);
+      bucket[selector] = root;
     });
-    root.append(rule);
-    bucket[key] = root;
-  });
-  return true;
+    return true;
+  }
+  return false;
 }

package/lib/{processor.js → usages.js}

@@ -1,7 +1,8 @@
 import swc from "@swc/core";
-import { readFile } from "fs/promises";
+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 = {};
@@ -35,6 +36,7 @@ export async function findUsages(filePath, fileContent = null) {
       tsx: true,
       decorators: false
     });
+    // writeFile(process.cwd() + '/ast.json', JSON.stringify(ast, null, 2), 'utf-8').catch(() => {});
     traverseASTNode(ast, {
       JSXExpressionContainer(node) {
         if (node?.expression?.callee?.value === FUNC_NAME && node?.expression?.arguments) {
@@ -42,10 +44,8 @@ export async function findUsages(filePath, fileContent = null) {
             const arg = node.expression.arguments[0];
             let value = arg?.expression.value;
             if (arg.expression.type === "TemplateLiteral") {
-              value = "";
-              arg.expression.quasis.forEach((elem) => {
-                value += elem?.cooked || "";
-              });
+              let quasis = arg.expression.quasis.map((elem) => elem?.cooked || "");
+              value = quasis.join("");
             }
             storeUsage(filePath, value);
           }
@@ -69,20 +69,25 @@ export function getUsages() {
   return USAGES;
 }
 function storeUsage(filePath, classesString = "") {
-  if (classesString) {
-    classesString.split(" ").forEach((part) => {
-      if (part.indexOf(":") > -1) {
-        let [label, classes] = part.split(":");
-        classes = classes.split(",");
-        classes.forEach((cls) => {
-          if (!USAGES[filePath][label]) {
-            USAGES[filePath][label] = [];
-          }
-          USAGES[filePath][label].push(cls);
-        });
+  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") {

package/package.json

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