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

[chrischen]

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>

For the most part it works, but there are some issues where CSS variables are involved. For example, the tailwind class "hover:scale-125" doesn't work, unless the <GlobalStyles /> component from twin.macro is rendered, and that ends up inlining the tailwind CSS reset as well. I included @tailwind base; in my global static CSS but that doesn't seem to work for making "scale-125" work.

UPDATE: I'm not 100% certain but further research suggests this may just be a twin.macro issue. It seems the --tw-transform variable is set globally before version 3, and after version 3 it's set on the element that needs it. However twin.macro is setting it globally (on * selector) and since I'm not using the <GlobalStyles /> from twin.macro with Linaria the variable doesn't get set.