Closed mw999 closed 3 years ago
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
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
Adding a development version of the pre attribute lets us evaluate it differently.
pre
For example
'-mt': { prop: 'marginTop', config: 'negativeMargin', preDev: '"-"+', pre: "-" },
In development it still evaluates to the same value
And in production it creates
"marginTop": "-1rem"
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:
This would evaluate in development environments to this:
However in production, it created
Here is chrome not liking the built style in prod
The Fix
Adding a development version of the
pre
attribute lets us evaluate it differently.For example
In development it still evaluates to the same value
And in production it creates