Merge pull request #18628 from psrpinto/hot-reload-follow-up

Hot reload follow up

.env.example

@@ -1,14 +1,13 @@
-# If you want to have proper hot-reload css experience, define one and set this on.
+# To enable CSS hot-reload, set the following variable to 1.
 CSS_HOT_RELOAD=1
-# Define which one theme you want to load for hot-reload purposes.
-# To use a single theme just uncomment a line with the theme you want to use.
+# To use a single theme, uncomment the line with the theme you want to hot-reload.
 MATRIX_THEMES='light'
 #MATRIX_THEMES='dark'
 #MATRIX_THEMES='light-legacy'
 #MATRIX_THEMES='dark-legacy'
 #MATRIX_THEMES='light-custom'
 #MATRIX_THEMES='dark-custom'
-# You can load multiple themes at once, but switching between them may require full page reload.
-# It will also multiple compliation times by the number of turned on themes.
-# If you want to use multiple themes, define the combinations manually like below:
+# You can also enable multiple themes by using a comma-separated list.
+# When multiple themes are enabled, switching between them may require a full page reload.
+# Note that compilation times are proportional to the number of enabled themes.
 #MATRIX_THEMES='light,dark'

README.md

@@ -267,9 +267,9 @@ internet.  So please don't depend on resources (JS libs, CSS, images, fonts)
 hosted by external CDNs or servers but instead please package all dependencies
 into Element itself.
 
-CSS hot-reload is currently an opt-in development feature, and if you want to have
-it working properly on your environment, create a `.env` file in this repository
-with proper environmental, see `.env.example` for documentation and example.
+CSS hot-reload is available as an opt-in development feature. You can enable it
+by defining a `CSS_HOT_RELOAD` environment variable, in a `.env` file in the root
+of the repository. See `.env.example` for documentation and an example.
 
 Setting up a dev environment
 ============================

src/vector/devcss.ts

@@ -15,15 +15,16 @@ limitations under the License.
 */
 
 /**
- * This code will be autoremoved on production builds.
- * The purpose of this code is that the webpack's `string-replace-loader`
- * pretty much search for this string in this specific file and replaces it
- * like a macro before any previous compilations, which allows us to inject
- * some css requires statements that are specific to the themes we have turned
- * on by ourselves. Without that very specific workaround, webpack would just
- * import all the CSSes, which would make the whole thing useless, as on my
- * machine with i9 the recompilation for all themes turned ou would take way
- * over 30s, which is definitely too high for nice css reloads speed.
+ * This code is removed on production builds.
+ *
+ * Webpack's `string-replace-loader` searches for the `use theming` string
+ * in this specific file, and replaces it with CSS requires statements that
+ * are specific to the themes we have enabled.
+ *
+ * Without this workaround, webpack would import the CSS of all themes, which
+ * would defeat the purpose of hot-reloading since all themes would be compiled,
+ * which would result in compilation times on the order of 30s, even on a
+ * powerful machine.
  *
  * For more details, see webpack.config.js:184 (string-replace-loader)
  */

src/vector/index.ts

@@ -26,9 +26,9 @@ require('highlight.js/styles/github.css');
 require('katex/dist/katex.css');
 
 /**
- * This require is necessary only for purposes of CSS hot reload, as otherwise
- * webpack has some incredibly problems figuring out which css files should be
- * hot reloaded, even with proper hints for the loader.
+ * This require is necessary only for purposes of CSS hot-reload, as otherwise
+ * webpack has some incredible problems figuring out which CSS files should be
+ * hot-reloaded, even with proper hints for the loader.
  *
  * On production build it's going to be an empty module, so don't worry about that.
  */

webpack.config.js

@@ -25,8 +25,8 @@ const cssThemes = {
 };
 
 function getActiveThemes() {
-    // We want to use `light` theme by default if it's not defined.
-    const theme = process.env.MATRIX_THEMES ?? 'dark';
+    // Default to `light` theme when the MATRIX_THEMES environment variable is not defined.
+    const theme = process.env.MATRIX_THEMES ?? 'light';
     const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x);
     return themes;
 }
@@ -558,8 +558,6 @@ module.exports = (env, argv) => {
             // Only output errors, warnings, or new compilations.
             // This hides the massive list of modules.
             stats: 'minimal',
-            // hot: false,
-            // injectHot: false,
             hotOnly: true,
             inline: true,
         },