No description, website, or topics provided.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 3fc12f9 Nov 2, 2017
Permalink
Failed to load latest commit information.
transforms Merge pull request #11 from chinesedfan/fix_mixin Nov 2, 2017
.eslintrc.js init Jan 24, 2017
.gitignore init Jan 24, 2017
README.md Use JSCodeShift to hopefully fix #2 Mar 5, 2017
index.js Create index.js May 30, 2017
package.json Use JSCodeShift to hopefully fix #2 Mar 5, 2017
yarn.lock Add CLI Jan 24, 2017

README.md

styled-components-native-code-mod

Transforms v1 styled-components to v2. It

  • Adds px units where relevant
  • Fixes font-family to include quotes
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 <path>

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

In

styled.View`
  top: 10;
  flex: 1;
  margin: 10 20;
  font-family: Georgia;
  color: ${props => props.color};
`;

Out

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.

const value = '10';

styled.View`
  top: ${value};
`;