Currently, I am developing a TypeScript-based library in-house for shared React components. The build process is straightforward - simply using tsc and then publishing to our internal npm registry. We don't need a complex Babel compilation process because the build artifacts are only used within our team, and proper transpilation is done on this library when the consuming applications run their Webpack bundling process.
However, issues arose when I attempted to split one large styles.css file into separate CSS modules. To implement CSS modules, specific syntax is needed in my React component files. For example, in FooComponent.tsx:
import 'FooComponent.css';
The TypeScript compiler doesn't fully understand this, so it simply places the same import statement in the compiled FooComponent.js file. My dilemma now is how should I bundle and distribute these individual CSS modules? While I know that Webpack offers plugins like MiniCssExtractPlugin to handle CSS modules once they're properly loaded, I'm unsure of the best approach for distribution in my setup.
Since the consuming applications already have their own robust Webpack setups to load and bundle JS/CSS assets accurately, my initial thought is to attach these CSS modules within the dist folder where the TypeScript compilation results reside. This would ensure that import statements for CSS files don't lead to missing resources. If an alternative method is chosen for bundling the CSS modules during the build process, those import statements would either need to be eliminated or managed differently, similar to what gulp-csslit does by converting CSS files to JS files.
I haven't experimented with any of these solutions yet, so I'm seeking advice on best practices from anyone who can provide insight.