feat: replace colon ':' with underscore (_) for responsive classes

Author: marko-axa

css/css-classes.generated.css

@@ -58,27 +58,27 @@
 .width-half {}
 .width-quarter {}
 .width-third {}
-.sm:hidden-yes {}
-.sm:hidden-no {}
-.sm:width-full {}
-.sm:width-half {}
-.sm:width-quarter {}
-.sm:width-third {}
-.md:hidden-yes {}
-.md:hidden-no {}
-.md:width-full {}
-.md:width-half {}
-.md:width-quarter {}
-.md:width-third {}
-.lg:hidden-yes {}
-.lg:hidden-no {}
-.lg:width-full {}
-.lg:width-half {}
-.lg:width-quarter {}
-.lg:width-third {}
-.xl:hidden-yes {}
-.xl:hidden-no {}
-.xl:width-full {}
-.xl:width-half {}
-.xl:width-quarter {}
-.xl:width-third {}
+.sm_hidden-yes {}
+.sm_hidden-no {}
+.sm_width-full {}
+.sm_width-half {}
+.sm_width-quarter {}
+.sm_width-third {}
+.md_hidden-yes {}
+.md_hidden-no {}
+.md_width-full {}
+.md_width-half {}
+.md_width-quarter {}
+.md_width-third {}
+.lg_hidden-yes {}
+.lg_hidden-no {}
+.lg_width-full {}
+.lg_width-half {}
+.lg_width-quarter {}
+.lg_width-third {}
+.xl_hidden-yes {}
+.xl_hidden-no {}
+.xl_width-full {}
+.xl_width-half {}
+.xl_width-quarter {}
+.xl_width-third {}

css/utils.css

@@ -11,7 +11,8 @@
 
   /// For each breakpoint, generate a prefix and run the cycle
   @each $key, $value in map-get($gorko-config, 'breakpoints') {
-    $prefix: #{$key + '\\:'};
+    /// we need to use _ instead of : because of upstream prefixing problem with rollup + postcss
+    $prefix: #{$key + '_'};
     $is-breakpoint: true;
 
     @media #{$value} {

css/utils.css.map

@@ -7,18 +7,20 @@ Most of them are just tokens abstractions but they fell in category of 'utility
 
 Proper utility classes just as in programing do one thing and do it well. `.visually-hidden` for example.
 
-## Media Queries
+## Media Queries & Responsive classes
 
-> Following media queries are used to generate 'responsive' utility classes,
-> when you see 'responsive' in table of property, you can use it as per example
+> Following media queries are used to generate 'responsive' utility classes.
+> When you see 'responsive' in table of property, you can use it as per example
+> NOTE: typically you would use colon `:` for responsive classes, but in our case
+> combination rollup + postcss didn't allow us to do so, hence chose `_`;
 
 - sm: (min-width: 48em)
 - md: (min-width: 62em)
 - lg: (min-width: 75em)
 - xl: (min-width: 90em)
 
 ```jsx
-<div className="lg:hidden-yes">
+<div className="lg_hidden-yes">
   <p>You will not be able to see me on large screens</p>
 </div>
 ```
@@ -32,7 +34,7 @@ Proper utility classes just as in programing do one thing and do it well. `.visu
 
 | Property   | Value | Details         |
 | ---------- | ----- | --------------- |
-| Responsive | Yes   | `lg:hidden-yes` |
+| Responsive | Yes   | `lg_hidden-yes` |
 
 ## Gutter:
 
@@ -170,5 +172,5 @@ Proper utility classes just as in programing do one thing and do it well. `.visu
 
 | Property   | Value | Details          |
 | ---------- | ----- | ---------------- |
-| Responsive | Yes   | `sm:width-half`  |
+| Responsive | Yes   | `sm_width-half`  |
 | Fluid      | Yes   | uses percentages |