fix(preset-mini): fixed shadow inset not working (#3612)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Mar 14, 2024 · cc09252 · cc09252
1 parent e1a8c5e
commit cc09252
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts
@@ -102,9 +102,9 @@ export function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): Pa
   if (h.numberWithUnit(bracketOrMain))
     return
 
-  if (/^#[\da-fA-F]+/.test(bracketOrMain))
+  if (/^#[\da-fA-F]+$/.test(bracketOrMain))
     color = bracketOrMain
-  else if (/^hex-[\da-fA-F]+/.test(bracketOrMain))
+  else if (/^hex-[\da-fA-F]+$/.test(bracketOrMain))
     color = `#${bracketOrMain.slice(4)}`
   else if (main.startsWith('$'))
     color = h.cssvar(main)
@@ -228,17 +228,26 @@ export function colorableShadows(shadows: string | string[], colorVar: string) {
     if (!components || components.length < 3)
       return shadows
 
-    if (parseCssColor(components.at(0)))
-      return shadows
+    let isInset = false
+    const pos = components.indexOf('inset')
+    if (pos !== -1) {
+      components.splice(pos, 1)
+      isInset = true
+    }
 
     let colorVarValue = ''
-    if (parseCssColor(components.at(-1))) {
+    if (parseCssColor(components.at(0))) {
+      const color = parseCssColor(components.shift())
+      if (color)
+        colorVarValue = `, ${colorToString(color)}`
+    }
+    else if (parseCssColor(components.at(-1))) {
       const color = parseCssColor(components.pop())
       if (color)
         colorVarValue = `, ${colorToString(color)}`
     }
 
-    colored.push(`${components.join(' ')} var(${colorVar}${colorVarValue})`)
+    colored.push(`${isInset ? 'inset ' : ''}${components.join(' ')} var(${colorVar}${colorVarValue})`)
   }
 
   return colored

diff --git a/test/color.test.ts b/test/color.test.ts
@@ -118,13 +118,24 @@ describe('color utils', () => {
     expect(colorableShadows('0', '--v')).eql(['0'])
     expect(colorableShadows('1px 2px', '--v')).eql(['1px 2px'])
 
-    // text shadow alternative syntax (color first, unsupported/not parsed)
-    expect(colorableShadows('#0000 0 0', '--v')).eql(['#0000 0 0'])
+    // text shadow alternative syntax (color first)
+    expect(colorableShadows('#0000 0 0', '--v')).eql(['0 0 var(--v, rgb(0 0 0 / 0))'])
 
     // component length
     expect(colorableShadows('1px #200', '--v')).eql(['1px #200'])
     expect(colorableShadows('inset 2px 3px 4px 5px #600', '--v')).eql(['inset 2px 3px 4px 5px var(--v, rgb(102 0 0))'])
     expect(colorableShadows('inset 2px 3px 4px 5px 6px #700', '--v')).eql(['inset 2px 3px 4px 5px 6px #700'])
+
+    // optional keyword "inset" and color value order
+    expect(colorableShadows('1px 0 0 0 #000', '--v')).eql(['1px 0 0 0 var(--v, rgb(0 0 0))'])
+    expect(colorableShadows('#000 inset 1px 0 0 0', '--v')).eql(['inset 1px 0 0 0 var(--v, rgb(0 0 0))'])
+    expect(colorableShadows('inset #000 1px 0 0 0', '--v')).eql(['inset 1px 0 0 0 var(--v, rgb(0 0 0))'])
+    expect(colorableShadows('inset 1px 0 0 0 #000', '--v')).eql(['inset 1px 0 0 0 var(--v, rgb(0 0 0))'])
+    expect(colorableShadows('#000 1px 0 0 0 inset', '--v')).eql(['inset 1px 0 0 0 var(--v, rgb(0 0 0))'])
+    expect(colorableShadows('1px 0 0 0 #000 inset', '--v')).eql(['inset 1px 0 0 0 var(--v, rgb(0 0 0))'])
+    expect(colorableShadows('1px 0 0 0 inset #000', '--v')).eql(['inset 1px 0 0 0 var(--v, rgb(0 0 0))'])
+
+    // invalid
   })
 
   it('parses color token', () => {
@@ -186,9 +197,16 @@ describe('color utils', () => {
       prop: 'var(--abc)',
     })
 
+    expect(fn('#0000')).eql({
+      '--un-v-opacity': 0,
+      'prop': 'rgb(0 0 0 / var(--un-v-opacity))',
+    })
+
     // invalid
     expect(fn('hex-invalid')).eql({})
     expect(fn('5px')).eql(undefined)
     expect(fn('5rem')).eql(undefined)
+    expect(fn('#fff f')).eql({})
+    expect(fn('hex-fff f')).eql({})
   })
 })