Use chokidar to bundle css files

buildtools/build.sh

@@ -19,3 +19,4 @@ buildtools/update_type_info.sh app
 webpack --config $WEBPACK_CONFIG --mode production
 webpack --config buildtools/webpack.check.js --mode production
 webpack --config buildtools/webpack.api.config.js --mode production
+cat app/client/*.css app/client/*/*.css > static/bundle.css

buildtools/webpack.config.js

@@ -1,11 +1,7 @@
 const fs = require('fs');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
-const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
 const { ProvidePlugin } = require('webpack');
 const path = require('path');
-const glob = require('glob');
-
-const cssFiles = glob.sync('app/client/**/*.css');
 
 // Get path to top-level node_modules if in a yarn workspace.
 // Otherwise node_modules one level up won't get resolved.
@@ -21,7 +17,6 @@ module.exports = {
     boot: "app/client/boot",
     billing: "app/client/billingMain",
     form: "app/client/formMain",
-    css: new Set(cssFiles),
     // Include client test harness if it is present (it won't be in
     // docker image).
     ...(fs.existsSync("test/client-harness/client.js") ? {
@@ -92,12 +87,6 @@ module.exports = {
       process: 'process',
       Buffer: ['buffer', 'Buffer']
     }),
-    new MergeIntoSingleFilePlugin({
-      files: {
-        "bundle.css": cssFiles
-      },
-      chunks: "css"
-    }),
     // To strip all locales except “en”
     new MomentLocalesPlugin()
   ],

package.json

@@ -90,6 +90,7 @@
     "chai": "4.2.0",
     "chai-as-promised": "7.1.1",
     "chance": "1.0.16",
+    "chokidar-cli": "^3.0.0",
     "esbuild-loader": "2.19.0",
     "eslint": "8.18.0",
     "http-proxy": "1.18.1",
@@ -107,7 +108,6 @@
     "typescript": "4.7.4",
     "webpack": "^5.91.0",
     "webpack-cli": "4.10.0",
-    "webpack-merge-and-include-globally": "^2.3.4",
     "why-is-node-running": "2.0.3"
   },
   "dependencies": {

sandbox/watch.sh

@@ -16,6 +16,8 @@ if [ ! -e _build ]; then
 fi
 
 tsc --build -w --preserveWatchOutput $PROJECT &
+css_files="app/client/**/*.css"
+chokidar "${css_files}" -c "bash -O globstar -c 'cat ${css_files} > static/bundle.css'" &
 webpack --config $WEBPACK_CONFIG --mode development --watch &
 NODE_PATH=_build:_build/stubs:_build/ext nodemon ${NODE_INSPECT:+--inspect} --delay 1 -w _build/app/server -w _build/app/common _build/stubs/app/server/server.js &