@hiscovega/grisso 2.0.0-rc.2 → 2.0.0-rc.3

package/README.md

@@ -250,7 +250,7 @@ Alternativa al uso de clases directamente en HTML. Permite usar clases Grisso de
 npm install -D postcss
 ```
 
-**Configuración PostCSS:**
+**Configuración PostCSS (ESM):**
 
 ```js
 // postcss.config.mjs
@@ -261,6 +261,17 @@ export default {
 };
 ```
 
+**Configuración PostCSS (CommonJS):**
+
+```js
+// postcss.config.js
+const grissoApply = require("@hiscovega/grisso/postcss");
+
+module.exports = {
+  plugins: [grissoApply({ config: "./grisso.config.mjs" })],
+};
+```
+
 **Uso en CSS Modules:**
 
 ```css
@@ -430,19 +441,19 @@ Importa los tokens antes que Grisso en tu CSS global:
 ### Nomenclatura
 
 ```
-{breakpoint}-{state}-{propiedad}-{escala}
+{breakpoint}:{state}:{propiedad}-{escala}
 ```
 
-Ejemplos: `flex`, `tablet-flex`, `p-md`, `hover-bg-1`, `focus-border-1`, `tablet-hover-p-sm`, `desktop-mt-lg`, `w-1/2`
+Ejemplos: `flex`, `tablet:flex`, `p-md`, `hover:bg-1`, `focus:border-1`, `tablet:hover:p-sm`, `desktop:mt-lg`, `w-1/2`
 
 ### Breakpoints (mobile-first)
 
 | Prefijo         | Tamaño  |
 | --------------- | ------- |
 | _(sin prefijo)_ | 0px+    |
-| `tablet-`       | 700px+  |
-| `desktop-`      | 1024px+ |
-| `ultrawide-`    | 1680px+ |
+| `tablet:`       | 700px+  |
+| `desktop:`      | 1024px+ |
+| `ultrawide:`    | 1680px+ |
 
 ### State variants
 
@@ -450,13 +461,13 @@ Todas las utilidades generan variantes de estado automáticamente. El tree-shaki
 
 | Prefijo            | Pseudo-clase     |
 | ------------------ | ---------------- |
-| `hover-`           | `:hover`         |
-| `focus-`           | `:focus`         |
-| `focus-visible-`   | `:focus-visible` |
-| `active-`          | `:active`        |
-| `disabled-`        | `:disabled`      |
+| `hover:`           | `:hover`         |
+| `focus:`           | `:focus`         |
+| `focus-visible:`   | `:focus-visible` |
+| `active:`          | `:active`        |
+| `disabled:`        | `:disabled`      |
 
-Se combinan con breakpoints: `tablet-hover-bg-1`, `desktop-focus-p-sm`.
+Se combinan con breakpoints: `tablet:hover:bg-1`, `desktop:focus:p-sm`.
 
 Orden del cascade: base → state → responsive → responsive+state.
 
@@ -681,7 +692,7 @@ import { simpleClass, complexClass } from "../generators.js";
 // Clase simple — genera .flex + variantes de estado y responsive
 simpleClass("flex", "display", "flex", breakpoints, states);
 
-// Clase basada en tokens — genera .p-xs, .hover-p-xs:hover, .tablet-p-xs, etc.
+// Clase basada en tokens — genera .p-xs, .hover\:p-xs:hover, .tablet\:p-xs, etc.
 complexClass("p-", "padding", spacing, breakpoints, states);
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hiscovega/grisso",
 	"description": "Griddo CSS utility class library",
-	"version": "2.0.0-rc.2",
+	"version": "2.0.0-rc.3",
 	"license": "UNLICENSED",
 	"private": false,
 	"type": "module",
@@ -12,7 +12,10 @@
 		"./build": "./lib/build.js",
 		"./tokens": "./lib/tokens.js",
 		"./config": "./lib/defaults.js",
-		"./postcss": "./lib/postcss.js",
+		"./postcss": {
+			"import": "./lib/postcss.js",
+			"require": "./postcss.cjs"
+		},
 		"./tokens-example.css": "./tokens-example.css"
 	},
 	"engines": {
@@ -24,6 +27,7 @@
 	"files": [
 		"dist/",
 		"lib/",
+		"postcss.cjs",
 		"tokens-example.css",
 		"vscode-css-custom-data.json",
 		"README.md"

package/postcss.cjs

@@ -0,0 +1,19 @@
+/**
+ * Wrapper CommonJS del plugin PostCSS de Grisso.
+ * Carga dinámicamente el módulo ESM — funciona porque el hook Once es async.
+ */
+let _mod;
+
+const plugin = (opts) => {
+	let delegate;
+	return {
+		postcssPlugin: "grisso-apply",
+		async Once(root, helpers) {
+			if (!_mod) _mod = await import("./lib/postcss.js");
+			if (!delegate) delegate = _mod.default(opts);
+			return delegate.Once(root, helpers);
+		},
+	};
+};
+plugin.postcss = true;
+module.exports = plugin;