@hiscovega/grisso 1.0.6 → 1.0.7

package/lib/defaults.js

@@ -10,6 +10,13 @@ const defaults = {
         desktop: "(min-width: 1024px)",
         ultrawide: "(min-width: 1680px)",
     },
+    states: {
+        hover: ":hover",
+        focus: ":focus",
+        "focus-visible": ":focus-visible",
+        active: ":active",
+        disabled: ":disabled",
+    },
     spacing: {
         auto: "auto",
         zero: "0",

package/lib/generators.d.ts

@@ -1,16 +1,16 @@
-import type { Breakpoints, Declarations, TokenMap } from "./types.js";
+import type { Breakpoints, Declarations, States, TokenMap } from "./types.js";
 /**
- * Genera una clase simple con variantes responsive.
+ * Genera una clase simple con variantes responsive y de estado.
  * Equivalente al mixin grisso_simple_class.
  */
-export declare function simpleClass(className: string, property: string, value: string, breakpoints: Breakpoints): string;
+export declare function simpleClass(className: string, property: string, value: string, breakpoints: Breakpoints, states?: States): string;
 /**
- * Genera clases basadas en un mapa de tokens con variantes responsive.
+ * Genera clases basadas en un mapa de tokens con variantes responsive y de estado.
  * Equivalente al mixin grisso_complex_class.
  */
-export declare function complexClass(prefix: string, properties: string | string[], tokens: TokenMap, breakpoints: Breakpoints): string;
+export declare function complexClass(prefix: string, properties: string | string[], tokens: TokenMap, breakpoints: Breakpoints, states?: States): string;
 /**
- * Genera una clase con declaraciones custom y variantes responsive.
+ * Genera una clase con declaraciones custom y variantes responsive y de estado.
  * Para casos especiales: divide >*+*, truncate, smoothing, outline-none, etc.
  */
-export declare function customClass(className: string, declarations: Declarations, breakpoints: Breakpoints, selectorSuffix?: string): string;
+export declare function customClass(className: string, declarations: Declarations, breakpoints: Breakpoints, selectorSuffix?: string, states?: States): string;

package/lib/generators.js

@@ -7,22 +7,34 @@ function escapeCSS(name) {
     return name.replace(/\//g, "\\/");
 }
 /**
- * Genera una clase simple con variantes responsive.
+ * Genera una clase simple con variantes responsive y de estado.
  * Equivalente al mixin grisso_simple_class.
  */
-export function simpleClass(className, property, value, breakpoints) {
+export function simpleClass(className, property, value, breakpoints, states) {
     const escaped = escapeCSS(className);
     let css = `.${escaped} { ${property}: ${value}; }\n`;
+    // Variantes de estado
+    if (states) {
+        for (const [state, pseudo] of Object.entries(states)) {
+            css += `.${state}-${escaped}${pseudo} { ${property}: ${value}; }\n`;
+        }
+    }
     for (const [bp, mq] of Object.entries(breakpoints)) {
         css += `@media ${mq} { .${bp}-${escaped} { ${property}: ${value}; } }\n`;
+        // Variantes responsive + estado
+        if (states) {
+            for (const [state, pseudo] of Object.entries(states)) {
+                css += `@media ${mq} { .${bp}-${state}-${escaped}${pseudo} { ${property}: ${value}; } }\n`;
+            }
+        }
     }
     return css;
 }
 /**
- * Genera clases basadas en un mapa de tokens con variantes responsive.
+ * Genera clases basadas en un mapa de tokens con variantes responsive y de estado.
  * Equivalente al mixin grisso_complex_class.
  */
-export function complexClass(prefix, properties, tokens, breakpoints) {
+export function complexClass(prefix, properties, tokens, breakpoints, states) {
     const props = Array.isArray(properties) ? properties : [properties];
     let css = "";
     for (const [name, value] of Object.entries(tokens)) {
@@ -30,27 +42,55 @@ export function complexClass(prefix, properties, tokens, breakpoints) {
         for (const prop of props) {
             css += `.${escaped} { ${prop}: ${value}; }\n`;
         }
+        // Variantes de estado
+        if (states) {
+            for (const [state, pseudo] of Object.entries(states)) {
+                for (const prop of props) {
+                    css += `.${state}-${escaped}${pseudo} { ${prop}: ${value}; }\n`;
+                }
+            }
+        }
         for (const [bp, mq] of Object.entries(breakpoints)) {
             for (const prop of props) {
                 css += `@media ${mq} { .${bp}-${escaped} { ${prop}: ${value}; } }\n`;
             }
+            // Variantes responsive + estado
+            if (states) {
+                for (const [state, pseudo] of Object.entries(states)) {
+                    for (const prop of props) {
+                        css += `@media ${mq} { .${bp}-${state}-${escaped}${pseudo} { ${prop}: ${value}; } }\n`;
+                    }
+                }
+            }
         }
     }
     return css;
 }
 /**
- * Genera una clase con declaraciones custom y variantes responsive.
+ * Genera una clase con declaraciones custom y variantes responsive y de estado.
  * Para casos especiales: divide >*+*, truncate, smoothing, outline-none, etc.
  */
-export function customClass(className, declarations, breakpoints, selectorSuffix) {
+export function customClass(className, declarations, breakpoints, selectorSuffix, states) {
     const escaped = escapeCSS(className);
     const suffix = selectorSuffix || "";
     const decls = Object.entries(declarations)
         .map(([p, v]) => `${p}: ${v}`)
         .join("; ");
     let css = `.${escaped}${suffix} { ${decls}; }\n`;
+    // Variantes de estado: pseudo va antes del selectorSuffix
+    if (states) {
+        for (const [state, pseudo] of Object.entries(states)) {
+            css += `.${state}-${escaped}${pseudo}${suffix} { ${decls}; }\n`;
+        }
+    }
     for (const [bp, mq] of Object.entries(breakpoints)) {
         css += `@media ${mq} { .${bp}-${escaped}${suffix} { ${decls}; } }\n`;
+        // Variantes responsive + estado
+        if (states) {
+            for (const [state, pseudo] of Object.entries(states)) {
+                css += `@media ${mq} { .${bp}-${state}-${escaped}${pseudo}${suffix} { ${decls}; } }\n`;
+            }
+        }
     }
     return css;
 }

package/lib/partials/backgrounds.js

@@ -1,16 +1,16 @@
 import { complexClass } from "../generators.js";
 export default function backgrounds(config) {
-    const { breakpoints, backgroundColors } = config;
+    const { breakpoints, states, backgroundColors } = config;
     let css = "";
     // background-color
-    css += complexClass("bg-", "background-color", backgroundColors, breakpoints);
+    css += complexClass("bg-", "background-color", backgroundColors, breakpoints, states);
     // background-attachment
     const bgAttachment = {
         fixed: "fixed",
         local: "local",
         scroll: "scroll",
     };
-    css += complexClass("bg-", "background-attachment", bgAttachment, breakpoints);
+    css += complexClass("bg-", "background-attachment", bgAttachment, breakpoints, states);
     // background-clip
     const bgClip = {
         border: "border-box",
@@ -18,14 +18,14 @@ export default function backgrounds(config) {
         content: "content-box",
         text: "text",
     };
-    css += complexClass("bg-clip-", "background-clip", bgClip, breakpoints);
+    css += complexClass("bg-clip-", "background-clip", bgClip, breakpoints, states);
     // background-origin
     const bgOrigin = {
         border: "border-box",
         padding: "padding-box",
         content: "content-box",
     };
-    css += complexClass("bg-origin-", "background-origin", bgOrigin, breakpoints);
+    css += complexClass("bg-origin-", "background-origin", bgOrigin, breakpoints, states);
     // background-position
     const bgPosition = {
         bottom: "bottom",
@@ -38,7 +38,7 @@ export default function backgrounds(config) {
         "right-top": "right top",
         top: "top",
     };
-    css += complexClass("bg-", "background-position", bgPosition, breakpoints);
+    css += complexClass("bg-", "background-position", bgPosition, breakpoints, states);
     // background-repeat
     const bgRepeat = {
         repeat: "repeat",
@@ -48,7 +48,7 @@ export default function backgrounds(config) {
         "repeat-round": "round",
         "repeat-space": "space",
     };
-    css += complexClass("bg-", "background-repeat", bgRepeat, breakpoints);
+    css += complexClass("bg-", "background-repeat", bgRepeat, breakpoints, states);
     // background-size
     const bgSize = {
         auto: "auto",
@@ -59,6 +59,6 @@ export default function backgrounds(config) {
         revert: "revert",
         unset: "unset",
     };
-    css += complexClass("bg-", "background-size", bgSize, breakpoints);
+    css += complexClass("bg-", "background-size", bgSize, breakpoints, states);
     return css;
 }

package/lib/partials/borders.js

@@ -1,6 +1,6 @@
 import { complexClass, customClass } from "../generators.js";
 export default function borders(config) {
-    const { breakpoints, borderWidth, borderColors } = config;
+    const { breakpoints, states, borderWidth, borderColors } = config;
     let css = "";
     // Variables locales (equivale a borders/vars.scss)
     const extendedColors = {
@@ -18,35 +18,35 @@ export default function borders(config) {
         none: "none",
     };
     // border-width
-    css += complexClass("border-", "border-width", borderWidth, breakpoints);
+    css += complexClass("border-", "border-width", borderWidth, breakpoints, states);
     // border-{side}-width
-    css += complexClass("border-t-", "border-top-width", borderWidth, breakpoints);
-    css += complexClass("border-r-", "border-right-width", borderWidth, breakpoints);
-    css += complexClass("border-b-", "border-bottom-width", borderWidth, breakpoints);
-    css += complexClass("border-l-", "border-left-width", borderWidth, breakpoints);
+    css += complexClass("border-t-", "border-top-width", borderWidth, breakpoints, states);
+    css += complexClass("border-r-", "border-right-width", borderWidth, breakpoints, states);
+    css += complexClass("border-b-", "border-bottom-width", borderWidth, breakpoints, states);
+    css += complexClass("border-l-", "border-left-width", borderWidth, breakpoints, states);
     // border-color
-    css += complexClass("border-", "border-color", extendedColors, breakpoints);
+    css += complexClass("border-", "border-color", extendedColors, breakpoints, states);
     // border-style
-    css += complexClass("border-", "border-style", borderStyle, breakpoints);
+    css += complexClass("border-", "border-style", borderStyle, breakpoints, states);
     // divide-color
     for (const [key, value] of Object.entries(extendedColors)) {
-        css += customClass(`divide-${key}`, { "border-color": value }, breakpoints, " > * + *");
+        css += customClass(`divide-${key}`, { "border-color": value }, breakpoints, " > * + *", states);
     }
     // divide-width
     for (const [key, value] of Object.entries(borderWidth)) {
-        css += customClass(`divide-x-${key}`, { "border-right-width": value, "border-left-width": value }, breakpoints, " > * + *");
-        css += customClass(`divide-y-${key}`, { "border-top-width": value, "border-bottom-width": value }, breakpoints, " > * + *");
+        css += customClass(`divide-x-${key}`, { "border-right-width": value, "border-left-width": value }, breakpoints, " > * + *", states);
+        css += customClass(`divide-y-${key}`, { "border-top-width": value, "border-bottom-width": value }, breakpoints, " > * + *", states);
     }
-    css += customClass("divide-x", { "border-right-width": "0", "border-left-width": "1px" }, breakpoints, " > * + *");
-    css += customClass("divide-y", { "border-top-width": "1px", "border-bottom-width": "0" }, breakpoints, " > * + *");
+    css += customClass("divide-x", { "border-right-width": "0", "border-left-width": "1px" }, breakpoints, " > * + *", states);
+    css += customClass("divide-y", { "border-top-width": "1px", "border-bottom-width": "0" }, breakpoints, " > * + *", states);
     // divide-style
     for (const [key, value] of Object.entries(borderStyle)) {
-        css += customClass(`divide-${key}`, { "border-style": value }, breakpoints, " > * + *");
+        css += customClass(`divide-${key}`, { "border-style": value }, breakpoints, " > * + *", states);
     }
     // outline-color
-    css += complexClass("outline-", "outline-color", extendedColors, breakpoints);
+    css += complexClass("outline-", "outline-color", extendedColors, breakpoints, states);
     // outline-width
-    css += complexClass("outline-", "outline-width", borderWidth, breakpoints);
+    css += complexClass("outline-", "outline-width", borderWidth, breakpoints, states);
     // outline-style
     const outlineStyle = {
         outline: "solid",
@@ -54,9 +54,9 @@ export default function borders(config) {
         "outline-dotted": "dotted",
         "outline-double": "double",
     };
-    css += complexClass("", "outline-style", outlineStyle, breakpoints);
-    css += customClass("outline-none", { outline: "2px solid transparent", "outline-offset": "2px" }, breakpoints);
+    css += complexClass("", "outline-style", outlineStyle, breakpoints, states);
+    css += customClass("outline-none", { outline: "2px solid transparent", "outline-offset": "2px" }, breakpoints, undefined, states);
     // outline-offset
-    css += complexClass("outline-offset-", "outline-offset", borderWidth, breakpoints);
+    css += complexClass("outline-offset-", "outline-offset", borderWidth, breakpoints, states);
     return css;
 }

package/lib/partials/effects.js

@@ -1,17 +1,17 @@
 import { complexClass } from "../generators.js";
 export default function effects(config) {
-    const { breakpoints, opacity, shadows, overlayColors } = config;
+    const { breakpoints, states, opacity, shadows, overlayColors } = config;
     let css = "";
     // opacity
-    css += complexClass("opacity-", "opacity", opacity, breakpoints);
+    css += complexClass("opacity-", "opacity", opacity, breakpoints, states);
     // box-shadow
     const extendedShadows = {
         ...shadows,
         inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
         none: "0 0 #0000",
     };
-    css += complexClass("shadow-", "box-shadow", extendedShadows, breakpoints);
+    css += complexClass("shadow-", "box-shadow", extendedShadows, breakpoints, states);
     // overlay (background-color)
-    css += complexClass("overlay-", "background-color", overlayColors, breakpoints);
+    css += complexClass("overlay-", "background-color", overlayColors, breakpoints, states);
     return css;
 }

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;
 }