feat: shadow inset not working

src/utils/utilities.ts

@@ -1,7 +1,7 @@
 import type { CSSEntries, CSSObject, DynamicMatcher, ParsedColorValue, RuleContext, StaticRule, VariantContext } from '@unocss/core'
 import { isString, toArray } from '@unocss/core'
 import { cacheRestoreSelector } from 'unplugin-transform-class/utils'
-import { getStringComponent } from '@unocss/rule-utils'
+import { getStringComponent, getStringComponents } from '@unocss/rule-utils'
 import type { Theme } from '../theme'
 import { colorOpacityToString, colorToString, parseCssColor } from './colors'
 
@@ -113,9 +113,9 @@ export function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): Pa
   if (h.numberWithUnit(bracketOrMain))
     return
 
-  if (bracketOrMain.match(/^#[\da-fA-F]+/g))
+  if (/^#[\da-fA-F]+$/.test(bracketOrMain))
     color = bracketOrMain
-  else if (bracketOrMain.match(/^hex-[\da-fA-F]+/g))
+  else if (/^hex-[\da-fA-F]+$/.test(bracketOrMain))
     color = `#${bracketOrMain.slice(4)}`
   else if (main.startsWith('$'))
     color = h.cssvar(main)
@@ -236,14 +236,32 @@ export function colorableShadows(shadows: string | string[], colorVar: string) {
   shadows = toArray(shadows)
   for (let i = 0; i < shadows.length; i++) {
     // shadow values are between 3 to 6 terms including color
-    const components = getComponents(shadows[i], ' ', 6)
+    const components = getStringComponents(shadows[i], ' ', 6)
     if (!components || components.length < 3)
       return shadows
-    const color = parseCssColor(components.pop())
-    if (color == null)
-      return shadows
-    colored.push(`${components.join(' ')} var(${colorVar}, ${colorToString(color)})`)
+
+    let isInset = false
+    const pos = components.indexOf('inset')
+    if (pos !== -1) {
+      components.splice(pos, 1)
+      isInset = true
+    }
+
+    let colorVarValue = ''
+    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(`${isInset ? 'inset ' : ''}${components.join(' ')} var(${colorVar}${colorVarValue})`)
   }
+
   return colored
 }
 

test/color.test.ts

@@ -116,13 +116,22 @@ 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, rgba(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))'])
   })
 
   it('parses color token', () => {
@@ -184,7 +193,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({})
   })
 })

test/preset-mini.test.ts

@@ -372,7 +372,7 @@ describe('preset-mini', () => {
     expect((await uno.generate('shadow-[0_2px_10px] shadow-blackA7', { preflights: false })).css)
       .toMatchInlineSnapshot(`
         "/* layer: default */
-        .shadow-_lfl_0_2px_10px_lfr_{--un-shadow:0 2px 10px;box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+        .shadow-_lfl_0_2px_10px_lfr_{--un-shadow:0 2px 10px var(--un-shadow-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
         .shadow-blackA7{--un-shadow-opacity:0.169;--un-shadow-color:hsla(0,0%,0%,var(--un-shadow-opacity));}"
       `)
   })