@hiscovega/grisso 1.0.4 → 1.0.6

package/lib/tokens.js

@@ -0,0 +1,132 @@
+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",
+    "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

@@ -19,6 +19,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.4",
+	"version": "1.0.6",
 	"license": "UNLICENSED",
 	"private": false,
 	"type": "module",
@@ -9,31 +9,29 @@
 		".": {
 			"style": "./dist/grisso.css"
 		},
-		"./plugin": {
-			"import": "./plugin.js",
-			"require": "./plugin.cjs"
-		},
 		"./build": "./lib/build.js",
+		"./tokens": "./lib/tokens.js",
 		"./config": "./lib/defaults.js",
 		"./tokens-example.css": "./tokens-example.css"
 	},
 	"engines": {
 		"node": ">=24"
 	},
+	"bin": {
+		"grisso": "lib/cli.js"
+	},
 	"files": [
 		"dist/",
 		"lib/",
-		"plugin.js",
-		"plugin.cjs",
 		"tokens-example.css",
 		"README.md"
 	],
 	"scripts": {
-		"build": "tsc && node scripts/build.js",
+		"build": "tsc && node lib/cli.js build --output dist/grisso.css",
 		"typecheck": "tsc --noEmit",
 		"lint": "biome check .",
 		"lint:fix": "biome check --write .",
-		"playground": "npm run build && node scripts/build.js --config playground/grisso.config.mjs --content playground/index.html --content playground/example.module.css --output playground/grisso.css && open playground/index.html",
+		"playground": "npm run build && node lib/cli.js build --config playground/grisso.config.mjs --content playground/index.html --content playground/example.module.css --output playground/grisso.css && open playground/index.html",
 		"test": "vitest run",
 		"test:watch": "vitest",
 		"prepublishOnly": "npm run build",
@@ -50,13 +48,5 @@
 		"release-it": "^19.2.4",
 		"typescript": "^5.9.3",
 		"vitest": "^4.0.18"
-	},
-	"peerDependencies": {
-		"postcss": "^8.0.0"
-	},
-	"peerDependenciesMeta": {
-		"postcss": {
-			"optional": true
-		}
 	}
 }

package/plugin.cjs

@@ -1,5 +0,0 @@
-// CJS wrapper — require(esm) supported in Node 22+
-const mod = require("./plugin.js");
-module.exports = mod.default;
-module.exports.default = mod.default;
-module.exports.postcss = true;

package/plugin.js

@@ -1,43 +0,0 @@
-import { generateCSS } from "./lib/index.js";
-import { purgeCSS } from "./lib/purge.js";
-
-/**
- * PostCSS plugin de Grisso.
- * Genera CSS desde JS y aplica tree-shaking usando PurgeCSS
- * si se pasan rutas de contenido.
- *
- * No aplica optimización (el consumidor tiene su propio pipeline PostCSS).
- *
- * @param {Object} options
- * @param {string[]} [options.content] - Rutas glob de archivos a escanear para tree-shaking.
- *   Si se omite, se incluye todo el CSS de Grisso (útil en desarrollo).
- * @param {string} [options.config] - Ruta a grisso.config.mjs del consumidor.
- *
- * @example
- * // postcss.config.js del proyecto consumidor
- * import grisso from "@hiscovega/grisso/plugin";
- * export default {
- *   plugins: [
- *     grisso({ content: ["./src/**\/*.{js,ts,jsx,tsx,css}"] })
- *   ]
- * }
- */
-export default function grissoPlugin(options = {}) {
-	const { content, config: configPath } = options;
-
-	return {
-		postcssPlugin: "postcss-grisso",
-		async Once(root, { parse }) {
-			let css = await generateCSS(configPath);
-
-			if (content && content.length > 0) {
-				css = await purgeCSS(css, { content });
-			}
-
-			const grissoRoot = parse(css);
-			grissoRoot.each((node) => root.prepend(node.clone()));
-		},
-	};
-}
-
-grissoPlugin.postcss = true;