mira/tailwind-dashed-border
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solve the duration/ease function problem

Browse Source
This commit is contained in:
Mira
2026-05-07 17:32:30 +03:00
parent 2ce7a39c1a
commit 0b807644b1
1 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.ts
+45 -35
View File
@@ -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))";
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)))";
addBase({".dashed-border-rect": {
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),
});
},
);