forgecss 0.0.1 → 0.1.0

package/client/fx.js

@@ -0,0 +1,16 @@
+export default function fx(classes) {
+  return classes
+    .split(" ")
+    .map((className) => {
+      const [label, rest] = className.split(":");
+      if (!rest) return label;
+      return rest
+        .split(",")
+        .map((cls) => `${label}_${cls}`)
+        .filter(Boolean)
+        .join(" ");
+    })
+    .filter(Boolean)
+    .join(" ");
+};
+

package/client/index.js

@@ -0,0 +1,34 @@
+import fxFn from "./fx.js";
+
+function forgecss(root) {
+  var rootNode = root || document;
+
+  // Query only nodes that actually have "class" attributes
+  var nodes = rootNode.querySelectorAll('[class]');
+
+  for (var i = 0; i < nodes.length; i++) {
+    var el = nodes[i];
+    var original = el.getAttribute('class');
+    if (!original) continue;
+
+    var transformed = fxFn(original);
+
+    if (typeof transformed === 'string' && transformed !== original) {
+      el.setAttribute('class', transformed);
+    }
+  }
+}
+
+window.fx = fxFn;
+window.forgecss = forgecss;
+
+if (document.readyState !== 'loading') {
+  forgecss();
+} else {
+  document.addEventListener('DOMContentLoaded', function () {
+    forgecss();
+  });
+}
+window.addEventListener('load', function () {
+  forgecss();
+});

package/dist/forgecss.min.js

@@ -0,0 +1 @@
+(()=>{function o(i){return i.split(" ").map(s=>{let[e,t]=s.split(":");return t?t.split(",").map(n=>`${e}_${n}`).filter(Boolean).join(" "):e}).filter(Boolean).join(" ")}function r(i){for(var s=i||document,e=s.querySelectorAll("[class]"),t=0;t<e.length;t++){var n=e[t],a=n.getAttribute("class");if(a){var f=o(a);typeof f=="string"&&f!==a&&n.setAttribute("class",f)}}}window.fx=o;window.forgecss=r;document.readyState!=="loading"?r():document.addEventListener("DOMContentLoaded",function(){r()});window.addEventListener("load",function(){r()});})();

package/index.d.ts

@@ -0,0 +1,23 @@
+export type ForgeCSSOptions = {
+  styles: {
+    sourceDir: string;
+    match?: string[];
+  };
+  ui: {
+    sourceDir: string;
+    match?: string[];
+    attributes?: string[];
+  };
+  mapping: {
+    queries: {
+      [key: string]: {
+        query: string;
+      };
+    };
+  };
+  output: string
+};
+
+export default function forgecss(options?: ForgeCSSOptions): {
+  parse: () => Promise<void>;
+};

package/index.js

@@ -0,0 +1,71 @@
+import getAllFiles from "./lib/getAllFiles.js";
+import { extractStyles } from "./lib/styles.js";
+import { extractDeclarations } from "./lib/processFile.js";
+import { generateOutputCSS } from "./lib/generator.js";
+import forgeCSSExpressionTransformer from './client/fx.js';
+
+export const fx = forgeCSSExpressionTransformer;
+
+const DEFAULT_OPTIONS = {
+  styles: {
+    sourceDir: null,
+    match: ['css']
+  },
+  ui: {
+    sourceDir: null,
+    match: ["html", "jsx", "tsx"],
+    attribute: ['class', 'className']
+  },
+  mapping: {
+    queries: {}
+  },
+  output: null
+};
+
+export default function forgecss(options = { styles: {}, ui: {}, mapping: {}, output: null }) {
+  const config = { ...DEFAULT_OPTIONS };
+
+  config.styles = Object.assign({}, DEFAULT_OPTIONS.styles, options.styles || {});
+  config.ui = Object.assign({}, DEFAULT_OPTIONS.ui, options.ui || {});
+  config.mapping = Object.assign({}, DEFAULT_OPTIONS.mapping, options.mapping || {});
+  config.output = options.output || DEFAULT_OPTIONS.output;
+
+  if (!config.styles.sourceDir) {
+    throw new Error('forgecss: "styles.sourceDir" option is required.');
+  }
+  if (!config.ui.sourceDir) {
+    throw new Error('forgecss: "ui.sourceDir" option is required.');
+  }
+  if (!config.output) {
+    throw new Error('forgecss: "output" option is required.');
+  }
+
+  return {
+    async parse() {
+      // fetching the styles
+      try {
+        let files = await getAllFiles(config.styles.sourceDir, config.styles.match);
+        for (let file of files) {
+          await extractStyles(file);
+        }
+      } catch (err) {
+        console.error(`forgecss: error extracting styles: ${err}`);
+      }
+      // fetching the declarations
+      try {
+        let files = await getAllFiles(config.ui.sourceDir, config.ui.match);
+        for (let file of files) {
+          await extractDeclarations(file);
+        }
+      } catch(err) {
+        console.error(`forgecss: error extracting declarations: ${err}`);
+      }
+      // generating the output CSS
+      try {
+        await generateOutputCSS(config);
+      } catch(err) {
+        console.error(`forgecss: error generating output CSS: ${err}`);
+      }
+    }
+  };
+}

package/lib/generator.js

@@ -0,0 +1,26 @@
+import { writeFile } from "fs/promises";
+const OUTPUT = "forgecss-media-queries.css";
+import { getDeclarations } from "./processFile.js";
+import { createMediaStyle, extractStyles } from "./styles.js";
+
+export async function generateOutputCSS(config) {
+  const cache = {};
+  const declarations = getDeclarations();
+  Object.keys(declarations).map((file) => {
+    Object.keys(declarations[file]).forEach(async (label) => {
+      try {
+        createMediaStyle(config, label, declarations[file][label], cache);
+      } catch (err) {
+        console.error(`Error generating media query for label ${label} in file ${file}: ${err}`);
+      }
+    });
+  });
+  const result = Object.keys(cache)
+    .map((label) => cache[label].mq.toString())
+    .join("\n");
+  await writeFile(
+    config.output,
+    `${result}`,
+    "utf-8"
+  );
+}

