Solve the duration/ease function problem

src/index.ts

@@ -8,14 +8,6 @@ import type {
 } from "tailwindcss/plugin";
 import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
 
-const ALL_TRANSITION_PROPERTIES =
-  "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
-const COLOR_TRANSITION_PROPERTIES = "stroke";
-const TRANSITION_DURATION =
-  "var(--tw-duration, var(--default-transition-duration))";
-const TRANSITION_TIMING_FUNCTION =
-  "var(--tw-ease, var(--default-transition-timing-function))";
-
 type FlatThemeLeaf = Record<string, string>;
 
 const POSITIVE_NUMBER_PATTERN = /^(?:\d+|\d*\.\d+)$/; //accept numbers like "12", ".5", "12.5"
@@ -158,14 +150,6 @@ function toStringOrSkip(
   return result;
 }
 
-function createTransitionStyles(properties: string) {
-  return {
-    "transition-property": properties,
-    "transition-duration": TRANSITION_DURATION,
-    "transition-timing-function": TRANSITION_TIMING_FUNCTION,
-  };
-}
-
 function toCssVariable(
   cssVariable: string,
 ): (value: string) => ReturnType<MatchFn> {
@@ -191,35 +175,45 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
 
     addBase({
       "@property --tw-dashed-border-gap": {
-        syntax: "\"<length>\"",
+        syntax: '"<length>"',
         inherits: "true",
         "initial-value": "8px",
       },
       "@property --tw-dashed-border-length": {
-        syntax: "\"<length>\"",
+        syntax: '"<length>"',
         inherits: "true",
         "initial-value": "10px",
       },
       "@property --tw-dashed-border-offset": {
-        syntax: "\"<length>\"",
+        syntax: '"<length>"',
         inherits: "true",
         "initial-value": "0px",
       },
       "@property --tw-dashed-border-width": {
-        syntax: "\"<length>\"",
+        syntax: '"<length>"',
         inherits: "true",
         "initial-value": "1px",
       },
       "@property --tw-dashed-border-radius": {
-        syntax: "\"<length>\"",
+        syntax: '"<length>"',
         inherits: "true",
         "initial-value": "currentColor",
       },
       "@property --tw-dashed-border-alignment": {
-        syntax: "\"<number>\"",
+        syntax: '"<number>"',
         inherits: "true",
         "initial-value": "0",
       },
+      "@property --tw-dashed-border-duration": {
+        syntax: '"<time>"',
+        inherits: "true",
+        "initial-value": "150ms",
+      },
+      "@property --tw-dashed-border-ease": {
+        syntax: '"*"',
+        inherits: "true",
+        "initial-value": "initial",
+      },
       ".dashed-border": {
         position: "relative",
         // "--tw-dashed-border-gap": DEFAULT_GAP,
@@ -227,6 +221,8 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         // "--tw-dashed-border-offset": DEFAULT_OFFSET,
         // "--tw-dashed-border-width": DEFAULT_WIDTH,
         "--tw-dashed-border-color": DEFAULT_COLOR,
+        "--tw-dashed-border-ease": "var(--tw-ease)",
+        "--tw-dashed-border-duration": "var(--tw-duration)",
         // "--tw-dashed-border-radius": DEFAULT_RADIUS,
       },
       ".dashed-border-svg": {
@@ -236,19 +232,22 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         height: "100%",
         "pointer-events": "none",
       },
-  });
+    });
 
+    const INSET =
+      "calc((0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width))";
+    const INNER_SIZE =
+      "calc(100% + var(--tw-dashed-border-width) * (2 * var(--tw-dashed-border-alignment) - 1))";
+    const ADJUSTED_RADIUS =
+      "max(0px, calc(var(--tw-dashed-border-radius) - (0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width)))";
 
-  const INSET = "calc((0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width))";
+    addBase({
-  const INNER_SIZE = "calc(100% + var(--tw-dashed-border-width) * (2 * var(--tw-dashed-border-alignment) - 1))";
+      ".dashed-border-rect": {
-  const ADJUSTED_RADIUS =
-    "max(0px, calc(var(--tw-dashed-border-radius) - (0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width)))";
-
-  addBase({".dashed-border-rect": {
         fill: "none",
         stroke: "var(--tw-dashed-border-color)",
         "stroke-width": "var(--tw-dashed-border-width)",
-        "stroke-dasharray": "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
+        "stroke-dasharray":
+          "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
         "stroke-dashoffset": "var(--tw-dashed-border-offset)",
         "vector-effect": "non-scaling-stroke",
         x: INSET,
@@ -257,7 +256,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         height: INNER_SIZE,
         rx: ADJUSTED_RADIUS,
       },
-    })
+    });
 
     const spacingRawValues = theme("spacing") as
       | ConfigValuesTree<string>
@@ -329,17 +328,28 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       },
     });
 
+    function createTransitionStyles(properties: string) {
+      return {
+        "transition-property": properties,
+        "transition-duration":
+          "var(--tw-dashed-border-duration, var(--default-transition-duration))",
+        "transition-timing-function":
+          "var(--tw-dashed-border-ease, var(--default-transition-timing-function))",
+      };
+    }
+    const ALL_TRANSITION_PROPERTIES =
+      "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
     addUtilities({
-      ".dashed-border-transition .dashed-border-rect": createTransitionStyles(
-        ALL_TRANSITION_PROPERTIES,
-      ),
       ".dashed-border.transition .dashed-border-rect": createTransitionStyles(
         ALL_TRANSITION_PROPERTIES,
       ),
       ".dashed-border.transition-all .dashed-border-rect":
         createTransitionStyles(ALL_TRANSITION_PROPERTIES),
       ".dashed-border.transition-colors .dashed-border-rect":
-        createTransitionStyles(COLOR_TRANSITION_PROPERTIES),
+        createTransitionStyles("stroke"),
+
+      ".dashed-border.transition-dashed-border .dashed-border-rect":
+        createTransitionStyles(ALL_TRANSITION_PROPERTIES),
     });
   },
 );