forgecss 0.1.6 → 0.2.0

package/cli.js

@@ -7,13 +7,13 @@ import { program } from "commander";
 import ForgeCSS from './index.js';
 import chokidar from "chokidar";
 
-program.option("--config", "Path to forgecss config file", process.cwd() + "/forgecss.config.js");
-program.option("--watch", "Enable watch mode", false);
-program.option("--verbose", "Enable watch mode", false);
+program.option("-c, --config <string>,", "Path to forgecss config file", process.cwd() + "/forgecss.config.js");
+program.option("-w, --watch", "Enable watch mode", false);
+program.option("-v, --verbose", "Enable watch mode", false);
 program.parse();
 
 const options = program.opts();
-let config = null;
+let config = null, instance = null;
 
 if (!fs.existsSync(options.config)) {
   throw new Error(`forgecss: Config file not found at ${options.config}. Check the --config option.`);
@@ -24,22 +24,24 @@ async function loadConfig(configPath) {
   const fileUrl = pathToFileURL(abs).href;
 
   const mod = await import(fileUrl);
-  return mod.default ?? mod; // support both default and named export
+  return mod.default ?? mod;
 }
 async function runForgeCSS(lookAtPath = null) {
   if (!config) {
     // The very first run
     config = await loadConfig(options.config);
+    if (!config.dir) {
+      throw new Error('forgecss: missing "dir" in configuration.');
+    }
+    if (!config.output) {
+      throw new Error('forgecss: missing "output" in configuration.');
+    }
+    instance = ForgeCSS(config);
     if (options.watch) {
-      const watcher = chokidar.watch(config.source, {
+      const watcher = chokidar.watch(config.dir, {
         persistent: true,
         ignoreInitial: true,
-        ignored: (p, stats) => {
-          if (path.resolve(p) === path.resolve(config.output)) {
-            return true;
-          }
-          return false;
-        }
+        ignored: (p, stats) => path.resolve(p) === path.resolve(config.output)
       });
       watcher.on("change", async (filePath) => {
         if (options.verbose) {
@@ -52,11 +54,14 @@ async function runForgeCSS(lookAtPath = null) {
       }
     }
   }
-  ForgeCSS(config).parse(lookAtPath).then(() => {
-    if (options.verbose) {
-      console.log(`forgecss: CSS generation at ${config.output} completed.`);
-    }
-  });
+  if (lookAtPath) {
+    instance.parseFile(lookAtPath, config.output);
+  } else {
+    instance.parseDirectory(config.dir, config.output);
+  }
+  if (options.verbose) {
+    console.log(`forgecss: ${config.output} generated successfully.`);
+  }
 }
 
 runForgeCSS();

package/index.d.ts

@@ -1,18 +1,20 @@
 export type ForgeCSSOptions = {
-  source: string;
-  stylesMatch?: string[];
-  declarationsMatch?: string[];
-  declarationsMatchAttributes?: string[];
-  mapping: {
-    queries: {
-      [key: string]: {
-        query: string;
-      };
+  inventoryFiles?: string[];
+  usageFiles?: string[];
+  usageAttributes?: string[];
+  mapping?: {
+    queries?: {
+      [key: string]: string
     };
   };
-  output: string;
 };
 
-export default function forgecss(options?: ForgeCSSOptions): {
-  parse: (filePathToSpecificFile?: string) => Promise<void>;
-};
+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>;
+};
+
+declare function ForgeCSS(options?: ForgeCSSOptions): ForgeInstance;
+
+export default ForgeCSS;

package/index.js

@@ -1,72 +1,111 @@
+import { writeFile } from "fs/promises";
 import getAllFiles from "./lib/getAllFiles.js";
-import { extractStyles } from "./lib/styles.js";
-import { deleteDeclarations, extractDeclarations } from "./lib/processFile.js";
+import { extractStyles, invalidateInvetory } from "./lib/inventory.js";
+import { invalidateUsageCache, findUsages } from "./lib/processor.js";
 import { generateOutputCSS } from "./lib/generator.js";
 
 const DEFAULT_OPTIONS = {
-  source: null,
-  stylesMatch: ['css', 'less', 'scss'],
-  declarationsMatch: ['html', 'jsx', 'tsx'],
-  declarationsMatchAttributes: ['class', 'className'],
+  inventoryFiles: ["css", "less", "scss"],
+  usageFiles: ["html", "jsx", "tsx"],
+  usageAttributes: ["class", "className"],
   mapping: {
     queries: {}
-  },
-  output: null
+  }
 };
 
-export default function forgecss(options = { source: null, output: null, mapping: {} }) {
+export default function ForgeCSS(options) {
   const config = { ...DEFAULT_OPTIONS };
 
-  config.source = options.source || DEFAULT_OPTIONS.source;
-  config.mapping = Object.assign({}, DEFAULT_OPTIONS.mapping, options.mapping || {});
-  config.output = options.output || DEFAULT_OPTIONS.output;
+  config.mapping = {
+    queries: Object.assign({}, DEFAULT_OPTIONS.mapping.queries, options?.mapping?.queries ?? {})
+  };
 
-  if (!config.source) {
-    throw new Error('forgecss: "source" option is required.');
-  }
-  if (!config.output) {
-    throw new Error('forgecss: "output" option is required.');
+  async function result(output) {
+    try {
+      const css = await generateOutputCSS(config);
+      if (output) {
+        await writeFile(output, `/* ForgeCSS autogenerated file */\n${css}`, "utf-8");
+      }
+      return css;
+    } catch (err) {
+      console.error(`forgecss: error generating output CSS: ${err}`);
+    }
+    return null;
   }
 
   return {
-    async parse(lookAtPath = null) {
-      // fetching the styles
+    async parseDirectory(dir, output = null) {
+      if (!dir) {
+        throw new Error('forgecss: parseDirectory requires "dir" as an argument.');
+      }
       try {
-        if (lookAtPath) {
-          if (config.stylesMatch.includes(lookAtPath.split(".").pop().toLowerCase())) {
-            await extractStyles(lookAtPath);
-          }
-        } else {
-          let files = await getAllFiles(config.source, config.stylesMatch);
-          for (let file of files) {
-            await extractStyles(file);
-          }
+        // filling the inventory
+        let files = await getAllFiles(dir, config.inventoryFiles);
+        for (let file of files) {
+          await extractStyles(file);
         }
       } catch (err) {
-        console.error(`forgecss: error extracting styles: ${err}`);
+        console.error(`forgecss: error extracting styles.`, err);
       }
-      // fetching the declarations
+      // finding the usages
       try {
-        if (lookAtPath) {
-          if (config.declarationsMatch.includes(lookAtPath.split(".").pop().toLowerCase())) {
-            deleteDeclarations(lookAtPath);
-            await extractDeclarations(lookAtPath);
-          }
-        } else {
-          let files = await getAllFiles(config.source, config.declarationsMatch);
-          for (let file of files) {
-            await extractDeclarations(file);
-          }
+        let files = await getAllFiles(dir, config.usageFiles);
+        for (let file of files) {
+          await findUsages(file);
         }
       } catch (err) {
-        console.error(`forgecss: error extracting declarations: ${err}`);
+        console.error(`forgecss: error extracting usages`, err);
       }
       // generating the output CSS
+      return result(output);
+    },
+    async parseFile(file, output = null) {
+      if (!file) {
+        throw new Error('forgecss: parseFile requires "file" as an argument.');
+      }
+      const ext = file.split(".").pop().toLowerCase();
+      // filling the inventory
+      try {
+        if (config.inventoryFiles.includes(ext)) {
+          await extractStyles(file);
+        }
+      } catch (err) {
+        console.error(`forgecss: error extracting styles.`, err);
+      }
+      // finding the usages
+      try {
+        if (config.usageFiles.includes(ext)) {
+          invalidateUsageCache(file);
+          await findUsages(file);
+        }
+      } catch (err) {
+        console.error(`forgecss: error extracting usages.`, err);
+      }
+      // generating the output CSS
+      return result(output);
+    },
+    async parse(css, html, output = null) {
+      if (!css) {
+        throw new Error('forgecss: parse requires "css" as an argument.');
+      }
+      if (!html) {
+        throw new Error('forgecss: parse requires "html" as an argument.');
+      }
+      invalidateInvetory();
+      invalidateUsageCache();
+      // filling the inventory
+      try {
+        await extractStyles("styles.css", css);
+      } catch (err) {
+        console.error(`forgecss: error extracting styles.`, err);
+      }
+      // finding the usages
       try {
-        await generateOutputCSS(config);
+        await findUsages("usage.html", html);
       } catch (err) {
-        console.error(`forgecss: error generating output CSS: ${err}`);
+        console.error(`forgecss: error extracting usages.`, err);
       }
+      return result(output);
     }
   };
 }

package/lib/generator.js

@@ -1,25 +1,37 @@
-import { writeFile } from "fs/promises";
-import { getDeclarations } from "./processFile.js";
-import { createMediaStyle } from "./styles.js";
+import { getUsages } from "./processor.js";
+import mediaQueryTransformer from "./transformers/mediaQuery.js";
+import pseudoClassTransformer from "./transformers/pseudo.js";
 
 export async function generateOutputCSS(config) {
-  const cache = {};
-  const declarations = getDeclarations();
-  Object.keys(declarations).map((file) => {
-    Object.keys(declarations[file]).forEach(async (label) => {
+  const bucket = {};
+  const usages = getUsages();
+  Object.keys(usages).map((file) => {
+    Object.keys(usages[file]).forEach(async (label) => {
       try {
-        createMediaStyle(config, label, declarations[file][label], cache);
+        if (mediaQueryTransformer(config, label, usages[file][label], bucket)) {
+          return;
+        } else if (pseudoClassTransformer(label, usages[file][label], bucket)) {
+          return;
+        }
       } catch (err) {
-        console.error(`Error generating media query for label ${label} in file ${file}: ${err}`);
+        console.error(
+          `forgecss: Error generating media query for label "${label}" (found in file ${file.replace(
+            process.cwd(),
+            ""
+          )})`,
+          err
+        );
       }
     });
   });
-  const result = Object.keys(cache)
-    .map((label) => cache[label].mq.toString())
+  return Object.keys(bucket)
+    .map((key) => {
+      if (bucket[key].rules) {
+        return bucket[key].rules.toString();
+      }
+      return bucket[key].toString();
+    })
+    .filter(Boolean)
     .join("\n");
-  await writeFile(
-    config.output,
-    `/* ForgeCSS autogenerated file */\n${result}`,
-    "utf-8"
-  );
-}
+}
+

package/lib/inventory.d.ts

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

package/lib/inventory.js

@@ -0,0 +1,26 @@
+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');
+  INVENTORY[filePath] = 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 });
+        });
+      }
+    });
+  });
+  return decls;
+}
+export function invalidateInvetory() {
+  INVENTORY = {};
+}

package/lib/processor.d.ts

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

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

@@ -4,25 +4,26 @@ import { fromHtml } from "hast-util-from-html";
 import { visit } from "unist-util-visit";
 
 const FUNC_NAME = 'fx';
-const DECLARATIONS = {};
+let USAGES = {};
 
 const { parse } = swc;
 
-export async function extractDeclarations(filePath) {
-  const extension = filePath.split('.').pop().toLowerCase();
+export async function findUsages(filePath, fileContent = null) {
   try {
-    if (DECLARATIONS[filePath]) {
+    if (USAGES[filePath]) {
+      // already processed
       return;
     }
-    DECLARATIONS[filePath] = {};
-    const content = await readFile(filePath, "utf-8");
+    USAGES[filePath] = {};
+    const content = fileContent ? fileContent : await readFile(filePath, "utf-8");
+    const extension = filePath.split('.').pop().toLowerCase();
 
     // HTML
     if (extension === "html") {
       const ast = fromHtml(content);
       visit(ast, "element", (node) => {
         if (node.properties.className) {
-          pushToDeclarations(filePath, node.properties.className.join(' '));
+          storeUsage(filePath, node.properties.className.join(' '));
         }
       });
       return;
@@ -34,7 +35,7 @@ export async function extractDeclarations(filePath) {
       tsx: true,
       decorators: false
     });
-    traverseNode(ast, {
+    traverseASTNode(ast, {
       JSXExpressionContainer(node) {
         if (node?.expression?.callee?.value === FUNC_NAME && node?.expression?.arguments) {
           if (node?.expression?.arguments[0]) {
@@ -46,37 +47,44 @@ export async function extractDeclarations(filePath) {
                 value += elem?.cooked || "";
               });
             }
-            pushToDeclarations(filePath, value);
+            storeUsage(filePath, value);
           }
         }
       }
     });
   } catch (err) {
-    console.error(`forgecss: error processing file ${filePath}: ${err}`);
+    console.error(`forgecss: error processing file ${filePath.replace(process.cwd(), '')}`, err);
   }
 }
-export function deleteDeclarations(filePath) {
-  if (DECLARATIONS[filePath]) {
-    delete DECLARATIONS[filePath];
+export function invalidateUsageCache(filePath) {
+  if (!filePath) {
+    USAGES = {};
+    return;
+  }
+  if (USAGES[filePath]) {
+    delete USAGES[filePath];
   }
 }
-function pushToDeclarations(filePath, classesString = "") {
+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 (!DECLARATIONS[filePath][label]) {
-            DECLARATIONS[filePath][label] = [];
+          if (!USAGES[filePath][label]) {
+            USAGES[filePath][label] = [];
           }
-          DECLARATIONS[filePath][label].push(cls);
+          USAGES[filePath][label].push(cls);
         });
       }
     });
   }
 }
-function traverseNode(node, visitors, stack = []) {
+function traverseASTNode(node, visitors, stack = []) {
   if (!node || typeof node.type !== "string") {
     return;
   }
@@ -95,23 +103,20 @@ function traverseNode(node, visitors, stack = []) {
       child.forEach((c) => {
         if (c) {
           if (typeof c.type === "string") {
-            traverseNode(c, visitors, [node].concat(stack));
+            traverseASTNode(c, visitors, [node].concat(stack));
           } else if (c?.expression && typeof c.expression.type === "string") {
-            traverseNode(c.expression, visitors, [node].concat(stack));
+            traverseASTNode(c.expression, visitors, [node].concat(stack));
           } else if (c?.callee && typeof c.callee.type === "string") {
-            traverseNode(c.callee, visitors, [node].concat(stack));
+            traverseASTNode(c.callee, visitors, [node].concat(stack));
           } else if (c?.left && typeof c.left.type === "string") {
-            traverseNode(c.left, visitors, [node].concat(stack));
+            traverseASTNode(c.left, visitors, [node].concat(stack));
           } else if (c?.right && typeof c.right.type === "string") {
-            traverseNode(c.right, visitors, [node].concat(stack));
+            traverseASTNode(c.right, visitors, [node].concat(stack));
           }
         }
       });
     } else if (child && typeof child.type === "string") {
-      traverseNode(child, visitors, [node].concat(stack));
+      traverseASTNode(child, visitors, [node].concat(stack));
     }
   }
-}
-export function getDeclarations() {
-  return DECLARATIONS;
 }

package/lib/transformers/mediaQuery.js

@@ -0,0 +1,44 @@
+import postcss from "postcss";
+
+import { getStylesByClassName } from "../inventory.js";
+
+export default function mediaQueryTransformer(config, label, selectors, bucket) {
+  if (!config?.mapping?.queries[label]) {
+    return false;
+  }
+  if (!bucket[label]) {
+    bucket[label] = {
+      rules: postcss.atRule({
+        name: "media",
+        params: `all and (${config.mapping.queries[label]})`
+      }),
+      classes: {}
+    };
+  }
+  const rules = bucket[label].rules;
+  selectors.forEach((selector) => {
+    const prefixedSelector = `.${label}_${selector}`;
+    if (bucket[label].classes[prefixedSelector]) {
+      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
+        })
+      );
+    });
+    rules.append(rule);
+  });
+  return true;
+}

