CSS calc with more than 2 theme keywords

[ajmnz]

👋 @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]

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.