CSS Modulesで@importを含んだCSSのクラス名が取得できない

webpackのcss-loaderを使ったCSS Modulesで @import したファイルのクラス名が取得できません。以下に最小と思われる再現コードを掲載します。

再現コード

test.html

<script src="dist/main.js"></script>

JavaScriptを実行するのが目的です。

src/index.js

const styles = require('./index.css');
console.log('styles', styles);
console.log('index', styles.locals.testindex);
console.log('import', styles.locals.testimport);

デバッグが目的です。最後の styles.locals.testimport が undefined になって困っています（後述）。

src/index.css

@import 'import.css';

.testindex {
  color: red;
}

src/import.css

.testimport {
  background: blue;
}

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    path: `${__dirname}/dist`,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              import: true,
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

再現方法

npm i -D css-loader webpack webpack-cli
npx webpack --mode production
open test.html

consoleへの出力

styles {
  0: [3, "._10aNScd5VABi2Vi1Zunpbc {↵  background: blue;↵}↵", ""],
  1: [2, "._2ppZfX3K2LiFyomekB0B7T {↵  color: red;↵}↵", ""],
  locals: {
    testindex: "_2ppZfX3K2LiFyomekB0B7T"
  }
}
index _2ppZfX3K2LiFyomekB0B7T
import undefined

やりたいこと

@import 先のクラスである testimport が _10aNScd5VABi2Vi1Zunpbc に置き換わっているのが確認できるのですが、これを styles.locals.testimport で取得したいです。

オプションもしくはwebpackプラグインの追加で解決する方法があれば嬉しいです。仕様でしたら記載されているところを教えていただけると助かります。