I have recently developed a React library with TSDX and you can find it here: https://github.com/deadcoder0904/react-typical
This library utilizes CSS Modules and applies styles to the React components.
Although the bundle successfully generates a CSS file in the dist/ directory, it does not reference it properly which results in the styles not being applied.
As a result, the styles are not displayed as intended.
Below is the content of my tsdx.config.js file:
const postcss = require('rollup-plugin-postcss');
const { terser } = require('rollup-plugin-terser');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = {
rollup(config, options) {
config.plugins.push(
postcss({
modules: true,
plugins: [
autoprefixer(),
cssnano({
preset: 'default',
}),
],
inject: false,
extract: !!options.writeMeta,
minimize: true,
}),
terser()
);
return config;
},
};
Upon exploring the dist/ directory at https://yarnpkg.com/package/@deadcoder0904/react-typical?files, you may observe that while there is an index.js file, it does not reference the accompanying .css file.
The same issue persists with all the .js files in the dist/ folder, where none of them reference the .css file, leading to the CSS code not being bundled and applied to the components.
How can I address this problem effectively?