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

Return align function!

Browse Source
This commit is contained in:
Mira
2026-04-29 02:05:45 +03:00
parent 0a25911ba9
commit 2ce7a39c1a
1 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.ts
+36 -19
View File
@@ -8,14 +8,8 @@ import type {
} from "tailwindcss/plugin";
import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
const DASH_ARRAY = "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)";
const INSET = "calc(var(--tw-dashed-border-width) / 2)";
const INNER_SIZE = "calc(100% - var(--tw-dashed-border-width))";
const ADJUSTED_RADIUS =
"max(0px, calc(var(--tw-dashed-border-radius) - (var(--tw-dashed-border-width) / 2)))";
const ALL_TRANSITION_PROPERTIES =
"stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx";
"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))";
@@ -197,29 +191,34 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
addBase({
"@property --tw-dashed-border-gap": {
syntax: "<length>",
syntax: "\"<length>\"",
inherits: "true",
"initial-value": DEFAULT_GAP,
"initial-value": "8px",
},
"@property --tw-dashed-border-length": {
syntax: "<length>",
syntax: "\"<length>\"",
inherits: "true",
"initial-value": DEFAULT_LENGTH,
"initial-value": "10px",
},
"@property --tw-dashed-border-offset": {
syntax: "<length>",
syntax: "\"<length>\"",
inherits: "true",
"initial-value": DEFAULT_OFFSET,
"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": DEFAULT_RADIUS,
"initial-value": "currentColor",
},
"@property --tw-dashed-border-alignment": {
syntax: "\"<number>\"",
inherits: "true",
"initial-value": "0",
},
".dashed-border": {
position: "relative",
@@ -237,11 +236,19 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
height: "100%",
"pointer-events": "none",
},
".dashed-border-rect": {
});
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": {
fill: "none",
stroke: "var(--tw-dashed-border-color)",
"stroke-width": "var(--tw-dashed-border-width)",
"stroke-dasharray": DASH_ARRAY,
"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,
@@ -250,7 +257,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
height: INNER_SIZE,
rx: ADJUSTED_RADIUS,
},
});
})
const spacingRawValues = theme("spacing") as
| ConfigValuesTree<string>
@@ -278,6 +285,16 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
utilityName: "dashed-border-offset",
supportsNegativeValues: true,
}),
{
utilityName: "dashed-border-align",
arbitraryValueResolver: toCssVariable("--tw-dashed-border-alignment"),
defaultValues: {
inside: "0",
edge: "0.5",
outside: "1",
},
type: "number",
},
{
utilityName: "dashed-border-width",
arbitraryValueResolver: toCssVariable("--tw-dashed-border-width"),