properties
changelog

@form Mixin

Use @form mixin for form element states and conditions.

Usage:

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

Reference

shilp.config.js
const shilpConfig = {
	target: "react",

	mixins: {
		form: {
			variants: {
				checked: "&:checked",
				// indeterminate: "&:indeterminate",
				// default: "&:default",
				// optional: "&:optional",
				required: "&:required",
				valid: "&:valid",
				invalid: "&:invalid",
				// "in-range": "&:in-range",
				// "out-of-range": "&:out-of-range",
				// "placeholder-visible": "&:placeholder-shown",
				// "auto-fill": "&:autofill",	// NOTE: supported via webkit
				"read-only": "&:read-only",

				// pseudo
				file: "&::file-selector-button",
				placeholder: "&::placeholder",
			},
		},
	},
};

export default shilpConfig;
env mixinmatch mixin