properties
changelog

@form Mixin

Use @form mixin for form element states and conditions.

Usage:

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

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "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;

Published at:

Last updated at:

Env MixinMatch Mixin