@hiscovega/grisso 1.0.0

package/lib/partials/layout.js

@@ -0,0 +1,126 @@
+import { simpleClass, complexClass } from "../generators.js";
+export default function layout(config) {
+    const { columns, breakpoints, spacing } = config;
+    let css = "";
+    // display
+    const display = {
+        block: "block",
+        inline: "inline",
+        "inline-block": "inline-block",
+        flex: "flex",
+        "inline-flex": "inline-flex",
+        grid: "grid",
+        "inline-grid": "inline-grid",
+        "inline-table": "inline-table",
+        table: "table",
+        "table-row": "table-row",
+        "table-caption": "table-caption",
+        "table-cell": "table-cell",
+        "table-column": "table-column",
+        "table-column-group": "table-column-group",
+        "table-footer-group": "table-footer-group",
+        "table-header-group": "table-header-group",
+        "table-row-group": "table-row-group",
+        contents: "contents",
+        "flow-root": "flow-root",
+        "list-item": "list-item",
+        hidden: "none",
+    };
+    css += complexClass("", "display", display, breakpoints);
+    // columns (numeric)
+    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",
+        right: "right",
+        none: "none",
+    };
+    css += complexClass("float-", "float", float, breakpoints);
+    // clear
+    const clear = {
+        left: "left",
+        right: "right",
+        both: "both",
+        none: "none",
+    };
+    css += complexClass("clear-", "clear", clear, breakpoints);
+    // object-fit
+    const objectFit = {
+        contain: "contain",
+        cover: "cover",
+        fill: "fill",
+        none: "none",
+        "scale-down": "scale-down",
+    };
+    css += complexClass("object-", "object-fit", objectFit, breakpoints);
+    // object-position
+    const objectPosition = {
+        bottom: "bottom",
+        center: "center",
+        left: "left",
+        "left-bottom": "left bottom",
+        "left-top": "left top",
+        right: "right",
+        "right-bottom": "right bottom",
+        "right-top": "right top",
+        top: "top",
+    };
+    css += complexClass("object-", "object-position", objectPosition, breakpoints);
+    // overflow
+    const overflow = {
+        auto: "auto",
+        hidden: "hidden",
+        clip: "clip",
+        visible: "visible",
+        scroll: "scroll",
+    };
+    css += complexClass("overflow-", "overflow", overflow, breakpoints);
+    css += complexClass("overflow-x-", "overflow-x", overflow, breakpoints);
+    css += complexClass("overflow-y-", "overflow-y", overflow, breakpoints);
+    // position
+    const position = {
+        static: "static",
+        fixed: "fixed",
+        absolute: "absolute",
+        relative: "relative",
+        sticky: "sticky",
+    };
+    css += complexClass("", "position", position, breakpoints);
+    // visibility
+    css += simpleClass("visible", "visibility", "visible", breakpoints);
+    css += simpleClass("invisible", "visibility", "hidden", breakpoints);
+    css += simpleClass("collapse", "visibility", "collapse", breakpoints);
+    // z-index
+    const zIndex = {
+        auto: "auto",
+        "0": "0",
+        "1": "10",
+        "20": "20",
+        "30": "30",
+        "40": "40",
+        "50": "50",
+    };
+    const zIndexNeg = {
+        "1": "-10",
+        "20": "-20",
+        "30": "-30",
+        "40": "-40",
+        "50": "-50",
+    };
+    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);
+    return css;
+}

package/lib/partials/sizing.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function sizing(config: GrissoConfig): string;

package/lib/partials/sizing.js

@@ -0,0 +1,39 @@
+import { simpleClass, complexClass } from "../generators.js";
+import { fractionPercent } from "../utils.js";
+export default function sizing(config) {
+    const { columns, breakpoints } = config;
+    let css = "";
+    // width
+    const width = {
+        auto: "auto",
+        "0": "0",
+        full: "100%",
+        screen: "100vw",
+        min: "min-content",
+        max: "max-content",
+        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);
+    }
+    css += complexClass("min-w-", "min-width", width, breakpoints);
+    css += complexClass("max-w-", "max-width", width, breakpoints);
+    // height
+    const height = {
+        auto: "auto",
+        "0": "0",
+        full: "100%",
+        screen: "100vh",
+        min: "min-content",
+        max: "max-content",
+        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);
+    }
+    css += complexClass("min-h-", "min-height", height, breakpoints);
+    css += complexClass("max-h-", "max-height", height, breakpoints);
+    return css;
+}

package/lib/partials/spacing.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function spacingPartial(config: GrissoConfig): string;

