@nemigo/tailwind 0.0.2 → 1.5.0

package/dist/extra.d.ts

@@ -0,0 +1,4 @@
+import plugin from "tailwindcss/plugin";
+export type Plugin = ReturnType<typeof plugin>;
+declare const main: Plugin;
+export default main;

package/dist/extra.js

@@ -0,0 +1,146 @@
+import plugin from "tailwindcss/plugin";
+const manual = (v) => isNaN(Number(v));
+const unit = (v, unit, util) => {
+    if (manual(v))
+        return v;
+    if (v.startsWith("0."))
+        console.warn("Tailwind-Extra:", `Use ${util}-[${v.slice(1)}] instead ${util}-[${v}]`);
+    return v + unit;
+};
+const main = plugin((api) => {
+    const hover = "@media (hover:hover) { &:hover:not(:disabled):not(.disabled) }";
+    const active = "&:active";
+    const focusVisible = "&:focus-visible";
+    const focusWithin = "&:focus-within";
+    api.addVariant("h", [hover]);
+    api.addVariant("a", [active]);
+    api.addVariant("ha", [hover, active]);
+    api.addVariant("fv", [focusVisible]);
+    api.addVariant("hfv", [hover, focusVisible]);
+    api.addVariant("hfva", [hover, focusVisible, active]);
+    api.addVariant("fw", [focusWithin]);
+    api.addVariant("hfw", [hover, focusWithin]);
+    api.addVariant("hfwa", [hover, focusWithin, active]);
+    api.addUtilities({
+        ".animation-reverse": { animationDirection: "reverse!important" },
+        ".no-scroll": {
+            scrollbarWidth: "none!important",
+            "&::-webkit-scrollbar": {
+                display: "none!important",
+            },
+        },
+        ".fvn": {
+            "&:focus-visible": {
+                outline: "none",
+            },
+        },
+        ".svgo": {
+            "&:focus-visible": {
+                outline: "none",
+            },
+            "& .vector": {
+                vectorEffect: "non-scaling-stroke",
+                stroke: "#0000",
+                strokeWidth: "var(--focus-width)",
+                strokeLinejoin: "round",
+                strokeLinecap: "round",
+                transition: "stroke var(--theme-duration) var(--theme-timing)",
+            },
+            "&:focus-visible .vector": {
+                stroke: "var(--color-focus)",
+            },
+        },
+        ".usn": { userSelect: "none" },
+        ".ust": { userSelect: "text" },
+        ".usa": { userSelect: "all" },
+        ".pen": { pointerEvents: "none" },
+        ".pea": { pointerEvents: "auto" },
+        ".em": { fontSize: "1em" },
+        ".rem": { fontSize: "1rem" },
+        ".family-inter": { fontFamily: '"Inter", "Calibri", sans-serif !important' },
+        ".family-calibri": { fontFamily: '"Calibri", "Inter", sans-serif !important' },
+        ".brn": { whiteSpace: "pre-line" },
+        ".t-full": { whiteSpace: "nowrap" },
+        ".t-auto": { textWrap: "balance" },
+        ".t-cut": {
+            overflowX: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        },
+        ".vrl": { writingMode: "vertical-rl" },
+        ".rtl": { direction: "rtl" },
+        ".full": { width: "100%", height: "100%" },
+        ".max-full": { maxWidth: "100%", maxHeight: "100%" },
+        ".screen": { width: "100vw", height: "100svh" },
+        ".max-screen": { maxWidth: "100vw", maxHeight: "100svh" },
+        ".column": { display: "flex", flexDirection: "column" },
+        ".column-reverse": { display: "flex", flexDirection: "column-reverse" },
+        ".row": { flexDirection: "row" },
+        ".row-reverse": { flexDirection: "row-reverse" },
+        ".wrap": { flexWrap: "wrap" },
+        ".fc": { display: "flex", alignItems: "center" },
+        ".fcc": { display: "flex", alignItems: "center", justifyContent: "center" },
+        ".fccc": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" },
+        ".fsb": { display: "flex", justifyContent: "space-between" },
+        ".fsbc": { display: "flex", justifyContent: "space-between", alignItems: "center" },
+        ".g-start": { justifyContent: "flex-start" },
+        ".g-center": { justifyContent: "center" },
+        ".g-end": { justifyContent: "flex-end" },
+        ".g-sa": { justifyContent: "space-around" },
+        ".g-sb": { justifyContent: "space-between" },
+        ".g-se": { justifyContent: "space-evenly" },
+        ".v-start": { alignItems: "flex-start" },
+        ".v-center": { alignItems: "center" },
+        ".v-end": { alignItems: "flex-end" },
+        ".v-stretch": { alignItems: "stretch" },
+        ".v-baseline": { alignItems: "baseline" },
+        ".s-start": { alignSelf: "flex-start" },
+        ".s-center": { alignSelf: "center" },
+        ".s-end": { alignSelf: "flex-end" },
+        ".s-stretch": { alignSelf: "stretch" },
+        ".s-baseline": { alignSelf: "baseline" },
+        ".fluid": {
+            minHeight: "0",
+            minWidth: "0",
+            flexShrink: "1",
+            flexGrow: "1",
+        },
+        ".rigid": {
+            flexShrink: "0",
+            flexGrow: "0",
+        },
+    });
+    api.matchUtilities({
+        lh: (v) => ({ lineHeight: unit(v, "%", "lh") }),
+        fs: (v) => ({ fontSize: unit(v, "em", "fs") }),
+        br: (v) => ({ borderRadius: unit(v, "em", "br") }),
+        "br-t": (v) => ({ borderTopRadius: unit(v, "em", "br") }),
+        "br-b": (v) => ({ borderBottomRadius: unit(v, "em", "br") }),
+        "br-l": (v) => ({ borderLeftRadius: unit(v, "em", "br") }),
+        "br-r": (v) => ({ borderRightRadius: unit(v, "em", "br") }),
+        t: (v) => {
+            const duration = Number(v);
+            if (!isNaN(duration)) {
+                if (v.startsWith("0."))
+                    console.warn("Tailwind-Extra:", `Use t-[${v.slice(1)}] instead t-[${v}]`);
+                return {
+                    transitionDuration: `${duration}s !important`,
+                };
+            }
+            if (v.includes(",")) {
+                const sorted = v.split(",").sort().join();
+                if (sorted !== v)
+                    console.warn("Tailwind-Extra:", `Use t-[${sorted}] instead t-[${v}]`);
+                return {
+                    transitionProperty: sorted,
+                    transitionDuration: "var(--theme-duration)",
+                    transitionTimingFunction: "var(--theme-timing)",
+                };
+            }
+            return {
+                transition: `${v} var(--theme-duration) var(--theme-timing)`,
+            };
+        },
+    });
+});
+export default main;

