From 9407af0bfb907f0f2f2e74ea34594bef0bc923ce Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 4 Oct 2024 13:41:25 +0100 Subject: [PATCH] Remove broken HMR support It has been broken since the Webpack 5 upgrade Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .env.example | 2 -- README.md | 4 ---- webpack.config.js | 52 ++++------------------------------------------- 3 files changed, 4 insertions(+), 54 deletions(-) diff --git a/.env.example b/.env.example index e2ac444dd0..df13702cc9 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,3 @@ -# To enable CSS hot-reload, set the following variable to 1. -CSS_HOT_RELOAD=1 # To use the full page error dialog, set this to 1. Please report false positives to # the issue tracker for handling. FULL_PAGE_ERRORS=0 diff --git a/README.md b/README.md index 19875e083d..deab264f86 100644 --- a/README.md +++ b/README.md @@ -206,10 +206,6 @@ 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 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 Much of the functionality in Element is actually in the `matrix-react-sdk` and diff --git a/webpack.config.js b/webpack.config.js index 054dada461..07710306be 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -105,7 +105,6 @@ module.exports = (env, argv) => { // (called to build nightly and develop.element.io) const nodeEnv = argv.mode; const devMode = nodeEnv !== "production"; - const useHMR = process.env.CSS_HOT_RELOAD === "1" && devMode; const enableMinification = !devMode && !process.env.CI_PACKAGE; const development = {}; @@ -157,7 +156,7 @@ module.exports = (env, argv) => { import: "./src/serviceworker/index.ts", filename: "sw.js", // update WebPlatform if this changes }, - ...(useHMR ? {} : cssThemes), + ...cssThemes, }, optimization: { @@ -276,14 +275,6 @@ module.exports = (env, argv) => { /highlight\.js[\\/]lib[\\/]languages/, ], rules: [ - useHMR && { - test: /devcss\.ts$/, - loader: "string-replace-loader", - options: { - search: '"use theming";', - replace: getThemesImports(), - }, - }, { test: /\.(ts|js)x?$/, include: (f) => { @@ -369,42 +360,7 @@ module.exports = (env, argv) => { { test: /\.pcss$/, use: [ - /** - * This code is hopeful that no .pcss outside of our themes will be directly imported in any - * of the JS/TS files. - * Should be MUCH better with webpack 5, but we're stuck to this solution for now. - */ - useHMR - ? { - loader: "style-loader", - /** - * If we refactor the `theme.js` in `matrix-react-sdk` a little bit, - * we could try using `lazyStyleTag` here to add and remove styles on demand, - * that would nicely resolve issues of race conditions for themes, - * at least for development purposes. - */ - options: { - insert: function insertBeforeAt(element) { - const parent = document.querySelector("head"); - // We're in iframe - if (!window.MX_DEV_ACTIVE_THEMES) { - parent.appendChild(element); - return; - } - // Properly disable all other instances of themes - element.disabled = true; - element.onload = () => { - element.disabled = true; - }; - const theme = - window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter]; - element.setAttribute("data-mx-theme", theme); - window.MX_insertedThemeStylesCounter++; - parent.appendChild(element); - }, - }, - } - : MiniCssExtractPlugin.loader, + MiniCssExtractPlugin.loader, { loader: "css-loader", options: { @@ -642,8 +598,8 @@ module.exports = (env, argv) => { // This exports our CSS using the splitChunks and loaders above. new MiniCssExtractPlugin({ - filename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css", - chunkFilename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css", + filename: "bundles/[name].css", + chunkFilename: "bundles/[name].css", ignoreOrder: false, // Enable to remove warnings about conflicting order }),