From ab3c7b7d1f76fb1a0fc6312d778e4ecf4292022d Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 7 Aug 2020 18:15:53 +0100 Subject: [PATCH] Use postcss plugins to fix flexbox bugs in IE11 and lack of css vars --- package-lock.json | 49 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ scripts/build.mjs | 15 ++++++++++++++- 3 files changed, 65 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index d4ef09d8..31b195a7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9cef3338..f44d51a6 100644 --- a/package.json +++ b/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", diff --git a/scripts/build.mjs b/scripts/build.mjs index d5858082..b872f71a 100644 --- a/scripts/build.mjs +++ b/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) {