Styled-jsx: Switch from data attributes to className

Created on 26 Jun 2017 · 4Comments · Source: vercel/styled-jsx

To improve performances we should switch to use className instead of the data-jsx attribute.

When we have spread props eg. {...props} we would need to move the className attribute to the end and rewrite it so it applies classes on cascade.

<div {...props} className="foo" {...rest} />
// compiles to
<div {...props} {...rest} className={`${rest.className != null && rest.className || 'foo'} jsx123`} />

I actually started to work on it (didn't go far though so contribution are still welcome!) and here is the test case:

export default () => (
  <div className='test'>
    <div className={test && test()} />
    <div className={test && 'test'} />
    <div className={`test ${test ? 'test' : ''}`} />
    <div className={a + 'test'} />
    <div className={`test ${test ? 'test' : ''}`} {...props} />
    <div className='hi' {...props} {...rest} />
    <div {...props} />
    <div {...props} {...rest} />
    <div />
    <style jsx>{'div { color: red }'}</style>
  </div>
)

Which would compile to (just showing some examples not all of them):

// without className and spreads
<div className={`jsx123`} />

// with existing className
<div className={`test jsx123`} />

// with existing className and a spread
<div {...props} className={`${props.className != null && props.className || 'test'} jsx123`} />

// with existing className and many spread
<div {...props} {...rest} className={`${props.className  != null && props.className || rest.className != null && rest.className || `test ${test ? 'test' : ''}`} jsx123`} />

// with a spread only
<div {...props} className={`${props.className != null && props.className || ''} jsx123`} />

// with many spread only
<div {...props} {...rest} className={`${props.className != null && props.className || rest.className != null && rest.className || ''} jsx123`}  />

where jsx123 is the style-jsx unique classname.

enhancement

Source