Add Custom Classes

Author: mckaragoz

BCSS.Test/CoreTests/ConverterTests.cs

@@ -105,5 +105,25 @@ public void CaseInsensitiveTest()
             BlazorCssConverter.Convert("bgiMage-[/Paper.Png]").Should().Be("background-image:url(Paper.Png)");
         }
 
+        [Test]
+        public void PrefixesTest()
+        {
+            BcssService service = new BcssService();
+            service.Decode("hover:bg-yellow").Should().Be("hover_1bg-yellow");
+            BlazorCssConverter.Convert("hover:bg-yellow").Should().Be("background:yellow");
+
+            service.Decode("h:bg-yellow").Should().Be("h_1bg-yellow");
+            BlazorCssConverter.Convert("h:bg-yellow").Should().Be("background:yellow");
+
+            service.Decode("w:bg-yellow").Should().Be("w_1bg-yellow");
+            BlazorCssConverter.Convert("w:bg-yellow").Should().Be("background:yellow");
+
+            service.Decode("sm:w:bg-yellow").Should().Be("sm_1w_1bg-yellow");
+            BlazorCssConverter.Convert("sm:w:bg-yellow").Should().Be("background:yellow");
+
+            service.Decode("sm:bg-yellow").Should().Be("sm_1bg-yellow");
+            BlazorCssConverter.Convert("sm:bg-yellow").Should().Be("background:yellow");
+        }
+
     }
 }

BCSS/Services/BcssService.cs

@@ -19,10 +19,16 @@ public void Attach(BlazorCssProvider provider)
             }
 
             string[] values = value.Split(' ');
-
             foreach (var val in values)
             {
                 string key = Decode(val);
+                List<string> prefixes = BlazorCssConverter.GetPrefixes(val);
+
+                if (prefixes.Contains("c"))
+                {
+                    continue;
+                }
+
                 bool isDuplicated = Provider.CheckDuplicate(val);
                 if (isDuplicated)
                 {
@@ -32,7 +38,7 @@ public void Attach(BlazorCssProvider provider)
                 string? result = BlazorCssConverter.Convert(val, Provider);
 
                 BcssInfo info = new();
-                info.Prefixes = BlazorCssConverter.GetPrefixes(val);
+                info.Prefixes = prefixes;
                 info.Key = key;
                 info.Value = result;
                 _ = Provider.AddInfo(info);
@@ -55,7 +61,12 @@ public string? this[string key]
 
         protected internal string Decode(string value)
         {
-            return value.ToLower().Replace(":", "_1").Replace("/", "_2").Replace("*", "_3").Replace("#", "_4").Replace(",", "_5").Replace("+", "_6").Replace("%", "_7").Replace(".", "_8").Replace("[", null).Replace("]", null);
+            string result = value.ToLower();
+            if (result.StartsWith("c:"))
+            {
+                result = result.Substring(2);
+            }
+            return result.ToLower().Replace(":", "_1").Replace("/", "_2").Replace("*", "_3").Replace("#", "_4").Replace(",", "_5").Replace("+", "_6").Replace("%", "_7").Replace(".", "_8").Replace("[", null).Replace("]", null);
         }
 
         public void SetBreakpoints(int xs = 0, int sm = 600, int md = 960, int lg = 1280, int xl = 1920)

BCSSViewer.Docs/Pages/Syntax/CustomClassesPage.razor

@@ -0,0 +1,14 @@
+@page "/syntax/customclasses"
+@namespace BCSSViewer.Docs.Pages
+
+<MudContainer>
+    <MudText Typo="Typo.h4">Custom Classes</MudText>
+
+    <MudStack Class="mt-4" Spacing="4">
+        <CodeBlock Description="Users may have their predefined classes." Code="@("<style>\n\t.user-custom-class {\n\t\tbackground: yellow;\n\t}\n</style>")" />
+        <CodeBlock Description="You can directly use these classes in BCSS." Code="@("<div class=\"@Bc[\"user-custom-class\"]\" />")" />
+        <CodeBlock Description="Or you can use c (custom) prefix for slightly better performance." Code="@("<div class=\"@Bc[\"c:user-custom-class\"]\" />")" />
+    </MudStack>
+
+    <PageBottomRouting PreviousHref="/syntax/vendorprefixes" PreviousText="Vendor Prefixes (webkit, moz, ms, o)" NextHref="/syntax/customvalues" NextText="Custom Values" />
+</MudContainer>

BCSSViewer.Docs/Pages/Syntax/VendorPrefixesPage.razor

@@ -8,5 +8,5 @@
         <CodeBlock Description="Vendor prefixes implement like other prefixes. (with colon)." Code="@("w:bg-yellow\t//-webkit-background: yellow\nm:bg-yellow\t//-moz-background: yellow\nms:bg-yellow\t//-ms-background: yellow\no:bg-yellow\t//-o-background: yellow")" />
     </MudStack>
 
-    <PageBottomRouting PreviousHref="/syntax/prefixes" PreviousText="Prefixes (Hover, Focus etc.)" NextHref="/syntax/customvalues" NextText="Custom Values" />
+    <PageBottomRouting PreviousHref="/syntax/prefixes" PreviousText="Prefixes (Hover, Focus etc.)" NextHref="/syntax/customclasses" NextText="Custom Classes" />
 </MudContainer>

BCSSViewer.Docs/Shared/MainLayout.razor

@@ -32,6 +32,7 @@
                 <MudNavLink Match="NavLinkMatch.All" Href="/syntax/unitmeasurement">Unit Measurement (Px, Rem)</MudNavLink>
                 <MudNavLink Match="NavLinkMatch.All" Href="/syntax/prefixes">Prefixes (Breakpoints, Hover, Focus etc.)</MudNavLink>
                 <MudNavLink Match="NavLinkMatch.All" Href="/syntax/vendorprefixes">Vendor Prefixes (webkit, moz, ms, o)</MudNavLink>
+                <MudNavLink Match="NavLinkMatch.All" Href="/syntax/customclasses">Custom Classes</MudNavLink>
                 <MudNavLink Match="NavLinkMatch.All" Href="/syntax/customvalues">Custom Values & Colors</MudNavLink>
                 <MudNavLink Match="NavLinkMatch.All" Href="/syntax/caseinsensitive">Case Insensitive</MudNavLink>
             </MudNavGroup>