Add example for hiding svg children on mobile

styleguide-app/Debug/Control/Extra.elm

@@ -13,7 +13,9 @@ module Debug.Control.Extra exposing
 -}
 
 import Css
+import Css.Global
 import Debug.Control as Control exposing (Control)
+import Regex
 
 
 {-| -}
@@ -92,22 +94,62 @@ css : String -> Control ( String, List Css.Style )
 css exampleCss =
     Control.map
         (\rawStr ->
-            rawStr
-                |> String.split ";"
-                |> List.filterMap
-                    (\segment ->
-                        case String.split ":" segment of
-                            name :: value :: [] ->
-                                Just
-                                    ( "Css.property \"" ++ String.trim name ++ "\" \"" ++ String.trim value ++ "\""
-                                    , Css.property name value
-                                    )
+            case Regex.find selectorAndStyles rawStr of
+                [] ->
+                    toCssProps rawStr
 
-                            _ ->
-                                -- Unable to parse css
-                                Nothing
-                    )
-                |> List.unzip
-                |> Tuple.mapFirst (\props -> "[ " ++ String.join "," props ++ " ]")
+                matches ->
+                    toCss matches
         )
         (Control.stringTextarea exampleCss)
+
+
+selectorAndStyles : Regex.Regex
+selectorAndStyles =
+    Maybe.withDefault Regex.never
+        (Regex.fromString "([\\s\\S]+)\\s*{\\s*([\\s\\S]*)\\s*}\\s*")
+
+
+toCss : List Regex.Match -> ( String, List Css.Style )
+toCss matches =
+    List.concatMap
+        (\match ->
+            case Debug.log "Matches" <| List.filterMap identity match.submatches of
+                selector :: styles :: [] ->
+                    let
+                        ( stylesStr, stylesVal ) =
+                            toCssProps styles
+                    in
+                    [ ( "Css.Global.selector \"" ++ String.trim selector ++ "\" " ++ stylesStr
+                      , Css.Global.selector selector stylesVal
+                      )
+                    ]
+
+                _ ->
+                    []
+        )
+        matches
+        |> List.unzip
+        |> Tuple.mapFirst (\props -> "[ Css.Global.descendants [ " ++ String.join "," props ++ " ] ]")
+        |> Tuple.mapSecond (\props -> [ Css.Global.descendants props ])
+
+
+toCssProps : String -> ( String, List Css.Style )
+toCssProps rawStr =
+    rawStr
+        |> String.split ";"
+        |> List.filterMap
+            (\segment ->
+                case String.split ":" segment of
+                    name :: value :: [] ->
+                        Just
+                            ( "Css.property \"" ++ String.trim name ++ "\" \"" ++ String.trim value ++ "\""
+                            , Css.property name value
+                            )
+
+                    _ ->
+                        -- Unable to parse css
+                        Nothing
+            )
+        |> List.unzip
+        |> Tuple.mapFirst (\props -> "[ " ++ String.join "," props ++ " ]")

styleguide-app/Examples/ClickableText.elm

@@ -81,12 +81,12 @@ init =
                 |> CommonControls.mobileCss
                     { moduleName = "ClickableText"
                     , use = ClickableText.mobileCss
-                    , default = "padding: 10px;"
+                    , default = "[role=img] { display: none !important; }"
                     }
                 |> CommonControls.quizEngineMobileCss
                     { moduleName = "ClickableText"
                     , use = ClickableText.quizEngineMobileCss
-                    , default = ""
+                    , default = "[role=img] { display: none !important; }"
                     }
                 |> CommonControls.notMobileCss
                     { moduleName = "ClickableText"