Allow curly brackets to be used with the tw prop

Hi there,

Loving the library, but hitting a weird snag that I’ve never seen before and searching around wasn’t giving me much information.

Versions:

"twin.macro": "^1.0.0-alpha.10",
"webpack": "^4.43.0",
"typescript": "^3.8.3",
"styled-components": "^5.1.0",

Given this code:

<p tw={'font-medium'}>Testing</p>

I’m getting the following error:

ERROR in ./src/components/screens/LoginScreen.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/dane/Sites/provider-v2/src/components/screens/LoginScreen.tsx: twin.macro: Cannot read property 'match' of undefined Learn more: https://www.npmjs.com/package/twin.macro
    at getStyles (/Users/dane/Sites/provider-v2/node_modules/twin.macro/macro.js:2375:26)
    at JSXAttribute (/Users/dane/Sites/provider-v2/node_modules/twin.macro/macro.js:2600:20)
    at NodePath._call (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitMultiple (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/context.js:79:17)
    at TraversalContext.visit (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/context.js:138:19)
    at Function.traverse.node (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/Users/dane/Sites/provider-v2/node_modules/@babel/traverse/lib/path/context.js:97:18)
 @ ./src/components/App.tsx 13:0-48 24:15-26
 @ ./src/index.tsx
 @ multi react-hot-loader/patch ./src/index.tsx

However, doing <p tw="font-medium">Testing</p> works fine. Is this by design, or do I have some weird thing going on with my project compilation steps? Ideally it would work with the braces since that is how our eslint rules are defined.

This is my webpack module rules:

rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: process.env.NODE_ENV !== 'production',
                            presets: [
                                '@babel/typescript',
                                '@babel/env',
                                '@babel/react',
                            ],
                            plugins: [
                                'babel-plugin-macros',
                                'styled-components',
                                'react-hot-loader/babel',
                                '@babel/transform-runtime',
                                '@babel/plugin-transform-react-jsx',
                                '@babel/proposal-class-properties',
                                '@babel/proposal-object-rest-spread',
                                '@babel/proposal-optional-chaining',
                                '@babel/proposal-nullish-coalescing-operator',
                                '@babel/syntax-dynamic-import',
                            ],
                        },
                    },
                ],
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]

And my babel-plugin-macros.config.js:

module.exports = {
    twin: {
        styled: 'styled-components',
        config: './tailwind.config.js',
    },
}

[rbutera]

IMO we should keep it as is until the time that we are able to use variables, which I think would probably require us to solve string interpolation (#17) first.

In the interim, we should update the documentation and the error output to better communicate to users that the tw prop expects a plain string of Tailwind class names and that it does not support an expression contained in curly brackets.

[ben-rogerson]

Yeah, the tw prop has some pretty strict usage at the moment. I’ll update this issue into a feature request. Perhaps there are a few people that would like this changed?

Great you found a workaround, sorry it’s not the best it could be. I’ll make sure I fix up that 'match' of undefinederror.