Add transpilation of the css prop for simple cases

[Mad-Kat]

Closes #77

Add possibility to use css prop

This PR adds the possibility to use the css prop (docs for emotion, docs for styled-components) for simple cases.

Simple cases means that the css tagged template string can only be static (without any interpolations). This is a trade-off we discussed internally to not have too many edge-cases that can't be covered optimally. If you feel the need to have interpolated css we recommend to create a styled component that works better.

Why

Styled-Components and Emotion both support the css prop with the help of a babel plugin on native html elements. Makes it possible to iterate fast on small, local CSS without the overhead of a component.

Details

Simple static

This case

const MyComponent = () => 
  <div css={css`
    padding: 10px;
  `}>Anything</div>

Would get transpiled to:

const MyComponent = () => <div {...css`
    padding: 10px;
  `({})}>Anything</div>;

Simple merge

This case

const Elem = () => <div 
  style={{padding: "5px"}} 
  css={css`
        padding: 10px;
  `} />

Would get transpiled to:

const Elem = () => <div 
  {...__yak_mergeCssProp(
    {
      style: {
        padding: \\"5px\\"
      }
    },
    /*YAK Extracted CSS:
    .Elem {
      padding: 10px;
    }*/
    /*#__PURE__*/
    css(__styleYak.Elem)({})
)} />

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-yak-benchmark	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 6:59am
yacijs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 6:59am

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #78 will not alter performance

_{Comparing feature/handle-css-prop (99d6c28) with main (574056e)}

Summary

✅ 2 untouched benchmarks

[jantimon]

I believe it should also allow:

const MyComponent = ({active}) => 
  <div css={active && css`
    padding: 10px;
  `>Anything</div>

which could be achieved by compiling it to the following code:

const MyComponent = ({active}) => 
  <div …css(active && css("yak-class-name")>Anything</div>

our css helper already returns style and className that’s why the spread is needed

this approach would also work for dynamic (css variable) properties

there is an additional challenge:

const MyComponent = ({active, …props}) => 
  <div css={active && css`
    padding: 10px;
  ` {…props}>Anything</div>

in this example all props would have to be merged maybe like this?

const MyComponent = ({active}) => 
  <div …_yak_css_prop(css(active && css("yak-class-name"), props)>Anything</div>