fixes #118 and then some 🤘🏻

Author: argyleink

src/components/GradientImportDialog.svelte

@@ -1,7 +1,9 @@
 <script>
   import { onMount } from 'svelte'
-  import { parseGradient, ParseError } from '../lib/parseGradient'
+  import { parseGradient, parseMultipleGradients, ParseError } from '../lib/parseGradient'
   import { applyParsedToStores } from '../lib/importGradient'
+  import { layers, addLayer } from '../store/layers'
+  import { get } from 'svelte/store'
   import ImportEditor from './import/ImportEditor.svelte'
   import ImportActions from './import/ImportActions.svelte'
 
@@ -47,9 +49,15 @@
 
   function validate() {
     try {
-      parseGradient(gradientText)
-      valid = true
-      error = ''
+      // Try parsing as multiple gradients first
+      const gradients = parseMultipleGradients(gradientText)
+      if (gradients.length > 0) {
+        valid = true
+        error = ''
+      } else {
+        valid = false
+        error = 'No valid gradients found'
+      }
     } catch (e) {
       valid = false
       error = e instanceof ParseError ? e.message : 'Invalid gradient'
@@ -59,8 +67,26 @@
   function onImportClick() {
     if (!valid || !gradientText.trim()) return
     try {
-      const parsed = parseGradient(gradientText)
-      applyParsedToStores(parsed)
+      const gradients = parseMultipleGradients(gradientText)
+      if (gradients.length === 0) {
+        error = 'No valid gradients found'
+        return
+      }
+      
+      // Clear existing layers if any, and import all gradients
+      const currentLayers = get(layers)
+      
+      // Import first gradient into current state
+      applyParsedToStores(gradients[0])
+      
+      // Import remaining gradients as new layers
+      if (gradients.length > 1) {
+        for (let i = 1; i < gradients.length; i++) {
+          applyParsedToStores(gradients[i])
+          addLayer({ seed: 'duplicate', position: 'bottom' })
+        }
+      }
+      
       close()
     } catch (e) {
       // Should be rare because button is disabled when invalid; keep safe

src/lib/importGradient.ts

@@ -37,7 +37,7 @@ function normalizeNamedPosition(name: string): string {
   return map[name] || name
 }
 
-export function applyParsedToStores(parsed: ParsedGradient) {
+export function applyParsedToStores(parsed: ParsedGradient, opts?: { clearLayers?: boolean }) {
   gradient_type.set(parsed.type)
   if (parsed.space) gradient_space.set(parsed.space)
   if (parsed.interpolation) gradient_interpolation.set(parsed.interpolation)

src/lib/parseGradient.test.ts

@@ -26,6 +26,26 @@ const valid = [
     oklch(80% 0.3 89)  64%,
     oklch(90% 0.5 200)
   );`,
+  // Multiple gradients (parser should take the first one)
+  `linear-gradient(
+    to top right in oklab,
+    oklch(79% 0.21 182 / 0.5),
+    oklch(66% 0.32 259 / 0.5)
+  ), linear-gradient(
+    276deg in oklab,
+    color(display-p3 77% 0% 52%),
+    hsl(347 100% 81%) 39%,
+    oklab(95% -0.03 0.40)
+  )`,
+  // Radial gradient with length-based size
+  `radial-gradient(
+    100px circle in oklab,
+    color(display-p3 77% 0% 52%),
+    hsl(347 100% 81%) 39%,
+    oklab(95% -0.03 0.40)
+  )`,
+  // Color with alpha channel
+  'linear-gradient(to right, oklch(79% 0.21 182 / 0.5), oklch(66% 0.32 259 / 0.5))',
 ]
 
 const invalid = [
@@ -100,5 +120,24 @@ describe('parseGradient', () => {
       expect(parsed.linear?.angleKeyword).toBe(kw)
     })
   })
+
+  it('parses multiple gradients and takes the first one', () => {
+    const multiGradient = `linear-gradient(to top right in oklab, oklch(79% 0.21 182 / 0.5), oklch(66% 0.32 259 / 0.5)), linear-gradient(276deg, red, blue)`
+    const parsed = parseGradient(multiGradient)
+    expect(parsed.type).toBe('linear')
+    expect(parsed.linear?.angleKeyword).toBe('to top right')
+    expect(parsed.space).toBe('oklab')
+    expect(parsed.stops.length).toBe(2)
+  })
+
+  it('parses radial gradients with length-based sizes', () => {
+    const withLength = parseGradient('radial-gradient(100px circle, red, blue)')
+    expect(withLength.type).toBe('radial')
+    expect(withLength.radial?.size).toBe('100px')
+    expect(withLength.radial?.shape).toBe('circle')
+
+    const withPair = parseGradient('radial-gradient(50px 100px, red, blue)')
+    expect(withPair.radial?.size).toBe('50px 100px')
+  })
 })
 

src/lib/parseGradient.ts

@@ -86,11 +86,50 @@ function innerContent(input: string): string {
   return input.slice(start + 1, end).trim()
 }
 
+// Helper to extract individual gradient functions from comma-separated list
+function extractGradients(input: string): string[] {
+  const results: string[] = []
+  let depth = 0
+  let current = ''
+  let i = 0
+  
+  while (i < input.length) {
+    const ch = input[i]
+    
+    if (ch === '(') depth++
+    else if (ch === ')') depth--
+    
+    if (ch === ',' && depth === 0) {
+      const trimmed = current.trim()
+      if (trimmed && /^(linear|radial|conic)-gradient\s*\(/i.test(trimmed)) {
+        results.push(trimmed)
+      }
+      current = ''
+    } else {
+      current += ch
+    }
+    i++
+  }
+  
+  // Don't forget the last one
+  const trimmed = current.trim()
+  if (trimmed && /^(linear|radial|conic)-gradient\s*\(/i.test(trimmed)) {
+    results.push(trimmed)
+  }
+  
+  return results.length > 0 ? results : [input.trim()]
+}
+
 export function parseGradient(input: string): ParsedGradient {
   // Strip trailing semicolons that may be present when copying from CSS rules
   const cleanedInput = input.trim().replace(/;+$/, '')
-  const type = classifyFunction(cleanedInput)
-  const body = innerContent(cleanedInput)
+  
+  // Extract first gradient from potentially multiple gradients
+  const gradients = extractGradients(cleanedInput)
+  const firstGradient = gradients[0]
+  
+  const type = classifyFunction(firstGradient)
+  const body = innerContent(firstGradient)
 
   // split by top-level commas
   const segments = splitTopLevel(body, ',')
@@ -169,12 +208,18 @@ export function parseGradient(input: string): ParsedGradient {
     }
   } else if (type === 'radial') {
     const shape = /(circle|ellipse)/i.exec(prelude)?.[1]?.toLowerCase() as 'circle'|'ellipse'|undefined
-    // size keywords or length pairs
+    // size keywords or length/percentage values
     const sizeKw = /(closest-side|closest-corner|farthest-side|farthest-corner)/i.exec(prelude)?.[1]
     let size: string | undefined = sizeKw?.toLowerCase()
     if (!size) {
+      // Try to match explicit size: single length (for circle) or pair of lengths (for ellipse)
+      const singleSize = prelude.match(/\b(\d+(?:\.\d+)?(?:px|em|rem|vw|vh|%))(?!\s+\d)/i)
       const pair = prelude.match(/\b(\d+(?:\.\d+)?(?:%|px|em|rem|vw|vh))\s+(\d+(?:\.\d+)?(?:%|px|em|rem|vw|vh))\b/)
-      if (pair) size = `${pair[1]} ${pair[2]}`
+      if (pair) {
+        size = `${pair[1]} ${pair[2]}`
+      } else if (singleSize) {
+        size = singleSize[1]
+      }
     }
     const { namedPosition, position } = extractPosition(prelude)
     radial = {
@@ -273,3 +318,18 @@ export function parseGradient(input: string): ParsedGradient {
   }
 }
 
+// Parse multiple gradients from a comma-separated string
+export function parseMultipleGradients(input: string): ParsedGradient[] {
+  const cleanedInput = input.trim().replace(/;+$/, '')
+  const gradients = extractGradients(cleanedInput)
+  
+  return gradients.map(g => {
+    try {
+      return parseGradient(g)
+    } catch (e) {
+      // Skip invalid gradients
+      return null
+    }
+  }).filter(Boolean) as ParsedGradient[]
+}
+