search

ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.89k stars 184 forks source link

CSS `calc` with more than 2 `theme` keywords #831

Open ajmnz opened 11 months ago

ajmnz commented 11 months ago

👋 @ben-rogerson

Looks like twin.macro isn't parsing more than 2 theme keywords inside CSS calc.

// The following
tw="w-[calc(theme(spacing.56) + theme(spacing.56) + theme(spacing.56))]"
// outputs { width: "calc(14rem + 14rem + theme(spacing.56))" }

// While something like the following
tw="w-[theme(spacing.56)] h-[theme(spacing.56)] px-[theme(spacing.56)]"
// correctly outputs { height: "14rem", width: "14rem", paddingLeft: "14rem", paddingRight: "14rem" }

Thank you!

Edit: Just noticed that this isn't only in calc.

tw="shadow-[theme(spacing.56) theme(spacing.56) theme(spacing.56) theme(spacing.56) #000]"
// Will output { "--tw-shadow-color": "14rem 14rem theme(spacing.56) theme(spacing.56) #000", "--tw-shadow": "var(--tw-shadow-colored)" }
ben-rogerson commented 11 months ago

Thanks for posting about this issue. I've compared it to vanilla tailwind and found it's working there (with the underscores in place of spaces) so it should also work in twin - I'll get this fixed.