@hiscovega/grisso 1.0.3 → 1.0.5

package/lib/cli.d.ts

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

package/lib/cli.js

@@ -0,0 +1,131 @@
+#!/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
+
+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)
+  --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 --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 },
+            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;
+    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,
+    });
+    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);
+    }
+}
+/** 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 de "build"
+            await runBuild(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/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"],
             },
             {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hiscovega/grisso",
 	"description": "Griddo CSS utility class library",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"license": "UNLICENSED",
 	"private": false,
 	"type": "module",
@@ -9,10 +9,6 @@
 		".": {
 			"style": "./dist/grisso.css"
 		},
-		"./plugin": {
-			"import": "./plugin.js",
-			"require": "./plugin.cjs"
-		},
 		"./build": "./lib/build.js",
 		"./config": "./lib/defaults.js",
 		"./tokens-example.css": "./tokens-example.css"
@@ -20,41 +16,36 @@
 	"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",
 		"release": "release-it"
 	},
+	"dependencies": {
+		"browserslist": "^4.24.0",
+		"lightningcss": "^1.28.0",
+		"purgecss": "^6.0.0"
+	},
 	"devDependencies": {
 		"@biomejs/biome": "2.4.5",
 		"@types/node": "^25.3.3",
-		"browserslist": "^4.24.0",
-		"lightningcss": "^1.28.0",
-		"purgecss": "^6.0.0",
 		"release-it": "^19.2.4",
 		"typescript": "^5.9.3",
 		"vitest": "^4.0.18"
-	},
-	"peerDependencies": {
-		"postcss": "^8.0.0"
-	},
-	"peerDependenciesMeta": {
-		"postcss": {
-			"optional": true
-		}
 	}
 }

package/tokens-example.css

@@ -1,4 +1,4 @@
-/* @griddo/grisso — tokens-example.css
+/* @hiscovega/grisso — tokens-example.css
    Copia este archivo y adapta los valores a tu design system.
    Define estas variables en :root o en el scope que prefieras.
 

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 "@griddo/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;