Support for twin.macro

[ben-rogerson]

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]

Hey mate thanks for raising this!

The current version of Compiled is written as a TypeScript transformer - which means it's probably getting the untransformed tw code and blowing up as it doesn't support it.

I have a work in progress babel re-write here https://github.com/atlassian-labs/compiled-css-in-js/pull/217 that I'm slowly pushing - once it's complete it should just work TBH!

In the meantime the only way we could get this working right now would be to somehow get your macro transforming all the code before Compiled get's a hold of it...

[regenrek]

This is a great idea!

Is there currently any way to use TailwindCSS classes with compiled in some way?

[ben-rogerson]

... it's probably getting the untransformed tw code and blowing up as it doesn't support it.

Ah, of course - that sounds about right.

In the meantime the only way we could get this working right now would be to somehow get your macro transforming all the code before Compiled get's a hold of it...

We may be able to setup a build to run babel then run tsc but I think I'll wait until your babel plugin comes into play.

I can help test, let me know when you're keen.

[ben-rogerson]

hey @madou, looks like you're not too far off the next release with this?

[itsdouges]

hello!

yes the first release with proper babel support is coming soon - few weeks away 😄

if you're keen to try before hand you can try the nightly

npm i @compiled/core@nightly @compiled/babel-plugin@nightly

[ben-rogerson]

That's great news, I'll try the nightly in the meantime - cheers

[itsdouges]

@ben-rogerson hey dude! the nightly is getting into a pretty decent state - want to try this again?

[ben-rogerson]

That's great! I'll give it another go and I'll let you know how it turns out 👍

[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' }
])

2. Sending props to each item in the array:

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

[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

[itsdouges]

@ben-rogerson is there anything needed to be done here? if not i'll close this issue.

[ben-rogerson]

Just subscribed to the other issue so I might pop in again when things start moving on the conditional styling front 👍