Debugging styled-components in typescript

Question

Taking in account that it would no be nice to wrap typescript with a babel-plugin to debug styled-component (e.g. to see components names in dev-tools), how could I achieve the same functionality?

Thanks

Answer 1

Thanks for suggestions I've ended up adding babel on top of typescript, and it works fine.

In case anyone decides to do the same here, this is the webpack rule (quite banal though):

  {
    test: /\.tsx?$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [
            ["@babel/env", {
              "targets": ["> 1%"]
            }],
            "@babel/react"
          ],
          plugins: [
            // "lodash",
            "babel-plugin-styled-components",
            "babel-plugin-transform-react-stateless-component-name"
          ]
        }
      },
      {
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            jsx: 'preserve',
            module: 'es2015'
          }
        }
      }
    ],
    include: SRC_ROOT
  }

Had to skip .babelrc because storybook started producing errors when it found custom .babelrc file.