[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.
This commit is contained in:
Jonas Jenwald 2023-01-26 18:43:08 +01:00
parent f492d96301
commit ca996d2546
4 changed files with 26 additions and 50 deletions

View file

@ -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"] }),
])