properties
changelog

@aria Mixin

Use @aria mixin for ARIA attribute (aria-*) selectors.

Usage:

Usage:

.any-class {
	/* normal */
	@aria <variant> { ... }

	/* functions */
	@childs <variant>("<arguments>") { ... }
}

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  mixins: {
    aria: {
      variants: {
        // busy: `&[aria-busy]`,
        // checked: `&[aria-checked]`,
        // disabled: `&[aria-disabled]`,
        // expanded: `&[aria-expanded]`,
        // hidden: `&[aria-hidden]`,
        // invalid: `&[aria-invalid]`,
        // pressed: `&[aria-pressed]`,
        // "read-only": `&[aria-readonly]`,
        // required: `&[aria-required]`,
        // selected: `&[aria-selected]`,

        /* functions */
        // @aria is("disabled=false"); --> &[aria-disabled=false]
        is: "&[aria-<1>]",
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at:

Mixins OverviewChilds Mixin