Linaria: Work with twin.macro

[IRediTOTO]

Describe the feature

Hi. I just found Linaria and very love it. Thank you for made this.
I just wonder can Linaria work with Tailwindcss or have a syntax work with twin.macro package.

Motivation

I am not good at CSS, so I ussually use Tailwind to make design it easier.

Possible implementations

:\ I am not sure.
But I hope have syntax like this
import {css} from Linaria
<p className={css(tw`text-red-600`)}>Hello</p>
or
<p css={tw`text-red-600`)>Hello</p>

twtext-red-600`will return an object like this{color:"#443544"}`

[jvega]

https://github.com/callstack/linaria/blob/master/docs/BASICS.md#object-interpolations it works well with twin.macro

Implementation

import tw from 'twin.macro'
import { css } from 'linaria'

const className = css`
  ${tw`text-red-600`}
`

export default () => <p className={className}>linaria!!</p>

[moonmeister]

If I wanted to use styled components would I use the twin.macro styled or the Linaria styled object?

UPDATE: For those interested: After some testing it appears using the twin.macro styled component fails because it looks for emotion. Using Linaria's styled directly with the ${tw`class class2`} format works as expected. Both styled from twin.macro and tw.h1`class`style fail because emotion isn't installed.

[dcwither]

@moonmeister was there a particular babel config you had to get that working? I am currently seeing:

TypeError: <root>/packages/components/src/playground/button.tsx: Cannot destructure property 'end' of 'ex.node.loc' as it is undefined.

From my build with the following babel config

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": [
          "last 2 chrome versions",
          "last 2 firefox versions",
          "last 2 safari versions",
          "last 2 edge versions"
        ]
      }
    ],
    "@babel/preset-react",
    "linaria/babel"
  ],
  "plugins": [
    "babel-plugin-macros",
    "@babel/plugin-transform-modules-commonjs",
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    ]
  ]
}

module.exports = {
  twin: {
    preset: "emotion",
  },
};

[moonmeister]

I'm using Gatsby so the config is in the gatsby-plugin-linaria package which can be found in the gatsby-node.ts