From 6fa7bfc06761ce4330b2ea8f6708a0b55852c6be Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Thu, 25 Jun 2020 16:23:06 -0400 Subject: [PATCH] Use autoprefixer for cross-browser CSS compatibility (close #7739) --- css/00_reset.css | 2 -- css/20_map.css | 2 -- css/60_photos.css | 4 --- css/80_app.css | 75 ++------------------------------------------ package.json | 6 +++- scripts/build_css.js | 6 +++- 6 files changed, 12 insertions(+), 83 deletions(-) diff --git a/css/00_reset.css b/css/00_reset.css index a06b017d9..67891a93a 100644 --- a/css/00_reset.css +++ b/css/00_reset.css @@ -118,8 +118,6 @@ input[type="radio"] { input[type="search"] { -webkit-appearance: none; /* 1 */ - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; /* 2 */ box-sizing: border-box; } diff --git a/css/20_map.css b/css/20_map.css index 5a52c4705..a7122ce2a 100644 --- a/css/20_map.css +++ b/css/20_map.css @@ -256,9 +256,7 @@ text.pointlabel { font-size: 12px; font-weight: bold; fill: #333; - -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; - -moz-transition: opacity 100ms linear; } /* Opera doesn't support dominant-baseline. See #715 */ diff --git a/css/60_photos.css b/css/60_photos.css index 48f08a089..8e0eb77de 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -345,10 +345,6 @@ label.streetside-hires { width: 100%; height: 100%; transform-origin:0 0; - -ms-transform-origin:0 0; - -webkit-transform-origin:0 0; - -moz-transform-origin:0 0; - -o-transform-origin:0 0; } diff --git a/css/80_app.css b/css/80_app.css index 07088f6e3..716e48f16 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -39,16 +39,12 @@ } .main-content.active { - -webkit-filter: none !important; filter: none !important; - -webkit-duration: 200ms; transition-duration: 200ms; } .main-content.inactive { - -webkit-filter: grayscale(80%) brightness(80%); filter: grayscale(80%) brightness(80%); - -webkit-duration: 200ms; transition-duration: 200ms; } @@ -60,8 +56,6 @@ } div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; box-sizing: border-box; } @@ -107,16 +101,10 @@ h4, h5 { outline-style: none; } -::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ +::placeholder { color: #aaa; opacity: 1; /* Firefox */ } -:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: #aaa; -} -::-ms-input-placeholder { /* Microsoft Edge */ - color: #aaa; -} p { font-size: 12px; @@ -606,9 +594,6 @@ button.add-note svg.icon { border-radius: 100%; } .ideditor[dir='rtl'] .spinner img { - -moz-transform: scaleX(-1); - -o-transform: scaleX(-1); - -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; @@ -1363,10 +1348,7 @@ a.hide-toggle { flex-flow: row wrap; margin-bottom: 10px; width: 100%; - -webkit-transition: margin-bottom 200ms; - -moz-transition: margin-bottom 200ms; - -o-transition: margin-bottom 200ms; - transition: margin-bottom 200ms; + transition: margin-bottom 200ms; } .form-field.nowrap, @@ -2051,9 +2033,6 @@ a.hide-toggle { .restriction-controls-container .restriction-controls { display: table; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; } @@ -2106,10 +2085,6 @@ a.hide-toggle { color: #888; text-align: center; pointer-events: none; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; } @@ -2386,9 +2361,6 @@ button.raw-tag-option svg.icon { vertical-align: text-bottom; } .ideditor[dir='ltr'] button.raw-tag-option-list { - -moz-transform: scaleX(-1); - -o-transform: scaleX(-1); - -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; @@ -2636,8 +2608,6 @@ img.tag-reference-wiki-image { opacity: 0.75; z-index: 3000; /* - -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); - -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); */ } @@ -4041,14 +4011,7 @@ li.issue-fix-item:not(.actionable) .fix-icon { img.tile { position: absolute; transform-origin: 0 0; - -ms-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; pointer-events: none; @@ -4057,8 +4020,6 @@ img.tile { opacity: 0; - -webkit-transition: opacity 200ms linear; - -moz-transition: opacity 200ms linear; transition: opacity 200ms linear; } @@ -4083,14 +4044,7 @@ img.tile-removing { margin-top: -20px; transform-origin: 0 0; - -ms-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; } @@ -4106,9 +4060,6 @@ img.tile-debug { overflow: hidden; height: 100%; background: #000; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; touch-action: none; } @@ -4118,10 +4069,6 @@ img.tile-debug { .supersurface { transform-origin: 0 0; - -ms-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; } .supersurface, .layer { @@ -4155,14 +4102,6 @@ img.tile-debug { .map-in-map-tiles { transform-origin: 0 0; - -ms-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; } @@ -4383,15 +4322,11 @@ img.tile-debug { .footer-show { bottom: 0px; transition: bottom 75ms linear; - -moz-transition: bottom 75ms linear; - -webkit-transition: bottom 75ms linear; } .footer-hide { bottom: -35px; transition: bottom 75ms linear; - -moz-transition: bottom 75ms linear; - -webkit-transition: bottom 75ms linear; } @@ -4499,9 +4434,6 @@ img.tile-debug { width: 250px; max-height: 30px; flex: 0 0 250px; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; } @@ -5662,9 +5594,6 @@ li.hide + li.version .badge .tooltip .popover-arrow { } .curtain-tooltip.intro-mouse { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; user-select: none; } diff --git a/package.json b/package.json index 79d8833fb..cfccef83d 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "@rollup/plugin-commonjs": "^13.0.0", "@rollup/plugin-json": "^4.0.1", "@rollup/plugin-node-resolve": "^8.0.0", + "autoprefixer": "^9.8.4", "chai": "^4.1.0", "cldr-core": "36.0.0", "cldr-localenames-full": "36.0.0", @@ -118,5 +119,8 @@ }, "engines": { "node": ">=10" - } + }, + "browserslist": [ + "> 0.2%, last 6 major versions, Firefox ESR, maintained node versions" + ] } diff --git a/scripts/build_css.js b/scripts/build_css.js index 44aae89b5..912488f37 100644 --- a/scripts/build_css.js +++ b/scripts/build_css.js @@ -5,6 +5,7 @@ const glob = require('glob'); const fs = require('fs'); const postcss = require('postcss'); const prepend = require('postcss-selector-prepend'); +const autoprefixer = require('autoprefixer') let _currBuild = null; @@ -32,7 +33,10 @@ function buildCSS() { .then(files => doConcat(files, 'dist/iD.css')) .then(() => { const css = fs.readFileSync('dist/iD.css', 'utf8'); - return postcss([prepend({ selector: '.ideditor ' })]) + return postcss([ + autoprefixer, + prepend({ selector: '.ideditor ' }) + ]) .process(css, { from: 'dist/iD.css', to: 'dist/iD.css' }); }) .then(result => fs.writeFileSync('dist/iD.css', result.css))