Fixes issue with flex-row not being recognized.

monorailcss · Apr 9, 2022 · 4e4c7b5 · 4e4c7b5
1 parent f768e23
commit 4e4c7b5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs b/src/MonorailCss/Plugins/FlexBoxAndGrid/Flex.cs
@@ -55,10 +55,10 @@ public class FlexDirection : BaseUtilityPlugin
     protected override ImmutableDictionary<string, string> Utilities =>
         new Dictionary<string, string>()
         {
-            { "flex-row	", "row" },
+            { "flex-row", "row" },
             { "flex-row-reverse", "row-reverse" },
-            { "flex-col", "col" },
-            { "flex-col-reverse", "col-reverse" },
+            { "flex-col", "column" },
+            { "flex-col-reverse", "column-reverse" },
         }.ToImmutableDictionary();
 }
 

diff --git a/test/MonorailCss.Tests/Plugins/Flex/FlexDirectionTests.cs b/test/MonorailCss.Tests/Plugins/Flex/FlexDirectionTests.cs
@@ -0,0 +1,21 @@
+namespace MonorailCss.Tests.Plugins.Flex;
+
+public class FlexDirectionTests
+{
+    [Fact]
+    public void Can_do_flex_direction()
+    {
+        var framework = new CssFramework(MonorailCss.DesignSystem.Default).WithCssReset(string.Empty);
+        var r =framework.Process(new[] {"flex-col", "md:flex-row"});
+        r.ShouldBeCss(@"
+.flex-col {
+  flex-direction:column;
+}
+@media (min-width:768px) {
+  .md\:flex-row {
+    flex-direction:row;
+  }
+}
+");
+    }
+}