@hiscovega/grisso 1.0.5 → 1.0.7

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

@@ -1,7 +1,7 @@
 import { complexClass, simpleClass } from "../generators.js";
 import { omit } from "../utils.js";
 export default function flexAndGrid(config) {
-    const { columns, breakpoints, spacing } = config;
+    const { columns, breakpoints, states, spacing } = config;
     let css = "";
     // flex-direction
     const direction = {
@@ -10,14 +10,14 @@ export default function flexAndGrid(config) {
         col: "column",
         "col-reverse": "column-reverse",
     };
-    css += complexClass("flex-", "flex-direction", direction, breakpoints);
+    css += complexClass("flex-", "flex-direction", direction, breakpoints, states);
     // flex-wrap
     const wrap = {
         wrap: "wrap",
         "wrap-reverse": "wrap-reverse",
         nowrap: "nowrap",
     };
-    css += complexClass("flex-", "flex-wrap", wrap, breakpoints);
+    css += complexClass("flex-", "flex-wrap", wrap, breakpoints, states);
     // flex (shorthand)
     const flex = {
         "1": "1 1 0",
@@ -25,20 +25,20 @@ export default function flexAndGrid(config) {
         initial: "0 1 auto",
         none: "none",
     };
-    css += complexClass("flex-", "flex", flex, breakpoints);
+    css += complexClass("flex-", "flex", flex, breakpoints, states);
     // flex-grow
-    css += simpleClass("grow", "flex-grow", "1", breakpoints);
-    css += simpleClass("grow-0", "flex-grow", "0", breakpoints);
+    css += simpleClass("grow", "flex-grow", "1", breakpoints, states);
+    css += simpleClass("grow-0", "flex-grow", "0", breakpoints, states);
     // flex-shrink
-    css += simpleClass("shrink", "flex-shrink", "1", breakpoints);
-    css += simpleClass("shrink-0", "flex-shrink", "0", breakpoints);
+    css += simpleClass("shrink", "flex-shrink", "1", breakpoints, states);
+    css += simpleClass("shrink-0", "flex-shrink", "0", breakpoints, states);
     // order
     for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`order-${i}`, "order", String(i), breakpoints);
+        css += simpleClass(`order-${i}`, "order", String(i), breakpoints, states);
     }
-    css += simpleClass("order-first", "order", "-9999", breakpoints);
-    css += simpleClass("order-last", "order", "9999", breakpoints);
-    css += simpleClass("order-none", "order", "0", breakpoints);
+    css += simpleClass("order-first", "order", "-9999", breakpoints, states);
+    css += simpleClass("order-last", "order", "9999", breakpoints, states);
+    css += simpleClass("order-none", "order", "0", breakpoints, states);
     // justify-items
     const justifyItems = {
         start: "start",
@@ -46,7 +46,7 @@ export default function flexAndGrid(config) {
         center: "center",
         stretch: "stretch",
     };
-    css += complexClass("justify-items-", "justify-items", justifyItems, breakpoints);
+    css += complexClass("justify-items-", "justify-items", justifyItems, breakpoints, states);
     // justify-content
     const justifyContent = {
         normal: "normal",
@@ -58,7 +58,7 @@ export default function flexAndGrid(config) {
         evenly: "space-evenly",
         stretch: "stretch",
     };
-    css += complexClass("justify-", "justify-content", justifyContent, breakpoints);
+    css += complexClass("justify-", "justify-content", justifyContent, breakpoints, states);
     // align-items
     const alignItems = {
         start: "flex-start",
@@ -67,7 +67,7 @@ export default function flexAndGrid(config) {
         baseline: "baseline",
         stretch: "stretch",
     };
-    css += complexClass("items-", "align-items", alignItems, breakpoints);
+    css += complexClass("items-", "align-items", alignItems, breakpoints, states);
     // align-content
     const alignContent = {
         normal: "normal",
@@ -80,7 +80,7 @@ export default function flexAndGrid(config) {
         baseline: "baseline",
         stretch: "stretch",
     };
-    css += complexClass("content-", "align-content", alignContent, breakpoints);
+    css += complexClass("content-", "align-content", alignContent, breakpoints, states);
     // align-self
     const alignSelf = {
         auto: "normal",
@@ -90,7 +90,7 @@ export default function flexAndGrid(config) {
         baseline: "baseline",
         stretch: "stretch",
     };
-    css += complexClass("self-", "align-self", alignSelf, breakpoints);
+    css += complexClass("self-", "align-self", alignSelf, breakpoints, states);
     // justify-self
     const justifySelf = {
         auto: "auto",
@@ -99,38 +99,38 @@ export default function flexAndGrid(config) {
         center: "center",
         stretch: "stretch",
     };
-    css += complexClass("justify-self-", "justify-self", justifySelf, breakpoints);
+    css += complexClass("justify-self-", "justify-self", justifySelf, breakpoints, states);
     // grid-template-columns
     for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`grid-cols-${i}`, "grid-template-columns", `repeat(${i}, minmax(0, 1fr))`, breakpoints);
+        css += simpleClass(`grid-cols-${i}`, "grid-template-columns", `repeat(${i}, minmax(0, 1fr))`, breakpoints, states);
     }
-    css += simpleClass("grid-cols-none", "grid-template-columns", "none", breakpoints);
+    css += simpleClass("grid-cols-none", "grid-template-columns", "none", breakpoints, states);
     // grid-column start/end
-    css += simpleClass("col-auto", "grid-column", "auto", breakpoints);
+    css += simpleClass("col-auto", "grid-column", "auto", breakpoints, states);
     for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`col-span-${i}`, "grid-column", `span ${i} / span ${i}`, breakpoints);
-        css += simpleClass(`col-start-${i}`, "grid-column-start", String(i), breakpoints);
-        css += simpleClass(`col-end-${i}`, "grid-column-end", String(i), breakpoints);
+        css += simpleClass(`col-span-${i}`, "grid-column", `span ${i} / span ${i}`, breakpoints, states);
+        css += simpleClass(`col-start-${i}`, "grid-column-start", String(i), breakpoints, states);
+        css += simpleClass(`col-end-${i}`, "grid-column-end", String(i), breakpoints, states);
     }
-    css += simpleClass("col-end-13", "grid-column-end", "13", breakpoints);
-    css += simpleClass("col-span-full", "grid-column", "1 / -1", breakpoints);
-    css += simpleClass("col-start-auto", "grid-column-start", "auto", breakpoints);
-    css += simpleClass("col-end-auto", "grid-column-end", "auto", breakpoints);
+    css += simpleClass("col-end-13", "grid-column-end", "13", breakpoints, states);
+    css += simpleClass("col-span-full", "grid-column", "1 / -1", breakpoints, states);
+    css += simpleClass("col-start-auto", "grid-column-start", "auto", breakpoints, states);
+    css += simpleClass("col-end-auto", "grid-column-end", "auto", breakpoints, states);
     // grid-template-rows
     for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`grid-rows-${i}`, "grid-template-rows", `repeat(${i}, minmax(0, 1fr))`, breakpoints);
+        css += simpleClass(`grid-rows-${i}`, "grid-template-rows", `repeat(${i}, minmax(0, 1fr))`, breakpoints, states);
     }
-    css += simpleClass("grid-rows-none", "grid-template-rows", "none", breakpoints);
+    css += simpleClass("grid-rows-none", "grid-template-rows", "none", breakpoints, states);
     // grid-row start/end
-    css += simpleClass("row-auto", "grid-row", "auto", breakpoints);
+    css += simpleClass("row-auto", "grid-row", "auto", breakpoints, states);
     for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`row-span-${i}`, "grid-row", `span ${i} / span ${i}`, breakpoints);