package/lib/transformers/pseudo.js

@@ -0,0 +1,57 @@
+import postcss from "postcss";
+import { getStylesByClassName } from "../inventory.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, 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
+        })
+      );
+    });
+    root.append(rule);
+    bucket[key] = root;
+  });
+  return true;
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "forgecss",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "type": "module",
   "description": "ForgeCSS turns strings into fully generated responsive CSS using a custom DSL.",
   "author": "Krasimir Tsonev",
   "main": "index.js",
   "scripts": {
-    "build": "node ./scripts/build.js"
+    "build": "node ./scripts/build.js",
+    "test": "node ./tests/run.js"
   },
   "repository": {
     "type": "git",

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "include": ["lib/**/*", "index.d.ts", "**/*.js"],
+}

package/lib/styles.js

@@ -1,61 +0,0 @@
-import { readFile } from "fs/promises";
-import postcss from "postcss";
-import safeParser from "postcss-safe-parser";
-
-const STYLES = {};
-
-export async function extractStyles(filePath) {
-  const content = await readFile(filePath, 'utf-8');
-  STYLES[filePath] = postcss.parse(content, { parser: safeParser });
-}
-export function getStylesByClassName(selector) {
-  const decls = [];
-  Object.keys(STYLES).forEach((filePath) => {
-    STYLES[filePath].walkRules((rule) => {
-      if (rule.selectors && rule.selectors.includes(`.${selector}`)) {
-        rule.walkDecls((d) => {
-          decls.push({ prop: d.prop, value: d.value, important: d.important });
-        });
-      }
-    });
-  });
-  return decls;
-}
-export function createMediaStyle(config, label, selectors, cache) {
-  if (!config.mapping.queries[label]) {
-    throw new Error(
-      `Unknown media query label: ${label}. Check app-fe/wwwroot/scripts/lib/generateMediaQueries.js for available mappings.`
-    );
-  }
-  if (!cache[label]) {
-    cache[label] = {
-      mq: postcss.atRule({
-        name: "media",
-        params: `all and (${config.mapping.queries[label].query})`
-      }),
-      classes: {}
-    };
-  }
-  const mq = cache[label].mq;
-  selectors.forEach((selector) => {
-    const prefixedSelector = `.${label}_${selector}`;
-    if (cache[label].classes[prefixedSelector]) { return; }
-    cache[label].classes[prefixedSelector] = true;
-    const rule = postcss.rule({ selector: prefixedSelector });
-    const decls = getStylesByClassName(selector);
-    if (decls.length === 0) {
-      console.warn(`Warning: No styles found for class .${selector} used in media query ${label}`);
-      return;
-    }
-    decls.forEach((d) => {
-      rule.append(
-        postcss.decl({
-          prop: d.prop,
-          value: d.value,
-          important: d.important
-        })
-      );
-    });
-    mq.append(rule);
-  });
-}