properties
changelog

@state Mixin

Use @state mixin for interactive states.

Usage:

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

Reference

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

  mixins: {
    state: {
      disabled: "&:disabled",
      enabled: "&:enabled",
      empty: "&:empty",
      hover: ["@media (hover: hover)", "&:hover"],
      // "real-focus": "&:focus",
      focus: "&:focus-visible",
      // "focus-within": "&:focus-within",
      active: "&:active", // active during user interaction (press/hold/trigger)
      // visited: "&:visited",
      target: "&:target",
    },
  },
};

export default shilpConfig;

Published at:

Last updated at:

Siblings MixinText Mixin