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

align

Browse Source
This commit is contained in:
Mira
2026-04-15 02:46:44 +03:00
parent dd4ab29df2
commit e4c91c4a93
1 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.ts
+28 -10
View File
@@ -11,9 +11,11 @@ const DEFAULT_BORDER_WIDTH = "1px";
const DEFAULT_OFFSET = "0px"; const DEFAULT_OFFSET = "0px";
const DEFAULT_COLOR = "currentColor"; const DEFAULT_COLOR = "currentColor";
const DEFAULT_RADIUS = "0px"; const DEFAULT_RADIUS = "0px";
const svgRadius = "max(0px, calc(var(--tw-dashed-border-radius) - (var(--tw-dashed-border-width) / 2)))"; 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 dashedBorderTransitionProperties = const dashedBorderTransitionProperties =
"stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx"; "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
const flattenThemeMap = ( const flattenThemeMap = (
input: ThemeValueMap, input: ThemeValueMap,
@@ -38,6 +40,11 @@ const flattenThemeMap = (
const roundedSelector = (name: string): string => const roundedSelector = (name: string): string =>
name === "DEFAULT" ? ".rounded" : `.rounded-${name}`; 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( const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
({ addBase, addUtilities, matchUtilities, theme }) => { ({ addBase, addUtilities, matchUtilities, theme }) => {
addBase({ addBase({
@@ -61,6 +68,11 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
inherits: "true", inherits: "true",
"initial-value": DEFAULT_BORDER_WIDTH, "initial-value": DEFAULT_BORDER_WIDTH,
}, },
"@property --tw-dashed-border-align": {
syntax: "<length-percentage>",
inherits: "true",
"initial-value": DEFAULT_ALIGN,
},
"@property --tw-dashed-border-radius": { "@property --tw-dashed-border-radius": {
syntax: "<length-percentage>", syntax: "<length-percentage>",
inherits: "true", inherits: "true",
@@ -75,6 +87,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
"--tw-dashed-border-offset": DEFAULT_OFFSET, "--tw-dashed-border-offset": DEFAULT_OFFSET,
"--tw-dashed-border-width": DEFAULT_BORDER_WIDTH, "--tw-dashed-border-width": DEFAULT_BORDER_WIDTH,
"--tw-dashed-border-color": DEFAULT_COLOR, "--tw-dashed-border-color": DEFAULT_COLOR,
"--tw-dashed-border-align": DEFAULT_ALIGN,
"--tw-dashed-border-radius": DEFAULT_RADIUS, "--tw-dashed-border-radius": DEFAULT_RADIUS,
position: "relative", position: "relative",
}, },
@@ -96,10 +109,10 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
strokeDashoffset: "var(--tw-dashed-border-offset)", strokeDashoffset: "var(--tw-dashed-border-offset)",
shapeRendering: "geometricPrecision", shapeRendering: "geometricPrecision",
vectorEffect: "non-scaling-stroke", vectorEffect: "non-scaling-stroke",
x: "calc(var(--tw-dashed-border-width) / 2)", x: dashedBorderAlign,
y: "calc(var(--tw-dashed-border-width) / 2)", y: dashedBorderAlign,
width: "calc(100% - var(--tw-dashed-border-width))", width: `calc(100% - (${dashedBorderAlign} * 2))`,
height: "calc(100% - var(--tw-dashed-border-width))", height: `calc(100% - (${dashedBorderAlign} * 2))`,
rx: svgRadius, rx: svgRadius,
}, },
".dashed-border-transition, .dashed-border.transition, .dashed-border.transition-all": ".dashed-border-transition, .dashed-border.transition, .dashed-border.transition-all":
@@ -121,13 +134,11 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
}, },
".dashed-border.transition-colors .dashed-border-rect": { ".dashed-border.transition-colors .dashed-border-rect": {
transitionProperty: "stroke", transitionProperty: "stroke",
transitionTimingFunction: transitionTimingFunction: "inherit",
"inherit",
transitionDuration: "inherit", transitionDuration: "inherit",
}, },
}); });
const spacing = theme("spacing", {}) as Record<string, string>;
const borderWidths = theme("borderWidth", { const borderWidths = theme("borderWidth", {
DEFAULT: DEFAULT_BORDER_WIDTH, DEFAULT: DEFAULT_BORDER_WIDTH,
}) as Record<string, string>; }) as Record<string, string>;
@@ -147,12 +158,19 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
"dashed-border-offset": (value: string) => ({ "dashed-border-offset": (value: string) => ({
"--tw-dashed-border-offset": value, "--tw-dashed-border-offset": value,
}), }),
"dashed-border-align": (value: string) => ({
"--tw-dashed-border-align": resolveAlignValue(value),
}),
"dashed-border-radius": (value: string) => ({ "dashed-border-radius": (value: string) => ({
"--tw-dashed-border-radius": value, "--tw-dashed-border-radius": value,
}), }),
}, },
{ {
values: spacing, values: {
inside: DEFAULT_ALIGN,
edge: "0px",
outside: "calc(var(--tw-dashed-border-width) / -2)",
},
}, },
); );