fix: should handle more unit for rg-size

Jackie1210 · Oct 15, 2023 · 58ef6e0 · 58ef6e0
1 parent 57fbeda
commit 58ef6e0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/radial.ts b/src/radial.ts
@@ -86,7 +86,7 @@ export function parseRadialGradient(input: string): RadialResult {
   const prefix = properties[0].split('at').map(v => v.trim())
 
   const shape = ((prefix[0] || '').match(/(circle|ellipse)/) || [])[1]
-  const size: string[] = (prefix[0] || '').match(/(-?\d+\.?\d*(vw|vh|px|em|rem)?|closest-corner|closest-side|farthest-corner|farthest-side)/g) || []
+  const size: string[] = (prefix[0] || '').match(/(-?\d+\.?\d*(vw|vh|px|em|rem|%|rad|grad|turn|deg)?|closest-corner|closest-side|farthest-corner|farthest-side)/g) || []
   const position = extendPosition((prefix[1] || '').split(' '))
 
   if (!shape) {

diff --git a/test/radial.test.ts b/test/radial.test.ts
@@ -144,19 +144,22 @@ describe('radial', () => {
   })
 
   it('should parse negative radius', () => {
-    const g = parseRadialGradient('radial-gradient(circle -20px, #333, #eee 80%)')
+    const g = parseRadialGradient('radial-gradient(-20% 20% at top left, yellow, blue)')
 
     expect(g).toEqual({
-      shape: 'circle',
+      shape: 'ellipse',
       repeating: false,
       position: {
-        x: { type: 'keyword', value: 'center' },
-        y: { type: 'keyword', value: 'center' },
+        x: { type: 'keyword', value: 'top' },
+        y: { type: 'keyword', value: 'left' },
       },
-      size: [{ type: 'length', value: { unit: 'px', value: '-20' } }],
+      size: [
+        { type: 'length', value: { unit: '%', value: '-20' } },
+        { type: 'length', value: { unit: '%', value: '20' } }
+      ],
       stops: [
-        { color: '#333', offset: undefined },
-        { color: '#eee', offset: { unit: '%', value: '80' } }
+        { color: 'yellow', offset: undefined },
+        { color: 'blue', offset: undefined }
       ]
     })
   })