package/lib/partials/spacing.js

@@ -0,0 +1,24 @@
+import { complexClass } from "../generators.js";
+import { omit } from "../utils.js";
+export default function spacingPartial(config) {
+    const { breakpoints, spacing } = config;
+    let css = "";
+    // margin (incluye "auto")
+    css += complexClass("m-", "margin", spacing, breakpoints);
+    css += complexClass("mt-", "margin-top", spacing, breakpoints);
+    css += complexClass("mr-", "margin-right", spacing, breakpoints);
+    css += complexClass("mb-", "margin-bottom", spacing, breakpoints);
+    css += complexClass("ml-", "margin-left", spacing, breakpoints);
+    css += complexClass("mx-", "margin-inline", spacing, breakpoints);
+    css += complexClass("my-", "margin-block", spacing, breakpoints);
+    // padding (sin "auto")
+    const padding = omit(spacing, "auto");
+    css += complexClass("p-", "padding", padding, breakpoints);
+    css += complexClass("pt-", "padding-top", padding, breakpoints);
+    css += complexClass("pr-", "padding-right", padding, breakpoints);
+    css += complexClass("pb-", "padding-bottom", padding, breakpoints);
+    css += complexClass("pl-", "padding-left", padding, breakpoints);
+    css += complexClass("px-", "padding-inline", padding, breakpoints);
+    css += complexClass("py-", "padding-block", padding, breakpoints);
+    return css;
+}

package/lib/partials/typography.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function typography(config: GrissoConfig): string;

package/lib/partials/typography.js

@@ -0,0 +1,111 @@
+import { simpleClass, complexClass, customClass } from "../generators.js";
+import { omit } from "../utils.js";
+export default function typography(config) {
+    const { breakpoints, foregroundColors, spacing } = config;
+    let css = "";
+    // text-color
+    css += complexClass("text-", "color", foregroundColors, breakpoints);
+    // text-align
+    const textAlign = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "justify",
+        start: "start",
+        end: "end",
+    };
+    css += complexClass("text-", "text-align", textAlign, breakpoints);
+    // text-transform
+    const textTransform = {
+        uppercase: "uppercase",
+        lowercase: "lowercase",
+        capitalize: "capitalize",
+        "normal-case": "none",
+    };
+    css += complexClass("", "text-transform", textTransform, breakpoints);
+    // text-overflow
+    const textOverflow = {
+        ellipsis: "ellipsis",
+        clip: "clip",
+    };
+    css += complexClass("text-", "text-overflow", textOverflow, breakpoints);
+    css += customClass("truncate", {
+        overflow: "hidden",
+        "text-overflow": "ellipsis",
+        "white-space": "nowrap",
+    }, breakpoints);
+    // vertical-align
+    const verticalAlign = {
+        baseline: "baseline",
+        top: "top",
+        middle: "middle",
+        bottom: "bottom",
+        "text-top": "text-top",
+        "text-bottom": "text-bottom",
+        sub: "sub",
+        super: "super",
+    };
+    css += complexClass("align-", "vertical-align", verticalAlign, breakpoints);
+    // white-space
+    const whiteSpace = {
+        normal: "normal",
+        nowrap: "nowrap",
+        pre: "pre",
+        "pre-line": "pre-line",
+        "pre-wrap": "pre-wrap",
+        "break-spaces": "break-spaces",
+    };
+    css += complexClass("whitespace-", "white-space", whiteSpace, breakpoints);
+    // word-break
+    const wordBreak = {
+        all: "break-all",
+        keep: "keep-all",
+    };
+    css += complexClass("break-", "word-break", wordBreak, breakpoints);
+    css += simpleClass("break-words", "overflow-wrap", "break-word", breakpoints);
+    css += customClass("break-normal", { "overflow-wrap": "normal", "word-break": "normal" }, breakpoints);
+    // font-smoothing
+    css += customClass("antialiased", {
+        "-webkit-font-smoothing": "antialiased",
+        "-moz-osx-font-smoothing": "grayscale",
+    }, breakpoints);
+    css += customClass("subpixel-antialiased", {
+        "-webkit-font-smoothing": "auto",
+        "-moz-osx-font-smoothing": "auto",
+    }, breakpoints);
+    // font-style
+    const fontStyle = {
+        italic: "italic",
+        "not-italic": "normal",
+    };
+    css += complexClass("", "font-style", fontStyle, breakpoints);
+    // font-weight
+    const fontWeight = {
+        thin: "100",
+        extralight: "200",
+        light: "200",
+        normal: "400",
+        medium: "500",
+        semibold: "600",
+        bold: "700",
+        extrabold: "800",
+        black: "900",
+    };
+    css += complexClass("font-", "font-weight", fontWeight, breakpoints);
+    // letter-spacing
+    const letterSpacing = omit(spacing, "auto");
+    css += complexClass("tracking-", "letter-spacing", letterSpacing, breakpoints);
+    // line-height
+    const lineHeight = omit(spacing, "auto", "zero");
+    const extendedLineHeight = {
+        ...lineHeight,
+        none: "1",
+        tight: "1.25",
+        snug: "1.3755",
+        normal: "1.5",
+        relaxed: "1.625",
+        loose: "2",
+    };
+    css += complexClass("leading-", "line-height", extendedLineHeight, breakpoints);
+    return css;
+}

