@hiscovega/grisso 1.0.2 → 1.0.4

package/README.md

@@ -5,7 +5,7 @@
 ## Instalación
 
 ```bash
-npm install @griddo/grisso
+npm install @hiscovega/grisso
 ```
 
 ## Uso
@@ -16,13 +16,13 @@ Importa el CSS pre-compilado directamente. Útil para desarrollo o cuando no usa
 
 ```css
 /* En tu CSS global */
-@import "@griddo/grisso";
+@import "@hiscovega/grisso";
 ```
 
 O en HTML:
 
 ```html
-<link rel="stylesheet" href="node_modules/@griddo/grisso/dist/grisso.css" />
+<link rel="stylesheet" href="node_modules/@hiscovega/grisso/dist/grisso.css" />
 ```
 
 ### Opción B: PostCSS plugin (recomendado — con tree-shaking)
@@ -31,7 +31,7 @@ Añade el plugin a tu configuración de PostCSS. El CSS de Grisso se inyecta aut
 
 ```js
 // postcss.config.js
-import grisso from "@griddo/grisso/plugin";
+import grisso from "@hiscovega/grisso/plugin";
 
 export default {
   plugins: [
@@ -48,6 +48,104 @@ Sin `content`, se incluye todo el CSS (útil en desarrollo):
 grisso();
 ```
 
+### Opción C: API programática (sin PostCSS)
+
+Usa `buildCSS()` directamente desde Node.js. Genera, purga y optimiza CSS sin depender de PostCSS — ideal para scripts de build, herramientas custom o entornos donde PostCSS no está disponible.
+
+```js
+import { buildCSS } from "@hiscovega/grisso/build";
+
+// Build completo (todo el CSS, minificado)
+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 |
+
+Sin `content`, se incluye todo el CSS. Con `content`, se eliminan las clases no usadas via PurgeCSS.
+
+#### Ejemplos
+
+**Tree-shaking** — solo las clases que usa tu proyecto:
+
+```js
+const css = await buildCSS({
+  content: ["./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.css"],
+});
+```
+
+**Config personalizada + tree-shaking:**
+
+```js
+const css = await buildCSS({
+  config: "./grisso.config.mjs",
+  content: ["./src/**/*.{js,ts,jsx,tsx,css}"],
+});
+```
+
+**CSS sin minificar** (útil para depuración):
+
+```js
+const css = await buildCSS({ minify: false });
+```
+
+**Script de build** — genera un archivo CSS para producción:
+
+```js
+// scripts/build-css.mjs
+import { writeFileSync } from "node:fs";
+import { buildCSS } from "@hiscovega/grisso/build";
+
+const css = await buildCSS({
+  content: ["./src/**/*.{jsx,tsx,css}"],
+  config: "./grisso.config.mjs",
+});
+
+writeFileSync("./dist/styles.css", css);
+console.log(`CSS generado: ${css.length} bytes`);
+```
+
+**Integración con Vite** (plugin custom):
+
+```js
+// vite.config.js
+import { buildCSS } from "@hiscovega/grisso/build";
+
+export default {
+  plugins: [
+    {
+      name: "grisso",
+      async buildStart() {
+        const css = await buildCSS({
+          content: ["./src/**/*.{jsx,tsx,css}"],
+        });
+        this.emitFile({ type: "asset", fileName: "grisso.css", source: css });
+      },
+    },
+  ],
+};
+```
+
+**Servidor de desarrollo** — generar CSS on-the-fly:
+
+```js
+// Ejemplo con Express
+import express from "express";
+import { buildCSS } from "@hiscovega/grisso/build";
+
+const app = express();
+
+app.get("/grisso.css", async (req, res) => {
+  const css = await buildCSS({ minify: false });
+  res.type("text/css").send(css);
+});
+```
+
 ## 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:
@@ -85,14 +183,14 @@ grisso({
 
 Si no se pasa `config`, el plugin busca automáticamente `grisso.config.mjs` en el directorio de trabajo. Si no existe, usa los defaults.
 
-Los defaults se pueden consultar importando `@griddo/grisso/config`.
+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:
 
 ```bash
-cp node_modules/@griddo/grisso/tokens-example.css src/tokens.css
+cp node_modules/@hiscovega/grisso/tokens-example.css src/tokens.css
 ```
 
 ```css
@@ -110,7 +208,7 @@ Importa los tokens antes que Grisso en tu CSS global:
 
 ```css
 @import "./tokens.css";
-@import "@griddo/grisso"; /* o via plugin de PostCSS */
+@import "@hiscovega/grisso"; /* o via plugin de PostCSS */
 ```
 
 ## Clases disponibles
@@ -152,6 +250,8 @@ Ejemplos: `flex`, `tablet-flex`, `p-md`, `desktop-mt-lg`, `text-center`
 npm run build       # Compila TS + genera dist/grisso.css (~156 KB)
 npm run typecheck   # Type-check sin emitir (tsc --noEmit)
 npm run lint        # Lint con Biome
+npm test            # Tests con Vitest
+npm run test:watch  # Tests en modo watch
 npm run playground  # Build + tree-shake + abre playground/index.html
 ```
 
@@ -185,6 +285,24 @@ simpleClass("flex", "display", "flex", breakpoints);
 complexClass("p-", "padding", spacing, breakpoints);
 ```
 
+## Publicación (release)
+
+El proyecto usa [release-it](https://github.com/release-it/release-it) para gestionar versiones y publicación a npm. Antes de publicar se ejecutan automáticamente lint, tests y build.
+
+```bash
+npm run release              # Bump interactivo (patch/minor/major)
+npm run release -- patch     # Bump patch directo
+npm run release -- minor     # Bump minor directo
+npm run release -- major     # Bump major directo
+```
+
+El flujo de release:
+
+1. Ejecuta `npm run lint`, `npm test` y `npm run build`
+2. Bump de versión en `package.json`
+3. Commit `chore: release v{version}` + tag `v{version}`
+4. Publica a npm
+
 ## grisso-reduce (tree-shaking alternativo)
 
 `grisso-reduce/index.ts` es una herramienta alternativa de tree-shaking que escanea declaraciones `composes: ... from global` en archivos CSS y elimina clases no usadas del output.