Fix(CSS): outline doesn't handle some keyword values

Now `outline` works well with CSS-wide keywords and all `outline-style` keywords.
master-co · Nov 1, 2023 · b1364ae · b1364ae
1 parent 83ef1cd
commit b1364ae
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/packages/css/src/config/rules.ts b/packages/css/src/config/rules.ts
@@ -1654,7 +1654,7 @@ const rules = {
         variables: ['spacing']
     } as Rule['options'],
     outlineStyle: {
-        match: ['outline', ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['outline', ['none', 'auto', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
         layer: CoreLayer.Native
     } as Rule['options'],
     outlineWidth: {
@@ -1668,9 +1668,15 @@ const rules = {
         layer: CoreLayer.NativeShorthand,
         colored: true,
         transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
+            const outlineGlobalValuesRegex =
+                /^(?:inherit|initial|revert|revert-layer|unset)$/i
+            const outlineStyleRegex = /none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i
+            const outlineAutoRegex = /auto/i
+
+            if (!outlineGlobalValuesRegex.test(value) && !outlineStyleRegex.test(value) && !outlineAutoRegex.test(value)) {
                 value += ' solid'
             }
+
             return value
         },
         variables: [

diff --git a/packages/css/tests/outline.test.ts b/packages/css/tests/outline.test.ts
@@ -7,4 +7,16 @@ test('outline', () => {
     testProp('outline:2|black', 'outline:0.125rem #000000 solid')
     testProp('outline-offset:1', 'outline-offset:0.0625rem')
     testProp('outline:1', 'outline-width:0.0625rem')
+    testProp('outline:dashed|black', 'outline:dashed #000000')
+    testProp('outline:solid', 'outline-style:solid')
+    testProp('outline:1rem|solid', 'outline:1rem solid')
+    testProp('outline:thick|double|black', 'outline:thick double #000000')
+    testProp('outline:none', 'outline-style:none')
+    testProp('outline:unset', 'outline:unset')
+    testProp('outline:inherit', 'outline:inherit') 
+    testProp('outline:initial', 'outline:initial')
+    testProp('outline:revert', 'outline:revert')
+    testProp('outline:revert-layer', 'outline:revert-layer')
+    testProp('outline:auto', 'outline-style:auto')
+    testProp('outline:auto|1', 'outline:auto 0.0625rem')
 })