javascript - las declaraciones @import no se generan en la parte superior del archivo con postcss

Actualmente estoy desarrollando una biblioteca de componentes con TSDX. En este momento estoy lidiando con un problema molesto con postcss. Al compilar la biblioteca, las declaraciones @import no se generan en la parte superior del archivo que contiene todo el CSS de la biblioteca agrupada, lo que resulta en una advertencia en el navegador (imágenes a continuación).

TSDX utiliza Rollup en segundo plano. Aquí está mi configuración en este momento:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const atImport = require("postcss-import");

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          atImport(),
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: true,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};

Intenté usar postcss-import para solucionar el problema, pero no funcionó. ¡Tengo muy poca experiencia con la agrupación de JavaScript y CSS, así que agradezco la ayuda!

ejemplo de código

la advertencia