@hiscovega/grisso 1.0.2 → 1.0.4

package/lib/build.d.ts

@@ -0,0 +1,23 @@
+export interface BuildOptions {
+    /** Ruta a grisso.config.mjs del consumidor */
+    config?: string;
+    /** Rutas glob de archivos a escanear para tree-shaking */
+    content?: string[];
+    /** Minificar el CSS de salida (default: true) */
+    minify?: boolean;
+}
+/**
+ * API principal de Grisso — genera, purga y optimiza CSS
+ * sin depender de PostCSS.
+ *
+ * @example
+ * // Build completo (todo el CSS, minificado)
+ * const css = await buildCSS();
+ *
+ * // Build con tree-shaking
+ * const css = await buildCSS({
+ *   content: ["./src/**\/*.{js,ts,jsx,tsx,css}"],
+ *   config: "./grisso.config.mjs",
+ * });
+ */
+export declare function buildCSS(options?: BuildOptions): Promise<string>;

package/lib/build.js

@@ -0,0 +1,29 @@
+import { generateCSS } from "./index.js";
+import { optimizeCSS } from "./optimize.js";
+import { purgeCSS } from "./purge.js";
+/**
+ * API principal de Grisso — genera, purga y optimiza CSS
+ * sin depender de PostCSS.
+ *
+ * @example
+ * // Build completo (todo el CSS, minificado)
+ * const css = await buildCSS();
+ *
+ * // Build con tree-shaking
+ * const css = await buildCSS({
+ *   content: ["./src/**\/*.{js,ts,jsx,tsx,css}"],
+ *   config: "./grisso.config.mjs",
+ * });
+ */
+export async function buildCSS(options = {}) {
+    const { config, content, minify = true } = 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 });
+    }
+    // 3. Optimizar (nesting, autoprefixer, minificación)
+    css = await optimizeCSS(css, { minify });
+    return css;
+}

package/lib/generators.d.ts

@@ -1,4 +1,4 @@
-import type { Breakpoints, TokenMap, Declarations } from "./types.js";
+import type { Breakpoints, Declarations, TokenMap } from "./types.js";
 /**
  * Generadores de clases CSS utility.
  * Replican los mixins grisso_simple_class, grisso_complex_class de SCSS.

package/lib/index.js

@@ -1,5 +1,5 @@
-import { resolveConfig } from "./resolve-config.js";
 import partials from "./partials/index.js";
+import { resolveConfig } from "./resolve-config.js";
 /**
  * Genera el CSS completo de Grisso.
  *

package/lib/optimize.d.ts

@@ -0,0 +1,14 @@
+export interface OptimizeOptions {
+    /** Minificar el CSS de salida (default: true) */
+    minify?: boolean;
+}
+/**
+ * Optimiza CSS usando Lightning CSS:
+ * - Merge de media queries idénticas
+ * - Nesting
+ * - Autoprefixing (via browserslist "defaults")
+ * - Minificación
+ *
+ * Imports dinámicos para que solo se carguen cuando se usen.
+ */
+export declare function optimizeCSS(css: string, options?: OptimizeOptions): Promise<string>;

package/lib/optimize.js

@@ -0,0 +1,88 @@
+/**
+ * Agrupa bloques @media con la misma query en un solo bloque.
+ * Esto reduce significativamente el tamaño del CSS generado
+ * por los generators (cada clase genera su propio @media block).
+ */
+function mergeMediaQueries(css) {
+    const mediaBlocks = new Map();
+    const topLevel = [];
+    let i = 0;
+    while (i < css.length) {
+        // Saltar whitespace
+        while (i < css.length && /\s/.test(css[i]))
+            i++;
+        if (i >= css.length)
+            break;
+        if (css.startsWith("@media", i)) {
+            // Encontrar la llave de apertura
+            const braceStart = css.indexOf("{", i);
+            if (braceStart === -1)
+                break;
+            const query = css.slice(i, braceStart).trim();
+            // Encontrar la llave de cierre balanceada
+            let depth = 1;
+            let j = braceStart + 1;
+            while (j < css.length && depth > 0) {
+                if (css[j] === "{")
+                    depth++;
+                else if (css[j] === "}")
+                    depth--;
+                j++;
+            }
+            const content = css.slice(braceStart + 1, j - 1).trim();
+            if (!mediaBlocks.has(query)) {
+                mediaBlocks.set(query, []);
+            }
+            mediaBlocks.get(query)?.push(content);
+            i = j;
+        }
+        else {
+            // Regla top-level (no @media)
+            const braceStart = css.indexOf("{", i);
+            if (braceStart === -1)
+                break;
+            let depth = 1;
+            let j = braceStart + 1;
+            while (j < css.length && depth > 0) {
+                if (css[j] === "{")
+                    depth++;
+                else if (css[j] === "}")
+                    depth--;
+                j++;
+            }
+            topLevel.push(css.slice(i, j));
+            i = j;
+        }
+    }
+    // Reconstruir: reglas top-level primero, luego media queries agrupadas
+    let result = topLevel.join("\n");
+    for (const [query, contents] of mediaBlocks) {
+        result += `\n${query}{\n${contents.join("\n")}\n}`;
+    }
+    return result;
+}
+/**
+ * Optimiza CSS usando Lightning CSS:
+ * - Merge de media queries idénticas
+ * - Nesting
+ * - Autoprefixing (via browserslist "defaults")
+ * - Minificación
+ *
+ * Imports dinámicos para que solo se carguen cuando se usen.
+ */
+export async function optimizeCSS(css, options = {}) {
+    const { minify = true } = options;
+    // Agrupar media queries idénticas antes de transformar
+    const merged = mergeMediaQueries(css);
+    const { transform, browserslistToTargets, Features } = await import("lightningcss");
+    const browserslist = (await import("browserslist")).default;
+    const targets = browserslistToTargets(browserslist("defaults"));
+    const result = transform({
+        filename: "grisso.css",
+        code: new TextEncoder().encode(merged),
+        minify,
+        targets,
+        include: Features.Nesting,
+    });
+    return new TextDecoder().decode(result.code);
+}