package/lib/resolve-config.d.ts

@@ -0,0 +1,8 @@
+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
+ */
+export declare function resolveConfig(configPath?: string): Promise<GrissoConfig>;

package/lib/resolve-config.js

@@ -0,0 +1,54 @@
+import path from "node:path";
+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
+ */
+export async function resolveConfig(configPath) {
+    let userConfig;
+    if (configPath) {
+        const resolved = path.resolve(configPath);
+        const mod = await import(pathToFileURL(resolved).href);
+        userConfig = mod.default;
+    }
+    else {
+        try {
+            const defaultPath = path.resolve(process.cwd(), "grisso.config.mjs");
+            const mod = await import(pathToFileURL(defaultPath).href);
+            userConfig = mod.default;
+        }
+        catch {
+            return { ...defaults };
+        }
+    }
+    const { extend, ...overrides } = userConfig;
+    // Top-level keys reemplazan defaults completamente
+    const config = { ...defaults };
+    for (const [key, value] of Object.entries(overrides)) {
+        if (key in config) {
+            config[key] = value;
+        }
+    }
+    // extend mergea superficialmente con defaults
+    if (extend && typeof extend === "object" && !Array.isArray(extend)) {
+        for (const [key, value] of Object.entries(extend)) {
+            const current = config[key];
+            if (key in config &&
+                typeof current === "object" &&
+                current !== null &&
+                !Array.isArray(current)) {
+                config[key] = {
+                    ...current,
+                    ...value,
+                };
+            }
+            else {
+                config[key] = value;
+            }
+        }
+    }
+    return config;
+}

package/lib/types.d.ts

@@ -0,0 +1,25 @@
+/** Mapa de breakpoints: nombre → media query */
+export type Breakpoints = Record<string, string>;
+/** Mapa de tokens: nombre → valor CSS */
+export type TokenMap = Record<string, string>;
+/** Mapa de declaraciones CSS: propiedad → valor */
+export type Declarations = Record<string, string>;
+/** Configuración completa de Grisso */
+export interface GrissoConfig {
+    columns: number;
+    breakpoints: Breakpoints;
+    spacing: TokenMap;
+    brandColors: TokenMap;
+    foregroundColors: TokenMap;
+    iconColors: TokenMap;
+    supportColors: TokenMap;
+    backgroundColors: TokenMap;
+    overlayColors: TokenMap;
+    borderWidth: TokenMap;
+    opacity: TokenMap;
+    shadows: TokenMap;
+    borderColors: TokenMap;
+    [key: string]: unknown;
+}
+/** Función parcial que genera CSS a partir de la config */
+export type PartialFn = (config: GrissoConfig) => string;

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/lib/utils.d.ts

@@ -0,0 +1,12 @@
+import type { TokenMap } from "./types.js";
+/**
+ * Elimina keys de un objeto.
+ * Equivalente a sass:map.remove()
+ */
+export declare function omit(obj: TokenMap, ...keys: string[]): TokenMap;
+/**
+ * Calcula un porcentaje con 10 decimales (paridad con Dart Sass).
+ * fractionPercent(1, 12) → "8.3333333333%"
+ * fractionPercent(3, 12) → "25%"
+ */
+export declare function fractionPercent(numerator: number, denominator: number): string;

package/lib/utils.js

