forgecss 0.1.5 → 0.1.7

package/cli.js

@@ -7,9 +7,9 @@ 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();
@@ -24,22 +24,20 @@ 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 (options.watch) {
+      if (!config.source) {
+        throw new Error('forgecss: missing "source" in configuration.');
+      }
       const watcher = chokidar.watch(config.source, {
         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 +50,10 @@ async function runForgeCSS(lookAtPath = null) {
       }
     }
   }
-  ForgeCSS(config).parse(lookAtPath).then(() => {
-    if (options.verbose) {
-      console.log(`forgecss: CSS generation at ${config.output} completed.`);
-    }
-  });
+  await ForgeCSS(config).parse(lookAtPath);
+  if (options.verbose) {
+    console.log(`forgecss: CSS generation at ${config.output} completed.`);
+  }
 }
 
 runForgeCSS();

package/index.d.ts

@@ -1,8 +1,8 @@
 export type ForgeCSSOptions = {
   source: string;
-  stylesMatch?: string[];
-  declarationsMatch?: string[];
-  declarationsMatchAttributes?: string[];
+  inventoryFiles?: string[];
+  usageFiles?: string[];
+  usageAttributes?: string[];
   mapping: {
     queries: {
       [key: string]: {
@@ -13,6 +13,8 @@ export type ForgeCSSOptions = {
   output: string;
 };
 
-export default function forgecss(options?: ForgeCSSOptions): {
+export type ForgeInstance = {
   parse: (filePathToSpecificFile?: string) => Promise<void>;
-};
+};
+
+export default function forgecss(options?: ForgeCSSOptions): ForgeInstance;

package/index.js

@@ -1,42 +1,43 @@
 import getAllFiles from "./lib/getAllFiles.js";
-import { extractStyles } from "./lib/styles.js";
-import { deleteDeclarations, extractDeclarations } from "./lib/processFile.js";
+import { extractStyles } 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 = { styles: {}, ui: {}, mapping: {}, output: null }) {
+export default function ForgeCSS(options = { source: null, output: null, mapping: {} }) {
   const config = { ...DEFAULT_OPTIONS };
 
-  config.mapping = Object.assign({}, DEFAULT_OPTIONS.mapping, options.mapping || {});
-  config.output = options.output || DEFAULT_OPTIONS.output;
+  config.source = options.source ?? DEFAULT_OPTIONS.source;
+  config.mapping = Object.assign({}, DEFAULT_OPTIONS.mapping, options.mapping ?? {});
+  config.output = options.output ?? DEFAULT_OPTIONS.output;
 
   if (!config.source) {
-    throw new Error('forgecss: "source" option is required.');
+    throw new Error('forgecss: missing "source" in configuration.');
   }
   if (!config.output) {
-    throw new Error('forgecss: "output" option is required.');
+    throw new Error('forgecss: missing "output" in configuration.');
   }
 
   return {
     async parse(lookAtPath = null) {
-      // fetching the styles
+      // filling the inventory
       try {
         if (lookAtPath) {
-          if (config.stylesMatch.includes(lookAtPath.split(".").pop().toLowerCase())) {
+          if (config.inventoryFiles.includes(lookAtPath.split(".").pop().toLowerCase())) {
             await extractStyles(lookAtPath);
           }
         } else {
-          let files = await getAllFiles(config.source, config.stylesMatch);
+          let files = await getAllFiles(config.source, config.inventoryFiles);
           for (let file of files) {
             await extractStyles(file);
           }
@@ -44,26 +45,26 @@ export default function forgecss(options = { styles: {}, ui: {}, mapping: {}, ou
       } catch (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);
+          if (config.usageFiles.includes(lookAtPath.split(".").pop().toLowerCase())) {
+            invalidateUsageCache(lookAtPath);
+            await findUsages(lookAtPath);
           }
         } else {
-          let files = await getAllFiles(config.source, config.declarationsMatch);
+          let files = await getAllFiles(config.source, config.usageFiles);
           for (let file of files) {
-            await extractDeclarations(file);
+            await findUsages(file);
           }
         }
-      } catch(err) {
+      } catch (err) {
         console.error(`forgecss: error extracting declarations: ${err}`);
       }
       // generating the output CSS
       try {
         await generateOutputCSS(config);
-      } catch(err) {
+      } catch (err) {
         console.error(`forgecss: error generating output CSS: ${err}`);
       }
     }

package/lib/generator.js

@@ -1,16 +1,18 @@
+import postcss from "postcss";
 import { writeFile } from "fs/promises";
-import { getDeclarations } from "./processFile.js";
-import { createMediaStyle } from "./styles.js";
+
+import { getUsages } from "./processor.js";
+import { getStylesByClassName } from "./inventory.js";
 
 export async function generateOutputCSS(config) {
   const cache = {};
-  const declarations = getDeclarations();
-  Object.keys(declarations).map((file) => {
-    Object.keys(declarations[file]).forEach(async (label) => {
+  const usages = getUsages();
+  Object.keys(usages).map((file) => {
+    Object.keys(usages[file]).forEach(async (label) => {
       try {
-        createMediaStyle(config, label, declarations[file][label], cache);
+        createMediaStyle(config, label, usages[file][label], cache);
       } catch (err) {
-        console.error(`Error generating media query for label ${label} in file ${file}: ${err}`);
+        console.error(`Error generating media query for label ${label} (found in file ${file}): ${err}`);
       }
     });
   });
@@ -22,4 +24,44 @@ export async function generateOutputCSS(config) {
     `/* ForgeCSS autogenerated file */\n${result}`,
     "utf-8"
   );
+}
+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);
+  });
 }

package/lib/inventory.js

@@ -0,0 +1,23 @@
+import { readFile } from "fs/promises";
+import postcss from "postcss";
+import safeParser from "postcss-safe-parser";
+
+const INVENTORY = {};
+
+export async function extractStyles(filePath) {
+  const content = 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;
+}

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

@@ -4,18 +4,19 @@ import { fromHtml } from "hast-util-from-html";
 import { visit } from "unist-util-visit";
 
 const FUNC_NAME = 'fx';
-const DECLARATIONS = {};
+const USAGES = {};
 
 const { parse } = swc;
 
-export async function extractDeclarations(filePath) {
-  const extension = filePath.split('.').pop().toLowerCase();
+export async function findUsages(filePath) {
   try {
-    if (DECLARATIONS[filePath]) {
+    if (USAGES[filePath]) {
+      // already processed
       return;
     }
-    DECLARATIONS[filePath] = {};
+    USAGES[filePath] = {};
     const content = await readFile(filePath, "utf-8");
+    const extension = filePath.split('.').pop().toLowerCase();
 
     // HTML
     if (extension === "html") {
@@ -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]) {
@@ -55,9 +56,9 @@ export async function extractDeclarations(filePath) {
     console.error(`forgecss: error processing file ${filePath}: ${err}`);
   }
 }
-export function deleteDeclarations(filePath) {
-  if (DECLARATIONS[filePath]) {
-    delete DECLARATIONS[filePath];
+export function invalidateUsageCache(filePath) {
+  if (USAGES[filePath]) {
+    delete USAGES[filePath];
   }
 }
 function pushToDeclarations(filePath, classesString = "") {
@@ -67,16 +68,16 @@ function pushToDeclarations(filePath, classesString = "") {
         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 +96,23 @@ 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;
+export function getUsages() {
+  return USAGES;
 }

package/package.json

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

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);
-  });
-}