Initial commit

Author: AustinBrunkhorst

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [["env", {
+    "targets": {
+      "node": 4
+    }
+  }]]
+}

.gitignore

@@ -0,0 +1,9 @@
+*.swp
+*~
+*.iml
+.*.haste_cache.*
+.DS_Store
+.idea
+npm-debug.log
+node_modules
+dist

.npmignore

@@ -0,0 +1,10 @@
+*.swp
+*~
+*.iml
+.*.haste_cache.*
+.DS_Store
+.idea
+.babelrc
+.eslintrc
+npm-debug.log
+lib

README.md

@@ -0,0 +1,26 @@
+# `react-app-rewire-styled-components-typescript`
+
+Add the [`typescript-plugin-styled-components`](https://github.com/Igorbek/typescript-plugin-styled-components) to your `create-react-app` app via [`react-app-rewired`](https://github.com/timarney/react-app-rewired) and [`react-scripts-ts`](https://github.com/wmonk/create-react-app-typescript).
+
+## Installation
+
+```sh
+npm install --save react-app-rewire-styled-components-typescript
+
+# alternatively if you have yarn installed
+yarn add react-app-rewire-styled-components-typescript
+```
+
+## Usage
+
+In the `config-overrides.js` you created for `react-app-rewired` add this code:
+
+```JS
+const rewireStyledComponentsTypescriptPlugin = require('react-app-rewire-styled-components-typescript');
+
+module.exports = function override(config, env) {
+  config = rewireStyledComponentsTypescriptPlugin(config, env);
+
+  return config;
+}
+```

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-app-rewire-styled-components-typescript",
+  "version": "1.0.0",
+  "description": "A plugin to add typescript-plugin-styled-components to a create-react-app with react-scripts-ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AustinBrunkhorst/react-app-rewire-styled-components-typescript.git"
+  },
+  "main": "dist/index.js",
+  "license": "Unlicense",
+  "scripts": {
+    "precommit": "lint-staged",
+    "prebuild": "rimraf dist",
+    "build": "babel src --out-dir dist --ignore '*.test.js'",
+    "test": "jest src",
+    "prettier": "prettier --write --single-quote --trailing-comma es5 'src/**/*.js'"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write --single-quote --trailing-comma es5",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "typescript-plugin-styled-components": "^0.0.6"
+  },
+  "peerDependencies": {
+    "react-app-rewired": "^1.5.2"
+  },
+  "devDependencies": {
+    "babel-cli": "6.x.x",
+    "babel-preset-env": "^1.7.0",
+    "husky": "^0.13.4",
+    "jest": "19.x.x",
+    "lint-staged": "^3.6.1",
+    "prettier": "^1.3.1",
+    "rimraf": "^2.6.2"
+  }
+}

src/index.js

@@ -0,0 +1,25 @@
+const { getLoader, loaderNameMatches } = require('react-app-rewired');
+
+const { createTransformer } = require('typescript-plugin-styled-components');
+const styledComponentsTransformer = createTransformer();
+
+const tsLoaderMatcher = rule => loaderNameMatches(rule, 'ts-loader');
+const getTsLoader = rules => getLoader(rules, tsLoaderMatcher);
+
+const rewireStyledComponentsTypescriptPlugin = (config, _env) => {
+  const tsLoader = getTsLoader(config.module.rules);
+
+  if (!tsLoader) {
+    console.log('ts-loader not found');
+
+    return config;
+  }
+
+  tsLoader.options.getCustomTransformers = () => ({
+    before: [styledComponentsTransformer],
+  });
+
+  return config;
+};
+
+module.exports = rewireStyledComponentsTypescriptPlugin;