feat: support repeating-*

Jackie1210 · Oct 14, 2023 · 1197d2f · 1197d2f
1 parent a4edef1
commit 1197d2f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ interface LinearOrientation {
 
 interface LinearResult {
   orientation: LinearOrientation
+  repeating: boolean
   stops: Array<{
     color: string
     offset: string
@@ -26,6 +27,7 @@ interface LinearResult {
 interface RadiusResult {
   shape: 'circle' | 'ellipse'
   size: string
+  repeating: boolean
   position: string
   stops: Array<{
     color: string
@@ -38,8 +40,8 @@ interface RadiusResult {
 - [x] linear-gradient
 - [x] radial-gradient
 - [ ] conic-gradient
-- [ ] repeating-linear-gradient
-- [ ] repeating-radial-gradient
+- [x] repeating-linear-gradient
+- [x] repeating-radial-gradient
 - [ ] repeating-conic-gradient
 
 

diff --git a/src/linear.ts b/src/linear.ts
@@ -7,6 +7,7 @@ interface LinearOrientation {
 
 export interface LinearResult {
   orientation: LinearOrientation
+  repeating: boolean
   stops: Array<{
     color: string
     offset: string
@@ -15,11 +16,12 @@ export interface LinearResult {
 }
 
 export function parseLinearGradient(input: string): LinearResult {
-  if (!input.startsWith('linear-gradient(')) throw new SyntaxError(`unsupported input: ${input}`)
+  if (!/^(repeating-)?linear-gradient/.test(input)) throw new SyntaxError(`could not find syntax for this item: ${input}`)
 
-  let [,props] = input.match(/linear-gradient\((.+)\)/)
+  let [, repeating, props] = input.match(/(repeating-)?linear-gradient\((.+)\)/)
   const result: LinearResult = {
     orientation: { type: 'directional', value: 'bottom' },
+    repeating: Boolean(repeating),
     stops: []
   }
 

diff --git a/src/radial.ts b/src/radial.ts
@@ -4,6 +4,7 @@ export type RgExtentKeyword = 'closest-corner' | 'closest-side' | 'farthest-corn
 
 export interface RadiusResult {
   shape: 'circle' | 'ellipse'
+  repeating: boolean
   size: string
   position: string
   stops: Array<{
@@ -14,17 +15,17 @@ export interface RadiusResult {
 }
 
 export function parseRadialGradient(input: string): RadiusResult {
-  if (!input.startsWith('radial-gradient(')) throw new SyntaxError(`unsupported input: ${input}`)
-
+  if (!/(repeating-)?radial-gradient/.test(input)) throw new SyntaxError(`could not find syntax for this item: ${input}`)
+
+  const [, repeating, props] = input.match(/(repeating-)?radial-gradient\((.+)\)/)
   const result: RadiusResult = {
     shape: 'ellipse',
+    repeating: Boolean(repeating),
     size: 'farthest-corner',
     position: 'center',
     stops: []
   }
 
-  const [, props] = input.match(/radial-gradient\((.+)\)/)
-
   const properties = split(props)
   // handle like radial-gradient(rgba(0,0,0,0), #ee7621)
   if (isColor(properties[0])) {

diff --git a/test/linear.test.ts b/test/linear.test.ts
@@ -7,6 +7,7 @@ describe('linear', () => {
 
     expect(res).toEqual({
       orientation: { type: 'directional', value: 'top' },
+      repeating: false,
       stops: [
         { color: 'blue' },
         { color: 'red' }
@@ -19,6 +20,7 @@ describe('linear', () => {
 
     expect(res).toEqual({
       orientation: { type: 'angular', value: '45deg' },
+      repeating: false,
       stops: [
         { color: 'rgba(0, 0, 0, 0)' },
         { color: 'red' }
@@ -31,6 +33,7 @@ describe('linear', () => {
 
     expect(res).toEqual({
       orientation: { type: 'angular', value: '0.25turn' },
+      repeating: false,
       stops: [
         { color: 'rgba(0, 0, 0, 0)', offset: '10%' },
         { color: 'red', offset: '30%' }
@@ -43,6 +46,20 @@ describe('linear', () => {
 
     expect(res).toEqual({
       orientation: { type: 'directional', value: 'left bottom' },
+      repeating: false,
+      stops: [
+        { color: 'rgba(0, 0, 0, 0)', offset: '10%', hint: '20%' },
+        { color: 'red', offset: '30%' }
+      ]
+    })
+  })
+
+  it('should parse repeating', () => {
+    const res = parseLinearGradient('repeating-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 10%, 20%, red 30%)')
+
+    expect(res).toEqual({
+      orientation: { type: 'directional', value: 'left bottom' },
+      repeating: true,
       stops: [
         { color: 'rgba(0, 0, 0, 0)', offset: '10%', hint: '20%' },
         { color: 'red', offset: '30%' }

diff --git a/test/radial.test.ts b/test/radial.test.ts
@@ -9,9 +9,11 @@ describe('radial', () => {
     const g4 = parseRadialGradient('radial-gradient(circle, #333, #eee 80%)')
     const g5 = parseRadialGradient('radial-gradient(circle 10vw, #333, #eee 80%)')
     const g6 = parseRadialGradient('radial-gradient(#333, #eee 80%)')
+    const g7 = parseRadialGradient('repeating-radial-gradient(#333, #eee 80%)')
 
     expect(g1).toEqual({
       shape: 'circle',
+      repeating: false,
       position: '100%',
       size: 'farthest-corner',
       stops: [
@@ -22,6 +24,7 @@ describe('radial', () => {
 
     expect(g2).toEqual({
       shape: 'circle',
+      repeating: false,
       position: '10px 20px',
       size: '20px',
       stops: [
@@ -32,6 +35,7 @@ describe('radial', () => {
 
     expect(g3).toEqual({
       shape: 'circle',
+      repeating: false,
       position: '10px 20px',
       size: 'closest-corner',
       stops: [
@@ -42,6 +46,7 @@ describe('radial', () => {
 
     expect(g4).toEqual({
       shape: 'circle',
+      repeating: false,
       position: 'center',
       size: 'farthest-corner',
       stops: [
@@ -52,6 +57,7 @@ describe('radial', () => {
 
     expect(g5).toEqual({
       shape: 'circle',
+      repeating: false,
       position: 'center',
       size: '10vw',
       stops: [
@@ -62,6 +68,18 @@ describe('radial', () => {
 
     expect(g6).toEqual({
       shape: 'ellipse',
+      repeating: false,
+      position: 'center',
+      size: 'farthest-corner',
+      stops: [
+        { color: '#333' },
+        { color: '#eee', offset: '80%' }
+      ]
+    })
+
+    expect(g7).toEqual({
+      shape: 'ellipse',
+      repeating: true,
       position: 'center',
       size: 'farthest-corner',
       stops: [