properties
changelog

@data Mixin

Use @data mixin for data attribute (data-*) selectors.

Usage:

.any-class {
	/* direct */
	@data <variant> { ... }

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

Reference

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

  mixins: {
    data: {
      variants: {
        disabled: `&[data-disabled]`,
        open: `&[data-open]`,
        closed: `&[data-closed]`,

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

export default shilpConfig;

Published at:

Last updated at:

Childs MixinEnv Mixin