Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use postcss plugins to fix flexbox bugs in IE11 and lack of css vars

Browse source
This commit is contained in:
Bruno Windels 2020-08-07 18:15:53 +01:00
parent eb92b9a086
commit ab3c7b7d1f
3 changed files with 65 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
package-lock.json generated
View file

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

2
package.json
View file

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

15
scripts/build.mjs
View file

@ -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();
}
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) {