Twin + @compiled/css-in-js support

[ben-rogerson]

There's a newer CSS in JS library, compiled-css-in-js released by Atlassian that's jumped up in popularity recently.

Is anyone interested in seeing how it can be used with Twin?

[cmonteiro128]

I would like to see this (also I think any demos should include Typescript as well as they tend to add a layer of config complexity that a demo would help with)

[ben-rogerson]

I agree there - I've got plans to add TypeScript versions of all the starters

[zaguiini]

I'm very interested in this. I'm actually even more interested on how to use the tw prop with compiled-css-in-js.

[ben-rogerson]

Update: After hitting some compat issues I've opened an issue with compiled-css-in-js.

[lukesmurray]

is this still blocked over in compiled?

[ben-rogerson]

Last I checked, there's no solution for adding global styles.
This means the tailwind dynamic base styles can't be injected through the GlobalStyles import.

[janus-reith]

@ben-rogerson Are there other options for this?
If I understand correctly, while there is no added cost due to twin.macro at runtime, I would still need to stick with one of the supported styling solutions which right now are all runtime-evaluated.

I'm trying to avoid any unnecessary runtime cost of css-js, so for now went back to basic tailwind classes.

[ben-rogerson]

I'm feeling positive that there are some other options, I'll need to take a look into it.
I'm also looking into a linaria preset this year which is in the same bucket as compiled.

[ben-rogerson]

You can currently style with twin + @compiled but the <GlobalStyles /> import won't work.
This means that base styles must currently be added manually.
I'm looking into some other options - feel free to provide some suggestions 💬

[bolu61]

Is there extra config to make it work? I've ran into similar problems you described in your issue with @compiled. The styles are being compiled into something like this:

<div css="[object Object]"></div>

I tried using both their Webpack loader and babel plugin.

[ben-rogerson]

I've got a goober example that's working with the css prop, if this doesn't help then maybe post up a code example.

[bolu61]

I got it working by using @compiled's babel plugin. Not sure why it didn't work before. For reference:

module.exports = {
  presets: [
    '@babel/env',
    ['@babel/react', {
      runtime: 'automatic'
    }]
  ],
  plugins: [
    'babel-plugin-twin',
    'babel-plugin-macros',
    '@compiled/babel-plugin'
  ]
}

and using props:

<div tw="..." />

[ben-rogerson]

Nice one, sounds like it's about time to add a compiled preset.

Apologies about the mixup with goober, must have got my threads confused 😵

[bolu61]

Have you decided on how to make <GlobalStyles /> work?

[bolu61]

Will auto importing css props be supported using babel-plugin-twin?

[ben-rogerson]

For @compiled, this feature would need to be added to the core twin package.
It'll be similar to how I'm automatically adding the css prop with styled-components.
Hopefully I'll be able to use the same tactic.

[MattCCC]

Hi guys, any news on supporting compiled?