title: Using TypeScript, styled-components and PostCSS with webpack
body: <p>I use webpack to build a react application using styled-components written in TypeScript. I also use PostCSS with autoprefixer to support CSS grids on older browsers. The compilation works but the generated sourcemaps aren't correct. If I view them in Chrome the "original source" shows the output of PostCSS instead of the original tsx-source. Here is my webpack.config.js (sourcemaps are enabled in tsconfig.json):</p>
  
  <pre><code>module.exports = {
     mode: "development",
     entry: {
        "GridTest.js": "./Source/View/GridTest.tsx",
     },
     output: {
        filename: "../../bmdnet/js/packed/[name]"
     },
     devtool: "source-map",
     module: {
        rules: [
           {
              test: /\.tsx?$/,
              use: [
                 {
                    loader: "ts-loader",
                 },
                 {
                    loader: "postcss-loader",
                    options: {
                       plugins: () =&gt; ([
                          require("autoprefixer")({ grid: true }),
                          require("postcss-fail-on-warn"),
                       ]),
                       syntax: "postcss-jsx",
                       sourceMap: true,
                    },
                 },
              ],
           },
        ]
     },
  };
  </code></pre>
  
  <p>This is my test file GridTest.tsx:</p>
  
  <pre><code>import * as React from "react";
  import styled from "styled-components";
  
  export const GridTest = styled(() =&gt; &lt;div /&gt;)`
  &amp; {
     display: grid;
  }
  `;
  </code></pre>
  
  <p>This is the "original source" of GridTest.tsx as shown for e.g. in Chrome dev tools:</p>
  
  <pre><code>import * as React from "react";
  import styled from "styled-components";
  
  export const GridTest = styled(() =&gt; &lt;div /&gt;)`
  &amp; {
     display: -ms-grid; // this line should not be here
     display: grid;   
  }
  `;
  </code></pre>
  
  <p>I can't find any information about how webpack generates source maps when using multiple loaders. I assumed webpack would apply the first source map (from postcss-loader) to the second sourcemap (from ts-loader) and generate a final source map that points from the final output to the original file which unfortunately does not seem to be the case. I debugged the source of the ts-loader and the source map from postcss-loader is passed to it, but the ts-loader does not use it and assumes it's input is the original source.</p>
  
  <p>This is not too bad when debugging in Chrome but it is terrible when compilation fails and a wrong line number is shown. I don't even know if the second problem can be solved using source maps.</p>
  
  <p>I already tried reversing the order of ts-loader and postcss-loader but postcss-jsx does obviously not work after the transformation into plain JavaScript.</p>
  
  <p>Does anyone have an idea how to solve this problem?</p>