@state Mixin

Use @state mixin for interactive states.

Usage:

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

info

This page contains only the mixins configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
const shilpConfig = {
	target: "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;

siblings mixin text mixin