package/lib/partials/flex-and-grid.js

@@ -1,4 +1,4 @@
-import { simpleClass, complexClass } from "../generators.js";
+import { complexClass, simpleClass } from "../generators.js";
 import { omit } from "../utils.js";
 export default function flexAndGrid(config) {
     const { columns, breakpoints, spacing } = config;

package/lib/partials/index.js

@@ -1,12 +1,12 @@
-import layout from "./layout.js";
-import flexAndGrid from "./flex-and-grid.js";
-import spacingPartial from "./spacing.js";
-import sizing from "./sizing.js";
 import backgrounds from "./backgrounds.js";
 import borders from "./borders.js";
-import typography from "./typography.js";
 import effects from "./effects.js";
+import flexAndGrid from "./flex-and-grid.js";
 import icons from "./icons.js";
+import layout from "./layout.js";
+import sizing from "./sizing.js";
+import spacingPartial from "./spacing.js";
+import typography from "./typography.js";
 /**
  * Registry de partials en el orden de importación de grisso.scss.
  * El orden determina la cascada CSS.

package/lib/partials/layout.js

@@ -1,4 +1,4 @@
-import { simpleClass, complexClass } from "../generators.js";
+import { complexClass, simpleClass } from "../generators.js";
 export default function layout(config) {
     const { columns, breakpoints, spacing } = config;
     let css = "";

package/lib/partials/sizing.js

@@ -1,4 +1,4 @@
-import { simpleClass, complexClass } from "../generators.js";
+import { complexClass, simpleClass } from "../generators.js";
 import { fractionPercent } from "../utils.js";
 export default function sizing(config) {
     const { columns, breakpoints } = config;

package/lib/partials/typography.js

@@ -1,4 +1,4 @@
-import { simpleClass, complexClass, customClass } from "../generators.js";
+import { complexClass, customClass, simpleClass } from "../generators.js";
 import { omit } from "../utils.js";
 export default function typography(config) {
     const { breakpoints, foregroundColors, spacing } = config;

package/lib/purge.d.ts

@@ -0,0 +1,12 @@
+export interface PurgeOptions {
+    /** Rutas glob de archivos a escanear */
+    content: string[];
+    /** Patrones greedy adicionales a preservar */
+    safelist?: RegExp[];
+}
+/**
+ * Elimina clases CSS no utilizadas mediante PurgeCSS.
+ * Import dinámico para que los consumidores que no necesiten tree-shaking
+ * no paguen el coste de cargar purgecss.
+ */
+export declare function purgeCSS(css: string, options: PurgeOptions): Promise<string>;

package/lib/purge.js

@@ -0,0 +1,39 @@
+/**
+ * Elimina clases CSS no utilizadas mediante PurgeCSS.
+ * Import dinámico para que los consumidores que no necesiten tree-shaking
+ * no paguen el coste de cargar purgecss.
+ */
+export async function purgeCSS(css, options) {
+    const { PurgeCSS } = await import("purgecss");
+    const purgecss = new PurgeCSS();
+    const [result] = await purgecss.purge({
+        content: options.content,
+        css: [{ raw: css }],
+        extractors: [
+            {
+                // Extractor para uso directo en HTML/JSX: class="flex gap-md"
+                extractor: (content) => content.match(/[A-Za-z0-9_-]+/g) || [],
+                extensions: ["html", "jsx", "tsx", "js", "ts"],
+            },
+            {
+                // Extractor para CSS Modules: composes: flex gap-md from global
+                extractor: (content) => {
+                    const matches = content.match(/composes:\s*([^;]+)\s*from\s+global/g) || [];
+                    const classes = [];
+                    for (const match of matches) {
+                        const classStr = match
+                            .replace(/composes:\s*/, "")
+                            .replace(/\s*from\s+global/, "");
+                        classes.push(...classStr.trim().split(/\s+/));
+                    }
+                    return classes;
+                },
+                extensions: ["css"],
+            },
+        ],
+        safelist: {
+            greedy: [/^bg-/, ...(options.safelist ?? [])],
+        },
+    });
+    return result ? result.css : css;
+}

