Merge branch 'main' into 264-tab-states

.changeset/jsx-curlies-in-icons.md

@@ -0,0 +1,5 @@
+---
+'@cypress-design/css': minor
+---
+
+parse icons with curlies in color

css/src/tw-icon-extractor.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { getHtmlAttributes } from './tw-icon-extractor'
+import { getHtmlAttributes, IconExtractor } from './tw-icon-extractor'
 
 describe('getHtmlAttributes', () => {
   it('should return null if no attributes are found', () => {
@@ -19,4 +19,29 @@ describe('getHtmlAttributes', () => {
       values: ['red'],
     })
   })
+
+  it('should take care of isolated lines with curlies', () => {
+    expect(getHtmlAttributes("fill={'red'}")).toEqual({
+      names: ['fill'],
+      values: ['red'],
+    })
+  })
+})
+
+describe('IconExtractor', () => {
+  it('should extract colors', () => {
+    const ext = IconExtractor(
+      '<wind-keep fillColor="red-300" strokeColor="indigo-800" />'
+    )
+    expect(ext).toContain('icon-light-red-300')
+    expect(ext).toContain('icon-dark-indigo-800')
+  })
+
+  it('should extract colors in curlies', () => {
+    const ext = IconExtractor(
+      "<wind-keep fillColor={'red-300'} strokeColor={'indigo-800'} />"
+    )
+    expect(ext).toContain('icon-light-red-300')
+    expect(ext).toContain('icon-dark-indigo-800')
+  })
 })

css/src/tw-icon-extractor.ts

@@ -10,12 +10,12 @@ import defaultExtractor from './tw-default-extractor'
 const { camelCase } = _
 
 export function getHtmlAttributes(line: string) {
-  const attributes = line.match(/([\w-]+)=["']?([^"']*)["']?/g)
+  const attributes = line.matchAll(/([\w-]+)=\{?["']?([^"']*)["']\}?/g)
   if (!attributes) return null
-  const names = attributes.map((attr) => camelCase(attr.split('=')[0]))
-  const values = attributes.map((attr) =>
-    attr.split('=')[1].replace(/['"]/g, '')
-  )
+  const attributesArray = Array.from(attributes)
+  if (!attributesArray.length) return null
+  const names = attributesArray.map((attr) => camelCase(attr[1]))
+  const values = attributesArray.map((attr) => attr[2])
   return { names, values }
 }