From b677edbc58d54dee274f0b193b2a931554451f33 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Sun, 1 Aug 2021 16:28:38 +0200 Subject: [PATCH] Make CSS Hot-reload work in a hacky way --- package.json | 4 +- src/vector/devcss.ts | 33 ++++++++++++ src/vector/index.ts | 8 +++ webpack.config.js | 119 ++++++++++++++++++++++++++++++++++--------- yarn.lock | 38 +++++++++++++- 5 files changed, 174 insertions(+), 28 deletions(-) create mode 100644 src/vector/devcss.ts diff --git a/package.json b/package.json index eb6c4136cf..fcf2b1fa53 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js\"", "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js --https\"", "start:res": "yarn build:jitsi && node scripts/copy-res.js -w", - "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development --disable-host-check", + "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development --disable-host-check --hot", "lint": "yarn lint:types && yarn lint:js && yarn lint:style", "lint:js": "eslint --max-warnings 0 src", "lint:js-fix": "eslint --fix src", @@ -141,6 +141,8 @@ "rimraf": "^3.0.2", "shell-escape": "^0.2.0", "simple-proxy-agent": "^1.1.0", + "string-replace-loader": "2", + "style-loader": "2", "stylelint": "^13.9.0", "stylelint-config-standard": "^20.0.0", "stylelint-scss": "^3.18.0", diff --git a/src/vector/devcss.ts b/src/vector/devcss.ts new file mode 100644 index 0000000000..1937ca949d --- /dev/null +++ b/src/vector/devcss.ts @@ -0,0 +1,33 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +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. + * + * For more details, see webpack.config.js:184 (string-replace-loader) + */ +if (process.env.NODE_ENV === 'development') { + "use theming"; +} + diff --git a/src/vector/index.ts b/src/vector/index.ts index 8817167069..fe424c47f2 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -25,6 +25,14 @@ require('gfm.css/gfm.css'); 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. + * + * On production build it's going to be an empty module, so don't worry about that. + */ +require('./devcss'); // These are things that can run before the skin loads - be careful not to reference the react-sdk though. import { parseQsFromFragment } from "./url_utils"; import './modernizr'; diff --git a/webpack.config.js b/webpack.config.js index bb1d5d9ff5..03ac4a8eff 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ /* eslint-disable quote-props */ const path = require('path'); +const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const TerserPlugin = require('terser-webpack-plugin'); @@ -10,9 +11,35 @@ const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-p let ogImageUrl = process.env.RIOT_OG_IMAGE_URL; if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png'; -const additionalPlugins = [ - // This is where you can put your customisation replacements. -]; +const cssThemes = { + // CSS themes + "theme-legacy": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss", + "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss", + "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss", + "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss", + "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss", + "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss", +}; + +function getActiveThemes() { + const theme = process.env.MATRIX_THEMES ?? 'light,dark'; + const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x); + return themes; +} + +const ACTIVE_THEMES = getActiveThemes(); +function getThemesImports() { + const imports = ACTIVE_THEMES.map((t, index) => { + const themeImportPath = cssThemes[`theme-${t}`].replace('./node_modules/', ''); + return themeImportPath; + }); + const s = JSON.stringify(ACTIVE_THEMES); + return ` + window.MX_insertedThemeStylesCounter = 0 + window.MX_DEV_ACTIVE_THEMES = (${s}); + ${imports.map(i => `import("${i}")`).join('\n')}; + `; +} module.exports = (env, argv) => { let nodeEnv = argv.mode; @@ -29,6 +56,7 @@ module.exports = (env, argv) => { // application to productions standards nodeEnv = "production"; } + const devMode = nodeEnv !== 'production'; const development = {}; if (argv.mode === "production") { @@ -48,6 +76,13 @@ module.exports = (env, argv) => { return { ...development, + watch: true, + watchOptions: { + aggregateTimeout: 200, + poll: 1000, + ignored: [/node_modules([\\]+|\/)+(?!matrix-react-sdk|matrix-js-sdk)/], + }, + node: { // Mock out the NodeFS module: The opus decoder imports this wrongly. fs: 'empty', @@ -59,14 +94,7 @@ module.exports = (env, argv) => { "jitsi": "./src/vector/jitsi/index.ts", "usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.js", "recorder-worklet": "./node_modules/matrix-react-sdk/src/audio/RecorderWorklet.ts", - - // CSS themes - "theme-legacy": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss", - "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss", - "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss", - "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss", - "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss", - "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss", + ...(devMode ? {} : cssThemes), }, optimization: { @@ -89,7 +117,7 @@ module.exports = (env, argv) => { // This fixes duplicate files showing up in chrome with sourcemaps enabled. // See https://github.com/webpack/webpack/issues/7128 for more info. - namedModules: false, + namedModules: true, // Minification is normally enabled by default for webpack in production mode, but // we use a CSS optimizer too and need to manage it ourselves. @@ -150,6 +178,14 @@ module.exports = (env, argv) => { /olm[\\/](javascript[\\/])?olm\.js$/, ], rules: [ + devMode && { + test: /devcss\.ts$/, + loader: 'string-replace-loader', + options: { + search: '"use theming";', + replace: getThemesImports(), + }, + }, { test: /\.worker\.ts$/, loader: "worker-loader", @@ -181,7 +217,7 @@ module.exports = (env, argv) => { { test: /\.css$/, use: [ - MiniCssExtractPlugin.loader, + devMode ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { @@ -219,7 +255,7 @@ module.exports = (env, argv) => { // It's important that this plugin is last otherwise we end // up with broken CSS. - require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}), + require('postcss-preset-env')({ stage: 3, browsers: 'last 2 versions' }), ], parser: "postcss-scss", "local-plugins": true, @@ -230,7 +266,31 @@ module.exports = (env, argv) => { { test: /\.scss$/, use: [ - MiniCssExtractPlugin.loader, + /** + * This code is hopeful that no .scss 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. + */ + devMode ? { + loader: 'style-loader', options: { + attributes: { + 'data-mx-theme': 'replace_me', + }, + // Properly disable all other instances of themes + insert: function insertBeforeAt(element) { + const isMatrixTheme = element.attributes['data-mx-theme'].value === 'replace_me'; + const parent = document.querySelector('head'); + + element.disabled = true; + if (isMatrixTheme) { + element.attributes['data-mx-theme'].value = window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter]; + window.MX_insertedThemeStylesCounter++; + } + + parent.appendChild(element); + }, + }, + } : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { @@ -257,7 +317,7 @@ module.exports = (env, argv) => { // It's important that this plugin is last otherwise we end // up with broken CSS. - require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}), + require('postcss-preset-env')({ stage: 3, browsers: 'last 2 versions' }), ], parser: "postcss-scss", "local-plugins": true, @@ -374,9 +434,15 @@ module.exports = (env, argv) => { }, plugins: [ + new webpack.EnvironmentPlugin({ + NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined + DEBUG: false, + }), + // This exports our CSS using the splitChunks and loaders above. new MiniCssExtractPlugin({ - filename: 'bundles/[hash]/[name].css', + filename: "bundles/[hash]/[name].css", + chunkFilename: "bundles/[hash]/[name].css", ignoreOrder: false, // Enable to remove warnings about conflicting order }), @@ -437,7 +503,6 @@ module.exports = (env, argv) => { files: [{ match: /.*Inter.*\.woff2$/ }], }), - ...additionalPlugins, ], output: { @@ -457,17 +522,21 @@ module.exports = (env, argv) => { // configuration for the webpack-dev-server devServer: { // serve unwebpacked assets from webapp. - contentBase: './webapp', + contentBase: [ + './src/', + './webapp', + './bundles/**', + './node_modules/matrix-react-sdk/**', + './node_modules/matrix-js-sdk/**', + ], // Only output errors, warnings, or new compilations. // This hides the massive list of modules. stats: 'minimal', - - // hot module replacement doesn't work (I think we'd need react-hot-reload?) - // so webpack-dev-server reloads the page on every update which is quite - // tedious in Riot since that can take a while. - hot: false, - inline: false, + hot: true, + injectHot: true, + hotOnly: true, + inline: true, }, }; }; diff --git a/yarn.lock b/yarn.lock index 39fd6d5ba8..74e40d7f90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1454,7 +1454,7 @@ dependencies: "@types/istanbul-lib-report" "*" -"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7": +"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8": version "7.0.8" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818" integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg== @@ -1919,7 +1919,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d" integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== -ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4: +ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5: version "6.12.6" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== @@ -7130,6 +7130,15 @@ loader-utils@^1.0.0, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4 emojis-list "^3.0.0" json5 "^1.0.1" +loader-utils@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0" + integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ== + dependencies: + big.js "^5.2.2" + emojis-list "^3.0.0" + json5 "^2.1.2" + locate-path@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e" @@ -10196,6 +10205,15 @@ schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7 ajv "^6.12.4" ajv-keywords "^3.5.2" +schema-utils@^3.0.0: + version "3.1.1" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281" + integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw== + dependencies: + "@types/json-schema" "^7.0.8" + ajv "^6.12.5" + ajv-keywords "^3.5.2" + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -10718,6 +10736,14 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" +string-replace-loader@2: + version "2.3.0" + resolved "https://registry.yarnpkg.com/string-replace-loader/-/string-replace-loader-2.3.0.tgz#7f29be7d73c94dd92eccd5c5a15651181d7ecd3d" + integrity sha512-HYBIHStViMKLZC/Lehxy42OuwsBaPzX/LjcF5mkJlE2SnHXmW6SW6eiHABTXnY8ZCm/REbdJ8qnA0ptmIzN0Ng== + dependencies: + loader-utils "^1.2.3" + schema-utils "^2.6.5" + string-width@^3.0.0, string-width@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961" @@ -10833,6 +10859,14 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +style-loader@2: + version "2.0.0" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c" + integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + style-search@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"