Merge pull request #4 from vector-im/bwindels/legacy-css

Make CSS compatible with IE11

package-lock.json

@@ -1514,6 +1514,12 @@
         "homedir-polyfill": "^1.0.1"
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -1957,6 +1963,49 @@
         "supports-color": "^6.1.0"
       }
     },
+    "postcss-css-variables": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.17.0.tgz",
+      "integrity": "sha512-/ZpFnJgksNOrQA72b3DKhExYh+0e2P5nEc3aPZ62G7JLmdDjWRFv3k/q4LxV7uzXFnmvkhXRbdVIiH5tKgfFNA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-flexbugs-fixes": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz",
+      "integrity": "sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.26"
+      }
+    },
     "postcss-import": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",

package.json

@@ -34,6 +34,8 @@
     "impunity": "^0.0.11",
     "mdn-polyfills": "^5.20.0",
     "postcss": "^7.0.18",
+    "postcss-css-variables": "^0.17.0",
+    "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-import": "^12.0.1",
     "regenerator-runtime": "^0.13.7",
     "rollup": "^1.15.6",

scripts/build.mjs

@@ -33,6 +33,9 @@ import commonjs from '@rollup/plugin-commonjs';
 // multi-entry plugin so we can add polyfill file to main
 import multi from '@rollup/plugin-multi-entry';
 
+import cssvariables from "postcss-css-variables";
+import flexbugsFixes from "postcss-flexbugs-fixes";
+
 const PROJECT_ID = "hydrogen";
 const PROJECT_SHORT_NAME = "Hydrogen";
 const PROJECT_NAME = "Hydrogen Chat";
@@ -67,10 +70,11 @@ async function build() {
     await buildHtml(version, bundleName);
     if (legacy) {
         await buildJsLegacy(bundleName);
+        await buildCssLegacy();
     } else {
         await buildJs(bundleName);
+        await buildCss();
     }
-    await buildCss();
     if (offline) {
         await buildOffline(version, bundleName);
     }
@@ -185,6 +189,15 @@ async function buildCss() {
     await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8");
 }
 
+async function buildCssLegacy() {
+    // create css bundle
+    const cssMainFile = path.join(projectDir, "src/ui/web/css/main.css");
+    const preCss = await fs.readFile(cssMainFile, "utf8");
+    const cssBundler = postcss([postcssImport, cssvariables(), flexbugsFixes()]);
+    const result = await cssBundler.process(preCss, {from: cssMainFile});
+    await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8");
+}
+
 
 function removeOrEnableScript(scriptNode, enable) {
     if (enable) {

src/ui/web/css/main.css

@@ -22,14 +22,20 @@ limitations under the License.
 @import url('avatar.css');
 @import url('spinner.css');
 
+/* only if the body contains the whole app (e.g. we're not embedded in a page), make some changes */
+body.brawl {
+    /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */
+    overscroll-behavior: none;
+    /* disable rubberband scrolling on document in IE11 */
+    overflow: hidden;
+}
+
 .brawl {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     background-color: black;
     color: white;
-    /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */
-    overscroll-behavior: none;
 }
 
 .hiddenWithLayout {