Browse Source

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

Hot reload follow up
Dariusz Niemczyk 9 months ago committed by GitHub
No known key found for this signature in database
  1. 11
  2. 6
  3. 19
  4. 6
  5. 6


@ -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.
# 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.
# 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.


@ -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


@ -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)


@ -26,9 +26,9 @@ require('highlight.js/styles/github.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.


@ -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,