@hiscovega/grisso 1.0.5 → 1.0.6

package/README.md

@@ -1,6 +1,6 @@
 # Grisso
 
-> Librería de utility CSS de Griddo — similar a Tailwind CSS pero con valores basados en CSS custom properties (design tokens).
+> Librería de utility CSS de Griddo con valores basados en CSS custom properties (design tokens).
 
 ## Instalación
 
@@ -10,24 +10,9 @@ npm install @hiscovega/grisso
 
 ## Uso
 
-### Opción A: CSS directo
-
-Importa el CSS pre-compilado directamente. Útil para desarrollo.
-
-```css
-/* En tu CSS global */
-@import "@hiscovega/grisso";
-```
-
-O en HTML:
-
-```html
-<link rel="stylesheet" href="node_modules/@hiscovega/grisso/dist/grisso.css" />
-```
-
-### Opción B: CLI
+### CLI
 
-Genera CSS desde la terminal. Ideal para scripts de build y CI/CD.
+Genera CSS desde la terminal. Forma recomendada de usar Grisso, ideal para scripts de build y CI/CD.
 
 ```bash
 # CSS completo a stdout
@@ -42,6 +27,9 @@ npx grisso build --config grisso.config.mjs --output dist/grisso.css
 # Tree-shaking (solo clases usadas)
 npx grisso build --content "src/**/*.tsx" --content "src/**/*.css" --output dist/grisso.css
 
+# Proteger clases del tree-shaking
+npx grisso build --content "src/**/*.tsx" --safelist "^p-" --safelist "^m-" --output dist/grisso.css
+
 # Sin minificar (útil para depuración)
 npx grisso build --no-minify --output dist/grisso.css
 
@@ -51,17 +39,61 @@ npx grisso build | pbcopy
 
 **Flags de `grisso build`:**
 
-| Flag | Descripción |
-|---|---|
-| `--config <ruta>` | Ruta a `grisso.config.mjs` |
-| `--content <glob>` | Globs para tree-shaking (repetible) |
-| `--output <ruta>` | Archivo de salida (sin `--output` → stdout) |
-| `--no-minify` | Deshabilitar minificación |
-| `--help, -h` | Ayuda del comando |
+| Flag                 | Descripción                                 |
+| -------------------- | ------------------------------------------- |
+| `--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`         | Ayuda del comando                           |
 
 Sin `--output`, el CSS va a stdout y los mensajes de estado a stderr, siguiendo la convención Unix.
 
-### Opción C: API programática
+#### `grisso tokens`
+
+Genera un scaffold con todas las CSS custom properties (design tokens) que necesitas definir. Extrae dinámicamente los tokens de la config resuelta.
+
+```bash
+# Scaffold CSS a stdout
+npx grisso tokens
+
+# Escribir a archivo
+npx grisso tokens --output tokens.css
+
+# Con config personalizada (refleja extends/overrides)
+npx grisso tokens --config grisso.config.mjs --output tokens.css
+
+# Config resuelta como JSON
+npx grisso tokens --format json
+```
+
+**Flags de `grisso tokens`:**
+
+| Flag              | Descripción                                       |
+| ----------------- | ------------------------------------------------- |
+| `--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`      | Ayuda del comando                                 |
+
+El scaffold CSS genera un `:root { }` con todas las properties vacías, agrupadas por sección, listo para rellenar:
+
+```css
+:root {
+	/* ─── Spacing ─── */
+	--spc-4xs: ;
+	--spc-3xs: ;
+	/* ... */
+
+	/* ─── Colors: marca ─── */
+	--brand-1: ;
+	--brand-2: ;
+	/* ... */
+}
+```
+
+### API programática
 
 Usa `buildCSS()` directamente desde Node.js. Genera, purga y optimiza CSS — ideal para scripts de build, herramientas custom o integración con cualquier bundler.
 
@@ -74,11 +106,12 @@ const css = await buildCSS();
 
 **Opciones de `buildCSS()`:**
 
-| Opción | Tipo | Default | Descripción |
-|---|---|---|---|
-| `config` | `string` | — | Ruta a `grisso.config.mjs` personalizado |
-| `content` | `string[]` | — | Globs de archivos a escanear para tree-shaking |
-| `minify` | `boolean` | `true` | Minificar el CSS de salida |
+| Opción     | Tipo                   | Default | Descripción                                                      |
+| ---------- | ---------------------- | ------- | ---------------------------------------------------------------- |
+| `config`   | `string`               | —       | Ruta a `grisso.config.mjs` personalizado                         |
+| `content`  | `string[]`             | —       | Globs de archivos a escanear para tree-shaking                   |
+| `safelist` | `(string \| RegExp)[]` | —       | Patrones de clases a preservar (se mergea con `config.safelist`) |
+| `minify`   | `boolean`              | `true`  | Minificar el CSS de salida                                       |
 
 Sin `content`, se incluye todo el CSS. Con `content`, se eliminan las clases no usadas via PurgeCSS.
 
@@ -144,6 +177,30 @@ export default {
 };
 ```
 
