forgecss 0.2.1 → 0.4.0

package/client/fx.js

@@ -1,16 +1,74 @@
 export default function fx(classes) {
-  return classes
-    .split(" ")
-    .map((className) => {
-      const [label, rest] = className.split(":");
-      if (!rest) return label;
+  return parseClass(classes).map((className) => {
+      let [label, rest] = splitClassName(className);
+      if (!label || label === "[true]") return rest;
+      if (label === "[false]") return false;
+      label = normalizeLabel(label);
       return rest
         .split(",")
-        .map((cls) => `${label}_${cls}`)
-        .filter(Boolean)
+        .map((cls) => `${label}--${cls}`)
         .join(" ");
     })
     .filter(Boolean)
     .join(" ");
-};
+}
+export function splitClassName(label) {
+  const lastColonIndex = label.lastIndexOf(":");
+  if (lastColonIndex === -1) {
+    return [null, label];
+  }
+  const prefix = label.slice(0, lastColonIndex);
+  const rest = label.slice(lastColonIndex + 1);
+  return [prefix, rest];
+}
+
+export function normalizeLabel(label) {
+  let normalized = label.trim();
+  normalized = normalized.replace(/[&]/g, "I");
+  normalized = normalized.replace(/[:| =]/g, "-");
+  normalized = normalized.replace(/[^a-zA-Z0-9_-]/g, '');
+  return normalized;
+}
+
+export function parseClass(str) {
+  const out = [];
+  let buf = "";
+
+  let depth = 0;
+  let quote = null;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str[i];
+    if (depth > 0) {
+      if (quote) {
+        buf += ch;
+        if (ch === quote && str[i - 1] !== "\\") quote = null;
+        continue;
+      } else if (ch === "'" || ch === '"') {
+        quote = ch;
+        buf += ch;
+        continue;
+      }
+    }
+    if (ch === "[") {
+      depth++;
+      buf += ch;
+      continue;
+    }
+    if (ch === "]" && depth > 0) {
+      depth--;
+      buf += ch;
+      continue;
+    }
+    if (depth === 0 && /\s/.test(ch)) {
+      if (buf) out.push(buf);
+      buf = "";
+      while (i + 1 < str.length && /\s/.test(str[i + 1])) i++;
+      continue;
+    }
+    buf += ch;
+  }
+
+  if (buf) out.push(buf);
+  return out;
+}
 

package/dist/forgecss.min.js

@@ -1 +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()});})();
+(()=>{function s(n){return a(n).map(t=>{let[e,i]=f(t);return!e||e==="[true]"?i:e==="[false]"?!1:(e=c(e),i.split(",").map(l=>`${e}--${l}`).join(" "))}).filter(Boolean).join(" ")}function f(n){let t=n.lastIndexOf(":");if(t===-1)return[null,n];let e=n.slice(0,t),i=n.slice(t+1);return[e,i]}function c(n){let t=n.trim();return t=t.replace(/[&]/g,"I"),t=t.replace(/[:| =]/g,"-"),t=t.replace(/[^a-zA-Z0-9_-]/g,""),t}function a(n){let t=[],e="",i=0,l=null;for(let r=0;r<n.length;r++){let o=n[r];if(i>0){if(l){e+=o,o===l&&n[r-1]!=="\\"&&(l=null);continue}else if(o==="'"||o==='"'){l=o,e+=o;continue}}if(o==="["){i++,e+=o;continue}if(o==="]"&&i>0){i--,e+=o;continue}if(i===0&&/\s/.test(o)){for(e&&t.push(e),e="";r+1<n.length&&/\s/.test(n[r+1]);)r++;continue}e+=o}return e&&t.push(e),t}function u(n){for(var t=n||document,e=t.querySelectorAll("[class]"),i=0;i<e.length;i++){var l=e[i],r=l.getAttribute("class");if(r){var o=s(r);typeof o=="string"&&o!==r&&l.setAttribute("class",o)}}}window.fx=s;window.forgecss=u;document.readyState!=="loading"?u():document.addEventListener("DOMContentLoaded",function(){u()});window.addEventListener("load",function(){u()});})();

