treat hyphen as underscore in keys of styles (#4810)

* treat hyphen as underscore in keys of styles

* fix tests

* more nuanced conversions

Author: adhami3310

reflex/components/tags/tag.py

@@ -101,7 +101,7 @@ def add_props(self, **kwargs: Optional[Any]) -> Tag:
         """
         self.props.update(
             {
-                format.to_camel_case(name, allow_hyphens=True): (
+                format.to_camel_case(name, treat_hyphens_as_underscores=False): (
                     prop
                     if types._isinstance(prop, (EventChain, Mapping))
                     else LiteralVar.create(prop)

reflex/style.py

@@ -190,11 +190,12 @@ def update_out_dict(
     for key, value in style_dict.items():
         keys = (
             format_style_key(key)
-            if not isinstance(value, (dict, ObjectVar))
+            if not isinstance(value, (dict, ObjectVar, list))
             or (
                 isinstance(value, Breakpoints)
                 and all(not isinstance(v, dict) for v in value.values())
             )
+            or (isinstance(value, list) and all(not isinstance(v, dict) for v in value))
             or (
                 isinstance(value, ObjectVar)
                 and not issubclass(get_origin(value._var_type) or value._var_type, dict)
@@ -236,7 +237,9 @@ def format_style_key(key: str) -> Tuple[str, ...]:
     Returns:
         Tuple of css style names corresponding to the key provided.
     """
-    key = format.to_camel_case(key, allow_hyphens=True)
+    if key.startswith("--"):
+        return (key,)
+    key = format.to_camel_case(key)
     return STYLE_PROP_SHORTHAND_MAPPING.get(key, (key,))
 
 

reflex/utils/format.py

@@ -168,25 +168,24 @@ def to_snake_case(text: str) -> str:
     return re.sub("([a-z0-9])([A-Z])", r"\1_\2", s1).lower().replace("-", "_")
 
 
-def to_camel_case(text: str, allow_hyphens: bool = False) -> str:
+def to_camel_case(text: str, treat_hyphens_as_underscores: bool = True) -> str:
     """Convert a string to camel case.
 
     The first word in the text is converted to lowercase and
     the rest of the words are converted to title case, removing underscores.
 
     Args:
         text: The string to convert.
-        allow_hyphens: Whether to allow hyphens in the string.
+        treat_hyphens_as_underscores: Whether to allow hyphens in the string.
 
     Returns:
         The camel case string.
     """
-    char = "_" if allow_hyphens else "-_"
-    words = re.split(f"[{char}]", text.lstrip(char))
-    leading_underscores_or_hyphens = "".join(re.findall(rf"^[{char}]+", text))
+    char = "_" if not treat_hyphens_as_underscores else "-_"
+    words = re.split(f"[{char}]", text)
     # Capitalize the first letter of each word except the first one
     converted_word = words[0] + "".join(x.capitalize() for x in words[1:])
-    return leading_underscores_or_hyphens + converted_word
+    return converted_word
 
 
 def to_title_case(text: str, sep: str = "") -> str:

tests/units/components/markdown/test_markdown.py

@@ -157,7 +157,7 @@ def test_create_map_fn_var_subclass(cls, fn_body, fn_args, explicit_return, expe
                     value, **props
                 )
             },
-            r"""(({node, inline, className, children, ...props}) => { const match = (className || '').match(/language-(?<lang>.*)/); let _language = match ? match[1] : '';  ;             return inline ? (                 <RadixThemesCode {...props}>{children}</RadixThemesCode>             ) : (                 <RadixThemesBox css={({ ["pre"] : ({ ["margin"] : "0", ["padding"] : "24px", ["background"] : "transparent", ["overflow-x"] : "auto", ["border-radius"] : "6px" }) })} {...props}><ShikiCode code={((Array.isArray(children)) ? children.join("\n") : children)} decorations={[]} language={_language} theme={((resolvedColorMode === "light") ? "one-light" : "one-dark-pro")} transformers={[]}/></RadixThemesBox>             );         })""",
+            r"""(({node, inline, className, children, ...props}) => { const match = (className || '').match(/language-(?<lang>.*)/); let _language = match ? match[1] : '';  ;             return inline ? (                 <RadixThemesCode {...props}>{children}</RadixThemesCode>             ) : (                 <RadixThemesBox css={({ ["pre"] : ({ ["margin"] : "0", ["padding"] : "24px", ["background"] : "transparent", ["overflowX"] : "auto", ["borderRadius"] : "6px" }) })} {...props}><ShikiCode code={((Array.isArray(children)) ? children.join("\n") : children)} decorations={[]} language={_language} theme={((resolvedColorMode === "light") ? "one-light" : "one-dark-pro")} transformers={[]}/></RadixThemesBox>             );         })""",
         ),
         (
             "h1",

tests/units/components/test_component.py

@@ -651,7 +651,7 @@ def test_create_filters_none_props(test_component):
 
     # Assert that the style prop is present in the component's props
     assert str(component.style["color"]) == '"white"'
-    assert str(component.style["text-align"]) == '"center"'
+    assert str(component.style["textAlign"]) == '"center"'
 
 
 @pytest.mark.parametrize(

tests/units/utils/test_format.py

@@ -189,11 +189,11 @@ def test_to_snake_case(input: str, output: str):
         ("kebab-case", "kebabCase"),
         ("kebab-case-two", "kebabCaseTwo"),
         ("snake_kebab-case", "snakeKebabCase"),
-        ("_hover", "_hover"),
-        ("-starts-with-hyphen", "-startsWithHyphen"),
-        ("--starts-with-double-hyphen", "--startsWithDoubleHyphen"),
-        ("_starts_with_underscore", "_startsWithUnderscore"),
-        ("__starts_with_double_underscore", "__startsWithDoubleUnderscore"),
+        ("_hover", "Hover"),
+        ("-starts-with-hyphen", "StartsWithHyphen"),
+        ("--starts-with-double-hyphen", "StartsWithDoubleHyphen"),
+        ("_starts_with_underscore", "StartsWithUnderscore"),
+        ("__starts_with_double_underscore", "StartsWithDoubleUnderscore"),
         (":start-with-colon", ":startWithColon"),
         (":-start-with-colon-dash", ":StartWithColonDash"),
     ],