fix: invalid gradient color stop css

tw-in-js · Jan 21, 2021 · 0f3264c · 0f3264c
1 parent c651a5b
commit 0f3264c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/src/__tests__/api.json b/src/__tests__/api.json
@@ -182,7 +182,7 @@
   "bg-fuchsia": ".bg-fuchsia{background-color:fuchsia}",
   "bg-opacity-30": ".bg-opacity-30{--tw-bg-opacity:0.3}",
   "bg-hero-pattern": ".bg-hero-pattern{background-image:url('/img/hero-pattern.svg')}",
-  "bg-gradient-to-tl": ".bg-gradient-to-tl{background-image:linear-gradient(to left top,var(--tw-gradient-stops)}",
+  "bg-gradient-to-tl": ".bg-gradient-to-tl{background-image:linear-gradient(to left top,var(--tw-gradient-stops))}",
   "border": ".border{border-width:1px}",
   "border-solid": ".border-solid{border-style:solid}",
   "border-dashed": ".border-dashed{border-style:dashed}",
@@ -535,13 +535,13 @@
   ],
   "bg-gradient-to-r from-purple-400 via-pink-500 to-red-500": [
     ".from-purple-400{--tw-gradient-from:#a78bfa;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(167,139,250,0))}",
-    ".bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops)}",
+    ".bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}",
     ".via-pink-500{--tw-gradient-stops:var(--tw-gradient-from),#ec4899,var(--tw-gradient-to,rgba(236,72,153,0))}",
     ".to-red-500{--tw-gradient-to:#ef4444}"
   ],
   "bg-gradient-to-tl from-fuchsia to-blue-500": [
     ".from-fuchsia{--tw-gradient-from:fuchsia;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}",
-    ".bg-gradient-to-tl{background-image:linear-gradient(to left top,var(--tw-gradient-stops)}",
+    ".bg-gradient-to-tl{background-image:linear-gradient(to left top,var(--tw-gradient-stops))}",
     ".to-blue-500{--tw-gradient-to:#3b82f6}"
   ],
   "ring": [

diff --git a/src/__tests__/api.test.ts b/src/__tests__/api.test.ts
@@ -177,7 +177,7 @@ test('properties presedence (gradient)', ({ sheet, tw }) => {
   )
   assert.equal(sheet.target, [
     '.from-purple-400{--tw-gradient-from:#a78bfa;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(167,139,250,0))}',
-    '.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops)}',
+    '.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}',
     '.via-pink-500{--tw-gradient-stops:var(--tw-gradient-from),#ec4899,var(--tw-gradient-to,rgba(236,72,153,0))}',
     '.to-red-500{--tw-gradient-to:#ef4444}',
   ])

diff --git a/src/__tests__/hash.test.ts b/src/__tests__/hash.test.ts
@@ -90,10 +90,10 @@ test('scale', ({ instance, sheet }) => {
 })
 
 test('bg-gradient-to-r from-purple-500', ({ instance, sheet }) => {
-  assert.is(instance.tw('bg-gradient-to-r from-purple-500'), 'tw-1g4n8v8 tw-1wr14we')
+  assert.is(instance.tw('bg-gradient-to-r from-purple-500'), 'tw-uf3zep tw-1wr14we')
   assert.equal(sheet.target, [
     '.tw-1wr14we{--tw-sc6ze8:#8b5cf6;--tw-wt1r4o:var(--tw-sc6ze8),var(--tw-z5bexf,rgba(139,92,246,0))}',
-    '.tw-1g4n8v8{background-image:linear-gradient(to right,var(--tw-wt1r4o)}',
+    '.tw-uf3zep{background-image:linear-gradient(to right,var(--tw-wt1r4o))}',
   ])
 })
 

diff --git a/src/twind/plugins.ts b/src/twind/plugins.ts
@@ -658,7 +658,7 @@ export const corePlugins: Plugins = {
       case 'gradient':
         if (params[1] === 'to' && (_ = expandEdges(params[2]))) {
           return {
-            backgroundImage: `linear-gradient(to ${join(_, ' ')},var(--tw-gradient-stops)`,
+            backgroundImage: `linear-gradient(to ${join(_, ' ')},var(--tw-gradient-stops))`,
           }
         }
     }