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