-        css += simpleClass(`row-start-${i}`, "grid-row-start", String(i), breakpoints);
-        css += simpleClass(`row-end-${i}`, "grid-row-end", String(i), breakpoints);
+        css += simpleClass(`row-span-${i}`, "grid-row", `span ${i} / span ${i}`, breakpoints, states);
+        css += simpleClass(`row-start-${i}`, "grid-row-start", String(i), breakpoints, states);
+        css += simpleClass(`row-end-${i}`, "grid-row-end", String(i), breakpoints, states);
     }
-    css += simpleClass("row-span-full", "grid-row", "1 / -1", breakpoints);
-    css += simpleClass("row-start-auto", "grid-row-start", "auto", breakpoints);
-    css += simpleClass("row-end-auto", "grid-row-end", "auto", breakpoints);
+    css += simpleClass("row-span-full", "grid-row", "1 / -1", breakpoints, states);
+    css += simpleClass("row-start-auto", "grid-row-start", "auto", breakpoints, states);
+    css += simpleClass("row-end-auto", "grid-row-end", "auto", breakpoints, states);
     // grid-auto-flow
     const autoFlow = {
         row: "row",
@@ -139,7 +139,7 @@ export default function flexAndGrid(config) {
         "row-dense": "row dense",
         "col-dense": "column dense",
     };
-    css += complexClass("grid-flow-", "grid-auto-flow", autoFlow, breakpoints);
+    css += complexClass("grid-flow-", "grid-auto-flow", autoFlow, breakpoints, states);
     // grid-auto-columns
     const autoColumns = {
         auto: "auto",
@@ -147,7 +147,7 @@ export default function flexAndGrid(config) {
         max: "max-content",
         fr: "minmax(0, 1fr)",
     };
-    css += complexClass("auto-cols-", "grid-auto-columns", autoColumns, breakpoints);
+    css += complexClass("auto-cols-", "grid-auto-columns", autoColumns, breakpoints, states);
     // grid-auto-rows
     const autoRows = {
         auto: "auto",
@@ -155,12 +155,12 @@ export default function flexAndGrid(config) {
         max: "max-content",
         fr: "minmax(0, 1fr)",
     };
-    css += complexClass("auto-rows-", "grid-auto-rows", autoRows, breakpoints);
+    css += complexClass("auto-rows-", "grid-auto-rows", autoRows, breakpoints, states);
     // gap
     const gap = omit(spacing, "auto");
-    css += complexClass("gap-", "gap", gap, breakpoints);
-    css += complexClass("gap-x-", "column-gap", gap, breakpoints);
-    css += complexClass("gap-y-", "row-gap", gap, breakpoints);
+    css += complexClass("gap-", "gap", gap, breakpoints, states);
+    css += complexClass("gap-x-", "column-gap", gap, breakpoints, states);
+    css += complexClass("gap-y-", "row-gap", gap, breakpoints, states);
     // place-content
     const placeContent = {
         center: "center",
@@ -172,7 +172,7 @@ export default function flexAndGrid(config) {
         baseline: "baseline",
         stretch: "stretch",
     };
-    css += complexClass("place-content-", "place-content", placeContent, breakpoints);
+    css += complexClass("place-content-", "place-content", placeContent, breakpoints, states);
     // place-items
     const placeItems = {
         start: "start",
@@ -181,7 +181,7 @@ export default function flexAndGrid(config) {
         baseline: "baseline",
         stretch: "stretch",
     };
-    css += complexClass("place-items-", "place-items", placeItems, breakpoints);
+    css += complexClass("place-items-", "place-items", placeItems, breakpoints, states);
     // place-self
     const placeSelf = {
         auto: "auto",
@@ -190,6 +190,6 @@ export default function flexAndGrid(config) {
         center: "center",
         stretch: "stretch",
     };
-    css += complexClass("place-self-", "place-self", placeSelf, breakpoints);
+    css += complexClass("place-self-", "place-self", placeSelf, breakpoints, states);
     return css;
 }

package/lib/partials/icons.js

@@ -1,5 +1,5 @@
 import { complexClass } from "../generators.js";
 export default function icons(config) {
-    const { breakpoints, iconColors } = config;
-    return complexClass("icon-", "color", iconColors, breakpoints);
+    const { breakpoints, states, iconColors } = config;
+    return complexClass("icon-", "color", iconColors, breakpoints, states);
 }

package/lib/partials/layout.js

@@ -1,6 +1,6 @@
 import { complexClass, customClass, simpleClass } from "../generators.js";
 export default function layout(config) {
-    const { columns, breakpoints, spacing } = config;
+    const { columns, breakpoints, states, spacing } = config;
     let css = "";
     // display
     const display = {
@@ -26,10 +26,10 @@ export default function layout(config) {
         "list-item": "list-item",
         hidden: "none",
     };
-    css += complexClass("", "display", display, breakpoints);
+    css += complexClass("", "display", display, breakpoints, states);
     // columns (numeric)
     for (let i = 1; i <= columns; i++) {
-        css += simpleClass(`columns-${i}`, "columns", String(i), breakpoints);
+        css += simpleClass(`columns-${i}`, "columns", String(i), breakpoints, states);
     }
     // float
     const float = {
@@ -37,7 +37,7 @@ export default function layout(config) {
         right: "right",
         none: "none",
     };
-    css += complexClass("float-", "float", float, breakpoints);
+    css += complexClass("float-", "float", float, breakpoints, states);
     // clear
     const clear = {
         left: "left",
@@ -45,7 +45,7 @@ export default function layout(config) {
         both: "both",
         none: "none",
     };
-    css += complexClass("clear-", "clear", clear, breakpoints);
+    css += complexClass("clear-", "clear", clear, breakpoints, states);
     // object-fit
     const objectFit = {
         contain: "contain",
@@ -54,7 +54,7 @@ export default function layout(config) {
         none: "none",
         "scale-down": "scale-down",
     };
-    css += complexClass("object-", "object-fit", objectFit, breakpoints);
+    css += complexClass("object-", "object-fit", objectFit, breakpoints, states);
     // object-position
     const objectPosition = {
         bottom: "bottom",
@@ -67,7 +67,7 @@ export default function layout(config) {
         "right-top": "right top",
         top: "top",
     };
-    css += complexClass("object-", "object-position", objectPosition, breakpoints);
+    css += complexClass("object-", "object-position", objectPosition, breakpoints, states);
     // overflow
     const overflow = {
         auto: "auto",
@@ -76,9 +76,9 @@ export default function layout(config) {
         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);
+    css += complexClass("overflow-", "overflow", overflow, breakpoints, states);
+    css += complexClass("overflow-x-", "overflow-x", overflow, breakpoints, states);
+    css += complexClass("overflow-y-", "overflow-y", overflow, breakpoints, states);
     // position
     const position = {
         static: "static",
@@ -87,11 +87,11 @@ export default function layout(config) {
         relative: "relative",
         sticky: "sticky",
     };
-    css += complexClass("", "position", position, breakpoints);
+    css += complexClass("", "position", position, breakpoints, states);
     // visibility
-    css += simpleClass("visible", "visibility", "visible", breakpoints);
-    css += simpleClass("invisible", "visibility", "hidden", breakpoints);
-    css += simpleClass("collapse", "visibility", "collapse", breakpoints);
+    css += simpleClass("visible", "visibility", "visible", breakpoints, states);
+    css += simpleClass("invisible", "visibility", "hidden", breakpoints, states);
+    css += simpleClass("collapse", "visibility", "collapse", breakpoints, states);
     // z-index
     const zIndex = {
         auto: "auto",
@@ -109,22 +109,22 @@ export default function layout(config) {
         "40": "-40",
         "50": "-50",
     };
-    css += complexClass("z-", "z-index", zIndex, breakpoints);
-    css += complexClass("-z-", "z-index", zIndexNeg, breakpoints);
+    css += complexClass("z-", "z-index", zIndex, breakpoints, states);
+    css += complexClass("-z-", "z-index", zIndexNeg, breakpoints, states);
     // top/right/bottom/left
-    css += complexClass("top-", "top", spacing, breakpoints);
-    css += complexClass("right-", "right", spacing, breakpoints);
-    css += complexClass("bottom-", "bottom", spacing, breakpoints);
-    css += complexClass("left-", "left", spacing, breakpoints);
+    css += complexClass("top-", "top", spacing, breakpoints, states);
+    css += complexClass("right-", "right", spacing, breakpoints, states);
+    css += complexClass("bottom-", "bottom", spacing, breakpoints, states);
+    css += complexClass("left-", "left", spacing, breakpoints, states);
     // inset (top + right + bottom + left)
-    css += complexClass("inset-", "inset", spacing, breakpoints);
+    css += complexClass("inset-", "inset", spacing, breakpoints, states);
     // inset-x (left + right)
     for (const [key, value] of Object.entries(spacing)) {
-        css += customClass(`inset-x-${key}`, { left: value, right: value }, breakpoints);
+        css += customClass(`inset-x-${key}`, { left: value, right: value }, breakpoints, undefined, states);
     }
     // inset-y (top + bottom)
     for (const [key, value] of Object.entries(spacing)) {
-        css += customClass(`inset-y-${key}`, { top: value, bottom: value }, breakpoints);
+        css += customClass(`inset-y-${key}`, { top: value, bottom: value }, breakpoints, undefined, states);
     }
     return css;
 }

package/lib/partials/sizing.js

@@ -29,7 +29,7 @@ const fractions = [
     [11, 12],
 ];
 export default function sizing(config) {
-    const { breakpoints } = config;
+    const { breakpoints, states } = config;
     let css = "";
     // width
     const width = {
@@ -41,12 +41,12 @@ export default function sizing(config) {
         max: "max-content",
         fit: "fit-content",
     };
-    css += complexClass("w-", "width", width, breakpoints);
+    css += complexClass("w-", "width", width, breakpoints, states);
     for (const [n, d] of fractions) {
-        css += simpleClass(`w-${n}/${d}`, "width", fractionPercent(n, d), breakpoints);
+        css += simpleClass(`w-${n}/${d}`, "width", fractionPercent(n, d), breakpoints, states);
     }
-    css += complexClass("min-w-", "min-width", width, breakpoints);
-    css += complexClass("max-w-", "max-width", width, breakpoints);
+    css += complexClass("min-w-", "min-width", width, breakpoints, states);
+    css += complexClass("max-w-", "max-width", width, breakpoints, states);
     // height
     const height = {
         auto: "auto",
@@ -57,11 +57,11 @@ export default function sizing(config) {
         max: "max-content",
         fit: "fit-content",
     };
-    css += complexClass("h-", "height", height, breakpoints);
+    css += complexClass("h-", "height", height, breakpoints, states);
     for (const [n, d] of fractions) {
-        css += simpleClass(`h-${n}/${d}`, "height", fractionPercent(n, d), breakpoints);
+        css += simpleClass(`h-${n}/${d}`, "height", fractionPercent(n, d), breakpoints, states);
     }
-    css += complexClass("min-h-", "min-height", height, breakpoints);
-    css += complexClass("max-h-", "max-height", height, breakpoints);
+    css += complexClass("min-h-", "min-height", height, breakpoints, states);
+    css += complexClass("max-h-", "max-height", height, breakpoints, states);
     return css;
 }

package/lib/partials/spacing.js

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

package/lib/partials/typography.js

@@ -1,10 +1,10 @@
 import { complexClass, customClass, simpleClass } from "../generators.js";
 import { omit } from "../utils.js";
 export default function typography(config) {
-    const { breakpoints, foregroundColors, spacing } = config;
+    const { breakpoints, states, foregroundColors, spacing } = config;
     let css = "";
     // text-color
-    css += complexClass("text-", "color", foregroundColors, breakpoints);
+    css += complexClass("text-", "color", foregroundColors, breakpoints, states);
     // text-align
     const textAlign = {
         left: "left",
@@ -14,7 +14,7 @@ export default function typography(config) {
         start: "start",
         end: "end",
     };
-    css += complexClass("text-", "text-align", textAlign, breakpoints);
+    css += complexClass("text-", "text-align", textAlign, breakpoints, states);
     // text-transform
     const textTransform = {
         uppercase: "uppercase",
@@ -22,18 +22,18 @@ export default function typography(config) {
         capitalize: "capitalize",
         "normal-case": "none",
     };
-    css += complexClass("", "text-transform", textTransform, breakpoints);
+    css += complexClass("", "text-transform", textTransform, breakpoints, states);
     // text-overflow
     const textOverflow = {
         ellipsis: "ellipsis",
         clip: "clip",
     };
-    css += complexClass("text-", "text-overflow", textOverflow, breakpoints);
+    css += complexClass("text-", "text-overflow", textOverflow, breakpoints, states);
     css += customClass("truncate", {
         overflow: "hidden",
         "text-overflow": "ellipsis",
         "white-space": "nowrap",
-    }, breakpoints);
+    }, breakpoints, undefined, states);
     // vertical-align
     const verticalAlign = {
         baseline: "baseline",
@@ -45,7 +45,7 @@ export default function typography(config) {
         sub: "sub",
         super: "super",
     };
-    css += complexClass("align-", "vertical-align", verticalAlign, breakpoints);
+    css += complexClass("align-", "vertical-align", verticalAlign, breakpoints, states);
     // white-space
     const whiteSpace = {
         normal: "normal",
@@ -55,30 +55,30 @@ export default function typography(config) {
         "pre-wrap": "pre-wrap",
         "break-spaces": "break-spaces",
     };
-    css += complexClass("whitespace-", "white-space", whiteSpace, breakpoints);
+    css += complexClass("whitespace-", "white-space", whiteSpace, breakpoints, states);
     // 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);
+    css += complexClass("break-", "word-break", wordBreak, breakpoints, states);
+    css += simpleClass("break-words", "overflow-wrap", "break-word", breakpoints, states);
+    css += customClass("break-normal", { "overflow-wrap": "normal", "word-break": "normal" }, breakpoints, undefined, states);
     // font-smoothing
     css += customClass("antialiased", {
         "-webkit-font-smoothing": "antialiased",
         "-moz-osx-font-smoothing": "grayscale",
-    }, breakpoints);
+    }, breakpoints, undefined, states);
     css += customClass("subpixel-antialiased", {
         "-webkit-font-smoothing": "auto",
         "-moz-osx-font-smoothing": "auto",
-    }, breakpoints);
+    }, breakpoints, undefined, states);
     // font-style
     const fontStyle = {
         italic: "italic",
         "not-italic": "normal",
     };
-    css += complexClass("", "font-style", fontStyle, breakpoints);
+    css += complexClass("", "font-style", fontStyle, breakpoints, states);
     // font-weight
     const fontWeight = {
         thin: "100",
@@ -91,7 +91,7 @@ export default function typography(config) {
         extrabold: "800",
         black: "900",
     };
-    css += complexClass("font-", "font-weight", fontWeight, breakpoints);
+    css += complexClass("font-", "font-weight", fontWeight, breakpoints, states);
     // letter-spacing
     const letterSpacing = {
         tighter: "-0.05em",
@@ -101,7 +101,7 @@ export default function typography(config) {
         wider: "0.05em",
         widest: "0.1em",
     };
-    css += complexClass("tracking-", "letter-spacing", letterSpacing, breakpoints);
+    css += complexClass("tracking-", "letter-spacing", letterSpacing, breakpoints, states);
     // line-height
     const lineHeight = omit(spacing, "auto", "zero");
     const extendedLineHeight = {
@@ -113,6 +113,6 @@ export default function typography(config) {
         relaxed: "1.625",
         loose: "2",
     };
-    css += complexClass("leading-", "line-height", extendedLineHeight, breakpoints);
+    css += complexClass("leading-", "line-height", extendedLineHeight, breakpoints, states);
     return css;
 }

package/lib/purge.js

@@ -32,7 +32,7 @@ export async function purgeCSS(css, options) {
             },
         ],
         safelist: {
-            greedy: [/^bg-/, ...(options.safelist ?? [])],
+            greedy: options.safelist ?? [],
         },
     });
     return result ? result.css : css;

package/lib/resolve-config.d.ts

@@ -1,7 +1,6 @@
 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
  */

package/lib/resolve-config.js

@@ -3,7 +3,6 @@ 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
  */
@@ -36,7 +35,11 @@ export async function resolveConfig(configPath) {
     if (extend && typeof extend === "object" && !Array.isArray(extend)) {
         for (const [key, value] of Object.entries(extend)) {
             const current = config[key];
-            if (key in config &&
+            if (key in config && Array.isArray(current) && Array.isArray(value)) {
+                // Arrays se concatenan (e.g. safelist)
+                config[key] = [...current, ...value];
+            }
+            else if (key in config &&
                 typeof current === "object" &&
                 current !== null &&
                 !Array.isArray(current)) {

package/lib/tokens.d.ts

@@ -0,0 +1,14 @@
+export interface TokensOptions {
+    /** Ruta a grisso.config.mjs del consumidor */
+    config?: string;
+    /** Formato de salida: CSS scaffold o JSON (default: "css") */
+    format?: "css" | "json";
+}
+/**
+ * Extrae tokens de la config resuelta y genera un scaffold CSS o JSON.
+ *
+ * @example
+ * const css = await extractTokens();
+ * const json = await extractTokens({ format: "json" });
+ */
+export declare function extractTokens(options?: TokensOptions): Promise<string>;