https://github.com/styled-components/styled-components-native-code-mod

https://github.com/styled-components/styled-components-native-code-mod

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/styled-components/styled-components-native-code-mod
• Owner: styled-components
• Created: 2017-01-24T10:42:53.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T01:37:05.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T13:08:06.258Z (7 months ago)
• Language: JavaScript
• Size: 906 KB
• Stars: 28
• Watchers: 6
• Forks: 6
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# styled-components-native-code-mod

Transforms v1 styled-components to v2. It

* Adds `px` units where relevant

* Fixes `font-family` to include quotes

```bash

npm install -g jscodeshift

npm install https://github.com/styled-components/styled-components-native-code-mod

jscodeshift -t styled-components-native-code-mod/transforms/units 

```

**Will modify files in place, so make sure you can recover if it goes wrong!**

In

```js

styled.View`

  top: 10;

  flex: 1;

  margin: 10 20;

  font-family: Georgia;

  color: ${props => props.color};

`;

```

Out

```js

styled.View`

  top: 10px;

  flex: 1;

  margin: 10px 20px;

  font-family: "Georgia";

  color: ${props => props.color};

`;

```

# Caveats

If you interpolate values that need units, you'll have to do that manually.

```js

const value = '10';

styled.View`

  top: ${value};

`;

```