Everything broken...

src/index.ts

@@ -11,11 +11,14 @@ const DEFAULT_BORDER_WIDTH = "1px";
 const DEFAULT_OFFSET = "0px";
 const DEFAULT_COLOR = "currentColor";
 const DEFAULT_RADIUS = "0px";
-const DEFAULT_ALIGN = "calc(var(--tw-dashed-border-width) / 2)";
-const dashedBorderAlign = "var(--tw-dashed-border-align)";
-const svgRadius = `max(0px, calc(var(--tw-dashed-border-radius) - (${dashedBorderAlign})))`;
+const svgRadius =
+  "max(0px, calc(var(--tw-dashed-border-radius) - (var(--tw-dashed-border-width) / 2)))";
 const dashedBorderTransitionProperties =
-  "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
+  "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx";
+const strokeDasharrayValue = (
+  length: string,
+  gap: string,
+): string => `${length} max(${gap}, 0.001px)`;
 
 const flattenThemeMap = (
   input: ThemeValueMap,
@@ -40,11 +43,6 @@ const flattenThemeMap = (
 const roundedSelector = (name: string): string =>
   name === "DEFAULT" ? ".rounded" : `.rounded-${name}`;
 
-const resolveAlignValue = (value: string): string =>
-  /^-?(?:\d+|\d*\.\d+)$/.test(value)
-    ? `calc((0.5 - ${value}) * var(--tw-dashed-border-width))`
-    : `calc((var(--tw-dashed-border-width) / 2) - (${value}))`;
-
 const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
   ({ addBase, addUtilities, matchUtilities, theme }) => {
     addBase({
@@ -68,11 +66,6 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         inherits: "true",
         "initial-value": DEFAULT_BORDER_WIDTH,
       },
-      "@property --tw-dashed-border-align": {
-        syntax: "<length-percentage>",
-        inherits: "true",
-        "initial-value": DEFAULT_ALIGN,
-      },
       "@property --tw-dashed-border-radius": {
         syntax: "<length-percentage>",
         inherits: "true",
@@ -87,7 +80,6 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         "--tw-dashed-border-offset": DEFAULT_OFFSET,
         "--tw-dashed-border-width": DEFAULT_BORDER_WIDTH,
         "--tw-dashed-border-color": DEFAULT_COLOR,
-        "--tw-dashed-border-align": DEFAULT_ALIGN,
         "--tw-dashed-border-radius": DEFAULT_RADIUS,
         position: "relative",
       },
@@ -104,15 +96,17 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         fill: "none",
         stroke: "var(--tw-dashed-border-color)",
         strokeWidth: "var(--tw-dashed-border-width)",
-        strokeDasharray:
-          "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
+        strokeDasharray: strokeDasharrayValue(
+          "var(--tw-dashed-border-length)",
+          "var(--tw-dashed-border-gap)",
+        ),
         strokeDashoffset: "var(--tw-dashed-border-offset)",
         shapeRendering: "geometricPrecision",
         vectorEffect: "non-scaling-stroke",
-        x: dashedBorderAlign,
-        y: dashedBorderAlign,
-        width: `calc(100% - (${dashedBorderAlign} * 2))`,
-        height: `calc(100% - (${dashedBorderAlign} * 2))`,
+        x: "calc(var(--tw-dashed-border-width) / 2)",
+        y: "calc(var(--tw-dashed-border-width) / 2)",
+        width: "calc(100% - var(--tw-dashed-border-width))",
+        height: "calc(100% - var(--tw-dashed-border-width))",
         rx: svgRadius,
       },
       ".dashed-border-transition, .dashed-border.transition, .dashed-border.transition-all":
@@ -139,6 +133,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       },
     });
 
+    const spacing = theme("spacing", {}) as Record<string, string>;
     const borderWidths = theme("borderWidth", {
       DEFAULT: DEFAULT_BORDER_WIDTH,
     }) as Record<string, string>;
@@ -151,26 +146,37 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       {
         "dashed-border-gap": (value: string) => ({
           "--tw-dashed-border-gap": value,
+          "& .dashed-border-rect": {
+            strokeDasharray: strokeDasharrayValue(
+              "var(--tw-dashed-border-length)",
+              value,
+            ),
+          },
         }),
         "dashed-border-length": (value: string) => ({
           "--tw-dashed-border-length": value,
+          "& .dashed-border-rect": {
+            strokeDasharray: strokeDasharrayValue(
+              value,
+              "var(--tw-dashed-border-gap)",
+            ),
+          },
         }),
         "dashed-border-offset": (value: string) => ({
           "--tw-dashed-border-offset": value,
-        }),
-        "dashed-border-align": (value: string) => ({
-          "--tw-dashed-border-align": resolveAlignValue(value),
+          "& .dashed-border-rect": {
+            strokeDashoffset: value,
+          },
         }),
         "dashed-border-radius": (value: string) => ({
           "--tw-dashed-border-radius": value,
+          "& .dashed-border-rect": {
+            rx: `max(0px, calc(${value} - (var(--tw-dashed-border-width) / 2)))`,
+          },
         }),
       },
       {
-        values: {
-          inside: DEFAULT_ALIGN,
-          edge: "0px",
-          outside: "calc(var(--tw-dashed-border-width) / -2)",
-        },
+        values: spacing,
       },
     );
 
@@ -178,6 +184,14 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       {
         "dashed-border-width": (value: string) => ({
           "--tw-dashed-border-width": value,
+          "& .dashed-border-rect": {
+            strokeWidth: value,
+            x: `calc(${value} / 2)`,
+            y: `calc(${value} / 2)`,
+            width: `calc(100% - ${value})`,
+            height: `calc(100% - ${value})`,
+            rx: `max(0px, calc(var(--tw-dashed-border-radius) - (${value} / 2)))`,
+          },
         }),
       },
       {
@@ -189,6 +203,9 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       {
         "dashed-border-color": (value: string) => ({
           "--tw-dashed-border-color": value,
+          "& .dashed-border-rect": {
+            stroke: value,
+          },
         }),
       },
       {