Support for twin.macro

Hey there,

I keen on getting my package twin.macro working with compiled-css-in-js. Twin converts tailwind classes to css objects with a babel macro and then allows css props and styled imports (from libraries like yours) to take care of the rest.

Right now I’m hitting issues when I introduce the tw block within the styled import and css prop.

Here’s the error I’m seeing:

@compiled/css-in-js => unsupported node

I’ve tried switching the orders of imports and babel plugin registrations but no dice.

Here’s the code I’ve been testing and I’ve also made a code sandbox:

import React from 'react'
import { styled } from '@compiled/css-in-js'
import tw from 'twin.macro'

const Button = styled.button`
  ${tw`p-10`}
`

const App = () => (
  <div
    css={`
      ${tw`text-red-500`}
    `}
  >
    <Button>Test</Button>
  </div>
)

export default App

Twin’s output would normally look something like this before the css-in-js library does its thing:

// ...

const Button = styled.button`
  ${{
    "padding": "2.5rem"
  }}
`

const App = () => (
  <div
    css={`
      ${{
          "--text-opacity": "1",
            "color": "rgba(245, 101, 101, var(--text-opacity))"
          }}
    `}
  >
    <Button>Test</Button>
  </div>
)

// ...

It would be sweet if we could get the two packages co-operating, would you be able to check out how much work would be required your side?

[itsdouges]

good suggestions, when we start looking at https://github.com/atlassian-labs/compiled/issues/278 they should open doors for the above

currently conditional rules aren’t supported - but they are on the roadmap

[ben-rogerson]

Looking pretty good!

Here’s a few features I’d really like to see.

I like that you’re supporting array styling (much cleaner than template strings) 👍

const Button = styled.button([`background-color: black;`, `color: white;`])

So it would be sweet to see support for:

1. Sending your props through via an ArrowFunctionExpression:

const Button = styled.button(({ isPrimary }) => [
  { 'background-color': 'black' },
  isPrimary && { color: 'white' }
])

1. Sending props to each item in the array:

const Button = styled.button([
  { 'background-color': 'black' },
  ({ isPrimary }) => isPrimary && { color: 'white' }
])