+#### `extractTokens()` — scaffold de tokens
+
+Usa `extractTokens()` para generar programáticamente el scaffold de custom properties (o JSON) desde la config resuelta.
+
+```js
+import { extractTokens } from "@hiscovega/grisso/tokens";
+
+// Scaffold CSS con todas las custom properties
+const css = await extractTokens();
+
+// JSON con los token maps resueltos
+const json = await extractTokens({
+  format: "json",
+  config: "./grisso.config.mjs",
+});
+```
+
+**Opciones de `extractTokens()`:**
+
+| Opción   | Tipo             | Default | Descripción                               |
+| -------- | ---------------- | ------- | ----------------------------------------- |
+| `config` | `string`         | —       | Ruta a `grisso.config.mjs` personalizado  |
+| `format` | `"css" \| "json"` | `"css"` | Formato de salida                         |
+
 **Servidor de desarrollo** — generar CSS on-the-fly:
 
 ```js
@@ -161,7 +218,7 @@ app.get("/grisso.css", async (req, res) => {
 
 ## Configuración personalizada
 
-Crea un `grisso.config.mjs` en la raíz de tu proyecto para extender o reemplazar los tokens por defecto. Sigue el patrón de Tailwind v3:
+Crea un `grisso.config.mjs` en la raíz de tu proyecto para extender o reemplazar los tokens por defecto.
 
 ```js
 // grisso.config.mjs
@@ -173,7 +230,7 @@ export default {
     lg: "24px",
   },
 
