Merge pull request #1 from StevenLangbroek/v4/global_styles

v3 to v4: injectGlobalStyle to createGlobalStyle

Author: quantizor

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "arrowParens": "avoid",
+  "printWidth": 100,
+  "jsxBracketSameLine": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

README.md

@@ -4,36 +4,35 @@ Automatic codemods to upgrade your styled-components code to newer versions.
 
 ## Installation
 
-```sh
-npm install -g styled-components-codemods
-```
+Thanks to `npx` no installation is needed, just run the command below!
 
 ## Usage
 
-```sh 
-Usage: styled-components-codemods [options] [command]
+```sh
+Usage: npx styled-components-codemods [options] [command]
 
 Options:
 
-  -V, --version  output the version number
-  -h, --help     output usage information
+  -V, --version                                  output the version number
+  -h, --help                                     output usage information
 
 Commands:
 
-  v4 [files...]  Upgrade your code to styled-components v4 (codemods .extend)
+  v4 [...files]                                  Run all v4 codemods
+  v4-extendToStyled [...files]                   Run just the extendToStyled codemod
+  v4-injectGlobalToCreateGlobalStyle [...files]  Run just the injectGlobalToCreateGlobalStyle codemod
 
 Examples:
 
-  $ styled-components-codemods v4 src/components/Box.js src/components/Button.js
+  $ styled-components-codemods v4-extendToStyled src/components/Box.js src/components/Button.js
   $ styled-components-codemods v4 src/**/*.js (this will only work if your terminal expands globs)
 ```
 
 ### Codemods
 
-
 #### v4
 
-In version 4 of `styled-components` the `Component.extends` API will be removed in favor of only using `styled(Component)`. This codemod replaces all `.extends` calls to equivalent `styled()` calls instead.
+In version 4 of `styled-components` the `Component.extends` API will be removed in favor of only using `styled(Component)`. This codemod replaces all `.extends` calls to equivalent `styled()` calls instead. Furthermore, the injectGlobal API has been upgraded to slot into React's lifecycle more naturally. It refactors all `injectGlobal` calls, and warns you where they are, so you can export them and include them when rendering.
 
 ##### Limitations
 
@@ -47,37 +46,42 @@ There is no way to distinguish whether `.extend` identifier is related to `style
 
   <summary>Code Before</summary>
 
-
 ```javascript
-StyledComponent.extend``
+StyledComponent.extend``;
 
-StyledComponent.extend`color: red;`
+StyledComponent.extend`
+  color: red;
+`;
 
-StyledComponent.extend({ color: "red" })
+StyledComponent.extend({ color: "red" });
 
-StyledComponent.extend
+StyledComponent.extend;
 
-StyledComponent.extend``.extend
+StyledComponent.extend``.extend;
 
-StyledComponent.extend({ color: red }).extend
+StyledComponent.extend({ color: red }).extend;
 
-styled.div``.extend``
+styled.div``.extend``;
 
-styled.div`color: red;`.extend`color: blue;`
+styled.div`
+  color: red;
+`.extend`color: blue;`;
 
-styled.div({ color: "red"}).extend({ color: "blue"})
+styled.div({ color: "red" }).extend({ color: "blue" });
 
-StyledComponent.withComponent('div').extend``
+StyledComponent.withComponent("div").extend``;
 
-StyledComponent.withComponent('div').extend`color: red;`
+StyledComponent.withComponent("div").extend`color: red;`;
 
-StyledComponent.withComponent('div').extend()
+StyledComponent.withComponent("div").extend();
 
-StyledComponent.withComponent('div').extend({ color: red })
+StyledComponent.withComponent("div").extend({ color: red });
 
-StyledComponent.extend().extend().extend().extend``
+StyledComponent.extend()
+  .extend()
+  .extend().extend``;
 
-StyledComponent.extend``.extend().extend``.extend``
+StyledComponent.extend``.extend().extend``.extend``;
 ```
 
 </details>
@@ -87,49 +91,47 @@ StyledComponent.extend``.extend().extend``.extend``
   <summary>Code after</summary>
 
 ```javascript
-import styled, { css } from 'styled-components'
+import styled, { css } from "styled-components";
 
-styled(StyledComponent)``
+styled(StyledComponent)``;
 
 styled(StyledComponent)`
   color: red;
-`
+`;
 
-styled(StyledComponent)({ color: 'red' })
+styled(StyledComponent)({ color: "red" });
 
-styled(StyledComponent)
+styled(StyledComponent);
 
-styled(styled(StyledComponent)``)
+styled(styled(StyledComponent)``);
 
-styled(styled(StyledComponent)({ color: red }))
+styled(styled(StyledComponent)({ color: red }));
 
-styled(styled.div``)``
+styled(styled.div``)``;
 
 styled(
   styled.div`
     color: red;
   `
 )`
   color: blue;
-`
+`;
 
-styled(styled.div({ color: 'red' }))({ color: 'blue' })
+styled(styled.div({ color: "red" }))({ color: "blue" });
 
-styled(StyledComponent.withComponent('div'))``
+styled(StyledComponent.withComponent("div"))``;
 
-styled(StyledComponent.withComponent('div'))`
+styled(StyledComponent.withComponent("div"))`
   color: red;
-`
+`;
 
-styled(StyledComponent.withComponent('div'))()
+styled(StyledComponent.withComponent("div"))();
 
-styled(StyledComponent.withComponent('div'))({ color: red })
+styled(StyledComponent.withComponent("div"))({ color: red });
 
-styled(styled(styled(styled(StyledComponent)())())())``
+styled(styled(styled(styled(StyledComponent)())())())``;
 
-styled(styled(styled(styled(StyledComponent)``)())``)``
+styled(styled(styled(styled(StyledComponent)``)())``)``;
 ```
 
 </details>
