bradlc / babel-plugin-tailwind-components

Use Tailwind with any CSS-in-JS library
MIT License
332 stars 25 forks source link

Fix prod versions of negative values (e.g. negativeMargin) #56

Closed mw999 closed 3 years ago

mw999 commented 4 years ago

Summary

When trying to use negative styles, the version evaluated in production builds was not correct.

Fix for: https://github.com/bradlc/babel-plugin-tailwind-components/issues/57

The Bug

For example with the following code:

const Container = styled.div`
  ${tw`-m-4`}
`

This would evaluate in development environments to this:

"marginTop": "-" + _tailwind32.default.negativeMargin["4"]

However in production, it created

"marginTop": "\"-\"+1rem"

Here is chrome not liking the built style in prod

image

The Fix

Adding a development version of the pre attribute lets us evaluate it differently.

For example

'-mt': { prop: 'marginTop', config: 'negativeMargin', preDev: '"-"+', pre: "-" },

In development it still evaluates to the same value

"marginTop": "-" + _tailwind32.default.negativeMargin["4"]

And in production it creates

"marginTop": "-1rem"