@hiscovega/grisso 1.0.5 → 1.0.7

package/lib/build.d.ts

@@ -5,6 +5,8 @@ export interface BuildOptions {
     content?: string[];
     /** Minificar el CSS de salida (default: true) */
     minify?: boolean;
+    /** Patrones de clases protegidas del tree-shaking (se mergean con config.safelist) */
+    safelist?: (string | RegExp)[];
 }
 /**
  * API principal de Grisso — genera, purga y optimiza CSS

package/lib/build.js

@@ -1,6 +1,13 @@
 import { generateCSS } from "./index.js";
 import { optimizeCSS } from "./optimize.js";
 import { purgeCSS } from "./purge.js";
+import { resolveConfig } from "./resolve-config.js";
+/** Convierte strings a RegExp, deja RegExp intactos */
+function toRegExpArray(list) {
+    if (!list)
+        return [];
+    return list.map((item) => (item instanceof RegExp ? item : new RegExp(item)));
+}
 /**
  * API principal de Grisso — genera, purga y optimiza CSS
  * sin depender de PostCSS.
@@ -16,12 +23,18 @@ import { purgeCSS } from "./purge.js";
  * });
  */
 export async function buildCSS(options = {}) {
-    const { config, content, minify = true } = options;
+    const { config, content, minify = true, safelist: optsSafelist } = options;
     // 1. Generar CSS raw desde los generators
     let css = await generateCSS(config);
     // 2. Tree-shaking si hay rutas de contenido
     if (content && content.length > 0) {
-        css = await purgeCSS(css, { content });
+        // Resolver config para extraer safelist configurada
+        const resolved = await resolveConfig(config);
+        const mergedSafelist = [
+            ...toRegExpArray(resolved.safelist),
+            ...toRegExpArray(optsSafelist),
+        ];
+        css = await purgeCSS(css, { content, safelist: mergedSafelist });
     }
     // 3. Optimizar (nesting, autoprefixer, minificación)
     css = await optimizeCSS(css, { minify });

package/lib/cli.js

@@ -19,6 +19,7 @@ Uso:
 
 Comandos:
   build     Genera CSS de utilidades
+  tokens    Genera scaffold de tokens (custom properties)
 
 Opciones globales:
   --help, -h      Muestra esta ayuda
@@ -34,6 +35,7 @@ Uso:
 Opciones:
   --config <ruta>     Ruta a grisso.config.mjs
   --content <glob>    Globs para tree-shaking (repetible)
+  --safelist <regex>  Patrones de clases a preservar (repetible)
   --output <ruta>     Archivo de salida (sin --output → stdout)
   --no-minify         Deshabilitar minificación
   --help, -h          Muestra esta ayuda
@@ -42,6 +44,7 @@ Ejemplos:
   grisso build                                          # CSS completo a stdout
   grisso build --output dist/grisso.css                 # Escribir a archivo
   grisso build --content "src/**/*.tsx" --output out.css # Tree-shaking
+  grisso build --safelist "^p-" --safelist "^m-"        # Proteger clases
   grisso build --no-minify                              # Sin minificar`);
 }
 /** Comando build: genera CSS */
