tw= inline syntax not working as expected + styled-components/macro

[botoxparty]

Hey,

When i use the inline syntax tw= on my components it doesn't seem to work correctly.

import React from 'react';
import 'twin.macro';

const Input = () => <input tw="border hover:border-black" />

export default Input;

This will work however if I import styled from 'styled-components/macro'. (I prefer the macro as it generates a classname based on the function name, also the non macro version does not work).

Is there a way to override the default styled components of twin.macro to use the macro version?

Best,
Adam

[ben-rogerson]

Hey Adam

I think you may be missing the "autoCssProp": true from your twin config, that's why the tw prop isn't working - check the docs for the info on that.

About that styled macro import:

I prefer the macro import too for the exact reasons you've mentioned.
I'm planning to add import styled from "styled-components/macro" as the default in the next major version that's due out by the end of the year - I haven't done it by now as it's in the "breaking change" territory.
You can see here what the current defaults are - but it sounds like you're on top of that.

To specify the imports yourself, you'll just need to specify the imports in your twin config:

Be sure to remove the "preset": "styled-components" option as that trumps these custom import options

// package.json
{
  "babelMacros": {
    "twin": {
      "styled": {
        "import": "default",
        "from": "styled-components/macro"
      },
      "css": {
        "import": "css",
        "from": "styled-components/macro"
      },
      "global": {
        "import": "createGlobalStyle",
        "from": "styled-components"
      },
    }
  },
}

// or babel-plugin-macros.config.js
module.exports = {
  twin: {
    styled: {
      import: 'default',
      from: 'styled-components/macro'
    },
    css: {
      import: 'css',
      from: 'styled-components/macro'
    },
    global: {
      import: 'createGlobalStyle',
      from: 'styled-components'
    }
  }
}

[irg1008]

This is not working for me, nor with the preset option 🤔

[botoxparty]

That works perfectly! Thank you!

[ben-rogerson]

Hey Adam, in Twin v2 I now made that config the default so you can just roll with this config now:

// package.json
{
  "babelMacros": {
    "twin": {
      "preset": "styled-components",
    }
  },
}

// or babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'styled-components'
  }
}