-
-

bin/styled-components-codemods.js

@@ -1,44 +1,32 @@
 #!/usr/bin/env node
 'use strict';
 
-const path = require('path');
 const program = require('commander');
-const { spawn } = require('child_process');
 const pkg = require('../package.json');
+const { registerCodemods } = require('./utils');
 
-program
-  .version(pkg.version)
-  .command('v4 [files...]')
-  .action((files) => {
-    if (!Array.isArray(files) || files.length === 0) {
-      throw new Error('Please provide a list of files to run the codemod on.');
-    } 
+/**
+ * Add the version-specific codemods here.
+ */
+const codemods = {
+  v4: ['extendToStyled', 'injectGlobalToCreateGlobalStyle'],
+};
 
-    console.log('Running v4 codemods...\n')
-    const child = spawn(path.resolve(path.join(__dirname, '../node_modules/.bin/codemod')), ['--plugin', path.resolve(path.join(__dirname, '../src/v4/index.js')), ...files])
+program.version(pkg.version);
 
-    child.stdout.on('data', chunk => {
-      console.log(chunk.toString())
-    })
-    // since these are streams, you can pipe them elsewhere
-    child.stderr.on('data', chunk => {
-      console.error(chunk.toString());
-    });
-
-    child.on('close', (code) => {
-      if (code === 0) {
-        console.log('Finished running codemods!')
-      }
-    });
-  });
+registerCodemods(codemods, program);
 
 // must be before .parse() since node's emit() is immediate
-program.on('--help', function(){
-  console.log('')
+program.on('--help', function() {
+  console.log('');
   console.log('Examples:');
-  console.log('')
-  console.log('  $ styled-components-codemods v4 src/components/Box.js src/components/Button.js');
-  console.log('  $ styled-components-codemods v4 src/**/*.js (this will only work if your terminal expands globs)');
+  console.log('');
+  console.log(
+    '  $ styled-components-codemods v4-extendToStyled src/components/Box.js src/components/Button.js'
+  );
+  console.log(
+    '  $ styled-components-codemods v4 src/**/*.js (this will only work if your terminal expands globs)'
+  );
 });
 
 program.parse(process.argv);

bin/utils.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const { spawnSync } = require('child_process');
+const glob = require('fast-glob');
+const { curry } = require('lodash/fp');
+const path = require('path');
+
+const runCodemod = curry((version, files, mod) => {
+  const pluginPath = path.resolve(path.join(__dirname, '..', 'src', version, `${mod}.js`));
+
+  spawnSync(path.resolve(path.join(__dirname, '../node_modules/.bin/codemod')), [
+    '--plugin',
+    pluginPath,
+    ...files,
+  ]);
+});
+
+const runCodemods = (version, mods) => {
+  return (...files) => {
+    files = glob.sync(files.filter(f => typeof f === 'string'));
+
+    if (typeof files !== 'string' && !Array.isArray(files)) {
+      throw new Error('No files provided.');
+    }
+
+    console.log(`\nRunning the ${mods.join(', ')} codemods against the following files:\n`);
+    console.log(files);
+
+    mods.forEach(runCodemod(version, files));
+
+    console.log('\nDone. Enjoy!\n');
+  };
+};
+
+exports.registerCodemods = curry((mods, program) => {
+  Object.keys(mods).forEach(version => {
+    program
+      .command(`${version} [...files]`)
+      .description(`Run all ${version} codemods`)
+      .action(runCodemods(version, mods[version]));
+
+    mods[version].forEach(mod => {
+      program
+        .command(`${version}-${mod} [...files]`)
+        .description(`Run just the ${mod} codemod`)
+        .action((...files) => runCodemod(version, files, mod));
+    });
+  });
+});

manualRun.js

@@ -23,11 +23,11 @@
     "babel-codemod": "^2.0.6",
     "babel-core": "^6.26.3",
     "commander": "^2.18.0",
+    "fast-glob": "^2.2.3",
     "lodash": "^4.17.10"
   },
   "scripts": {
-    "test": "jest",
-    "start": "node manualRun.js"
+    "test": "jest"
   },
   "jest": {
     "testEnvironment": "node"

package.json

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.manipulateOptions = function manipulateOptions(_, parserOpts) {
+  parserOpts.plugins.push('asyncGenerators');
+  parserOpts.plugins.push('classProperties');
+  parserOpts.plugins.push('decorators');
+  parserOpts.plugins.push('doExpressions');
+  parserOpts.plugins.push('dynamicImport');
+  parserOpts.plugins.push('flow');
+  parserOpts.plugins.push('functionBind');
+  parserOpts.plugins.push('functionSent');
+  parserOpts.plugins.push('jsx');
+  parserOpts.plugins.push('objectRestSpread');
+  parserOpts.plugins.push('exportDefaultFrom');
+  parserOpts.plugins.push('exportNamespaceFrom');
+};