@data Mixin

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

Usage:

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

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

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: {
		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;

childs mixin env mixin