https://github.com/flgmwt/babel-plugin-transform-yoga-style-spacing
Transform spacing properties such as `marginVertical` into their separate properties for DOM support
https://github.com/flgmwt/babel-plugin-transform-yoga-style-spacing
Last synced: about 2 months ago
JSON representation
Transform spacing properties such as `marginVertical` into their separate properties for DOM support
- Host: GitHub
- URL: https://github.com/flgmwt/babel-plugin-transform-yoga-style-spacing
- Owner: FLGMwt
- Created: 2020-08-10T21:53:56.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2020-08-10T22:29:10.000Z (almost 5 years ago)
- Last Synced: 2024-04-25T19:42:36.498Z (about 1 year ago)
- Language: JavaScript
- Size: 1.95 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# babel-plugin-transform-yoga-style-spacing
> Work in progress. This is probably broken for many things and I'm certain it doesn't work with the emotion css prop preset. Also TypeScript understandably doesn't like these properties it doesn't know about. I'm looking into that and will test out some other cases but consider this experimental.
The style system in React Native (powered by Yoga) adds four critical properties to traditional CSS:
- `marginHorizontal`
- `marginVertical`
- `paddingHorizontal`
- `paddingVertical`
These provide shorthand for left/right and top/bottom.
This Babel transform plugin adds support for these properties by rewriting them as their component rules. For example:
Before:
```js
```
After:
```js
```
## Installation
NPM:
```sh
npm install --dev babel-plugin-transform-yoga-style-spacing
```
Yarn:
```sh
yarn add --dev babel-plugin-transform-yoga-style-spacing
```
Then add to your babel config ([more about babel configuration](https://babeljs.io/docs/en/configuration)):
```json
{
"plugins": [
// 'my-other-babel-plugin'
"babel-plugin-transform-yoga-style-spacing"
// ...
]
}
```
## Caveats
- doesn't currently work with the emotion css prop, probably because of plugin execution ordering
- TypeScript doesn't recognize the new properties
- It only works for `ObjectExpression`s and properties set by `Identitier`s. That is: `const styles = { marginVertical: 12 }` works. `styles['marginVertical']: 12;` does not. `const marginVerticalKey = 'marginVertical'; const styles= { [marginVerticalKey]: 12 };` does not.
- It duplicates _by source_ whatever is on the right hand side of the property assignment. These should not be A) Expensive B) Cause side effects C) Non-deterministic