From ca996d25461f12d998c0519b3c8087dcd99abedf Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Thu, 26 Jan 2023 18:43:08 +0100 Subject: [PATCH] [api-minor] Update the minimum supported browsers, and remove the PostCSS `logical` plugin The patch updates the minimum supported browsers/environments as follows: - Chrome 87, which was released on 2020-11-17; see https://en.wikipedia.org/wiki/Google_Chrome_version_history - Firefox ESR (no change); see https://wiki.mozilla.org/Release_Management/Calendar - Safari 14.1, which was released on 2021-04-26; see https://en.wikipedia.org/wiki/Safari_version_history#Safari_14 - Node.js 14 (no change); see https://en.wikipedia.org/wiki/Node.js#Releases The recent *major* release of the PostCSS `logical` plugin effectively removed support for all of the things that we used it for, which includes (but may not be limited to): preserving the original CSS code (for up-to-date browsers), re-writing the `:dir` pseudo-class, and support for re-writing `float: inline-start;`/`float: inline-end;` properties. Please find additional details at https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-logical/CHANGELOG.md#600-january-24-2023 Hence the primary reason for these changes are related to native support for *logical* CSS properties/values. Currently, in the default viewer, we're using the following ones: - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility By updating the minimum supported browsers, we thus only have to worry about the *last* case here. Thankfully there's not that many `float: inline-start;`/`float: inline-end;` occurrences, and we can utilize CSS variables together with the pre-processor to support those in a way that won't affect the Firefox PDF Viewer. --- gulpfile.js | 27 ++++++--------------------- package-lock.json | 20 -------------------- package.json | 1 - web/viewer.css | 28 ++++++++++++++++++++-------- 4 files changed, 26 insertions(+), 50 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 1d8605edf095f..3fdb30b92c3cc 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,7 +18,6 @@ const autoprefixer = require("autoprefixer"); const postcssDirPseudoClass = require("postcss-dir-pseudo-class"); -const postcssLogical = require("postcss-logical"); const fs = require("fs"); const gulp = require("gulp"); const postcss = require("gulp-postcss"); @@ -80,9 +79,9 @@ const config = JSON.parse(fs.readFileSync(CONFIG_FILE).toString()); const ENV_TARGETS = [ "last 2 versions", - "Chrome >= 85", + "Chrome >= 87", "Firefox ESR", - "Safari >= 14", + "Safari >= 14.1", "Node >= 14", "> 1%", "not IE > 0", @@ -912,11 +911,7 @@ function buildGeneric(defines, dir) { preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")), preprocessCSS("web/viewer.css", defines) .pipe( - postcss([ - postcssLogical({ preserve: true }), - postcssDirPseudoClass(), - autoprefixer(AUTOPREFIXER_CONFIG), - ]) + postcss([postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG)]) ) .pipe(gulp.dest(dir + "web")), @@ -993,11 +988,7 @@ function buildComponents(defines, dir) { gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(dir + "images")), preprocessCSS("web/pdf_viewer.css", defines) .pipe( - postcss([ - postcssLogical({ preserve: true }), - postcssDirPseudoClass(), - autoprefixer(AUTOPREFIXER_CONFIG), - ]) + postcss([postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG)]) ) .pipe(gulp.dest(dir)), ]); @@ -1089,11 +1080,7 @@ function buildMinified(defines, dir) { preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")), preprocessCSS("web/viewer.css", defines) .pipe( - postcss([ - postcssLogical({ preserve: true }), - postcssDirPseudoClass(), - autoprefixer(AUTOPREFIXER_CONFIG), - ]) + postcss([postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG)]) ) .pipe(gulp.dest(dir + "web")), @@ -1435,9 +1422,8 @@ gulp.task( preprocessCSS("web/viewer.css", defines) .pipe( postcss([ - postcssLogical({ preserve: true }), postcssDirPseudoClass(), - autoprefixer({ overrideBrowserslist: ["Chrome >= 85"] }), + autoprefixer({ overrideBrowserslist: ["Chrome >= 87"] }), ]) ) .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + "web")), @@ -2005,7 +1991,6 @@ gulp.task("dev-css", function createDevCSS() { preprocessCSS("web/viewer.css", defines) .pipe( postcss([ - postcssLogical({ preserve: true }), postcssDirPseudoClass(), autoprefixer({ overrideBrowserslist: ["last 1 versions"] }), ]) diff --git a/package-lock.json b/package-lock.json index 10fe564403589..0fde0e479a0a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,6 @@ "path2d-polyfill": "^2.0.1", "postcss": "^8.4.21", "postcss-dir-pseudo-class": "^7.0.0", - "postcss-logical": "^5.0.4", "prettier": "^2.8.3", "puppeteer": "^19.0.0", "rimraf": "^4.1.2", @@ -14682,18 +14681,6 @@ } } }, - "node_modules/postcss-logical": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", - "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "dev": true, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, "node_modules/postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", @@ -29617,13 +29604,6 @@ "yaml": "^1.10.2" } }, - "postcss-logical": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", - "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "dev": true, - "requires": {} - }, "postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", diff --git a/package.json b/package.json index 0d3e707245631..0220c0de6c605 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "path2d-polyfill": "^2.0.1", "postcss": "^8.4.21", "postcss-dir-pseudo-class": "^7.0.0", - "postcss-logical": "^5.0.4", "prettier": "^2.8.3", "puppeteer": "^19.0.0", "rimraf": "^4.1.2", diff --git a/web/viewer.css b/web/viewer.css index b23f1850abe69..6dd7c709b8745 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -17,6 +17,14 @@ :root { --dir-factor: 1; + /*#if MOZCENTRAL*/ + --inline-start: inline-start; + --inline-end: inline-end; + /*#else*/ + --inline-start: left; + --inline-end: right; + /*#endif*/ + --sidebar-width: 200px; --sidebar-transition-duration: 200ms; --sidebar-transition-timing-function: ease; @@ -114,6 +122,10 @@ :root:dir(rtl) { --dir-factor: -1; + /*#if !MOZCENTRAL*/ + --inline-start: right; + --inline-end: left; + /*#endif*/ } @media (prefers-color-scheme: dark) { @@ -658,11 +670,11 @@ body { #toolbarViewerLeft, #toolbarSidebarLeft { - float: inline-start; + float: var(--inline-start); } #toolbarViewerRight, #toolbarSidebarRight { - float: inline-end; + float: var(--inline-end); } #toolbarViewerLeft > *, @@ -672,7 +684,7 @@ body { #toolbarSidebarRight *, .findbar * { position: relative; - float: inline-start; + float: var(--inline-start); } #toolbarViewerLeft { @@ -690,7 +702,7 @@ body { display: inline-block; } .splitToolbarButton > .toolbarButton { - float: inline-start; + float: var(--inline-start); } .toolbarButton, @@ -740,7 +752,7 @@ body { } .splitToolbarButtonSeparator { - float: inline-start; + float: var(--inline-start); margin: 4px 0; width: 1px; height: 20px; @@ -1169,7 +1181,7 @@ a.secondaryToolbarButton[href="#"] { } .thumbnail { - float: inline-start; + float: var(--inline-start); margin: 0 10px 5px; } @@ -1251,13 +1263,13 @@ a:focus > .thumbnail > .thumbnailSelectionRing, padding-inline-start: 4px; } #layersView .treeItem > a > label > input { - float: inline-start; + float: var(--inline-start); margin-top: 1px; } .treeItemToggler { position: relative; - float: inline-start; + float: var(--inline-start); height: 0; width: 0; color: rgba(255, 255, 255, 0.5);