UtilityHelpers
interfaz Desde 1.2.0
Helpers que recibe la función de utilidades. Crean nodos que el plugin valida y convierte
en CSS: un selector, una propiedad o un valor no válidos detienen el build con la línea
del @utilities.
import type { UtilityHelpers } from "@meekojs/meeko/postcss";Código fuente src/compiler/css/utilities.ts:230
Declaración #
interface UtilityHelpers {
rule(selector: string, declarations: UtilityDeclarations, ...children: UtilityOutput[]): UtilityRule
rule(selector: string, ...children: UtilityOutput[]): UtilityRule
atRule(name: string, params: string, declarations: UtilityAtRuleDeclarations, ...children: UtilityOutput[]): UtilityAtRule
atRule(name: string, params: string, ...children: UtilityOutput[]): UtilityAtRule
css(strings: TemplateStringsArray | string, ...values: readonly unknown[]): UtilityCss
}Ejemplo #
import { defineUtilities, type UtilityHelpers } from "@meekojs/meeko/postcss";
const sizes = ({ rule, atRule }: UtilityHelpers) => [
rule(".button[data-size='sm']", { padding: "0.25rem 0.5rem" }),
atRule("media", "(pointer: coarse)", rule(".button", { minHeight: "2.75rem" })),
];
export default defineUtilities(sizes);Miembros #
rule
#
rule(selector: string, declarations: UtilityDeclarations, ...children: UtilityOutput[]): UtilityRule
rule(selector: string, ...children: UtilityOutput[]): UtilityRuleCrea una regla. El segundo argumento es un objeto de declaraciones o la primera hija;
las demás hijas (reglas con &, atRule, css, arrays) se anidan dentro.
atRule
#
atRule(name: string, params: string, declarations: UtilityAtRuleDeclarations, ...children: UtilityOutput[]): UtilityAtRule
atRule(name: string, params: string, ...children: UtilityOutput[]): UtilityAtRuleCrea una at-rule, como @media, @supports, @container, @font-face o @property.
name va sin @. Sin cuerpo (sólo name y params) se emite como sentencia.
css
#
css(strings: TemplateStringsArray | string, ...values: readonly unknown[]): UtilityCssCSS literal, como cadena o plantilla etiquetada; se analiza con PostCSS. Las barras
invertidas se conservan (content: "\201C").