Unwrap styled() calls

[oliviertassinari]

Summary

I wonder about the long-term potential of unwrapping the styled() calls into their primitive.

Examples

• Tamagui

import { Text, styled } from '@tamagui/core'

export const Heading = styled(Text, {
  tag: 'h1',
  color: '$color',
  backgroundColor: '$background',

  variants: {
    size: {
      large: {
        fontSize: 22,
      },
      small: {
        fontSize: 16,
      },
    },
  },

gets converted to

export const App = props => <div className={_cn}>
    <h1 className={_cn2 + (_cn3 + (props.big ? _cn4 : _cn5))}>
      Lorem ipsum.
    </h1>
  </div>

const _cn5 = " _fos-16px"
const _cn4 = " _fos-22px"
const _cn3 = " _bg-180kg62 _col-b5vn3b _mt-0px _mr-0px _mb-0px _ml-0px _ww-break-word _bxs-border-box _ff-System _dsp-inline  "
const _cn2 = "  font_System"
const _cn = "  is_View _fd-column _miw-0px _mih-0px _pos-relative _bxs-border-box _fb-auto _dsp-flex _fs-0 _ai-stretch  _w-550px _pr-1aj14ca _pl-1aj14ca  _pr-_gtSm_lrpixp _pl-_gtSm_lrpixp"

Motivation

Performance

Search keywords: -

[o-alexandrov]

This issue along with inability to understand when viewing JSX whether you are using a styled over a React component or a primitive HTML element are the two reasons why I vote to never use styled :D

• passing className using css is a clear alternative