@@ -0,0 +1,20 @@
+/**
+ * Elimina keys de un objeto.
+ * Equivalente a sass:map.remove()
+ */
+export function omit(obj, ...keys) {
+    const result = { ...obj };
+    for (const key of keys) {
+        delete result[key];
+    }
+    return result;
+}
+/**
+ * Calcula un porcentaje con 10 decimales (paridad con Dart Sass).
+ * fractionPercent(1, 12) → "8.3333333333%"
+ * fractionPercent(3, 12) → "25%"
+ */
+export function fractionPercent(numerator, denominator) {
+    const value = ((numerator / denominator) * 100).toFixed(10);
+    return value.replace(/\.?0+$/, "") + "%";
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@hiscovega/grisso",
+	"description": "Griddo CSS utility class library",
+	"version": "1.0.0",
+	"license": "UNLICENSED",
+	"private": false,
+	"type": "module",
+	"exports": {
+		".": {
+			"style": "./dist/grisso.css"
+		},
+		"./plugin": "./plugin.js",
+		"./config": "./lib/defaults.js",
+		"./tokens-example.css": "./tokens-example.css"
+	},
+	"engines": {
+		"node": ">=24"
+	},
+	"files": [
+		"dist/",
+		"lib/",
+		"plugin.js",
+		"tokens-example.css",
+		"README.md"
+	],
+	"scripts": {
+		"build": "tsc && node scripts/build.js",
+		"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",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"@fullhuman/postcss-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"
+	}
+}

package/plugin.js

@@ -0,0 +1,77 @@
+import { generateCSS } from "./lib/index.js";
+
+/**
+ * PostCSS plugin de Grisso.
+ * Genera CSS desde JS y aplica tree-shaking usando PurgeCSS
+ * si se pasan rutas de contenido.
+ *
+ * @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 }) {
+			const grissoSource = 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;
+			}
+
+			// 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);
+			grissoRoot.each((node) => root.prepend(node.clone()));
+		},
+	};
+}
+
+grissoPlugin.postcss = true;

package/tokens-example.css

@@ -0,0 +1,80 @@
+/* @griddo/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.
+
+   Todas las clases de Grisso referencian estas custom properties,
+   por lo que cambiar estos valores afecta a toda la librería sin
+   necesidad de recompilar el SCSS.
+*/
+
+:root {
+	/* ─── Spacing ─────────────────────────────────────────────── */
+	--spc-4xs: 2px;
+	--spc-3xs: 4px;
+	--spc-2xs: 8px;
+	--spc-xs: 12px;
+	--spc-sm: 16px;
+	--spc-md: 24px;
+	--spc-lg: 32px;
+	--spc-xl: 40px;
+	--spc-2xl: 48px;
+	--spc-3xl: 64px;
+	--spc-4xl: 80px;
+	--spc-5xl: 96px;
+
+	/* ─── Colors: texto ───────────────────────────────────────── */
+	--text-1: #111827;
+	--text-2: #374151;
+	--text-3: #6b7280;
+	--text-4: #9ca3af;
+
+	/* ─── Colors: fondo ───────────────────────────────────────── */
+	--bg-ui: #ffffff;
+	--bg-1: #f9fafb;
+	--bg-2: #f3f4f6;
+	--bg-3: #e5e7eb;
+	--bg-4: #d1d5db;
+	--bg-5: #9ca3af;
+	--bg-disabled: #e5e7eb;
+
+	/* ─── Colors: bordes ──────────────────────────────────────── */
+	--border-1: #e5e7eb;
+	--border-2: #d1d5db;
+	--border-3: #9ca3af;
+	--border-4: #6b7280;
+	--border-disabled: #d1d5db;
+
+	/* ─── Colors: iconos ──────────────────────────────────────── */
+	--icon-1: #111827;
+	--icon-2: #374151;
+	--icon-3: #6b7280;
+	--icon-4: #9ca3af;
+	--icon-disabled: #d1d5db;
+
+	/* ─── Colors: overlays ────────────────────────────────────── */
+	--overlay-1: rgba(0 0 0 / 0.1);
+	--overlay-2: rgba(0 0 0 / 0.2);
+	--overlay-3: rgba(0 0 0 / 0.4);
+	--overlay-4: rgba(0 0 0 / 0.7);
+
+	/* ─── Border widths ───────────────────────────────────────── */
+	--border-width-none: 0px;
+	--border-width-xs: 1px;
+	--border-width-sm: 2px;
+	--border-width-md: 4px;
+	--border-width-lg: 8px;
+
+	/* ─── Opacidad ────────────────────────────────────────────── */
+	--opacity-1: 0.1;
+	--opacity-2: 0.2;
+	--opacity-3: 0.4;
+	--opacity-4: 0.6;
+	--opacity-5: 0.75;
+	--opacity-6: 0.9;
+
+	/* ─── Sombras ─────────────────────────────────────────────── */
+	--box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+	--box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+	--box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}