package/index.d.ts

@@ -2,10 +2,8 @@ export type ForgeCSSOptions = {
   inventoryFiles?: string[];
   usageFiles?: string[];
   usageAttributes?: string[];
-  mapping?: {
-    queries?: {
-      [key: string]: string
-    };
+  breakpoints?: {
+    [key: string]: string
   };
 };
 

package/index.js

@@ -1,24 +1,20 @@
 import { writeFile } from "fs/promises";
 import getAllFiles from "./lib/getAllFiles.js";
 import { extractStyles, invalidateInvetory } from "./lib/inventory.js";
-import { invalidateUsageCache, findUsages } from "./lib/processor.js";
+import { invalidateUsageCache, findUsages } from "./lib/usages.js";
 import { generateOutputCSS } from "./lib/generator.js";
 
 const DEFAULT_OPTIONS = {
   inventoryFiles: ["css", "less", "scss"],
   usageFiles: ["html", "jsx", "tsx"],
   usageAttributes: ["class", "className"],
-  mapping: {
-    queries: {}
-  }
+  breakpoints: {}
 };
 
 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 ?? {});
 
   async function result(output) {
     try {

package/lib/generator.js

@@ -1,6 +1,8 @@
-import { getUsages } from "./processor.js";
+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 = {};
@@ -12,6 +14,8 @@ export async function generateOutputCSS(config) {
           return;
         } else if (pseudoClassTransformer(label, usages[file][label], bucket)) {
           return;
+        } else if (arbitraryTransformer(label, usages[file][label], bucket)) {
+          return;
         }
       } catch (err) {
         console.error(
@@ -24,6 +28,7 @@ export async function generateOutputCSS(config) {
       }
     });
   });
+  resolveApplys(bucket);
   return Object.keys(bucket)
     .map((key) => {
       if (bucket[key].rules) {

package/lib/helpers.js

@@ -0,0 +1,19 @@
+import postcss from "postcss";
+import { getStylesByClassName } from "./inventory.js";
+
+export function setDeclarations(selector, rule) {
+  const decls = getStylesByClassName(selector);
+  if (decls.length === 0) {
+    console.warn(`forgecss: no class ".${selector}" found`);
+    return;
+  }
+  decls.forEach((d) => {
+    rule.append(
+      postcss.decl({
+        prop: d.prop,
+        value: d.value,
+        important: d.important
+      })
+    );
+  });
+}

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/arbitrary.js

@@ -0,0 +1,32 @@
+import postcss from "postcss";
+
+import { normalizeLabel } from "../../client/fx.js";
+import { setDeclarations } from "../helpers.js";
+
+export default function arbitraryTransformer(label, classes, bucket) {
+  if (label.startsWith("[") && label.endsWith("]")) {
+    let arbitrarySelector = label.slice(1, -1).trim();
+    if (['', 'true'].includes(arbitrarySelector)) {
+      return true;
+    }
+    classes.forEach((cls) => {
+      const I = normalizeLabel(label) + "--" + cls;
+      const selector = evaluateArbitrary(arbitrarySelector, I);
+      const root = postcss.root();
+      if (bucket[I]) {
+        return;
+      }
+      const rule = postcss.rule({ selector });
+      setDeclarations(cls, rule);
+      root.append(rule);
+      bucket[I] = root;
+    });
+    return true;
+  }
+  return false;
+}
+
+function evaluateArbitrary(label, I) {
+  label = label.replace(/[&]/g, `.${I}`);
+  return label;
+}

package/lib/transformers/mediaQuery.js

@@ -1,43 +1,30 @@
 import postcss from "postcss";
 
-import { getStylesByClassName } from "../inventory.js";
+import { setDeclarations } from "../helpers.js";
+import {normalizeLabel} from "../../client/fx.js";
 
-export default function mediaQueryTransformer(config, label, selectors, bucket) {
-  if (!config?.mapping?.queries[label]) {
+export default function mediaQueryTransformer(config, label, classes, bucket) {
+  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: {}
     };
   }
   const rules = bucket[label].rules;
-  selectors.forEach((selector) => {
-    const prefixedSelector = `.${label}_${selector}`;
-    if (bucket[label].classes[prefixedSelector]) {
+  classes.forEach((cls) => {
+    const selector = `.${normalizeLabel(label)}--${cls}`;
+    if (bucket[label].classes[selector]) {
       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
-        })
-      );
-    });
+    bucket[label].classes[selector] = true; // caching
+    const rule = postcss.rule({ selector });
+    setDeclarations(cls, rule);
     rules.append(rule);
   });
   return true;

package/lib/transformers/pseudo.js

@@ -1,5 +1,7 @@
 import postcss from "postcss";
-import { getStylesByClassName } from "../inventory.js";
+
+import {setDeclarations} from "../helpers.js";
+import {normalizeLabel} from "../../client/fx.js";
 
 const ALLOWED_PSEUDO_CLASSES = [
   "hover",
@@ -24,34 +26,21 @@ const ALLOWED_PSEUDO_CLASSES = [
   "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
-        })
-      );
+export default function pseudoClassTransformer(label, classes, bucket) {
+  if (ALLOWED_PSEUDO_CLASSES.includes(label)) {
+    classes.forEach((cls) => {
+      const selector = `.${normalizeLabel(label)}--${cls}:${label}`;
+      const root = postcss.root();
+      if (bucket[selector]) {
+        // already have that
+        return;
+      }
+      const rule = postcss.rule({ selector });
+      setDeclarations(cls, rule);
+      root.append(rule);
+      bucket[selector] = root;
     });
-    root.append(rule);
-    bucket[key] = root;
-  });
-  return true;
+    return true;
+  }
+  return false;
 }

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

