forgecss 0.3.0 → 0.5.0

package/index.d.ts

@@ -2,17 +2,16 @@ export type ForgeCSSOptions = {
   inventoryFiles?: string[];
   usageFiles?: string[];
   usageAttributes?: string[];
-  mapping?: {
-    queries?: {
-      [key: string]: string
-    };
+  breakpoints?: {
+    [key: string]: string;
   };
+  verbose?: boolean;
 };
 
 export type ForgeInstance = {
-  parseDirectory: (options: { dir: string; output?: string }) => Promise<string>;
-  parseFile: (options: { file: string; output?: string }) => Promise<string>;
-  parse: (options: { css: string; html?: string; jsx?: string; output?: string }) => Promise<string>;
+  parseDirectory: (options: { dir: string; output?: string; watch?: boolean }) => Promise<string>;
+  parseFile: (options: { file: string; output?: string; watch?: boolean }) => Promise<string>;
+  parse: (options: { css: string; html?: string; jsx?: string; output?: string; }) => Promise<string>;
 };
 
 declare function ForgeCSS(options?: ForgeCSSOptions): ForgeInstance;

package/index.js

@@ -1,24 +1,27 @@
+import path from 'path';
 import { writeFile } from "fs/promises";
 import getAllFiles from "./lib/getAllFiles.js";
 import { extractStyles, invalidateInvetory } from "./lib/inventory.js";
 import { invalidateUsageCache, findUsages } from "./lib/usages.js";
 import { generateOutputCSS } from "./lib/generator.js";
+import chokidar from "chokidar";
 
 const DEFAULT_OPTIONS = {
   inventoryFiles: ["css", "less", "scss"],
   usageFiles: ["html", "jsx", "tsx"],
   usageAttributes: ["class", "className"],
-  mapping: {
-    queries: {}
-  }
+  breakpoints: {},
+  verbose: true
 };
 
 export default function ForgeCSS(options) {
   const config = { ...DEFAULT_OPTIONS };
 
-  config.mapping = {
-    queries: Object.assign({}, DEFAULT_OPTIONS.mapping.queries, options?.mapping?.queries ?? {})
-  };
+  config.breakpoints = Object.assign({}, DEFAULT_OPTIONS.breakpoints, options?.breakpoints ?? {});
+  config.inventoryFiles = options?.inventoryFiles ?? DEFAULT_OPTIONS.inventoryFiles;
+  config.usageFiles = options?.usageFiles ?? DEFAULT_OPTIONS.usageFiles;
+  config.usageAttributes = options?.usageAttributes ?? DEFAULT_OPTIONS.usageAttributes;
+  config.verbose = options?.verbose ?? DEFAULT_OPTIONS.verbose;
 
   async function result(output) {
     try {
@@ -26,15 +29,32 @@ export default function ForgeCSS(options) {
       if (output) {
         await writeFile(output, `/* ForgeCSS autogenerated file */\n${css}`, "utf-8");
       }
+      console.log("forgecss: Output CSS generated successfully.");
       return css;
     } catch (err) {
       console.error(`forgecss: error generating output CSS: ${err}`);
     }
     return null;
   }
+  function runWatcher(what, output, callback) {
+    const watcher = chokidar.watch(what, {
+      persistent: true,
+      ignoreInitial: true,
+      ignored: (p, stats) => output && path.resolve(p) === path.resolve(output)
+    });
+    watcher.on("change", async (filePath) => {
+      if (config.verbose) {
+        console.log(`forgecss: Detected change in ${filePath}`);
+      }
+      callback();
+    });
+    if (config.verbose) {
+      console.log("forgecss: Watch mode enabled. Listening for file changes...");
+    }
+  }
 
   return {
-    async parseDirectory({ dir, output = null }) {
+    async parseDirectory({ dir, output = null, watch = false }) {
       if (!dir) {
         throw new Error('forgecss: parseDirectory requires "dir" as an argument.');
       }
@@ -56,10 +76,13 @@ export default function ForgeCSS(options) {
       } catch (err) {
         console.error(`forgecss: error extracting usages`, err);
       }
+      watch && runWatcher(dir, output, () => {
+        this.parseDirectory({ dir, output, watch: false });
+      });
       // generating the output CSS
       return result(output);
     },
-    async parseFile({ file, output = null }) {
+    async parseFile({ file, output = null, watch = false }) {
       if (!file) {
         throw new Error('forgecss: parseFile requires "file" as an argument.');
       }
@@ -81,6 +104,9 @@ export default function ForgeCSS(options) {
       } catch (err) {
         console.error(`forgecss: error extracting usages.`, err);
       }
+       watch && runWatcher(file, output, () => {
+        this.parseFile({ file, output, watch: false });
+       });
       // generating the output CSS
       return result(output);
     },

package/lib/generator.js

@@ -2,6 +2,7 @@ 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 = {};
@@ -27,6 +28,7 @@ export async function generateOutputCSS(config) {
       }
     });
   });
+  resolveApplys(bucket);
   return Object.keys(bucket)
     .map((key) => {
       if (bucket[key].rules) {

package/lib/inventory.d.ts

@@ -1,3 +1,4 @@
 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/inventory.js

@@ -19,8 +19,37 @@ export function getStylesByClassName(selector) {
       }
     });
   });
+  if (decls.length === 0) {
+    console.warn(`forgecss: Warning - no styles found for class "${selector}".`);
+  }
   return decls;
 }
 export function invalidateInvetory() {
   INVENTORY = {};
+}
+export function resolveApplys(bucket) {
+  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 (!bucket['_APPLY_']) {
+            bucket["_APPLY_"] = postcss.root();
+          }
+          bucket["_APPLY_"].append(newRule);
+        }
+      });
+    });
+  });
 }

package/lib/transformers/mediaQuery.js

@@ -4,14 +4,14 @@ import { setDeclarations } from "../helpers.js";
 import {normalizeLabel} from "../../client/fx.js";
 
 export default function mediaQueryTransformer(config, label, classes, bucket) {
-  if (!config?.mapping?.queries[label]) {
+  if (!config?.breakpoints[label]) {
     return false;
   }
   if (!bucket[label]) {
     bucket[label] = {
       rules: postcss.atRule({
         name: "media",
-        params: `all and (${config.mapping.queries[label]})`
+        params: `all and (${config.breakpoints[label]})`
       }),
       classes: {}
     };

package/package.json

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