@hiscovega/grisso 1.0.5 → 1.0.7

package/lib/tokens.js

@@ -0,0 +1,133 @@
+import { resolveConfig } from "./resolve-config.js";
+/** Orden fijo de secciones — matchea defaults.ts y tokens-example.css */
+const TOKEN_MAP_KEYS = [
+    "spacing",
+    "brandColors",
+    "foregroundColors",
+    "iconColors",
+    "supportColors",
+    "backgroundColors",
+    "overlayColors",
+    "borderWidth",
+    "opacity",
+    "shadows",
+    "borderColors",
+];
+/** Labels para los headers CSS de cada sección */
+const SECTION_LABELS = {
+    spacing: "Spacing",
+    brandColors: "Colors: marca",
+    foregroundColors: "Colors: texto",
+    iconColors: "Colors: iconos",
+    supportColors: "Colors: soporte",
+    backgroundColors: "Colors: fondo",
+    overlayColors: "Colors: overlays",
+    borderWidth: "Border widths",
+    opacity: "Opacidad",
+    shadows: "Sombras",
+    borderColors: "Colors: bordes",
+};
+/** Keys que NO son token maps */
+const NON_TOKEN_KEYS = new Set([
+    "columns",
+    "breakpoints",
+    "states",
+    "safelist",
+    "extend",
+]);
+const VAR_RE = /var\(--([\w-]+)\)/g;
+/** Extrae nombres de custom properties de un token map, deduplicados y en orden */
+function extractVarNames(tokenMap) {
+    const seen = new Set();
+    const result = [];
+    for (const value of Object.values(tokenMap)) {
+        for (const match of value.matchAll(VAR_RE)) {
+            const name = match[1];
+            if (!seen.has(name)) {
+                seen.add(name);
+                result.push(name);
+            }
+        }
+    }
+    return result;
+}
+/** Genera scaffold CSS con todas las custom properties */
+function formatCSS(config) {
+    const lines = [];
+    lines.push("/* @hiscovega/grisso — tokens scaffold", "   Define estas variables en :root o en el scope que prefieras.", "   Generado desde la config resuelta de Grisso.", "*/", "", ":root {");
+    let hasSections = false;
+    // Secciones conocidas en orden fijo
+    for (const key of TOKEN_MAP_KEYS) {
+        const map = config[key];
+        if (!map || typeof map !== "object")
+            continue;
+        const vars = extractVarNames(map);
+        if (vars.length === 0)
+            continue;
+        const label = SECTION_LABELS[key] || key;
+        if (hasSections)
+            lines.push("");
+        lines.push(`\t/* ─── ${label} ${"─".repeat(Math.max(1, 55 - label.length))} */`);
+        for (const name of vars) {
+            lines.push(`\t--${name}: ;`);
+        }
+        hasSections = true;
+    }
+    // Secciones custom del consumidor (keys desconocidas que sean objetos)
+    for (const [key, value] of Object.entries(config)) {
+        if (NON_TOKEN_KEYS.has(key))
+            continue;
+        if (TOKEN_MAP_KEYS.includes(key))
+            continue;
+        if (!value || typeof value !== "object" || Array.isArray(value))
+            continue;
+        const vars = extractVarNames(value);
+        if (vars.length === 0)
+            continue;
+        if (hasSections)
+            lines.push("");
+        lines.push(`\t/* ─── ${key} ${"─".repeat(Math.max(1, 55 - key.length))} */`);
+        for (const name of vars) {
+            lines.push(`\t--${name}: ;`);
+        }
+        hasSections = true;
+    }
+    lines.push("}", "");
+    return lines.join("\n");
+}
+/** Genera JSON con los token maps de la config resuelta */
+function formatJSON(config) {
+    const result = {};
+    for (const key of TOKEN_MAP_KEYS) {
+        const map = config[key];
+        if (map && typeof map === "object") {
+            result[key] = map;
+        }
+    }
+    // Incluir token maps custom del consumidor
+    for (const [key, value] of Object.entries(config)) {
+        if (NON_TOKEN_KEYS.has(key))
+            continue;
+        if (TOKEN_MAP_KEYS.includes(key))
+            continue;
+        if (!value || typeof value !== "object" || Array.isArray(value))
+            continue;
+        result[key] = value;
+    }
+    return JSON.stringify(result, null, "\t");
+}
+/**
+ * Extrae tokens de la config resuelta y genera un scaffold CSS o JSON.
+ *
+ * @example
+ * const css = await extractTokens();
+ * const json = await extractTokens({ format: "json" });
+ */
+export async function extractTokens(options = {}) {
+    const { config: configPath, format = "css" } = options;
+    const config = await resolveConfig(configPath);
+    if (format === "json") {
+        return formatJSON(config);
+    }
+    return formatCSS(config);
+}

package/lib/types.d.ts

@@ -1,5 +1,7 @@
 /** Mapa de breakpoints: nombre → media query */
 export type Breakpoints = Record<string, string>;
+/** Mapa de states: nombre → pseudo-clase CSS (e.g. hover → ":hover") */
+export type States = Record<string, string>;
 /** Mapa de tokens: nombre → valor CSS */
 export type TokenMap = Record<string, string>;
 /** Mapa de declaraciones CSS: propiedad → valor */
@@ -8,6 +10,7 @@ export type Declarations = Record<string, string>;
 export interface GrissoConfig {
     columns: number;
     breakpoints: Breakpoints;
+    states: States;
     spacing: TokenMap;
     brandColors: TokenMap;
     foregroundColors: TokenMap;
@@ -19,6 +22,8 @@ export interface GrissoConfig {
     opacity: TokenMap;
     shadows: TokenMap;
     borderColors: TokenMap;
+    /** Patrones de clases protegidas del tree-shaking */
+    safelist: (string | RegExp)[];
     [key: string]: unknown;
 }
 /** Función parcial que genera CSS a partir de la config */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hiscovega/grisso",
 	"description": "Griddo CSS utility class library",
-	"version": "1.0.5",
+	"version": "1.0.7",
 	"license": "UNLICENSED",
 	"private": false,
 	"type": "module",
@@ -10,6 +10,7 @@
 			"style": "./dist/grisso.css"
 		},
 		"./build": "./lib/build.js",
+		"./tokens": "./lib/tokens.js",
 		"./config": "./lib/defaults.js",
 		"./tokens-example.css": "./tokens-example.css"
 	},