@hiscovega/grisso 1.0.4 → 1.0.6

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.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/lib/cli.js

@@ -0,0 +1,197 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseArgs } from "node:util";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+/** Lee la versión desde package.json */
+function getVersion() {
+    const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, "../package.json"), "utf8"));
+    return pkg.version;
+}
+/** Texto de ayuda general */
+function printHelp() {
+    const version = getVersion();
+    console.log(`grisso v${version} — Griddo CSS utility class library
+
+Uso:
+  grisso <comando> [opciones]
+
+Comandos:
+  build     Genera CSS de utilidades
+  tokens    Genera scaffold de tokens (custom properties)
+
+Opciones globales:
+  --help, -h      Muestra esta ayuda
+  --version, -v   Muestra la versión`);
+}
+/** Texto de ayuda del comando build */
+function printBuildHelp() {
+    console.log(`grisso build — Genera CSS de utilidades
+
+Uso:
+  grisso build [opciones]
+
+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
+
+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 */
+async function runBuild(argv) {
+    const { values } = parseArgs({
+        args: 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 },
+        },
+        strict: true,
+        allowNegative: true,
+    });
+    if (values.help) {
+        printBuildHelp();
+        return;
+    }
+    // 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..."
+            : "Generando CSS...";
+        console.error(label);
+    }
+    const css = await buildCSS({
+        config: values.config,
+        content,
+        minify: values.minify,
+        safelist,
+    });
+    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, css);
+        const kb = (Buffer.byteLength(css, "utf8") / 1024).toFixed(1);
+        console.error(`Generado ${path.relative(process.cwd(), outputPath)} (${kb} KB)`);
+    }
+    else {
+        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({
+        args: process.argv.slice(2),
+        options: {
+            help: { type: "boolean", short: "h", default: false },
+            version: { type: "boolean", short: "v", default: false },
+        },
+        strict: false,
+        allowPositionals: true,
+    });
+    if (values.version) {
+        console.log(getVersion());
+        return;
+    }
+    const command = positionals[0];
+    if (values.help && !command) {
+        printHelp();
+        return;
+    }
+    if (!command) {
+        printHelp();
+        process.exit(1);
+    }
+    switch (command) {
+        case "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();
+            process.exit(1);
+    }
+}
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/lib/defaults.js

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

package/lib/generators.d.ts

@@ -1,8 +1,4 @@
 import type { Breakpoints, Declarations, TokenMap } from "./types.js";
-/**
- * Generadores de clases CSS utility.
- * Replican los mixins grisso_simple_class, grisso_complex_class de SCSS.
- */
 /**
  * Genera una clase simple con variantes responsive.
  * Equivalente al mixin grisso_simple_class.

package/lib/generators.js

@@ -2,14 +2,19 @@
  * Generadores de clases CSS utility.
  * Replican los mixins grisso_simple_class, grisso_complex_class de SCSS.
  */
+/** Escapa caracteres especiales en classNames para selectores CSS válidos. */
+function escapeCSS(name) {
+    return name.replace(/\//g, "\\/");
+}
 /**
  * Genera una clase simple con variantes responsive.
  * Equivalente al mixin grisso_simple_class.
  */
 export function simpleClass(className, property, value, breakpoints) {
-    let css = `.${className} { ${property}: ${value}; }\n`;
+    const escaped = escapeCSS(className);
+    let css = `.${escaped} { ${property}: ${value}; }\n`;
     for (const [bp, mq] of Object.entries(breakpoints)) {
-        css += `@media ${mq} { .${bp}-${className} { ${property}: ${value}; } }\n`;
+        css += `@media ${mq} { .${bp}-${escaped} { ${property}: ${value}; } }\n`;
     }
     return css;
 }
@@ -21,12 +26,13 @@ export function complexClass(prefix, properties, tokens, breakpoints) {
     const props = Array.isArray(properties) ? properties : [properties];
     let css = "";
     for (const [name, value] of Object.entries(tokens)) {
+        const escaped = escapeCSS(`${prefix}${name}`);
         for (const prop of props) {
-            css += `.${prefix}${name} { ${prop}: ${value}; }\n`;
+            css += `.${escaped} { ${prop}: ${value}; }\n`;
         }
         for (const [bp, mq] of Object.entries(breakpoints)) {
             for (const prop of props) {
-                css += `@media ${mq} { .${bp}-${prefix}${name} { ${prop}: ${value}; } }\n`;
+                css += `@media ${mq} { .${bp}-${escaped} { ${prop}: ${value}; } }\n`;
             }
         }
     }
@@ -37,13 +43,14 @@ export function complexClass(prefix, properties, tokens, breakpoints) {
  * Para casos especiales: divide >*+*, truncate, smoothing, outline-none, etc.
  */
 export function customClass(className, declarations, breakpoints, selectorSuffix) {
+    const escaped = escapeCSS(className);
     const suffix = selectorSuffix || "";
     const decls = Object.entries(declarations)
         .map(([p, v]) => `${p}: ${v}`)
         .join("; ");
-    let css = `.${className}${suffix} { ${decls}; }\n`;
+    let css = `.${escaped}${suffix} { ${decls}; }\n`;
     for (const [bp, mq] of Object.entries(breakpoints)) {
-        css += `@media ${mq} { .${bp}-${className}${suffix} { ${decls}; } }\n`;
+        css += `@media ${mq} { .${bp}-${escaped}${suffix} { ${decls}; } }\n`;
     }
     return css;
 }

package/lib/partials/borders.js

@@ -19,6 +19,13 @@ export default function borders(config) {
     };
     // border-width
     css += complexClass("border-", "border-width", borderWidth, breakpoints);
+    // 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);
+    // border-color
+    css += complexClass("border-", "border-color", extendedColors, breakpoints);
     // border-style
     css += complexClass("border-", "border-style", borderStyle, breakpoints);
     // divide-color

package/lib/partials/layout.js

@@ -1,4 +1,4 @@
-import { complexClass, simpleClass } from "../generators.js";
+import { complexClass, customClass, simpleClass } from "../generators.js";
 export default function layout(config) {
     const { columns, breakpoints, spacing } = config;
     let css = "";
@@ -31,8 +31,6 @@ export default function layout(config) {
     for (let i = 1; i <= columns; i++) {
         css += simpleClass(`columns-${i}`, "columns", String(i), breakpoints);
     }
-    // columns (spacing tokens)
-    css += complexClass("columns-", "columns", spacing, breakpoints);
     // float
     const float = {
         left: "left",
@@ -98,14 +96,14 @@ export default function layout(config) {
     const zIndex = {
         auto: "auto",
         "0": "0",
-        "1": "10",
+        "10": "10",
         "20": "20",
         "30": "30",
         "40": "40",
         "50": "50",
     };
     const zIndexNeg = {
-        "1": "-10",
+        "10": "-10",
         "20": "-20",
         "30": "-30",
         "40": "-40",
@@ -114,13 +112,19 @@ export default function layout(config) {
     css += complexClass("z-", "z-index", zIndex, breakpoints);
     css += complexClass("-z-", "z-index", zIndexNeg, breakpoints);
     // top/right/bottom/left
-    css += simpleClass("top-0", "top", "0", breakpoints);
-    css += simpleClass("right-0", "right", "0", breakpoints);
-    css += simpleClass("bottom-0", "bottom", "0", breakpoints);
-    css += simpleClass("left-0", "left", "0", breakpoints);
     css += complexClass("top-", "top", spacing, breakpoints);
     css += complexClass("right-", "right", spacing, breakpoints);
     css += complexClass("bottom-", "bottom", spacing, breakpoints);
     css += complexClass("left-", "left", spacing, breakpoints);
+    // inset (top + right + bottom + left)
+    css += complexClass("inset-", "inset", spacing, breakpoints);
+    // inset-x (left + right)
+    for (const [key, value] of Object.entries(spacing)) {
+        css += customClass(`inset-x-${key}`, { left: value, right: value }, breakpoints);
+    }
+    // inset-y (top + bottom)
+    for (const [key, value] of Object.entries(spacing)) {
+        css += customClass(`inset-y-${key}`, { top: value, bottom: value }, breakpoints);
+    }
     return css;
 }

package/lib/partials/sizing.js

@@ -1,7 +1,35 @@
 import { complexClass, simpleClass } from "../generators.js";
 import { fractionPercent } from "../utils.js";
+const fractions = [
+    [1, 2],
+    [1, 3],
+    [2, 3],
+    [1, 4],
+    [2, 4],
+    [3, 4],
+    [1, 5],
+    [2, 5],
+    [3, 5],
+    [4, 5],
+    [1, 6],
+    [2, 6],
+    [3, 6],
+    [4, 6],
+    [5, 6],
+    [1, 12],
+    [2, 12],
+    [3, 12],
+    [4, 12],
+    [5, 12],
+    [6, 12],
+    [7, 12],
+    [8, 12],
+    [9, 12],
+    [10, 12],
+    [11, 12],
+];
 export default function sizing(config) {
-    const { columns, breakpoints } = config;
+    const { breakpoints } = config;
     let css = "";
     // width
     const width = {
@@ -14,8 +42,8 @@ export default function sizing(config) {
         fit: "fit-content",
     };
     css += complexClass("w-", "width", width, breakpoints);
-    for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`w-${i}`, "width", fractionPercent(i, columns), breakpoints);
+    for (const [n, d] of fractions) {
+        css += simpleClass(`w-${n}/${d}`, "width", fractionPercent(n, d), breakpoints);
     }
     css += complexClass("min-w-", "min-width", width, breakpoints);
     css += complexClass("max-w-", "max-width", width, breakpoints);
@@ -30,8 +58,8 @@ export default function sizing(config) {
         fit: "fit-content",
     };
     css += complexClass("h-", "height", height, breakpoints);
-    for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`h-${i}`, "height", fractionPercent(i, columns), breakpoints);
+    for (const [n, d] of fractions) {
+        css += simpleClass(`h-${n}/${d}`, "height", fractionPercent(n, d), breakpoints);
     }
     css += complexClass("min-h-", "min-height", height, breakpoints);
     css += complexClass("max-h-", "max-height", height, breakpoints);

package/lib/partials/typography.js

@@ -83,7 +83,7 @@ export default function typography(config) {
     const fontWeight = {
         thin: "100",
         extralight: "200",
-        light: "200",
+        light: "300",
         normal: "400",
         medium: "500",
         semibold: "600",
@@ -93,7 +93,14 @@ export default function typography(config) {
     };
     css += complexClass("font-", "font-weight", fontWeight, breakpoints);
     // letter-spacing
-    const letterSpacing = omit(spacing, "auto");
+    const letterSpacing = {
+        tighter: "-0.05em",
+        tight: "-0.025em",
+        normal: "0em",
+        wide: "0.025em",
+        wider: "0.05em",
+        widest: "0.1em",
+    };
     css += complexClass("tracking-", "letter-spacing", letterSpacing, breakpoints);
     // line-height
     const lineHeight = omit(spacing, "auto", "zero");
@@ -101,7 +108,7 @@ export default function typography(config) {
         ...lineHeight,
         none: "1",
         tight: "1.25",
-        snug: "1.3755",
+        snug: "1.375",
         normal: "1.5",
         relaxed: "1.625",
         loose: "2",

package/lib/purge.js

@@ -11,8 +11,8 @@ export async function purgeCSS(css, options) {
         css: [{ raw: css }],
         extractors: [
             {
-                // Extractor para uso directo en HTML/JSX: class="flex gap-md"
-                extractor: (content) => content.match(/[A-Za-z0-9_-]+/g) || [],
+                // Extractor para uso directo en HTML/JSX: class="flex gap-md w-1/2"
+                extractor: (content) => content.match(/[A-Za-z0-9_/.-]+/g) || [],
                 extensions: ["html", "jsx", "tsx", "js", "ts"],
             },
             {
@@ -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>;