forgecss 0.1.7 → 0.2.0

package/cli.js

@@ -13,7 +13,7 @@ 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.`);
@@ -30,11 +30,15 @@ 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) {
-      if (!config.source) {
-        throw new Error('forgecss: missing "source" in configuration.');
-      }
-      const watcher = chokidar.watch(config.source, {
+      const watcher = chokidar.watch(config.dir, {
         persistent: true,
         ignoreInitial: true,
         ignored: (p, stats) => path.resolve(p) === path.resolve(config.output)
@@ -50,9 +54,13 @@ async function runForgeCSS(lookAtPath = null) {
       }
     }
   }
-  await ForgeCSS(config).parse(lookAtPath);
+  if (lookAtPath) {
+    instance.parseFile(lookAtPath, config.output);
+  } else {
+    instance.parseDirectory(config.dir, config.output);
+  }
   if (options.verbose) {
-    console.log(`forgecss: CSS generation at ${config.output} completed.`);
+    console.log(`forgecss: ${config.output} generated successfully.`);
   }
 }
 

package/index.d.ts

@@ -1,20 +1,20 @@
 export type ForgeCSSOptions = {
-  source: string;
   inventoryFiles?: string[];
   usageFiles?: string[];
   usageAttributes?: string[];
-  mapping: {
-    queries: {
-      [key: string]: {
-        query: string;
-      };
+  mapping?: {
+    queries?: {
+      [key: string]: string
     };
   };
-  output: string;
 };
 
 export type ForgeInstance = {
-  parse: (filePathToSpecificFile?: string) => Promise<void>;
+  parseDirectory: (directoryPath: string, outputFile?: string) => Promise<string>;
+  parseFile: (filePath: string, outputFile?: string) => Promise<string>;
+  parse: (css: string, html: string, outputFile?: string) => Promise<string>;
 };
 
-export default function forgecss(options?: ForgeCSSOptions): ForgeInstance;
+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/inventory.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,
   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: missing "source" in configuration.');
-  }
-  if (!config.output) {
-    throw new Error('forgecss: missing "output" in configuration.');
+  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) {
+    async parseDirectory(dir, output = null) {
+      if (!dir) {
+        throw new Error('forgecss: parseDirectory requires "dir" as an argument.');
+      }
+      try {
+        // 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);
+      }
+      // finding the usages
+      try {
+        let files = await getAllFiles(dir, config.usageFiles);
+        for (let file of files) {
+          await findUsages(file);
+        }
+      } catch (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 (lookAtPath) {
-          if (config.inventoryFiles.includes(lookAtPath.split(".").pop().toLowerCase())) {
-            await extractStyles(lookAtPath);
-          }
-        } else {
-          let files = await getAllFiles(config.source, config.inventoryFiles);
-          for (let file of files) {
-            await extractStyles(file);
-          }
+        if (config.inventoryFiles.includes(ext)) {
+          await extractStyles(file);
         }
       } catch (err) {
-        console.error(`forgecss: error extracting styles: ${err}`);
+        console.error(`forgecss: error extracting styles.`, err);
       }
       // finding the usages
       try {
-        if (lookAtPath) {
-          if (config.usageFiles.includes(lookAtPath.split(".").pop().toLowerCase())) {
-            invalidateUsageCache(lookAtPath);
-            await findUsages(lookAtPath);
-          }
-        } else {
-          let files = await getAllFiles(config.source, config.usageFiles);
-          for (let file of files) {
-            await findUsages(file);
-          }
+        if (config.usageFiles.includes(ext)) {
+          invalidateUsageCache(file);
+          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 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,67 +1,37 @@
-import postcss from "postcss";
-import { writeFile } from "fs/promises";
-
 import { getUsages } from "./processor.js";
-import { getStylesByClassName } from "./inventory.js";
+import mediaQueryTransformer from "./transformers/mediaQuery.js";
+import pseudoClassTransformer from "./transformers/pseudo.js";
 
 export async function generateOutputCSS(config) {
-  const cache = {};
+  const bucket = {};
   const usages = getUsages();
   Object.keys(usages).map((file) => {
     Object.keys(usages[file]).forEach(async (label) => {
       try {
-        createMediaStyle(config, label, usages[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} (found 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"
-  );
 }
-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.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

@@ -2,10 +2,10 @@ import { readFile } from "fs/promises";
 import postcss from "postcss";
 import safeParser from "postcss-safe-parser";
 
-const INVENTORY = {};
+let INVENTORY = {};
 
-export async function extractStyles(filePath) {
-  const content = await readFile(filePath, 'utf-8');
+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) {
@@ -20,4 +20,7 @@ export function getStylesByClassName(selector) {
     });
   });
   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/processor.js

@@ -4,18 +4,18 @@ import { fromHtml } from "hast-util-from-html";
 import { visit } from "unist-util-visit";
 
 const FUNC_NAME = 'fx';
-const USAGES = {};
+let USAGES = {};
 
 const { parse } = swc;
 
-export async function findUsages(filePath) {
+export async function findUsages(filePath, fileContent = null) {
   try {
     if (USAGES[filePath]) {
       // already processed
       return;
     }
     USAGES[filePath] = {};
-    const content = await readFile(filePath, "utf-8");
+    const content = fileContent ? fileContent : await readFile(filePath, "utf-8");
     const extension = filePath.split('.').pop().toLowerCase();
 
     // HTML
@@ -23,7 +23,7 @@ export async function findUsages(filePath) {
       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;
@@ -47,21 +47,28 @@ export async function findUsages(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 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) {
@@ -112,7 +119,4 @@ function traverseASTNode(node, visitors, stack = []) {
       traverseASTNode(child, visitors, [node].concat(stack));
     }
   }
-}
-export function getUsages() {
-  return USAGES;
 }

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.7",
+  "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"],
+}