-  // `extend` MERGEA con los defaults
+  // `extend` MERGEA con los defaults (arrays se concatenan)
   extend: {
     foregroundColors: {
       5: "var(--text-5)",
@@ -181,17 +238,28 @@ export default {
     shadows: {
       "2xl": "var(--box-shadow-2xl)",
     },
+    // Se concatena con el default []
+    safelist: [/^p-/],
   },
 };
 ```
 
+La `safelist` controla qué clases se protegen del tree-shaking. Por defecto está vacía. En top-level reemplaza, en `extend` se concatena. Acepta `RegExp` y `string`.
+
 Si no se pasa `config` a `buildCSS()`, busca automáticamente `grisso.config.mjs` en el directorio de trabajo. Si no existe, usa los defaults.
 
 Los defaults se pueden consultar importando `@hiscovega/grisso/config`.
 
 ## Design Tokens (CSS custom properties)
 
-Grisso usa CSS custom properties para todos los valores. Copia `tokens-example.css` y adapta los valores a tu design system:
+Grisso usa CSS custom properties para todos los valores. Genera un scaffold con todas las properties que necesitas definir:
+
+```bash
+# Genera scaffold dinámico desde tu config resuelta
+npx grisso tokens --output src/tokens.css
+```
+
+Alternativamente, copia el ejemplo estático:
 
 ```bash
 cp node_modules/@hiscovega/grisso/tokens-example.css src/tokens.css
@@ -236,17 +304,17 @@ Ejemplos: `flex`, `tablet-flex`, `p-md`, `desktop-mt-lg`, `text-center`, `w-1/2`
 
 ### Categorías
 
-| Categoría      | Ejemplos                                                                      |
-| -------------- | ----------------------------------------------------------------------------- |
+| Categoría      | Ejemplos                                                                                              |
+| -------------- | ----------------------------------------------------------------------------------------------------- |
 | **Layout**     | `flex`, `block`, `hidden`, `relative`, `absolute`, `overflow-hidden`, `inset-0`, `inset-x-sm`, `z-10` |
-| **Flex/Grid**  | `flex-col`, `flex-wrap`, `items-center`, `justify-between`, `gap-md`          |
-| **Spacing**    | `p-sm`, `pt-lg`, `mx-auto`, `mt-xs`, `mb-md`                                 |
-| **Sizing**     | `w-full`, `h-full`, `w-1/2`, `w-2/3`, `h-1/4`, `max-w-full`                  |
-| **Tipografía** | `text-1`, `text-center`, `font-bold`, `font-light`, `leading-snug`, `tracking-tight` |
-| **Fondos**     | `bg-1`, `bg-ui`, `bg-cover`, `bg-center`                                     |
-| **Bordes**     | `border-sm`, `border-1`, `border-t-sm`, `divide-x`, `outline-none`           |
-| **Efectos**    | `shadow-md`, `opacity-3`, `overlay-2`                                         |
-| **Iconos**     | `icon-1`, `icon-3`                                                            |
+| **Flex/Grid**  | `flex-col`, `flex-wrap`, `items-center`, `justify-between`, `gap-md`                                  |
+| **Spacing**    | `p-sm`, `pt-lg`, `mx-auto`, `mt-xs`, `mb-md`                                                          |
+| **Sizing**     | `w-full`, `h-full`, `w-1/2`, `w-2/3`, `h-1/4`, `max-w-full`                                           |
+| **Tipografía** | `text-1`, `text-center`, `font-bold`, `font-light`, `leading-snug`, `tracking-tight`                  |
+| **Fondos**     | `bg-1`, `bg-ui`, `bg-cover`, `bg-center`                                                              |
+| **Bordes**     | `border-sm`, `border-1`, `border-t-sm`, `divide-x`, `outline-none`                                    |
+| **Efectos**    | `shadow-md`, `opacity-3`, `overlay-2`                                                                 |
+| **Iconos**     | `icon-1`, `icon-3`                                                                                    |
 
 ## Build
 
@@ -261,7 +329,7 @@ npm run playground  # Build + tree-shake + abre playground/index.html
 
 ### CLI
 
-El CLI se usa internamente y está disponible para consumidores via `npx grisso build`. Ver [Opción B: CLI](#opción-b-cli) para detalles completos.
+El CLI se usa internamente y está disponible para consumidores via `npx grisso build`. Ver [CLI](#cli) para detalles completos.
 
 Con `--content`, se usa PurgeCSS para eliminar clases no usadas (~154 KB → ~4 KB en el playground).
 

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,6 +4,7 @@
  */
 const defaults = {
     columns: 12,
+    safelist: [],
     breakpoints: {
         tablet: "(min-width: 700px)",
         desktop: "(min-width: 1024px)",

package/lib/purge.js

@@ -32,7 +32,7 @@ export async function purgeCSS(css, options) {
             },
         ],
         safelist: {
-            greedy: [/^bg-/, ...(options.safelist ?? [])],
+            greedy: options.safelist ?? [],
         },
     });
     return result ? result.css : css;

package/lib/resolve-config.d.ts

@@ -1,7 +1,6 @@
 import type { GrissoConfig } from "./types.js";
 /**
  * Resuelve la configuración de Grisso.
- * Patrón Tailwind v3:
  * - Top-level keys reemplazan los defaults completamente
  * - `extend` mergea superficialmente con defaults
  */

package/lib/resolve-config.js

@@ -3,7 +3,6 @@ import { pathToFileURL } from "node:url";
 import defaults from "./defaults.js";
 /**
  * Resuelve la configuración de Grisso.
- * Patrón Tailwind v3:
  * - Top-level keys reemplazan los defaults completamente
  * - `extend` mergea superficialmente con defaults
  */
@@ -36,7 +35,11 @@ export async function resolveConfig(configPath) {
     if (extend && typeof extend === "object" && !Array.isArray(extend)) {
         for (const [key, value] of Object.entries(extend)) {
             const current = config[key];
-            if (key in config &&
+            if (key in config && Array.isArray(current) && Array.isArray(value)) {
+                // Arrays se concatenan (e.g. safelist)
+                config[key] = [...current, ...value];
+            }
+            else if (key in config &&
                 typeof current === "object" &&
                 current !== null &&
                 !Array.isArray(current)) {

package/lib/tokens.d.ts

@@ -0,0 +1,14 @@
+export interface TokensOptions {
+    /** Ruta a grisso.config.mjs del consumidor */
+    config?: string;
+    /** Formato de salida: CSS scaffold o JSON (default: "css") */
+    format?: "css" | "json";
+}
+/**
+ * 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 declare function extractTokens(options?: TokensOptions): Promise<string>;

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.5",
+	"version": "1.0.6",
 	"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"
 	},