package/lib/getAllFiles.js

@@ -0,0 +1,30 @@
+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/processFile.js

@@ -0,0 +1,114 @@
+import swc from "@swc/core";
+import { readFile } from "fs/promises";
+import { fromHtml } from "hast-util-from-html";
+import { visit } from "unist-util-visit";
+
+const FUNC_NAME = 'mq';
+const DECLARATIONS = {};
+
+const { parse } = swc;
+
+export async function extractDeclarations(filePath) {
+  const extension = filePath.split('.').pop().toLowerCase();
+  try {
+    if (DECLARATIONS[filePath]) {
+      return;
+    }
+    DECLARATIONS[filePath] = {};
+    const content = await readFile(filePath, "utf-8");
+
+    // HTML
+    if (extension === "html") {
+      const ast = fromHtml(content);
+      visit(ast, "element", (node) => {
+        if (node.properties.className) {
+          pushToDeclarations(filePath, node.properties.className.join(' '));
+        }
+      });
+      return;
+    }
+
+    // JSX/TSX
+    const ast = await parse(content, {
+      syntax: "typescript",
+      tsx: true,
+      decorators: false
+    });
+    traverseNode(ast, {
+      JSXExpressionContainer(node) {
+        if (node?.expression?.callee?.value === FUNC_NAME && node?.expression?.arguments) {
+          if (node?.expression?.arguments[0]) {
+            const arg = node.expression.arguments[0];
+            let value = arg?.expression.value;
+            if (arg.expression.type === "TemplateLiteral") {
+              value = "";
+              arg.expression.quasis.forEach((elem) => {
+                value += elem?.cooked || "";
+              });
+            }
+            pushToDeclarations(filePath, value);
+          }
+        }
+      }
+    });
+  } catch (err) {
+    console.error(`forgecss: error processing file ${filePath}: ${err}`);
+  }
+}
+function pushToDeclarations(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] = [];
+          }
+          DECLARATIONS[filePath][label].push(cls);
+        });
+      }
+    });
+  }
+}
+
+function traverseNode(node, visitors, stack = []) {
+  if (!node || typeof node.type !== "string") {
+    return;
+  }
+
+  const visitor = visitors[node.type];
+  if (visitor) {
+    visitor(node, stack);
+  }
+
+  for (const key in node) {
+    if (!node.hasOwnProperty(key)) continue;
+
+    const child = node[key];
+
+    if (Array.isArray(child)) {
+      child.forEach((c) => {
+        if (c) {
+          if (typeof c.type === "string") {
+            traverseNode(c, visitors, [node].concat(stack));
+          } else if (c?.expression && typeof c.expression.type === "string") {
+            traverseNode(c.expression, visitors, [node].concat(stack));
+          } else if (c?.callee && typeof c.callee.type === "string") {
+            traverseNode(c.callee, visitors, [node].concat(stack));
+          } else if (c?.left && typeof c.left.type === "string") {
+            traverseNode(c.left, visitors, [node].concat(stack));
+          } else if (c?.right && typeof c.right.type === "string") {
+            traverseNode(c.right, visitors, [node].concat(stack));
+          }
+        }
+      });
+    } else if (child && typeof child.type === "string") {
+      traverseNode(child, visitors, [node].concat(stack));
+    }
+  }
+}
+
+export function getDeclarations() {
+  return DECLARATIONS;
+}

package/lib/styles.js

@@ -0,0 +1,61 @@
+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.push(postcss.parse(content, { parser: safeParser }));
+}
+export function getStylesByClassName(selector) {
+  const decls = [];
+  for (let root of STYLES) {
+    root.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);
+  });
+}

package/package.json

@@ -1,18 +1,35 @@
 {
   "name": "forgecss",
-  "version": "0.0.1",
+  "version": "0.1.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"
   },
-  "author": "Krasimir Tsonev",
   "repository": {
     "type": "git",
     "url": "git@github.com:krasimir/ForgeCSS.git"
   },
   "license": "MIT",
-  "keywords": ["css", "dsl", "generator", "processor", "responsive", "media queries"]
+  "keywords": [
+    "css",
+    "dsl",
+    "generator",
+    "processor",
+    "responsive",
+    "media queries"
+  ],
+  "dependencies": {
+    "@swc/cli": "^0.7.7",
+    "@swc/core": "1.12.1",
+    "hast-util-from-html": "^2.0.3",
+    "postcss": "^8.5.6",
+    "postcss-safe-parser": "^7.0.1",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.1"
+  }
 }

package/scripts/build.js

@@ -0,0 +1,25 @@
+import path from "path";
+import esbuild from "esbuild";
+import { fileURLToPath } from "url";
+import { readFileSync } from "fs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const pkg = JSON.parse(readFileSync(path.join(__dirname, "..", "package.json"), "utf8"));
+const minify = true;
+
+(async function () {
+  await esbuild.build({
+    entryPoints: [path.join(__dirname, "..", "client", "index.js")],
+    bundle: true,
+    minify,
+    outfile: path.join(__dirname, "..", "dist", "forgecss.min.js"),
+    platform: "browser",
+    sourcemap: false,
+    plugins: [],
+    define: {
+      __VERSION__: JSON.stringify(pkg.version)
+    }
+  });
+})();