Function addModifiers

src/modifiers.ts:30–278

(
  matchUtilities: PluginAPI["matchUtilities"],
  addUtilities: PluginAPI["addUtilities"],
  theme: (path: keyof ThemeConfig) => Record<string, string>
)

};

export function addModifiers(
  matchUtilities: PluginAPI["matchUtilities"],
  addUtilities: PluginAPI["addUtilities"],
  theme: (path: keyof ThemeConfig) => Record<string, string>
) {
  // duration
  matchUtilities(
    {
      "motion-duration": (value: string, { modifier }: UtilityOptions) => {
        switch (modifier) {
          case "scale":
            return { "--motion-scale-duration": value } as CSSRuleObject;
          case "translate":
            return { "--motion-translate-duration": value };
          case "rotate":
            return { "--motion-rotate-duration": value };
          case "blur":
          case "grayscale":
            return { "--motion-filter-duration": value };
          case "opacity":
            return { "--motion-opacity-duration": value };
          case "background":
            return { "--motion-background-color-duration": value };
          case "text":
            return { "--motion-text-color-duration": value };
          default:
            return {
              "--motion-duration": value,
            };
        }
      },
    },
    {
      values: theme("motionDuration"),
      modifiers: {
        scale: "scale",
        translate: "translate",
        rotate: "rotate",
        blur: "blur",
        grayscale: "grayscale",
        opacity: "opacity",
        background: "background",
        text: "text",
      },
    }
  );

  // delay
  matchUtilities(
    {
      "motion-delay": (value: string, { modifier }: UtilityOptions) => {
        switch (modifier) {
          case "scale":
            return { "--motion-scale-delay": value } as CSSRuleObject;
          case "translate":
            return { "--motion-translate-delay": value };
          case "rotate":
            return { "--motion-rotate-delay": value };