@@ -1,7 +1,8 @@
 import swc from "@swc/core";
-import { readFile } from "fs/promises";
+import { readFile, writeFile } from "fs/promises";
 import { fromHtml } from "hast-util-from-html";
 import { visit } from "unist-util-visit";
+import { parseClass } from "../client/fx.js";
 
 const FUNC_NAME = 'fx';
 let USAGES = {};
@@ -35,6 +36,7 @@ export async function findUsages(filePath, fileContent = null) {
       tsx: true,
       decorators: false
     });
+    // writeFile(process.cwd() + '/ast.json', JSON.stringify(ast, null, 2), 'utf-8').catch(() => {});
     traverseASTNode(ast, {
       JSXExpressionContainer(node) {
         if (node?.expression?.callee?.value === FUNC_NAME && node?.expression?.arguments) {
@@ -42,10 +44,8 @@ export async function findUsages(filePath, fileContent = null) {
             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 || "";
-              });
+              let quasis = arg.expression.quasis.map((elem) => elem?.cooked || "");
+              value = quasis.join("");
             }
             storeUsage(filePath, value);
           }
@@ -69,20 +69,25 @@ 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 (!USAGES[filePath][label]) {
-            USAGES[filePath][label] = [];
-          }
-          USAGES[filePath][label].push(cls);
-        });
+  if (!classesString) return;
+
+  parseClass(classesString).forEach((part) => {
+    if (part.includes(":")) {
+      const lastColonIndex = part.lastIndexOf(":");
+      const label = part.slice(0, lastColonIndex); // "desktop" or "[&:hover]"
+      const clsPart = part.slice(lastColonIndex + 1); // e.g. "mt1"
+      const classes = clsPart.split(",");
+
+      if (label === "[]") return;
+
+      if (!USAGES[filePath][label]) {
+        USAGES[filePath][label] = [];
       }
-    });
-  }
+      classes.forEach((cls) => {
+        USAGES[filePath][label].push(cls);
+      });
+    }
+  });
 }
 function traverseASTNode(node, visitors, stack = []) {
   if (!node || typeof node.type !== "string") {

package/package.json

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