profile
viewpoint

Ask questionsString interpolation inside tw macro doesn't work

Hi!

I have a problem with string interpolation in tw macro. For example I need to customize border color, so I'm trying to do it like this:

export const PrimaryButton = styled(Button)`
  ${({ color }) => tw`hover:border-${color ?? 'blue'}`};
`;

But I get the following error: ✕ Class “hover:border-” shouldn’t have a trailing dash.

It also doesn't work without variables:

export const PrimaryButton = styled(Button)`
  ${({ color }) => tw`hover:border-${'blue'}`};
`;
ben-rogerson/twin.macro

Answer questions MMT-LD

thanks for the bump on this - I've taken a look into the tagged translations output. In this test you can see that t doesn't support being used in a function:

// In
import t from "tagged-translations/macro";

const styles = ts => t`${ts}`;
styles(`text-red-100 hover:bg-blue-200`);

// Out
const styles = ts => `${ts}`;
styles(`text-red-100 hover:bg-blue-200`);

I'm going to look at how the css prop can be used as a macro, hopefully that leads to something.

Thanks for replying.

example.js
import React from "react";
import { styles } from "./translate";

export default () => (
  <>
    <div>cool{styles(`text-red-100 hover:bg-blue-200`, `200`)}</div>
    <div>cool{styles(`text-blue-100 hover:bg-orange-400`, `600`)}</div>
  </>
);
translate.js
import t from 'tagged-translations/macro';

export const styles = (ts, other) => t`${ts} text-red-${other}`;

All i'm saying is the text is replaced... with the correct value here making the strings dynamic, allowing me to re-use the tw in a single place.

Maybe i'm missing the point. But at the moment how would you support theming using this type of macro? For me id like to pass in dynamic tags to tw to make it something a bit more dynamic otherwise i may as-well just include tailwind manually and use their classnames. Im not saying this isn't a good macro as i can see its benefits when using it in for example emotions css selector.

The only thing is that if i built a ui library using tw.macro (maybe not the right tool) then how when in the project that is using these components would you style (override) the components. You would have to include tw macro in the project as well has the lib to utilise tailwind as when you ship the ready made component the css will have been generated upfront by the macro.

No idea if i'm making any sense, maybe styled-system is a better approach for this :-)

useful!
source:https://uonfu.com/
Github User Rank List