Использование TypeScript, styled-компонентов и Post CSS с веб-пакетом

Question

Я использую webpack для создания реагирующего приложения, используя styled-компоненты, написанные на TypeScript. Я также использую Post CSS с автоматическим префиксом для поддержки сеток CSS в старых браузерах. Компиляция работает, но сгенерированные исходные карты не верны. Если я смотрю их в Chrome, «оригинальный источник» показывает вывод Post CSS вместо исходного tsx-источника. Вот мой webpack.config. js (исходные карты включены в tsconfig. json):

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: () => ([
                        require("autoprefixer")({ grid: true }),
                        require("postcss-fail-on-warn"),
                     ]),
                     syntax: "postcss-jsx",
                     sourceMap: true,
                  },
               },
            ],
         },
      ]
   },
};

Это мой тестовый файл GridTest.tsx:

import * as React from "react";
import styled from "styled-components";

export const GridTest = styled(() => <div />)`
& {
   display: grid;
}
`;

This это «оригинальный источник» GridTest.tsx, как показано, например, в Chrome dev tools:

import * as React from "react";
import styled from "styled-components";

export const GridTest = styled(() => <div />)`
& {
   display: -ms-grid; // this line should not be here
   display: grid;   
}
`;

Я не могу найти никакой информации о том, как webpack генерирует исходные карты при использовании нескольких загрузчиков. Я предполагал, что webpack применяет первую исходную карту (из post css -loader) ко второй исходной карте (из ts-loader) и генерирует окончательную исходную карту, которая указывает из окончательного вывода на исходный файл, который, к сожалению, не кажется быть так. Я отладил исходный код ts-загрузчика, и исходная карта из post css -loader передается ему, но ts-загрузчик не использует его и предполагает, что его вход является исходным.

Это не так уж плохо при отладке в Chrome, но ужасно, когда компиляция завершается неудачно и отображается неправильный номер строки. Я даже не знаю, может ли быть решена вторая проблема с использованием исходных карт.

Я уже пытался изменить порядок ts-loader и post css -loader, но post css -jsx явно не работает работать после преобразования в обычный JavaScript.

У кого-нибудь есть идеи, как решить эту проблему?