Custom "css" config isn't invoked when using tagged literals

In an attempt to adapt twin to react native, I’ve configured it as follows:

{
  "babelMacros": {
    "twin":{
      ...
      "styled": {
        "import": "default",
        "from": "styled-components/native"
      },
      "css": {
         "import": "default",
         "from": "my-custom-thing"
      }
    }
  }
}

To illustrate: what I am expecting from this configuration is that when using twin for tagged literals like so tw`flex-1`; that the output is processed through my-custom-thing just like tw(View)`flex-1`; is processed through styled-components/native

Unfortunately, this is not the case as tw`flex-1`; will return the same value regardless of what I specify under the “css” property in my config.

This is critical for working with react-native as I need to use a custom function to transform raw css rules, like margin-top: 10px; to react-native compatible objects, like { marginTop: 10 }. As I am unsure how you architected this internally, I don’t know if there is any way to configure twin such that I have access to this processing step (or if this is a processing step at all).

I did notice, however, that import tw, { css } from 'twin.macro' imports my-custom-thing as css.

Hope this question is clear. Thank you!

[JimmyLv]

With a couple custom plugins, I have twin working on react native!

Hi @edible-programs @ben-rogerson , could you please help to post the plugin code? 😁 Thanks

[ben-rogerson]

That’s great news, next time I’m making a native app this will come in handy 👍

It would be great to post your plugin code here so others can have a quicker setup.