Browse Source

Add object-fit polyfill for Edge (#4182)

unarist 1 year ago
parent
commit
eeb5923e89

+ 1
- 0
.postcssrc.yml View File

@@ -6,3 +6,4 @@ plugins:
6 6
       - last 2 versions
7 7
       - IE >= 11
8 8
       - iOS >= 9
9
+  postcss-object-fit-images: {}

+ 3
- 0
app/javascript/mastodon/extra_polyfills.js View File

@@ -1,2 +1,5 @@
1 1
 import 'intersection-observer';
2 2
 import 'requestidlecallback';
3
+import objectFitImages  from 'object-fit-images';
4
+
5
+objectFitImages();

+ 3
- 2
app/javascript/mastodon/load_polyfills.js View File

@@ -20,11 +20,12 @@ function loadPolyfills() {
20 20
   );
21 21
 
22 22
   // Latest version of Firefox and Safari do not have IntersectionObserver.
23
-  // Edge does not have requestIdleCallback.
23
+  // Edge does not have requestIdleCallback and object-fit CSS property.
24 24
   // This avoids shipping them all the polyfills.
25 25
   const needsExtraPolyfills = !(
26 26
     window.IntersectionObserver &&
27
-    window.requestIdleCallback
27
+    window.requestIdleCallback &&
28
+    'object-fit' in (new Image()).style
28 29
   );
29 30
 
30 31
   return Promise.all([

+ 2
- 0
package.json View File

@@ -67,10 +67,12 @@
67 67
     "node-sass": "^4.5.2",
68 68
     "npmlog": "^4.1.2",
69 69
     "object-assign": "^4.1.1",
70
+    "object-fit-images": "^3.2.3",
70 71
     "offline-plugin": "^4.8.3",
71 72
     "path-complete-extname": "^0.1.0",
72 73
     "pg": "^6.4.0",
73 74
     "postcss-loader": "^2.0.6",
75
+    "postcss-object-fit-images": "^1.1.2",
74 76
     "postcss-smart-import": "^0.7.5",
75 77
     "precss": "^2.0.0",
76 78
     "prop-types": "^15.5.10",

+ 65
- 1
yarn.lock View File

@@ -2030,12 +2030,38 @@ css-color-names@0.0.4:
2030 2030
   version "0.0.4"
2031 2031
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
2032 2032
 
2033
+css-font-size-keywords@^1.0.0:
2034
+  version "1.0.0"
2035
+  resolved "https://registry.yarnpkg.com/css-font-size-keywords/-/css-font-size-keywords-1.0.0.tgz#854875ace9aca6a8d2ee0d345a44aae9bb6db6cb"
2036
+
2037
+css-font-stretch-keywords@^1.0.1:
2038
+  version "1.0.1"
2039
+  resolved "https://registry.yarnpkg.com/css-font-stretch-keywords/-/css-font-stretch-keywords-1.0.1.tgz#50cee9b9ba031fb5c952d4723139f1e107b54b10"
2040
+
2041
+css-font-style-keywords@^1.0.1:
2042
+  version "1.0.1"
2043
+  resolved "https://registry.yarnpkg.com/css-font-style-keywords/-/css-font-style-keywords-1.0.1.tgz#5c3532813f63b4a1de954d13cea86ab4333409e4"
2044
+
2045
+css-font-weight-keywords@^1.0.0:
2046
+  version "1.0.0"
2047
+  resolved "https://registry.yarnpkg.com/css-font-weight-keywords/-/css-font-weight-keywords-1.0.0.tgz#9bc04671ac85bc724b574ef5d3ac96b0d604fd97"
2048
+
2049
+css-global-keywords@^1.0.1:
2050
+  version "1.0.1"
2051
+  resolved "https://registry.yarnpkg.com/css-global-keywords/-/css-global-keywords-1.0.1.tgz#72a9aea72796d019b1d2a3252de4e5aaa37e4a69"
2052
+
2033 2053
 css-in-js-utils@^1.0.3:
2034 2054
   version "1.0.3"
2035 2055
   resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
2036 2056
   dependencies:
2037 2057
     hyphenate-style-name "^1.0.2"
2038 2058
 
2059
+css-list-helpers@^1.0.1:
2060
+  version "1.0.1"
2061
+  resolved "https://registry.yarnpkg.com/css-list-helpers/-/css-list-helpers-1.0.1.tgz#fff57192202db83240c41686f919e449a7024f7d"
2062
+  dependencies:
2063
+    tcomb "^2.5.0"
2064
+
2039 2065
 css-loader@^0.28.1, css-loader@^0.28.4:
2040 2066
   version "0.28.4"
2041 2067
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
@@ -2072,6 +2098,10 @@ css-selector-tokenizer@^0.7.0:
2072 2098
     fastparse "^1.1.1"
2073 2099
     regexpu-core "^1.0.0"
2074 2100
 
2101
+css-system-font-keywords@^1.0.0:
2102
+  version "1.0.0"
2103
+  resolved "https://registry.yarnpkg.com/css-system-font-keywords/-/css-system-font-keywords-1.0.0.tgz#85c6f086aba4eb32c571a3086affc434b84823ed"
2104
+
2075 2105
 css-what@2.1:
2076 2106
   version "2.1.0"
2077 2107
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -4713,6 +4743,10 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
4713 4743
   version "4.1.1"
4714 4744
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
4715 4745
 
4746
+object-fit-images@^3.2.3:
4747
+  version "3.2.3"
4748
+  resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
4749
+
4716 4750
 object-is@^1.0.1:
4717 4751
   version "1.0.1"
4718 4752
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -4896,6 +4930,20 @@ parse-asn1@^5.0.0:
4896 4930
     evp_bytestokey "^1.0.0"
4897 4931
     pbkdf2 "^3.0.3"
4898 4932
 
4933
+parse-css-font@^2.0.2:
4934
+  version "2.0.2"
4935
+  resolved "https://registry.yarnpkg.com/parse-css-font/-/parse-css-font-2.0.2.tgz#7b60b060705a25a9b90b7f0ed493e5823248a652"
4936
+  dependencies:
4937
+    css-font-size-keywords "^1.0.0"
4938
+    css-font-stretch-keywords "^1.0.1"
4939
+    css-font-style-keywords "^1.0.1"
4940
+    css-font-weight-keywords "^1.0.0"
4941
+    css-global-keywords "^1.0.1"
4942
+    css-list-helpers "^1.0.1"
4943
+    css-system-font-keywords "^1.0.0"
4944
+    tcomb "^2.5.0"
4945
+    unquote "^1.1.0"
4946
+
4899 4947
 parse-glob@^3.0.4:
4900 4948
   version "3.0.4"
4901 4949
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -5381,6 +5429,14 @@ postcss-normalize-url@^3.0.7:
5381 5429
     postcss "^5.0.14"
5382 5430
     postcss-value-parser "^3.2.3"
5383 5431
 
5432
+postcss-object-fit-images@^1.1.2:
5433
+  version "1.1.2"
5434
+  resolved "https://registry.yarnpkg.com/postcss-object-fit-images/-/postcss-object-fit-images-1.1.2.tgz#8b773043db14672ef6cd6f2cb1f0d8b26a9f573b"
5435
+  dependencies:
5436
+    parse-css-font "^2.0.2"
5437
+    postcss "^5.0.16"
5438
+    quote "^0.4.0"
5439
+
5384 5440
 postcss-ordered-values@^2.1.0:
5385 5441
   version "2.2.3"
5386 5442
   resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
@@ -5694,6 +5750,10 @@ querystringify@~1.0.0:
5694 5750
   version "1.0.0"
5695 5751
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
5696 5752
 
5753
+quote@^0.4.0:
5754
+  version "0.4.0"
5755
+  resolved "https://registry.yarnpkg.com/quote/-/quote-0.4.0.tgz#10839217f6c1362b89194044d29b233fd7f32f01"
5756
+
5697 5757
 raf@^3.1.0:
5698 5758
   version "3.3.2"
5699 5759
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27"
@@ -6973,7 +7033,7 @@ tar@^2.0.0, tar@^2.2.1:
6973 7033
     fstream "^1.0.2"
6974 7034
     inherits "2"
6975 7035
 
6976
-tcomb@^2.5.1:
7036
+tcomb@^2.5.0, tcomb@^2.5.1:
6977 7037
   version "2.7.0"
6978 7038
   resolved "https://registry.yarnpkg.com/tcomb/-/tcomb-2.7.0.tgz#10d62958041669a5d53567b9a4ee8cde22b1c2b0"
6979 7039
 
@@ -7147,6 +7207,10 @@ unpipe@~1.0.0:
7147 7207
   version "1.0.0"
7148 7208
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
7149 7209
 
7210
+unquote@^1.1.0:
7211
+  version "1.1.0"
7212
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.0.tgz#98e1fc608b6b854c75afb1b95afc099ba69d942f"
7213
+
7150 7214
 urix@^0.1.0, urix@~0.1.0:
7151 7215
   version "0.1.0"
7152 7216
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"