windrunner 1.1.3 → 1.1.4

package/README.md

@@ -30,9 +30,9 @@ npm install windrunner
   windrunner({ autoStart: true });
 </script>
 
-<div class="flex items-center gap-4 p-6 bg-blue-50 rounded-xl">
-  <h1 class="text-2xl font-bold text-slate-900">Hello</h1>
-  <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200">
+<div class="flex items-center gap-4 p-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl">
+  <h1 class="text-2xl font-bold text-white">Hello Windrunner</h1>
+  <button class="px-4 py-2 bg-white text-blue-600 rounded-lg hover:bg-blue-50 transition-colors duration-200">
     Click me
   </button>
 </div>
@@ -42,7 +42,7 @@ npm install windrunner
 
 ```html
 <script type="module">
-  import { windrunner } from "https://cdn.jsdelivr.net/npm/windrunner@1.1.2/dist/index.min.js";
+  import { windrunner } from "https://cdn.jsdelivr.net/npm/windrunner@latest/dist/index.min.js";
   windrunner({ autoStart: true });
 </script>
 ```
@@ -203,7 +203,7 @@ Full Tailwind v4 coverage including:
 - **Grid** — grid-cols/rows, col/row-span, grid-flow, auto-cols/rows, place-*
 - **Typography** — font-size, font-weight, line-height, letter-spacing, text-align, text-color, text-decoration, text-transform, text-overflow, whitespace, word-break, list-style
 - **Colors** — all OKLCH P3 Tailwind v4 palette + mauve/olive/mist/taupe, opacity modifier (`bg-blue-500/50`)
-- **Backgrounds** — bg-color, bg-linear-to-* (v4), gradient stops (from/via/to), bg-size/position/repeat/attachment/clip/origin
+- **Backgrounds** — bg-color, bg-gradient-to-* with gradient stops (from/via/to), bg-size/position/repeat/attachment/clip/origin
 - **Borders** — border-width/style/color/radius (all sides + logical)
 - **Effects** — shadow, opacity, inset-shadow-* (v4), ring, inset-ring-* (v4)
 - **Transforms** — rotate, scale, translate (2D + 3D), skew, origin, perspective, backface, transform-style

package/dist/index.esm.js

@@ -21,14 +21,14 @@ var theme = {
   backgroundColor: ({ theme: theme2 }) => theme2("colors"),
   backgroundImage: {
     none: "none",
-    "linear-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
-    "linear-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
-    "linear-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
-    "linear-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
-    "linear-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
-    "linear-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
-    "linear-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
-    "linear-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))"
+    "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
+    "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
+    "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
+    "gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
+    "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
+    "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
+    "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
+    "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))"
   },
   backgroundPosition: {
     bottom: "bottom",
@@ -2763,23 +2763,33 @@ function buildGradientDeclaration(baseToken, theme2) {
   const colors = theme2.gradientColorStops || theme2.colors || {};
   if (baseToken.startsWith("from-")) {
     const key = baseToken.slice(5);
-    if (key.endsWith("%")) return `--tw-gradient-from-position: ${key};`;
+    if (key.endsWith("%") || /^\d+$/.test(key)) {
+      return `--tw-gradient-from-position: ${key.endsWith("%") ? key : key + "%"};`;
+    }
     const color = resolveColorWithOpacity(colors, key);
     if (color !== void 0) {
-      return `--tw-gradient-from: ${color}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to, transparent);`;
+      return `--tw-gradient-from: ${color} var(--tw-gradient-from-position, 0%); --tw-gradient-to: transparent var(--tw-gradient-to-position, 100%); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`;
     }
   }
   if (baseToken.startsWith("via-")) {
     const key = baseToken.slice(4);
-    if (key.endsWith("%")) return `--tw-gradient-via-position: ${key};`;
+    if (key.endsWith("%") || /^\d+$/.test(key)) {
+      return `--tw-gradient-via-position: ${key.endsWith("%") ? key : key + "%"};`;
+    }
     const color = resolveColorWithOpacity(colors, key);
-    if (color !== void 0) return `--tw-gradient-via: ${color};`;
+    if (color !== void 0) {
+      return `--tw-gradient-to: transparent var(--tw-gradient-to-position, 100%); --tw-gradient-stops: var(--tw-gradient-from), ${color} var(--tw-gradient-via-position, 50%), var(--tw-gradient-to);`;
+    }
   }
   if (baseToken.startsWith("to-")) {
     const key = baseToken.slice(3);
-    if (key.endsWith("%")) return `--tw-gradient-to-position: ${key};`;
+    if (key.endsWith("%") || /^\d+$/.test(key)) {
+      return `--tw-gradient-to-position: ${key.endsWith("%") ? key : key + "%"};`;
+    }
     const color = resolveColorWithOpacity(colors, key);
-    if (color !== void 0) return `--tw-gradient-to: ${color};`;
+    if (color !== void 0) {
+      return `--tw-gradient-to: ${color} var(--tw-gradient-to-position, 100%);`;
+    }
   }
   return void 0;
 }