forgecss 0.5.0 → 0.7.0

package/standalone/forgecss.js

@@ -0,0 +1,76 @@
+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";
+
+const DEFAULT_OPTIONS = {
+  usageAttributes: ["class", "className"],
+  breakpoints: {},
+  verbose: true,
+  minify: true
+};
+
+export default function ForgeCSS(options) {
+  const config = { ...DEFAULT_OPTIONS };
+
+  config.breakpoints = Object.assign({}, DEFAULT_OPTIONS.breakpoints, options?.breakpoints ?? {});
+  config.usageAttributes = options?.usageAttributes ?? DEFAULT_OPTIONS.usageAttributes;
+  config.verbose = options?.verbose ?? DEFAULT_OPTIONS.verbose;
+  config.minify = options?.minify ?? DEFAULT_OPTIONS.minify;
+
+  async function result() {
+    try {
+      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 (config.verbose) {
+        console.log("forgecss: Output CSS generated successfully.");
+      }
+      return css;
+    } catch (err) {
+      console.error(`forgecss: error generating output CSS: ${err}`);
+    }
+    return null;
+  }
+
+  return {
+    async parse({ css, html, jsx }) {
+      if (!css) {
+        throw new Error('forgecss: parse requires "css".');
+      }
+      if (!html && !jsx) {
+        throw new Error('forgecss: parse requires "html" or "jsx".');
+      }
+      invalidateInventory();
+      invalidateUsageCache();
+      // filling the inventory
+      try {
+        await extractStyles(css);
+      } catch (err) {
+        console.error(`forgecss: error extracting styles.`, err);
+      }
+      // finding the usages
+      try {
+        if (html) {
+          await findUsages("usage.html", html);
+        } else if (jsx) {
+          await findUsages("usage.jsx", jsx);
+        }
+      } catch (err) {
+        console.error(`forgecss: error extracting usages.`, err);
+      }
+      return result();
+    }
+  };
+}

package/{lib → standalone/lib}/inventory.js

@@ -1,11 +1,10 @@
-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 async function extractStyles(css = null) {
+  const content = css;
   INVENTORY[filePath] = postcss.parse(content, { parser: safeParser });
 }
 export function getStylesByClassName(selector) {
@@ -20,14 +19,21 @@ export function getStylesByClassName(selector) {
     });
   });
   if (decls.length === 0) {
-    console.warn(`forgecss: Warning - no styles found for class "${selector}".`);
+    console.warn(`forgecss: no styles found for class "${selector}".`);
   }
   return decls;
 }
-export function invalidateInvetory() {
-  INVENTORY = {};
+export function invalidateInventory(filePath) {
+  if (!filePath) {
+    INVENTORY = {};
+    return;
+  }
+  if (INVENTORY[filePath]) {
+    delete INVENTORY[filePath];
+  }
 }
-export function resolveApplys(bucket) {
+export function resolveApplys() {
+  let resolvedApplies;
   Object.keys(INVENTORY).forEach((filePath) => {
     INVENTORY[filePath].walkRules((rule) => {
       rule.walkDecls((d) => {
@@ -44,12 +50,13 @@ export function resolveApplys(bucket) {
               });
             });
           });
-          if (!bucket['_APPLY_']) {
-            bucket["_APPLY_"] = postcss.root();
+          if (!resolvedApplies) {
+            resolvedApplies = postcss.root();
           }
-          bucket["_APPLY_"].append(newRule);
+          resolvedApplies.append(newRule);
         }
       });
     });
   });
+  return resolvedApplies;
 }

package/standalone/lib/usages.js

@@ -0,0 +1,36 @@
+import { fromHtml } from "hast-util-from-html";
+import { visit } from "unist-util-visit";
+
+let USAGES = {};
+
+export async function findUsages(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.replace(process.cwd(), '')}`, err);
+  }
+}
+export function invalidateUsageCache(filePath) {
+  if (!filePath) {
+    USAGES = {};
+    return;
+  }
+  if (USAGES[filePath]) {
+    delete USAGES[filePath];
+  }
+}
+export function getUsages() {
+  return USAGES;
+}

package/lib/generator.js

@@ -1,42 +0,0 @@
-import { getUsages } from "./usages.js";
-import arbitraryTransformer from "./transformers/arbitrary.js";
-import mediaQueryTransformer from "./transformers/mediaQuery.js";
-import pseudoClassTransformer from "./transformers/pseudo.js";
-import { resolveApplys } from "./inventory.js";
-
-export async function generateOutputCSS(config) {
-  const bucket = {};
-  const usages = getUsages();
-  Object.keys(usages).map((file) => {
-    Object.keys(usages[file]).forEach(async (label) => {
-      try {
-        if (mediaQueryTransformer(config, label, usages[file][label], bucket)) {
-          return;
-        } else if (pseudoClassTransformer(label, usages[file][label], bucket)) {
-          return;
-        } else if (arbitraryTransformer(label, usages[file][label], bucket)) {
-          return;
-        }
-      } catch (err) {
-        console.error(
-          `forgecss: Error generating media query for label "${label}" (found in file ${file.replace(
-            process.cwd(),
-            ""
-          )})`,
-          err
-        );
-      }
-    });
-  });
-  resolveApplys(bucket);
-  return Object.keys(bucket)
-    .map((key) => {
-      if (bucket[key].rules) {
-        return bucket[key].rules.toString();
-      }
-      return bucket[key].toString();
-    })
-    .filter(Boolean)
-    .join("\n");
-}
-

package/lib/getAllFiles.js

@@ -1,30 +0,0 @@
-import fs from "fs/promises";
-import path from "path";
-
-export default 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);
-      }
-    }
-  }
-
-  return result;
-}

package/lib/inventory.d.ts

@@ -1,4 +0,0 @@
-export function extractStyles(filePath: string, css?: string | null): Promise<void>;
-export function getStylesByClassName(selector: string): object[];
-export function invalidateInvetory(): void;
-export function resolveApplys(bucket: object): void

package/lib/transformers/arbitrary.js

@@ -1,32 +0,0 @@
-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,31 +0,0 @@
-import postcss from "postcss";
-
-import { setDeclarations } from "../helpers.js";
-import {normalizeLabel} from "../../client/fx.js";
-
-export default function mediaQueryTransformer(config, label, classes, bucket) {
-  if (!config?.breakpoints[label]) {
-    return false;
-  }
-  if (!bucket[label]) {
-    bucket[label] = {
-      rules: postcss.atRule({
-        name: "media",
-        params: `all and (${config.breakpoints[label]})`
-      }),
-      classes: {}
-    };
-  }
-  const rules = bucket[label].rules;
-  classes.forEach((cls) => {
-    const selector = `.${normalizeLabel(label)}--${cls}`;
-    if (bucket[label].classes[selector]) {
-      return;
-    }
-    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,46 +0,0 @@
-import postcss from "postcss";
-
-import {setDeclarations} from "../helpers.js";
-import {normalizeLabel} from "../../client/fx.js";
-
-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"
-];
-
-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;
-    });
-    return true;
-  }
-  return false;
-}

package/lib/usages.d.ts

@@ -1,3 +0,0 @@
-export declare function findUsages(filePath: string, content?: string | null): Promise<void>;
-export declare function invalidateUsageCache(filePath?: string): void;
-export declare function getUsages(): object;