Merge pull request #4125 from brave/styled-components-devtools

Friendly class names for styled-components Elements in non-official builds

components/webpack/webpack-ts-transformers.js

@@ -0,0 +1,8 @@
+const TypescriptPluginStyledComponents = require('typescript-plugin-styled-components')
+const createStyledComponentsTransformer = TypescriptPluginStyledComponents.default
+const styledComponentsTransformer = createStyledComponentsTransformer()
+module.exports = () => ({
+  before: [
+    styledComponentsTransformer
+  ]
+})

components/webpack/webpack.config.js

@@ -1,5 +1,13 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
 const path = require('path')
 const GenerateDepfilePlugin = require('./webpack-plugin-depfile')
+const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default
+
+const styledComponentsTransformer = createStyledComponentsTransformer()
 
 module.exports = (env, argv) => ({
   devtool: argv.mode === 'development' ? '#inline-source-map' : false,
@@ -27,7 +35,10 @@ module.exports = (env, argv) => ({
     rules: [
       {
         test: /\.tsx?$/,
-        loader: 'awesome-typescript-loader'
+        loader: 'awesome-typescript-loader',
+        options: {
+          getCustomTransformers: path.join(__dirname, './webpack-ts-transformers.js')
+        }
       },
       {
         test: /\.css$/,