package/dist/fluid.d.ts

@@ -1,4 +1,7 @@
 import plugin from "tailwindcss/plugin";
-type Plugin = ReturnType<typeof plugin>;
+export type Plugin = ReturnType<typeof plugin>;
 declare const main: Plugin;
+/**
+ * @type {Plugin}
+ */
 export default main;

package/dist/fluid.js

@@ -30,11 +30,11 @@ const main = plugin((api) => {
             const [_min, _max] = v.split("~");
             if (_min.startsWith("0.") || _max.startsWith("0.")) {
                 if (!_max.startsWith("0."))
-                    console.warn("Tailwind:", `Use ${util}-[${_min.slice(1)}~${_max}] instead ${util}-[${v}]`);
+                    console.warn("Tailwind-Fluid:", `Use ${util}-[${_min.slice(1)}~${_max}] instead ${util}-[${v}]`);
                 else if (!_min.startsWith("0."))
-                    console.warn("Tailwind:", `Use ${util}-[${_min}~${_max.slice(1)}] instead ${util}-[${v}]`);
+                    console.warn("Tailwind-Fluid:", `Use ${util}-[${_min}~${_max.slice(1)}] instead ${util}-[${v}]`);
                 else
-                    console.warn("Tailwind:", `Use ${util}-[${_min.slice(1)}~${_max.slice(1)}] instead ${util}-[${v}]`);
+                    console.warn("Tailwind-Fluid:", `Use ${util}-[${_min.slice(1)}~${_max.slice(1)}] instead ${util}-[${v}]`);
             }
             const max = Number(_max) || 0;
             const min = Number(_min) || 0;
@@ -97,4 +97,7 @@ const main = plugin((api) => {
         ["v-tt-y", "translateY"],
     ]));
 });
+/**
+ * @type {Plugin}
+ */
 export default main;

package/package.json

@@ -1,12 +1,15 @@
 {
 	"name": "@nemigo/tailwind",
-	"version": "0.0.2",
+	"version": "1.5.0",
 	"private": false,
 	"author": {
 		"name": "Vlad Logvin",
 		"email": "vlad.logvin84@gmail.com"
 	},
 	"type": "module",
+	"engines": {
+		"node": ">=22"
+	},
 	"scripts": {
 		"build": "svelte-package && rimraf .svelte-kit",
 		"check": "tsc --noemit",
@@ -14,6 +17,10 @@
 		"format": "prettier --write ./"
 	},
 	"exports": {
+		"./extra": {
+			"types": "./dist/extra.d.ts",
+			"default": "./dist/extra.js"
+		},
 		"./fluid": {
 			"types": "./dist/fluid.d.ts",
 			"default": "./dist/fluid.js"
@@ -23,7 +30,6 @@
 		"tailwindcss": ">=4.0.0"
 	},
 	"devDependencies": {
-		"@nemigo/configs": "workspace:*",
-		"tailwindcss": "4.1.14"
+		"@nemigo/configs": "workspace:*"
 	}
 }