I'm currently developing a component library with TSDX. At the moment I am battling with an annoying problem with postcss. When building the library, @import statements do not generate on top of the file containing all the bundled library CSS, resulting in a warning on the browser (images below).

TSDX uses rollup under the hood. Here's my configuration at the moment:

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;
  },
};

I tried to use postcss-import to fix the problem, but it didn't work. I'm very inexperienced with bundling JavaScript and CSS so I appreciate the help!

code sample

the warning