-
Notifications
You must be signed in to change notification settings - Fork 0
Description
We use typed-css-modules to generate the corresponding type definitions for each CSS files. Currently this is achieved by a custom Webpack loader, similar to typed-css-modules-loader, after solving a series of issues with many ugly black magics and workarounds:
-
The loader generated
.css.d.tsfiles will trigger an infinite re-compile loop, then we introducedwebpack.WatchIgnorePluginto tell Webpack watcher ignore those files. -
As a consequence of the above change,
ts-loaderalso becomes blind to any generated.css.d.tsfiles, which causing compile failure. Then we introduced (WatchTimestampsPlugin)[https://github.com/zhenwenc/create-react-app/blob/master/packages/react-scripts/config/WatchTimestampsPlugin.js] to ensure they are still picked up byts-loader's caching mechanism.
However, the solutions is still imperfect, there are unsolved problems:
- After changing a CSS file, an additional compile iteration is required for
ts-loaderto pickup the change. This is because before the.css.d.tshad been generated,ts-loaderalready caches all in scope.tsfiles. - The above problem also causes PROD build and the initial run of DEV build to fail with
.css.d.tsfiles are missing. For that we introduced createTypedCssModules as a workaround, where we generates the type definitions as the first step of the PROD/DEV build pipeline. - After creating a CSS file, we have to manually modify a TS file to trigger the re-compile so that the corresponding
.css.d.tsfile can be generated. Note that this happens only if this CSS file is referenced by a TS file.
After all these mess, I am wondering does Webpack plugin would play better in this role? As a plugin can hook to many compilation lifecycle, we can easily perform the type definition generating process before the compilation actually starts, so that we always ensure that the latest .css.d.ts files are been loaded by ts-loader.
However, I can't think of any solution for the above problem (5). In addition, should we concern that the generated type definition is not actually based on the final compiled CSS files, this also apply to the PROD build of using loader. With the same reason, migrate to plugin means we cannot support LESS/SASS (why should we care anyway).