package/lib/utils.js

@@ -16,5 +16,5 @@ export function omit(obj, ...keys) {
  */
 export function fractionPercent(numerator, denominator) {
     const value = ((numerator / denominator) * 100).toFixed(10);
-    return value.replace(/\.?0+$/, "") + "%";
+    return `${value.replace(/\.?0+$/, "")}%`;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hiscovega/grisso",
 	"description": "Griddo CSS utility class library",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"license": "UNLICENSED",
 	"private": false,
 	"type": "module",
@@ -13,6 +13,7 @@
 			"import": "./plugin.js",
 			"require": "./plugin.cjs"
 		},
+		"./build": "./lib/build.js",
 		"./config": "./lib/defaults.js",
 		"./tokens-example.css": "./tokens-example.css"
 	},
@@ -33,21 +34,29 @@
 		"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",
-		"prepublishOnly": "npm run build"
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"prepublishOnly": "npm run build",
+		"release": "release-it"
 	},
 	"dependencies": {
-		"@fullhuman/postcss-purgecss": "^6.0.0"
+		"browserslist": "^4.24.0",
+		"lightningcss": "^1.28.0",
+		"purgecss": "^6.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.4.5",
 		"@types/node": "^25.3.3",
-		"postcss": "^8.4.47",
-		"postcss-cli": "^11.0.0",
-		"postcss-combine-duplicated-selectors": "^10.0.3",
-		"postcss-discard-empty": "^6.0.0",
-		"postcss-minify": "^1.1.0",
-		"postcss-preset-env": "^10.0.3",
-		"postcss-sort-media-queries": "^5.2.0",
-		"typescript": "^5.9.3"
+		"release-it": "^19.2.4",
+		"typescript": "^5.9.3",
+		"vitest": "^4.0.18"
+	},
+	"peerDependencies": {
+		"postcss": "^8.0.0"
+	},
+	"peerDependenciesMeta": {
+		"postcss": {
+			"optional": true
+		}
 	}
 }

package/plugin.js

@@ -1,10 +1,13 @@
 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).
@@ -12,7 +15,7 @@ import { generateCSS } from "./lib/index.js";
  *
  * @example
  * // postcss.config.js del proyecto consumidor
- * import grisso from "@griddo/grisso/plugin";
+ * import grisso from "@hiscovega/grisso/plugin";
  * export default {
  *   plugins: [
  *     grisso({ content: ["./src/**\/*.{js,ts,jsx,tsx,css}"] })
@@ -25,50 +28,13 @@ export default function grissoPlugin(options = {}) {
 	return {
 		postcssPlugin: "postcss-grisso",
 		async Once(root, { parse }) {
-			const grissoSource = await generateCSS(configPath);
+			let css = await generateCSS(configPath);
 
-			if (!content || content.length === 0) {
-				// Sin tree-shaking: inyectar todo el CSS
-				const grissoRoot = parse(grissoSource);
-				grissoRoot.each((node) => root.prepend(node.clone()));
-				return;
+			if (content && content.length > 0) {
+				css = await purgeCSS(css, { content });
 			}
 
-			// Con tree-shaking: usar PurgeCSS para eliminar clases no usadas
-			const { PurgeCSS } = await import("purgecss");
-
-			const purgecss = new PurgeCSS();
-			const [result] = await purgecss.purge({
-				content,
-				css: [{ raw: grissoSource }],
-				extractors: [
-					{
-						// Extractor para uso directo en HTML/JSX: class="flex gap-md"
-						extractor: (content) => content.match(/[A-Za-z0-9_-]+/g) || [],
-						extensions: ["html", "jsx", "tsx", "js", "ts"],
-					},
-					{
-						// Extractor para CSS Modules: composes: flex gap-md from global
-						extractor: (content) => {
-							const matches = content.match(/composes:\s*([^;]+)\s*from\s+global/g) || [];
-							const classes = [];
-							for (const match of matches) {
-								const classStr = match.replace(/composes:\s*/, "").replace(/\s*from\s+global/, "");
-								classes.push(...classStr.trim().split(/\s+/));
-							}
-							return classes;
-						},
-						extensions: ["css"],
-					},
-				],
-				safelist: {
-					// Preservar clases de fondo (bg-) que pueden construirse dinámicamente
-					greedy: [/^bg-/],
-				},
-			});
-
-			const purgedCSS = result ? result.css : grissoSource;
-			const grissoRoot = parse(purgedCSS);
+			const grissoRoot = parse(css);
 			grissoRoot.each((node) => root.prepend(node.clone()));
 		},
 	};

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.