@@ -51,6 +54,7 @@ async function runBuild(argv) {
         options: {
             config: { type: "string" },
             content: { type: "string", multiple: true },
+            safelist: { type: "string", multiple: true },
             output: { type: "string" },
             minify: { type: "boolean", default: true },
             help: { type: "boolean", short: "h", default: false },
@@ -65,6 +69,7 @@ async function runBuild(argv) {
     // Import dinámico para que --help sea instantáneo
     const { buildCSS } = await import("./build.js");
     const content = values.content && values.content.length > 0 ? values.content : undefined;
+    const safelist = values.safelist && values.safelist.length > 0 ? values.safelist : undefined;
     if (values.output) {
         const label = content
             ? "Generando CSS con tree-shaking..."
@@ -75,6 +80,7 @@ async function runBuild(argv) {
         config: values.config,
         content,
         minify: values.minify,
+        safelist,
     });
     if (values.output) {
         const outputPath = path.resolve(values.output);
@@ -90,6 +96,63 @@ async function runBuild(argv) {
         process.stdout.write(css);
     }
 }
+/** Texto de ayuda del comando tokens */
+function printTokensHelp() {
+    console.log(`grisso tokens — Genera scaffold de tokens (custom properties)
+
+Uso:
+  grisso tokens [opciones]
+
+Opciones:
+  --config <ruta>     Ruta a grisso.config.mjs
+  --format <fmt>      Formato de salida: css (default) o json
+  --output <ruta>     Archivo de salida (sin --output → stdout)
+  --help, -h          Muestra esta ayuda
+
+Ejemplos:
+  grisso tokens                                        # Scaffold CSS a stdout
+  grisso tokens --output tokens.css                    # Escribir a archivo
+  grisso tokens --config grisso.config.mjs             # Usa config custom
+  grisso tokens --format json                          # Config como JSON`);
+}
+/** Comando tokens: genera scaffold de tokens */
+async function runTokens(argv) {
+    const { values } = parseArgs({
+        args: argv,
+        options: {
+            config: { type: "string" },
+            format: { type: "string" },
+            output: { type: "string" },
+            help: { type: "boolean", short: "h", default: false },
+        },
+        strict: true,
+    });
+    if (values.help) {
+        printTokensHelp();
+        return;
+    }
+    const format = values.format;
+    if (format && format !== "css" && format !== "json") {
+        console.error(`Formato no soportado: ${format} (usa "css" o "json")`);
+        process.exit(1);
+    }
+    // Import dinámico para que --help sea instantáneo
+    const { extractTokens } = await import("./tokens.js");
+    const output = await extractTokens({ config: values.config, format });
+    if (values.output) {
+        const outputPath = path.resolve(values.output);
+        const dir = path.dirname(outputPath);
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+        }
+        fs.writeFileSync(outputPath, output);
+        const kb = (Buffer.byteLength(output, "utf8") / 1024).toFixed(1);
+        console.error(`Generado ${path.relative(process.cwd(), outputPath)} (${kb} KB)`);
+    }
+    else {
+        process.stdout.write(output);
+    }
+}
 /** Punto de entrada */
 async function main() {
     const { values, positionals } = parseArgs({
@@ -116,9 +179,12 @@ async function main() {
     }
     switch (command) {
         case "build":
-            // Pasar solo los args después de "build"
+            // Pasar solo los args después del comando
             await runBuild(process.argv.slice(3));
             break;
+        case "tokens":
+            await runTokens(process.argv.slice(3));
+            break;
         default:
             console.error(`Comando desconocido: ${command}`);
             printHelp();

package/lib/defaults.js

@@ -4,11 +4,19 @@
  */
 const defaults = {
     columns: 12,
+    safelist: [],
     breakpoints: {
         tablet: "(min-width: 700px)",
         desktop: "(min-width: 1024px)",
         ultrawide: "(min-width: 1680px)",
     },
+    states: {
+        hover: ":hover",
+        focus: ":focus",
+        "focus-visible": ":focus-visible",
+        active: ":active",
+        disabled: ":disabled",
+    },
     spacing: {
         auto: "auto",
         zero: "0",

package/lib/generators.d.ts

@@ -1,16 +1,16 @@
-import type { Breakpoints, Declarations, TokenMap } from "./types.js";
+import type { Breakpoints, Declarations, States, TokenMap } from "./types.js";
 /**
- * Genera una clase simple con variantes responsive.
+ * Genera una clase simple con variantes responsive y de estado.
  * Equivalente al mixin grisso_simple_class.
  */
-export declare function simpleClass(className: string, property: string, value: string, breakpoints: Breakpoints): string;
+export declare function simpleClass(className: string, property: string, value: string, breakpoints: Breakpoints, states?: States): string;
 /**
- * Genera clases basadas en un mapa de tokens con variantes responsive.
+ * Genera clases basadas en un mapa de tokens con variantes responsive y de estado.
  * Equivalente al mixin grisso_complex_class.
  */
-export declare function complexClass(prefix: string, properties: string | string[], tokens: TokenMap, breakpoints: Breakpoints): string;
+export declare function complexClass(prefix: string, properties: string | string[], tokens: TokenMap, breakpoints: Breakpoints, states?: States): string;
 /**
- * Genera una clase con declaraciones custom y variantes responsive.
+ * Genera una clase con declaraciones custom y variantes responsive y de estado.
  * Para casos especiales: divide >*+*, truncate, smoothing, outline-none, etc.
  */
-export declare function customClass(className: string, declarations: Declarations, breakpoints: Breakpoints, selectorSuffix?: string): string;
+export declare function customClass(className: string, declarations: Declarations, breakpoints: Breakpoints, selectorSuffix?: string, states?: States): string;

package/lib/generators.js

@@ -7,22 +7,34 @@ function escapeCSS(name) {
     return name.replace(/\//g, "\\/");
 }
 /**
- * Genera una clase simple con variantes responsive.
+ * Genera una clase simple con variantes responsive y de estado.
  * Equivalente al mixin grisso_simple_class.
  */
-export function simpleClass(className, property, value, breakpoints) {
+export function simpleClass(className, property, value, breakpoints, states) {
     const escaped = escapeCSS(className);
     let css = `.${escaped} { ${property}: ${value}; }\n`;
+    // Variantes de estado
+    if (states) {
+        for (const [state, pseudo] of Object.entries(states)) {
+            css += `.${state}-${escaped}${pseudo} { ${property}: ${value}; }\n`;
+        }
+    }
     for (const [bp, mq] of Object.entries(breakpoints)) {
         css += `@media ${mq} { .${bp}-${escaped} { ${property}: ${value}; } }\n`;
+        // Variantes responsive + estado
+        if (states) {
+            for (const [state, pseudo] of Object.entries(states)) {
+                css += `@media ${mq} { .${bp}-${state}-${escaped}${pseudo} { ${property}: ${value}; } }\n`;
+            }
+        }
     }
     return css;
 }
 /**
- * Genera clases basadas en un mapa de tokens con variantes responsive.
+ * Genera clases basadas en un mapa de tokens con variantes responsive y de estado.
  * Equivalente al mixin grisso_complex_class.
  */
-export function complexClass(prefix, properties, tokens, breakpoints) {
+export function complexClass(prefix, properties, tokens, breakpoints, states) {
     const props = Array.isArray(properties) ? properties : [properties];
     let css = "";
     for (const [name, value] of Object.entries(tokens)) {
@@ -30,27 +42,55 @@ export function complexClass(prefix, properties, tokens, breakpoints) {
         for (const prop of props) {
             css += `.${escaped} { ${prop}: ${value}; }\n`;
         }
+        // Variantes de estado
+        if (states) {
+            for (const [state, pseudo] of Object.entries(states)) {
+                for (const prop of props) {
+                    css += `.${state}-${escaped}${pseudo} { ${prop}: ${value}; }\n`;
+                }
+            }
+        }
         for (const [bp, mq] of Object.entries(breakpoints)) {
             for (const prop of props) {
                 css += `@media ${mq} { .${bp}-${escaped} { ${prop}: ${value}; } }\n`;
             }
+            // Variantes responsive + estado
+            if (states) {
+                for (const [state, pseudo] of Object.entries(states)) {
+                    for (const prop of props) {
+                        css += `@media ${mq} { .${bp}-${state}-${escaped}${pseudo} { ${prop}: ${value}; } }\n`;
+                    }
+                }
+            }
         }
     }
     return css;
 }
 /**
- * Genera una clase con declaraciones custom y variantes responsive.
+ * Genera una clase con declaraciones custom y variantes responsive y de estado.
  * Para casos especiales: divide >*+*, truncate, smoothing, outline-none, etc.
  */
-export function customClass(className, declarations, breakpoints, selectorSuffix) {
+export function customClass(className, declarations, breakpoints, selectorSuffix, states) {
     const escaped = escapeCSS(className);
     const suffix = selectorSuffix || "";
     const decls = Object.entries(declarations)
         .map(([p, v]) => `${p}: ${v}`)
         .join("; ");
     let css = `.${escaped}${suffix} { ${decls}; }\n`;
+    // Variantes de estado: pseudo va antes del selectorSuffix
+    if (states) {
+        for (const [state, pseudo] of Object.entries(states)) {
+            css += `.${state}-${escaped}${pseudo}${suffix} { ${decls}; }\n`;
+        }
+    }
     for (const [bp, mq] of Object.entries(breakpoints)) {
         css += `@media ${mq} { .${bp}-${escaped}${suffix} { ${decls}; } }\n`;
+        // Variantes responsive + estado
+        if (states) {
+            for (const [state, pseudo] of Object.entries(states)) {
+                css += `@media ${mq} { .${bp}-${state}-${escaped}${pseudo}${suffix} { ${decls}; } }\n`;
+            }
+        }
     }
     return css;
 }

package/lib/partials/backgrounds.js

@@ -1,16 +1,16 @@
 import { complexClass } from "../generators.js";
 export default function backgrounds(config) {
-    const { breakpoints, backgroundColors } = config;
+    const { breakpoints, states, backgroundColors } = config;
     let css = "";
     // background-color
-    css += complexClass("bg-", "background-color", backgroundColors, breakpoints);
+    css += complexClass("bg-", "background-color", backgroundColors, breakpoints, states);
     // background-attachment
     const bgAttachment = {
         fixed: "fixed",
         local: "local",
         scroll: "scroll",
     };
-    css += complexClass("bg-", "background-attachment", bgAttachment, breakpoints);
+    css += complexClass("bg-", "background-attachment", bgAttachment, breakpoints, states);
     // background-clip
     const bgClip = {
         border: "border-box",
@@ -18,14 +18,14 @@ export default function backgrounds(config) {
         content: "content-box",
         text: "text",
     };
-    css += complexClass("bg-clip-", "background-clip", bgClip, breakpoints);
+    css += complexClass("bg-clip-", "background-clip", bgClip, breakpoints, states);
     // background-origin
     const bgOrigin = {
         border: "border-box",
         padding: "padding-box",
         content: "content-box",
     };
-    css += complexClass("bg-origin-", "background-origin", bgOrigin, breakpoints);
+    css += complexClass("bg-origin-", "background-origin", bgOrigin, breakpoints, states);
     // background-position
     const bgPosition = {
         bottom: "bottom",
@@ -38,7 +38,7 @@ export default function backgrounds(config) {
         "right-top": "right top",
         top: "top",
     };
-    css += complexClass("bg-", "background-position", bgPosition, breakpoints);
+    css += complexClass("bg-", "background-position", bgPosition, breakpoints, states);
     // background-repeat
     const bgRepeat = {
         repeat: "repeat",
@@ -48,7 +48,7 @@ export default function backgrounds(config) {
         "repeat-round": "round",
         "repeat-space": "space",
     };
-    css += complexClass("bg-", "background-repeat", bgRepeat, breakpoints);
+    css += complexClass("bg-", "background-repeat", bgRepeat, breakpoints, states);
     // background-size
     const bgSize = {
         auto: "auto",
@@ -59,6 +59,6 @@ export default function backgrounds(config) {
         revert: "revert",
         unset: "unset",
     };
-    css += complexClass("bg-", "background-size", bgSize, breakpoints);
+    css += complexClass("bg-", "background-size", bgSize, breakpoints, states);
     return css;
 }

package/lib/partials/borders.js

@@ -1,6 +1,6 @@
 import { complexClass, customClass } from "../generators.js";
 export default function borders(config) {
-    const { breakpoints, borderWidth, borderColors } = config;
+    const { breakpoints, states, borderWidth, borderColors } = config;
     let css = "";
     // Variables locales (equivale a borders/vars.scss)
     const extendedColors = {
@@ -18,35 +18,35 @@ export default function borders(config) {
         none: "none",
     };
     // border-width
-    css += complexClass("border-", "border-width", borderWidth, breakpoints);
+    css += complexClass("border-", "border-width", borderWidth, breakpoints, states);
     // border-{side}-width
-    css += complexClass("border-t-", "border-top-width", borderWidth, breakpoints);
-    css += complexClass("border-r-", "border-right-width", borderWidth, breakpoints);
-    css += complexClass("border-b-", "border-bottom-width", borderWidth, breakpoints);
-    css += complexClass("border-l-", "border-left-width", borderWidth, breakpoints);
+    css += complexClass("border-t-", "border-top-width", borderWidth, breakpoints, states);
+    css += complexClass("border-r-", "border-right-width", borderWidth, breakpoints, states);
+    css += complexClass("border-b-", "border-bottom-width", borderWidth, breakpoints, states);
+    css += complexClass("border-l-", "border-left-width", borderWidth, breakpoints, states);
     // border-color
-    css += complexClass("border-", "border-color", extendedColors, breakpoints);
+    css += complexClass("border-", "border-color", extendedColors, breakpoints, states);
     // border-style
-    css += complexClass("border-", "border-style", borderStyle, breakpoints);
+    css += complexClass("border-", "border-style", borderStyle, breakpoints, states);
     // divide-color
     for (const [key, value] of Object.entries(extendedColors)) {
-        css += customClass(`divide-${key}`, { "border-color": value }, breakpoints, " > * + *");
+        css += customClass(`divide-${key}`, { "border-color": value }, breakpoints, " > * + *", states);
     }
     // divide-width
     for (const [key, value] of Object.entries(borderWidth)) {
-        css += customClass(`divide-x-${key}`, { "border-right-width": value, "border-left-width": value }, breakpoints, " > * + *");
-        css += customClass(`divide-y-${key}`, { "border-top-width": value, "border-bottom-width": value }, breakpoints, " > * + *");
+        css += customClass(`divide-x-${key}`, { "border-right-width": value, "border-left-width": value }, breakpoints, " > * + *", states);
+        css += customClass(`divide-y-${key}`, { "border-top-width": value, "border-bottom-width": value }, breakpoints, " > * + *", states);
     }
-    css += customClass("divide-x", { "border-right-width": "0", "border-left-width": "1px" }, breakpoints, " > * + *");
-    css += customClass("divide-y", { "border-top-width": "1px", "border-bottom-width": "0" }, breakpoints, " > * + *");
+    css += customClass("divide-x", { "border-right-width": "0", "border-left-width": "1px" }, breakpoints, " > * + *", states);
+    css += customClass("divide-y", { "border-top-width": "1px", "border-bottom-width": "0" }, breakpoints, " > * + *", states);
     // divide-style
     for (const [key, value] of Object.entries(borderStyle)) {
-        css += customClass(`divide-${key}`, { "border-style": value }, breakpoints, " > * + *");
+        css += customClass(`divide-${key}`, { "border-style": value }, breakpoints, " > * + *", states);
     }
     // outline-color
-    css += complexClass("outline-", "outline-color", extendedColors, breakpoints);
+    css += complexClass("outline-", "outline-color", extendedColors, breakpoints, states);
     // outline-width
-    css += complexClass("outline-", "outline-width", borderWidth, breakpoints);
+    css += complexClass("outline-", "outline-width", borderWidth, breakpoints, states);
     // outline-style
     const outlineStyle = {
         outline: "solid",
@@ -54,9 +54,9 @@ export default function borders(config) {
         "outline-dotted": "dotted",
         "outline-double": "double",
     };
-    css += complexClass("", "outline-style", outlineStyle, breakpoints);
-    css += customClass("outline-none", { outline: "2px solid transparent", "outline-offset": "2px" }, breakpoints);
+    css += complexClass("", "outline-style", outlineStyle, breakpoints, states);
+    css += customClass("outline-none", { outline: "2px solid transparent", "outline-offset": "2px" }, breakpoints, undefined, states);
     // outline-offset
-    css += complexClass("outline-offset-", "outline-offset", borderWidth, breakpoints);
+    css += complexClass("outline-offset-", "outline-offset", borderWidth, breakpoints, states);
     return css;
 }

package/lib/partials/effects.js

@@ -1,17 +1,17 @@
 import { complexClass } from "../generators.js";
 export default function effects(config) {
-    const { breakpoints, opacity, shadows, overlayColors } = config;
+    const { breakpoints, states, opacity, shadows, overlayColors } = config;
     let css = "";
     // opacity
-    css += complexClass("opacity-", "opacity", opacity, breakpoints);
+    css += complexClass("opacity-", "opacity", opacity, breakpoints, states);
     // box-shadow
     const extendedShadows = {
         ...shadows,
         inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
         none: "0 0 #0000",
     };
-    css += complexClass("shadow-", "box-shadow", extendedShadows, breakpoints);
+    css += complexClass("shadow-", "box-shadow", extendedShadows, breakpoints, states);
     // overlay (background-color)
-    css += complexClass("overlay-", "background-color", overlayColors, breakpoints);
+    css += complexClass("overlay-", "background-color", overlayColors, breakpoints, states);
     return css;
 }