forgecss 0.10.0 → 0.11.0

package/index.js

@@ -6,7 +6,7 @@ import { extractStyles, getStylesByClassName, invalidateInventory, resolveApplys
 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';
+import { getAllFiles, JSXParser, readFileContent } from './lib/helpers.js';
 
 const DEFAULT_OPTIONS = {
   inventoryFiles: ["css", "less", "scss"],
@@ -47,7 +47,7 @@ export default function ForgeCSS(options) {
         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) {
@@ -83,7 +83,7 @@ export default function ForgeCSS(options) {
         // filling the inventory
         let files = await getAllFiles(dir, config.inventoryFiles);
         for (let file of files) {
-          await extractStyles(file);
+          extractStyles(file, await readFileContent(file));
         }
       } catch (err) {
         console.error(`forgecss: error extracting styles.`, err);
@@ -92,7 +92,7 @@ export default function ForgeCSS(options) {
       try {
         let files = await getAllFiles(dir, config.usageFiles);
         for (let file of files) {
-          await findUsages(file);
+          await findUsages(file, await readFileContent(file), JSXParser);
         }
       } catch (err) {
         console.error(`forgecss: error extracting usages`, err);
@@ -111,7 +111,7 @@ export default function ForgeCSS(options) {
       // filling the inventory
       try {
         if (config.inventoryFiles.includes(ext)) {
-          await extractStyles(file);
+          extractStyles(file, await readFileContent(file));
         }
       } catch (err) {
         console.error(`forgecss: error extracting styles.`, err);
@@ -120,7 +120,7 @@ export default function ForgeCSS(options) {
       try {
         if (config.usageFiles.includes(ext)) {
           invalidateUsageCache(file);
-          await findUsages(file);
+          await findUsages(file, await readFileContent(file), JSXParser);
         }
       } catch (err) {
         console.error(`forgecss: error extracting usages.`, err);
@@ -142,7 +142,7 @@ export default function ForgeCSS(options) {
       invalidateUsageCache();
       // filling the inventory
       try {
-        await extractStyles("styles.css", css);
+        extractStyles("styles.css", css);
       } catch (err) {
         console.error(`forgecss: error extracting styles.`, err);
       }
@@ -151,7 +151,7 @@ export default function ForgeCSS(options) {
         if (html) {
           await findUsages("usage.html", html);
         } else if (jsx) {
-          await findUsages("usage.jsx", jsx);
+          await findUsages("usage.jsx", jsx, JSXParser);
         }
       } catch (err) {
         console.error(`forgecss: error extracting usages.`, err);

package/lib/helpers.js

@@ -1,6 +1,10 @@
+import swc from "@swc/core";
 import fs from "fs/promises";
 import path from "path";
 
+const FUNC_NAME = "fx";
+const { parse } = swc;
+
 export async function getAllFiles(dir, matchFiles) {
   const result = [];
   const stack = [dir];
@@ -28,3 +32,65 @@ export async function getAllFiles(dir, matchFiles) {
 
   return result;
 }
+export function readFileContent(filePath) {
+  return fs.readFile(filePath, "utf-8");
+}
+export async function JSXParser(content, USAGES, filePath) {
+  const ast = await parse(content, {
+    syntax: "typescript",
+    tsx: true,
+    decorators: false
+  });
+  function traverseASTNode(node, visitors, stack = []) {
+    if (!node || typeof node.type !== "string") {
+      return;
+    }
+
+    const visitor = visitors[node.type];
+    if (visitor) {
+      visitor(node, stack);
+    }
+
+    for (const key in node) {
+      if (!node.hasOwnProperty(key)) continue;
+
+      const child = node[key];
+
+      if (Array.isArray(child)) {
+        child.forEach((c) => {
+          if (c) {
+            if (typeof c.type === "string") {
+              traverseASTNode(c, visitors, [node].concat(stack));
+            } else if (c?.expression && typeof c.expression.type === "string") {
+              traverseASTNode(c.expression, visitors, [node].concat(stack));
+            } else if (c?.callee && typeof c.callee.type === "string") {
+              traverseASTNode(c.callee, visitors, [node].concat(stack));
+            } else if (c?.left && typeof c.left.type === "string") {
+              traverseASTNode(c.left, visitors, [node].concat(stack));
+            } else if (c?.right && typeof c.right.type === "string") {
+              traverseASTNode(c.right, visitors, [node].concat(stack));
+            }
+          }
+        });
+      } else if (child && typeof child.type === "string") {
+        traverseASTNode(child, visitors, [node].concat(stack));
+      }
+    }
+  }
+  // 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) {
+        if (node?.expression?.arguments[0]) {
+          const arg = node.expression.arguments[0];
+          let value = arg?.expression.value;
+          if (arg.expression.type === "TemplateLiteral") {
+            let quasis = arg.expression.quasis.map((elem) => elem?.cooked || "");
+            value = quasis.join("");
+          }
+          USAGES[filePath].push(value);
+        }
+      }
+    }
+  });
+}

package/lib/inventory.js

@@ -1,11 +1,9 @@
-import { readFile } from "fs/promises";
 import postcss from "postcss";
 import safeParser from "postcss-safe-parser";
 
 let INVENTORY = {};
 
-export async function extractStyles(filePath, css = null) {
-  const content = css !== null ? css : await readFile(filePath, "utf-8");
+export function extractStyles(filePath, content) {
   INVENTORY[filePath] = postcss.parse(content, { parser: safeParser });
 }
 export function getStylesByClassName(selector) {
@@ -64,3 +62,6 @@ export function resolveApplys() {
   });
   return resolvedApplies;
 }
+export function getInventory() {
+  return INVENTORY;
+}

package/lib/usages.js

@@ -1,22 +1,17 @@
-import swc from "@swc/core";
-import { readFile, writeFile } from "fs/promises";
 import { fromHtml } from "hast-util-from-html";
 import { visit } from "unist-util-visit";
 
-const FUNC_NAME = 'fx';
-let USAGES = {};
 
-const { parse } = swc;
+let USAGES = {};
 
-export async function findUsages(filePath, fileContent = null) {
+export async function findUsages(filePath, content, JSXParser) {
   try {
     if (USAGES[filePath]) {
       // already processed
       return;
     }
     USAGES[filePath] = [];
-    const content = fileContent ? fileContent : await readFile(filePath, "utf-8");
-    const extension = filePath.split('.').pop().toLowerCase();
+    const extension = filePath.split(".").pop().toLowerCase();
 
     // HTML
     if (extension === "html") {
@@ -28,31 +23,12 @@ export async function findUsages(filePath, fileContent = null) {
       });
       return;
     }
-
-    // JSX/TSX
-    const ast = await parse(content, {
-      syntax: "typescript",
-      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) {
-          if (node?.expression?.arguments[0]) {
-            const arg = node.expression.arguments[0];
-            let value = arg?.expression.value;
-            if (arg.expression.type === "TemplateLiteral") {
-              let quasis = arg.expression.quasis.map((elem) => elem?.cooked || "");
-              value = quasis.join("");
-            }
-            USAGES[filePath].push(value);
-          }
-        }
-      }
-    });
+    if (JSXParser && (extension === "jsx" || extension === "tsx")) {
+      await JSXParser(content, USAGES, filePath);
+      return;
+    }
   } catch (err) {
-    console.error(`forgecss: error processing file ${filePath.replace(process.cwd(), '')}`, err);
+    console.error(`forgecss: error processing file ${filePath.replace(process.cwd(), "")}`, err);
   }
 }
 export function invalidateUsageCache(filePath) {
@@ -66,40 +42,4 @@ export function invalidateUsageCache(filePath) {
 }
 export function getUsages() {
   return USAGES;
-}
-function traverseASTNode(node, visitors, stack = []) {
-  if (!node || typeof node.type !== "string") {
-    return;
-  }
-
-  const visitor = visitors[node.type];
-  if (visitor) {
-    visitor(node, stack);
-  }
-
-  for (const key in node) {
-    if (!node.hasOwnProperty(key)) continue;
-
-    const child = node[key];
-
-    if (Array.isArray(child)) {
-      child.forEach((c) => {
-        if (c) {
-          if (typeof c.type === "string") {
-            traverseASTNode(c, visitors, [node].concat(stack));
-          } else if (c?.expression && typeof c.expression.type === "string") {
-            traverseASTNode(c.expression, visitors, [node].concat(stack));
-          } else if (c?.callee && typeof c.callee.type === "string") {
-            traverseASTNode(c.callee, visitors, [node].concat(stack));
-          } else if (c?.left && typeof c.left.type === "string") {
-            traverseASTNode(c.left, visitors, [node].concat(stack));
-          } else if (c?.right && typeof c.right.type === "string") {
-            traverseASTNode(c.right, visitors, [node].concat(stack));
-          }
-        }
-      });
-    } else if (child && typeof child.type === "string") {
-      traverseASTNode(child, visitors, [node].concat(stack));
-    }
-  }
 }

package/package.json

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

package/standalone/forgecss.js

@@ -4,8 +4,8 @@ import {
   invalidateInventory,
   resolveApplys,
   getInventory
-} from "./lib/inventory.js";
-import { invalidateUsageCache, findUsages, getUsages } from "./lib/usages.js";
+} 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 fx from '../lib/fx.js'
@@ -42,7 +42,7 @@ function ForgeCSS(options) {
       rules.push(resolveApplys());
       const css = rulesToCSS(rules.filter(Boolean), config);
       if (config.verbose) {
-        console.log("forgecss: Output CSS generated successfully.");
+        console.log("forgecss: output CSS generated successfully.");
       }
       return css;
     } catch (err) {
@@ -63,7 +63,7 @@ function ForgeCSS(options) {
       invalidateUsageCache();
       // filling the inventory
       try {
-        await extractStyles(css);
+        extractStyles("styles.css", css);
       } catch (err) {
         console.error(`forgecss: error extracting styles.`, err);
       }

package/standalone/lib/inventory.js

@@ -1,59 +0,0 @@
-import postcss from "postcss";
-import safeParser from "postcss-safe-parser";
-
-let INVENTORY = {};
-
-export async function extractStyles(css = null) {
-  const content = css;
-  INVENTORY['styles.css'] = postcss.parse(content, { parser: safeParser });
-}
-export function getStylesByClassName(selector) {
-  const decls = [];
-  Object.keys(INVENTORY).forEach((filePath) => {
-    INVENTORY[filePath].walkRules((rule) => {
-      if (rule.selectors && rule.selectors.includes(`.${selector}`)) {
-        rule.walkDecls((d) => {
-          decls.push({ prop: d.prop, value: d.value, important: d.important });
-        });
-      }
-    });
-  });
-  if (decls.length === 0) {
-    console.warn(`forgecss: no styles found for class "${selector}".`);
-  }
-  return decls;
-}
-export function invalidateInventory() {
-  INVENTORY = {};
-}
-export function resolveApplys() {
-  let resolvedApplies;
-  Object.keys(INVENTORY).forEach((filePath) => {
-    INVENTORY[filePath].walkRules((rule) => {
-      rule.walkDecls((d) => {
-        if (d.prop === '--apply') {
-          const classesToApply = d.value.split(' ').map(c => c.trim()).filter(Boolean);
-          const newRule = postcss.rule({ selector: rule.selector });
-          classesToApply.forEach((className) => {
-            const styles = getStylesByClassName(className);
-            styles.forEach((style) => {
-              newRule.append({
-                prop: style.prop,
-                value: style.value,
-                important: style.important
-              });
-            });
-          });
-          if (!resolvedApplies) {
-            resolvedApplies = postcss.root();
-          }
-          resolvedApplies.append(newRule);
-        }
-      });
-    });
-  });
-  return resolvedApplies;
-}
-export function getInventory() {
-  return INVENTORY;
-}

package/standalone/lib/usages.js

@@ -1,30 +0,0 @@
-import { fromHtml } from "hast-util-from-html";
-import { visit } from "unist-util-visit";
-
-let USAGES = {};
-
-export async function findUsages(filePath, fileContent = null) {
-  try {
-    if (USAGES[filePath]) {
-      // already processed
-      return;
-    }
-    USAGES[filePath] = [];
-    const content = fileContent;
-
-    const ast = fromHtml(content);
-    visit(ast, "element", (node) => {
-      if (node.properties.className) {
-        USAGES[filePath].push(node.properties.className.join(" "));
-      }
-    });
-  } catch (err) {
-    console.error(`forgecss: error processing file ${filePath}`, err);
-  }
-}
-export function invalidateUsageCache() {
-  USAGES = {};
-}
-export function getUsages() {
-  return USAGES;
-}