Fix styled component names in dev tools (#1358)

* Fix styled component names * Remove from prod build
neo4j · Apr 13, 2021 · 4e9ba06 · 4e9ba06
1 parent 23e0437
commit 4e9ba06
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -3,7 +3,6 @@ const isTest = String(process.env.NODE_ENV) === 'test' // Jest sets this
 const toExport = {
   plugins: [
     'react-hot-loader/babel',
-    'styled-components',
     '@babel/plugin-proposal-class-properties',
     'babel-plugin-dynamic-import-node'
   ],

diff --git a/build_scripts/webpack-rules.js b/build_scripts/webpack-rules.js
@@ -19,11 +19,24 @@
  */
 const helpers = require('./webpack-helpers')
 const path = require('path')
+const createStyledComponentsTransformer = require('typescript-plugin-styled-components')
+  .default
+const styledComponentsTransformer = createStyledComponentsTransformer()
 
 module.exports = [
   {
     test: /\.(ts|tsx)?$/,
-    use: { loader: 'ts-loader', options: { transpileOnly: true } },
+    use: {
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true,
+        getCustomTransformers: () => ({
+          before: [
+            ...(helpers.isProduction ? [] : [styledComponentsTransformer])
+          ]
+        })
+      }
+    },
     include: [path.resolve('src')],
     exclude: /node_modules/
   },

diff --git a/package.json b/package.json
@@ -95,7 +95,6 @@
     "babel-loader": "^8.0.4",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-module-resolver": "^2.4.0",
-    "babel-plugin-styled-components": "^1.8.0",
     "babel-plugin-transform-react-jsx": "^6.23.0",
     "babel-runtime": "^6.26.0",
     "caniuse-lite": "^1.0.30001020",
@@ -146,6 +145,7 @@
     "ts-jest": "^25.0.0",
     "ts-loader": "^8.0.2",
     "typescript": "^3.9.5",
+    "typescript-plugin-styled-components": "^1.5.0",
     "url-loader": "^1.1.2",
     "wait-on": "^3.1.0",
     "webpack": "^4.29.6",

diff --git a/yarn.lock b/yarn.lock
@@ -3331,7 +3331,7 @@ babel-plugin-module-resolver@^2.4.0:
     glob "^7.1.1"
     resolve "^1.2.0"
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.8.0:
+"babel-plugin-styled-components@>= 1":
   version "1.11.1"
   resolved "https://neo.jfrog.io/neo/api/npm/npm/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz#5296a9e557d736c3186be079fff27c6665d63d76"
   integrity sha1-Upap5VfXNsMYa+B5//J8ZmXWPXY=
@@ -12857,6 +12857,11 @@ typedarray@^0.0.6:
   resolved "https://neo.jfrog.io/neo/api/npm/npm/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript-plugin-styled-components@^1.5.0:
+  version "1.5.0"
+  resolved "https://neo.jfrog.io/neo/api/npm/npm/typescript-plugin-styled-components/-/typescript-plugin-styled-components-1.5.0.tgz#39d345102a236e304a4e9a37c7b1c8a752a46072"
+  integrity sha1-OdNFECojbjBKTpo3x7HIp1KkYHI=
+
 typescript@^3.2.1, typescript@^3.9.5:
   version "3.9.7"
   resolved "https://neo.jfrog.io/neo/api/npm/npm/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"