delete everythihg for fresh start
This commit is contained in:
Mira
-234
@@ -1,234 +0,0 @@
|
||||
import plugin from "tailwindcss/plugin";
|
||||
|
||||
interface ThemeValueMap {
|
||||
[key: string]: string | ThemeValueMap;
|
||||
}
|
||||
|
||||
const DEFAULT_SPACING_VALUE = "0.25rem";
|
||||
const DEFAULT_GAP = `calc(var(--spacing, ${DEFAULT_SPACING_VALUE}) * 2)`;
|
||||
const DEFAULT_LENGTH = `calc(var(--spacing, ${DEFAULT_SPACING_VALUE}) * 3)`;
|
||||
const DEFAULT_BORDER_WIDTH = "1px";
|
||||
const DEFAULT_OFFSET = "0px";
|
||||
const DEFAULT_COLOR = "currentColor";
|
||||
const DEFAULT_RADIUS = "0px";
|
||||
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";
|
||||
const strokeDasharrayValue = (
|
||||
length: string,
|
||||
gap: string,
|
||||
): string => `${length} max(${gap}, 0.001px)`;
|
||||
|
||||
const flattenThemeMap = (
|
||||
input: ThemeValueMap,
|
||||
path: string[] = [],
|
||||
): Record<string, string> => {
|
||||
const output: Record<string, string> = {};
|
||||
|
||||
for (const [key, value] of Object.entries(input)) {
|
||||
const nextPath = key === "DEFAULT" ? path : [...path, key];
|
||||
|
||||
if (typeof value === "string") {
|
||||
output[nextPath.join("-")] = value;
|
||||
continue;
|
||||
}
|
||||
|
||||
Object.assign(output, flattenThemeMap(value, nextPath));
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
const roundedSelector = (name: string): string =>
|
||||
name === "DEFAULT" ? ".rounded" : `.rounded-${name}`;
|
||||
|
||||
const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
|
||||
({ addBase, addUtilities, matchUtilities, theme }) => {
|
||||
addBase({
|
||||
"@property --tw-dashed-border-gap": {
|
||||
syntax: "<length-percentage>",
|
||||
inherits: "true",
|
||||
"initial-value": "0.5rem",
|
||||
},
|
||||
"@property --tw-dashed-border-length": {
|
||||
syntax: "<length-percentage>",
|
||||
inherits: "true",
|
||||
"initial-value": "0.75rem",
|
||||
},
|
||||
"@property --tw-dashed-border-offset": {
|
||||
syntax: "<length-percentage>",
|
||||
inherits: "true",
|
||||
"initial-value": DEFAULT_OFFSET,
|
||||
},
|
||||
"@property --tw-dashed-border-width": {
|
||||
syntax: "<length>",
|
||||
inherits: "true",
|
||||
"initial-value": DEFAULT_BORDER_WIDTH,
|
||||
},
|
||||
"@property --tw-dashed-border-radius": {
|
||||
syntax: "<length-percentage>",
|
||||
inherits: "true",
|
||||
"initial-value": DEFAULT_RADIUS,
|
||||
},
|
||||
});
|
||||
|
||||
addUtilities({
|
||||
".dashed-border": {
|
||||
"--tw-dashed-border-gap": DEFAULT_GAP,
|
||||
"--tw-dashed-border-length": DEFAULT_LENGTH,
|
||||
"--tw-dashed-border-offset": DEFAULT_OFFSET,
|
||||
"--tw-dashed-border-width": DEFAULT_BORDER_WIDTH,
|
||||
"--tw-dashed-border-color": DEFAULT_COLOR,
|
||||
"--tw-dashed-border-radius": DEFAULT_RADIUS,
|
||||
position: "relative",
|
||||
},
|
||||
".dashed-border-svg": {
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
inset: "0",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
pointerEvents: "none",
|
||||
},
|
||||
".dashed-border-rect": {
|
||||
fill: "none",
|
||||
stroke: "var(--tw-dashed-border-color)",
|
||||
strokeWidth: "var(--tw-dashed-border-width)",
|
||||
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: "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":
|
||||
{
|
||||
transitionTimingFunction:
|
||||
"var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))",
|
||||
transitionDuration: "var(--default-transition-duration, 150ms)",
|
||||
},
|
||||
".dashed-border.transition-colors": {
|
||||
transitionTimingFunction:
|
||||
"var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))",
|
||||
transitionDuration: "var(--default-transition-duration, 150ms)",
|
||||
},
|
||||
".dashed-border-transition .dashed-border-rect, .dashed-border.transition .dashed-border-rect, .dashed-border.transition-all .dashed-border-rect":
|
||||
{
|
||||
transitionProperty: dashedBorderTransitionProperties,
|
||||
transitionTimingFunction: "inherit",
|
||||
transitionDuration: "inherit",
|
||||
},
|
||||
".dashed-border.transition-colors .dashed-border-rect": {
|
||||
transitionProperty: "stroke",
|
||||
transitionTimingFunction: "inherit",
|
||||
transitionDuration: "inherit",
|
||||
},
|
||||
});
|
||||
|
||||
const spacing = theme("spacing", {}) as Record<string, string>;
|
||||
const borderWidths = theme("borderWidth", {
|
||||
DEFAULT: DEFAULT_BORDER_WIDTH,
|
||||
}) as Record<string, string>;
|
||||
const colors = flattenThemeMap(theme("colors", {}) as ThemeValueMap);
|
||||
const radii = theme("borderRadius", {
|
||||
DEFAULT: DEFAULT_RADIUS,
|
||||
}) as Record<string, string>;
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"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-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: spacing,
|
||||
},
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"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)))`,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
values: borderWidths,
|
||||
},
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"dashed-border-color": (value: string) => ({
|
||||
"--tw-dashed-border-color": value,
|
||||
"& .dashed-border-rect": {
|
||||
stroke: value,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
values: {
|
||||
...colors,
|
||||
current: "currentColor",
|
||||
inherit: "inherit",
|
||||
transparent: "transparent",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
addUtilities(
|
||||
Object.fromEntries(
|
||||
Object.entries(radii).map(([name, value]) => [
|
||||
`.dashed-border${roundedSelector(name)}`,
|
||||
{
|
||||
"--tw-dashed-border-radius": value,
|
||||
},
|
||||
]),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default dashedBorderPlugin;
|
||||
Reference in New Issue
Block a user