From b1364aeab13bbdd44f41c6c09e09cfb34698ed55 Mon Sep 17 00:00:00 2001
From: Alexey Ryabov <lesha_12_01@mail.ru>
Date: Wed, 1 Nov 2023 11:02:51 +0300
Subject: [PATCH] Fix(CSS): `outline` doesn't handle some keyword values

Now `outline` works well with CSS-wide keywords and all `outline-style` keywords.
---
 packages/css/src/config/rules.ts   | 10 ++++++++--
 packages/css/tests/outline.test.ts | 12 ++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/config/rules.ts b/packages/css/src/config/rules.ts
index 54b08bdf0..e170d5bed 100644
--- 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
index 724f37cf1..03250938b 100644
--- 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')
 })