forgecss 0.3.0 → 0.4.0

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

@@ -8,17 +8,13 @@ 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

@@ -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.4.0",
   "type": "module",
   "description": "ForgeCSS turns strings into fully generated responsive CSS using a custom DSL.",
   "author": "Krasimir Tsonev",