UtilityDeclarations
interfaz Desde 1.2.0
Declaraciones de una regla como objeto, tipadas con
csstype: el editor autocompleta las propiedades y sus
palabras clave, y una propiedad mal escrita es un error de tipos. Las longitudes y los tiempos
son cadenas con unidad ("4px", "200ms"), salvo el 0; los números sólo valen en las
propiedades sin unidad (opacity, zIndex, flexGrow, lineHeight…). Para lo que csstype
no conozca, use el helper css.
Las claves en camelCase pasan a kebab-case (backgroundColor → background-color,
WebkitAppearance → -webkit-appearance); las claves en kebab-case y las propiedades
personalizadas --* se escriben tal cual. undefined omite la declaración y un array
escribe una declaración por valor, en orden, para los valores de respaldo.
import type { UtilityDeclarations } from "@meekojs/meeko/postcss";Código fuente src/compiler/css/utilities.ts:69
Declaración #
interface UtilityDeclarations extends DeclaredProperties<CSS.Properties<CssLength>>, DeclaredProperties<CSS.PropertiesHyphen<CssLength>> {
readonly [property: `--${string}`]: UtilityValue | readonly UtilityValue[] | undefined
}Ejemplo #
import type { UtilityDeclarations } from "@meekojs/meeko/postcss";
const card: UtilityDeclarations = {
"--card-gap": "1rem",
borderRadius: "1rem",
display: ["-webkit-box", "flex"],
position: "relative !important",
opacity: 0.9,
outline: undefined,
};Miembros #
[índice]
#
readonly [property: `--${string}`]: UtilityValue | readonly UtilityValue[] | undefined