Skip to content
Meeko
Type to search the guides and the API reference. Open it from any page with / or Ctrl K; move with the arrow keys and open a result with Enter.
Get started

Contents

On this page

Not translated yet

This page has not been translated into English yet, so it is shown in Spanish.

UtilityRule

interfaz Since 1.2.0

Una regla creada con UtilityHelpers.rule: un selector, sus declaraciones y sus reglas hijas, que se emiten anidadas (anidamiento CSS nativo; use & en el selector hijo).

ts
import type { UtilityRule } from "@meekojs/meeko/postcss";

Source code src/compiler/css/utilities.ts:116

Declaración #

ts
interface UtilityRule {
	readonly kind: 'rule'
	readonly selector: string
	readonly declarations: UtilityDeclarations
	readonly children: readonly UtilityOutput[]
}

Example #

ts
import { defineUtilities, type UtilityRule } from "@meekojs/meeko/postcss";

export default defineUtilities(({ rule }) => {
  const card: UtilityRule = rule(".card", { padding: "1rem" }, rule("&:hover", { opacity: 0.9 }));
  return [card];
});

Propiedades #

kind #

propiedad sólo lectura

readonly kind: 'rule'

Discriminante: una regla con selector.

selector #

propiedad sólo lectura

readonly selector: string

Selector de la regla; dentro de otra regla puede usar &.

declarations #

propiedad sólo lectura

readonly declarations: UtilityDeclarations

Declaraciones de la regla, antes de sus hijas.

children #

propiedad sólo lectura

readonly children: readonly UtilityOutput[]

Reglas, at-rules y CSS anidados en la regla.

See also #

Was this page helpful?

Add a comment

It is sent when you choose “Yes” or “No”. Only the page, your answer and the comment are stored: no cookies and no personal data.

0 of 2000 characters

Edit on GitHub: packages/meeko/src/compiler/css/utilities.ts