[Styled components] A layer starting with a lowercase letter will produce a broken component

[Mathieu Dutour]

The following component:

{
  "devices": [
    {
      "deviceId": "iPhone SE",
      "heightMode": "At Least"
    },
    {
      "deviceId": "Pixel 2",
      "heightMode": "At Least"
    }
  ],
  "examples": [
    {
      "id": "Default",
      "name": "Default",
      "params": {}
    }
  ],
  "logic": [
    {
      "body": [
        {
          "assignee": ["layers", "underline", "opacity"],
          "content": {
            "type": "LitExpr",
            "value": {
              "data": 1,
              "type": "Number"
            }
          },
          "type": "AssignExpr"
        }
      ],
      "condition": {
        "left": ["parameters", "selected"],
        "op": "==",
        "right": {
          "type": "LitExpr",
          "value": {
            "data": true,
            "type": "Boolean?"
          }
        },
        "type": "BinExpr"
      },
      "type": "IfExpr"
    },
    {
      "assignee": ["layers", "Text", "text"],
      "content": ["parameters", "text"],
      "type": "AssignExpr"
    }
  ],
  "params": [
    {
      "name": "text",
      "type": "String"
    },
    {
      "defaultValue": {
        "data": {
          "case": "None",
          "data": null
        },
        "type": "Boolean?"
      },
      "name": "selected",
      "type": "Boolean?"
    }
  ],
  "root": {
    "children": [
      {
        "id": "text",
        "params": {
          "font": "regular",
          "marginBottom": 11,
          "marginLeft": 30,
          "marginRight": 30,
          "marginTop": 41,
          "text": "Text goes here"
        },
        "type": "Lona:Text"
      },
      {
        "id": "Underline",
        "params": {
          "alignSelf": "stretch",
          "backgroundColor": "selectedUnderline",
          "height": 2,
          "marginLeft": 15,
          "marginRight": 15,
          "marginTop": 5,
          "opacity": 0
        },
        "type": "Lona:View"
      }
    ],
    "id": "View",
    "params": {
      "alignSelf": "stretch"
    },
    "type": "Lona:View"
  }
}

generates the following react component:

import React from "react"
import styled from "styled-components"

import colors from "../foundation/colors"
import shadows from "../foundation/shadows"
import textStyles from "../foundation/textStyles"

export default class HeaderNavigationLink extends React.Component {
  render() {


    let Text$text
    let underline$opacity

    if (this.props.selected == true) {

      underline$opacity = 1
    }
    Text$text = this.props.text
    return <View> <text> {"Text goes here"} </text> <Underline /> </View>;
  }
};

let View = styled.div({
  alignItems: "flex-start",
  display: "flex",
  flex: "1 1 0%",
  flexDirection: "column",
  justifyContent: "flex-start"
})

let text = styled.span({
  textAlign: "left",
  ...textStyles.regular,
  alignItems: "flex-start",
  display: "block",
  flex: "0 0 auto",
  flexDirection: "column",
  justifyContent: "flex-start",
  marginTop: "41px",
  marginRight: "30px",
  marginBottom: "11px",
  marginLeft: "30px"
})

let Underline = styled.div({
  alignItems: "flex-start",
  alignSelf: "stretch",
  backgroundColor: colors.selectedUnderline,
  opacity: 0,
  display: "flex",
  flexDirection: "column",
  justifyContent: "flex-start",
  marginTop: "5px",
  marginRight: "15px",
  marginLeft: "15px",
  height: "2px"
})

Note the <text> {"Text goes here"} </text> which react interprets as a native DOM component (like all components starting with a lowercase)