Merge pull request #1770 from sampotts/css-variables

Allow customization via CSS Custom Properties

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

.prettierrc

@@ -1,6 +1,6 @@
 {
   "useTabs": false,
-    "tabWidth": 4,
+  "tabWidth": 2,
   "singleQuote": true,
   "trailingComma": "all",
   "printWidth": 120

.stylelintrc.json

@@ -10,7 +10,7 @@
       }
     ],
     "string-no-newline": null,
-        "indentation": 4,
+    "indentation": 2,
     "string-quotes": "single",
     "max-nesting-depth": 2,
     "plugin/selector-bem-pattern": {

demo/index.html

@@ -18,10 +18,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />
 
     <!-- Open Graph -->
-        <meta
+    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" />
-            property="og:title"
-            content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player"
-        />
     <meta property="og:site_name" content="Plyr" />
     <meta property="og:url" content="https://plyr.io" />
     <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />
@@ -133,14 +130,13 @@
           </a>
         </div>
       </header>
-
       <main>
         <div id="container">
           <video
             controls
             crossorigin
             playsinline
-                        poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
             id="player"
           >
             <!-- Video files -->
@@ -176,9 +172,7 @@
             />
 
             <!-- Fallback for browsers that don't support the <video> element -->
-                        <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download
+            <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
-                            >Download</a
-                        >
           </video>
         </div>
 
@@ -191,9 +185,7 @@
                   d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                 ></path>
               </svg>
-                            <a
+              <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
-                                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
-                                target="_blank"
                 >View From A Blue Moon</a
               >
               &copy; Brainfarm
@@ -215,9 +207,7 @@
           </li>
           <li class="plyr__cite plyr__cite--youtube" hidden>
             <small>
-                            <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank"
+              <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a>
-                                >View From A Blue Moon</a
-                            >
               on&nbsp;
               <span class="color--youtube">
                 <svg class="icon" role="presentation">

demo/package.json

@@ -5,9 +5,9 @@
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
+        "@sentry/browser": "^5.15.4",
         "core-js": "^3.6.4",
         "custom-event-polyfill": "^1.0.7",
-        "raven-js": "^3.27.2",
         "shr-buttons": "2.0.3",
         "url-polyfill": "^1.1.8"
     }

demo/src/js/demo.js

@@ -8,7 +8,7 @@ import './tab-focus';
 import 'custom-event-polyfill';
 import 'url-polyfill';
 
-import Raven from 'raven-js';
+import * as Sentry from '@sentry/browser';
 import Shr from 'shr-buttons';
 
 import Plyr from '../../../src/js/plyr';
@@ -16,14 +16,17 @@ import sources from './sources';
 import toggleClass from './toggle-class';
 
 (() => {
-    const { host } = window.location;
+  const production = 'plyr.io';
-    const env = {
+
-        prod: host === 'plyr.io',
+  // Sentry for demo site (https://plyr.io) only
-        dev: host === 'dev.plyr.io',
+  if (window.location.host === production) {
-    };
+    Sentry.init({
+      dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
+      whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
+    });
+  }
 
   document.addEventListener('DOMContentLoaded', () => {
-        Raven.context(() => {
     const selector = '#player';
 
     // Setup share buttons
@@ -51,15 +54,12 @@ import toggleClass from './toggle-class';
         active: true,
       },
       ads: {
-                    enabled: env.prod || env.dev,
+        enabled: window.location.host.includes(production),
         publisherId: '918848828995742',
       },
       previewThumbnails: {
         enabled: true,
-                    src: [
+        src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
-                        'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
-                        'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
-                    ],
       },
       vimeo: {
         // Prevent Vimeo blocking plyr.io demo site
@@ -75,7 +75,7 @@ import toggleClass from './toggle-class';
     const types = Object.keys(sources);
     const historySupport = Boolean(window.history && window.history.pushState);
     let currentType = window.location.hash.substring(1);
-            const hasCurrentType = !currentType.length;
+    const hasInitialType = currentType.length;
 
     function render(type) {
       // Remove active classes
@@ -96,11 +96,7 @@ import toggleClass from './toggle-class';
     // Set a new source
     function setSource(type, init) {
       // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                if (
+      if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
-                    !types.includes(type) ||
-                    (!init && type === currentType) ||
-                    (!currentType.length && type === 'video')
-                ) {
         return;
       }
 
@@ -134,13 +130,13 @@ import toggleClass from './toggle-class';
     });
 
     // If there's no current type set, assume video
-            if (hasCurrentType) {
+    if (!hasInitialType) {
       currentType = 'video';
     }
 
     // Replace current history state
     if (historySupport && types.includes(currentType)) {
-                window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${currentType}`);
+      window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
     }
 
     // If it's not video, load the source
@@ -150,11 +146,4 @@ import toggleClass from './toggle-class';
 
     render(currentType);
   });
-    });
-
-    // Raven / Sentry
-    // For demo site (https://plyr.io) only
-    if (env.prod) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-    }
 })();

demo/src/sass/bundles/demo.scss

@@ -3,6 +3,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import '../../../../src/sass/lib/css-vars';
+$css-vars-use-native: true;
+
 // Settings
 @import '../settings/breakpoints';
 @import '../settings/colors';

demo/src/sass/components/players.scss

@@ -28,7 +28,7 @@
 
 // Style full supported player
 .plyr__cite {
-    color: $color-gray-5;
+  color: $color-gray-500;
 
   .icon {
     margin-right: ceil($spacing-base / 6);

demo/src/sass/settings/colors.scss

@@ -3,22 +3,22 @@
 // ==========================================================================
 
 // Grayscale
-$color-gray-9: hsl(210, 15%, 16%);
+$color-gray-900: hsl(210, 15%, 16%);
-$color-gray-8: lighten($color-gray-9, 9%);
+$color-gray-800: lighten($color-gray-900, 9%);
-$color-gray-7: lighten($color-gray-8, 9%);
+$color-gray-700: lighten($color-gray-800, 9%);
-$color-gray-6: lighten($color-gray-7, 9%);
+$color-gray-600: lighten($color-gray-700, 9%);
-$color-gray-5: lighten($color-gray-6, 9%);
+$color-gray-500: lighten($color-gray-600, 9%);
-$color-gray-4: lighten($color-gray-5, 9%);
+$color-gray-400: lighten($color-gray-500, 9%);
-$color-gray-3: lighten($color-gray-4, 9%);
+$color-gray-300: lighten($color-gray-400, 9%);
-$color-gray-2: lighten($color-gray-3, 9%);
+$color-gray-200: lighten($color-gray-300, 9%);
-$color-gray-1: lighten($color-gray-2, 9%);
+$color-gray-100: lighten($color-gray-200, 9%);
-$color-gray-0: lighten($color-gray-1, 9%);
+$color-gray-50: lighten($color-gray-100, 9%);
 
 // Branding
 $color-brand-primary: hsl(198, 100%, 50%);
 
 // Text
-$color-text: $color-gray-7;
+$color-text: $color-gray-700;
 $color-headings: $color-brand-primary;
 
 // Brands
@@ -36,7 +36,7 @@ $color-button-background: $color-brand-primary;
 $color-button-text: #fff;
 $color-button-background-hover: hsl(198, 100%, 55%);
 $color-button-count-background: #fff;
-$color-button-count-text: $color-gray-6;
+$color-button-count-text: $color-gray-600;
 
 // Focus
 $tab-focus-default-color: #fff;

demo/src/sass/settings/plyr.scss

@@ -2,24 +2,17 @@
 // Plyr Settings
 // ==========================================================================
 
-// Font
+@include css-vars(
-$plyr-font-family: inherit;
+  (
-
+    --plyr-color-main: $color-brand-primary,
-// Sizes
+    --plyr-font-size-base: 13px,
-$plyr-font-size-base: 13px;
+    --plyr-font-size-small: 12px,
-$plyr-font-size-small: 12px;
+    --plyr-font-size-time: 11px,
-$plyr-font-size-time: 11px;
+    --plyr-font-size-badges: 9px,
-$plyr-font-size-badges: 9px;
+    --plyr-font-size-menu: var(--plyr-font-size-base),
-
+    --plyr-font-weight-regular: 500,
-// Other
+    --plyr-font-weight-bold: 600,
-$plyr-font-smoothing: true;
+    --plyr-font-size-captions-medium: 18px,
-
+    --plyr-font-size-captions-large: 21px,
-// Colors
+  )
-$plyr-color-main: $color-brand-primary;
+);
-
-// Captions
-$plyr-font-size-captions-base: $plyr-font-size-base;
-$plyr-font-size-captions-small: $plyr-font-size-small;
-$plyr-font-size-captions-medium: 18px;
-$plyr-font-size-captions-large: 21px;
-$plyr-font-size-menu: $plyr-font-size-base;

demo/yarn.lock

@@ -2,27 +2,79 @@
 # yarn lockfile v1
 
 
-core-js@^3.1.4:
+"@sentry/browser@^5.15.4":
-  version "3.1.4"
+  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.4.tgz#5a7e7bad088556665ed8e69bceb0e18784e4f6c7"
-  integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
+  integrity sha512-l/auT1HtZM3KxjCGQHYO/K51ygnlcuOrM+7Ga8gUUbU9ZXDYw6jRi0+Af9aqXKmdDw1naNxr7OCSy6NBrLWVZw==
+  dependencies:
+    "@sentry/core" "5.15.4"
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/core@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.15.4.tgz#08b617e093a636168be5aebad141d1f744217085"
+  integrity sha512-9KP4NM4SqfV5NixpvAymC7Nvp36Zj4dU2fowmxiq7OIbzTxGXDhwuN/t0Uh8xiqlkpkQqSECZ1OjSFXrBldetQ==
+  dependencies:
+    "@sentry/hub" "5.15.4"
+    "@sentry/minimal" "5.15.4"
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/hub@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.15.4.tgz#cb64473725a60eec63b0be58ed1143eaaf894bee"
+  integrity sha512-1XJ1SVqadkbUT4zLS0TVIVl99si7oHizLmghR8LMFl5wOkGEgehHSoOydQkIAX2C7sJmaF5TZ47ORBHgkqclUg==
+  dependencies:
+    "@sentry/types" "5.15.4"
+    "@sentry/utils" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/minimal@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.15.4.tgz#113f01fefb86b7830994c3dfa7ad4889ba7b2003"
+  integrity sha512-GL4GZ3drS9ge+wmxkHBAMEwulaE7DMvAEfKQPDAjg2p3MfcCMhAYfuY4jJByAC9rg9OwBGGehz7UmhWMFjE0tw==
+  dependencies:
+    "@sentry/hub" "5.15.4"
+    "@sentry/types" "5.15.4"
+    tslib "^1.9.3"
+
+"@sentry/types@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.15.4.tgz#37f30e35b06e8e12ad1101f1beec3e9b88ca1aab"
+  integrity sha512-quPHPpeAuwID48HLPmqBiyXE3xEiZLZ5D3CEbU3c3YuvvAg8qmfOOTI6z4Z3Eedi7flvYpnx3n7N3dXIEz30Eg==
+
+"@sentry/utils@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.15.4.tgz#02865ab3c9b745656cea0ab183767ec26c96f6e6"
+  integrity sha512-lO8SLBjrUDGADl0LOkd55R5oL510d/1SaI08/IBHZCxCUwI4TiYo5EPECq8mrj3XGfgCyq9osw33bymRlIDuSQ==
+  dependencies:
+    "@sentry/types" "5.15.4"
+    tslib "^1.9.3"
+
+core-js@^3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
+  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
 custom-event-polyfill@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
   integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
 
-raven-js@^3.27.2:
-  version "3.27.2"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.2.tgz#6c33df952026cd73820aa999122b7b7737a66775"
-  integrity sha512-mFWQcXnhRFEQe5HeFroPaEghlnqy7F5E2J3Fsab189ondqUzcjwSVi7el7F36cr6PvQYXoZ1P2F5CSF2/azeMQ==
-
 shr-buttons@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/shr-buttons/-/shr-buttons-2.0.3.tgz#2ffd021fc3d789e1510ce2736b938bd09ea1da5a"
   integrity sha512-sPAgHiw4uaIt9TnxTfyZEedDChcldSVtnBHE44cpe/mSC7rqm4IEKZRLYqnVlTcGM+FSDNBPUNpSf50Q2ntd+w==
 
-url-polyfill@^1.1.5:
+tslib@^1.9.3:
-  version "1.1.5"
+  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.5.tgz#bec79b72b5407dba6d8cced2e32e4ab273aa9fb1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
-  integrity sha512-9XjIJ6nwrU+nGd8t90Ze0Zs7t8A+SU0gqsqPttj6j3zAVe5q0HFcuv37nDBdVSPpi4aTHTfbUF/i+ZVD+o2EbA==
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+
+url-polyfill@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.8.tgz#21eb58ad61192f52b77dcac8ab5293ae7bc67060"
+  integrity sha512-Ey61F4FEqhcu1vHSOMmjl0Vd/RPRLEjMj402qszD/dhMBrVfoUsnIj8KSZo2yj+eIlxJGKFdnm6ES+7UzMgZ3Q==

dist/plyr.js

@@ -1334,19 +1334,19 @@ typeof navigator === "object" && (function (global, factory) {
     return (current / max * 100).toFixed(2);
   } // Replace all occurances of a string in a string
 
-  function replaceAll() {
+  var replaceAll = function replaceAll() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-  } // Convert to title case
+  }; // Convert to title case
 
-  function toTitleCase() {
+  var toTitleCase = function toTitleCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return input.toString().replace(/\w\S*/g, function (text) {
       return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
     });
-  } // Convert string to pascalCase
+  }; // Convert string to pascalCase
 
   function toPascalCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

dist/plyr.mjs

@@ -1328,19 +1328,19 @@ function getPercentage(current, max) {
   return (current / max * 100).toFixed(2);
 } // Replace all occurances of a string in a string
 
-function replaceAll() {
+var replaceAll = function replaceAll() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-} // Convert to title case
+}; // Convert to title case
 
-function toTitleCase() {
+var toTitleCase = function toTitleCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return input.toString().replace(/\w\S*/g, function (text) {
     return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
   });
-} // Convert string to pascalCase
+}; // Convert string to pascalCase
 
 function toPascalCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

dist/plyr.polyfilled.js

@@ -7640,19 +7640,19 @@ typeof navigator === "object" && (function (global, factory) {
     return (current / max * 100).toFixed(2);
   } // Replace all occurances of a string in a string
 
-  function replaceAll() {
+  var replaceAll = function replaceAll() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-  } // Convert to title case
+  }; // Convert to title case
 
-  function toTitleCase() {
+  var toTitleCase = function toTitleCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return input.toString().replace(/\w\S*/g, function (text) {
       return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
     });
-  } // Convert string to pascalCase
+  }; // Convert string to pascalCase
 
   function toPascalCase() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

dist/plyr.polyfilled.mjs

@@ -7634,19 +7634,19 @@ function getPercentage(current, max) {
   return (current / max * 100).toFixed(2);
 } // Replace all occurances of a string in a string
 
-function replaceAll() {
+var replaceAll = function replaceAll() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-} // Convert to title case
+}; // Convert to title case
 
-function toTitleCase() {
+var toTitleCase = function toTitleCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return input.toString().replace(/\w\S*/g, function (text) {
     return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
   });
-} // Convert string to pascalCase
+}; // Convert string to pascalCase
 
 function toPascalCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

package.json

@@ -35,29 +35,28 @@
     "lint:fix": "eslint --fix src/js",
     "remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
     "deploy": "yarn lint && gulp version && gulp build && gulp deploy",
-        "prettier": "prettier --write ./src/js/*.js"
+    "format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\""
   },
   "devDependencies": {
     "ansi-colors": "^4.1.1",
-        "aws-sdk": "^2.648.0",
+    "autoprefixer": "^9.7.6",
+    "aws-sdk": "^2.658.0",
     "@babel/core": "^7.9.0",
-        "@babel/preset-env": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
     "babel-eslint": "^10.1.0",
     "browser-sync": "^2.26.7",
     "del": "^5.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-config-prettier": "^6.10.1",
-        "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-simple-import-sort": "^5.0.2",
     "fancy-log": "^1.3.3",
     "fastly-purge": "^1.0.1",
     "git-branch": "^2.0.1",
     "gulp": "^4.0.2",
-        "gulp-autoprefixer": "^7.0.1",
     "gulp-awspublish": "^4.1.1",
     "gulp-better-rollup": "^4.0.1",
-        "gulp-clean-css": "^4.3.0",
     "gulp-filter": "^6.0.0",
     "gulp-header": "^2.0.9",
     "gulp-hub": "^4.2.0",
@@ -72,26 +71,27 @@
     "gulp-sourcemaps": "^2.6.5",
     "gulp-svgstore": "^7.0.1",
     "gulp-terser": "^1.2.0",
+    "postcss-clean": "^1.1.0",
     "postcss-custom-properties": "^9.1.1",
     "prettier-eslint": "^9.0.1",
     "prettier-stylelint": "^0.4.2",
-        "remark-cli": "^7.0.1",
+    "remark-cli": "^8.0.0",
     "remark-validate-links": "^10.0.0",
-        "rollup": "^2.2.0",
+    "rollup": "^2.6.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-        "stylelint": "^13.2.1",
+    "stylelint": "^13.3.2",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-sass-guidelines": "^7.0.0",
     "stylelint-order": "^4.0.0",
-        "stylelint-scss": "^3.16.0",
+    "stylelint-scss": "^3.17.0",
     "stylelint-selector-bem-pattern": "^2.1.0",
     "through2": "^3.0.1"
   },
   "dependencies": {
-        "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "custom-event-polyfill": "^1.0.7",
     "loadjs": "^4.2.0",
     "rangetouch": "^2.0.1",

readme.md

@@ -42,7 +42,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 ### HTML5 Video
 
 ```html
-<video poster="/path/to/poster.jpg" id="player" playsinline controls>
+<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
   <source src="/path/to/video.mp4" type="video/mp4" />
   <source src="/path/to/video.webm" type="video/webm" />
 
@@ -51,6 +51,8 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 </video>
 ```
 
+**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.
+
 ### HTML5 Audio
 
 ```html
@@ -174,7 +176,102 @@ If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#option
 
 # Advanced
 
-## SASS
+## Customizing the CSS
+
+If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+
+Here's a list of the properties and what they are used for:
+
+| Name                                           | Description                                                                                             | Default / Fallback                                                    |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff`    |
+| `--plyr-tab-focus-color`                       | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus.  | `--plyr-color-main`                                                   |
+| `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-badge-border-radius`                   | The border radius used for badges.                                                                      | `2px`                                                                 |
+| `--plyr-tab-focus-color`                       | The color used to highlight tab (keyboard) focus.                                                       | `--plyr-color-main`                                                   |
+| `--plyr-captions-background`                   | The color for the background of captions.                                                               | `rgba(0, 0, 0, 0.8)`                                                  |
+| `--plyr-captions-text-color`                   | The color used for the captions text.                                                                   | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-control-icon-size`                     | The size of the icons used in the controls.                                                             | `18px`                                                                |
+| `--plyr-control-spacing`                       | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`).                      | `10px`                                                                |
+| `--plyr-control-padding`                       | The padding inside controls.                                                                            | `--plyr-control-spacing * 0.7` (`7px`)                                |
+| `--plyr-control-radius`                        | The border radius used on controls.                                                                     | `3px`                                                                 |
+| `--plyr-control-toggle-checked-background`     | The background color used for checked menu items.                                                       | `--plyr-color-main`                                                   |
+| `--plyr-video-controls-background`             | The background for the video controls.                                                                  | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))`              |
+| `--plyr-video-control-color`                   | The text/icon color for video controls.                                                                 | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-video-control-color-hover`             | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-video-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |
+| `--plyr-audio-controls-background`             | The background for the audio controls.                                                                  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-audio-control-color`                   | The text/icon color for audio controls.                                                                 | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-audio-control-color-hover`             | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-audio-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |
+| `--plyr-menu-background`                       | The background color for menus.                                                                         | `rgba(255, 255, 255, 0.9)`                                            |
+| `--plyr-menu-color`                            | The text/icon color for menu items.                                                                     | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-menu-shadow`                           | The shadow used on menus.                                                                               | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |
+| `--plyr-menu-radius`                           | The border radius on the menu.                                                                          | `4px`                                                                 |
+| `--plyr-menu-arrow-size`                       | The size of the arrow on the bottom of the menu.                                                        | `6px`                                                                 |
+| `--plyr-menu-item-arrow-color`                 | The color of the arrows in the menu.                                                                    | ![#728197](https://placehold.it/15/728197/000000?text=+) `#728197`    |
+| `--plyr-menu-item-arrow-size`                  | The size of the arrows in the menu.                                                                     | `4px`                                                                 |
+| `--plyr-menu-border-color`                     | The border color for the bottom of the back button in the top of the sub menu pages.                    | ![#dcdfe5](https://placehold.it/15/dcdfe5/000000?text=+) `#dcdfe5`    |
+| `--plyr-menu-border-shadow-color`              | The shadow below the border of the back button in the top of the sub menu pages.                        | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-progress-loading-size`                 | The size of the stripes in the loading state in the scrubber.                                           | `25px`                                                                |
+| `--plyr-progress-loading-background`           | The background color on the loading state in the scrubber.                                              | `rgba(35, 40, 47, 0.6)`                                               |
+| `--plyr-video-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for video.                                     | `rgba(255, 255, 255, 0.25)`                                           |
+| `--plyr-audio-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for audio.                                     | `rgba(193, 200, 209, 0.6)`                                            |
+| `--plyr-range-thumb-height`                    | The height of the scrubber handle/thumb.                                                                | `13px`                                                                |
+| `--plyr-range-thumb-background`                | The background of the scrubber handle/thumb.                                                            | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-range-thumb-shadow`                    | The shadow of the scrubber handle/thumb.                                                                | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` |
+| `--plyr-range-thumb-active-shadow-width`       | The width of the shadow when the scrubber handle/thumb is `:active` (pressed).                          | `3px`                                                                 |
+| `--plyr-range-track-height`                    | The height of the scrubber/progress track.                                                              | `5px`                                                                 |
+| `--plyr-range-fill-background`                 | The fill color of the scrubber/progress.                                                                | `--plyr-color-main`                                                   |
+| `--plyr-video-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |
+| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed).                    | `rgba(255, 255, 255, 0.5)`                                            |
+| `--plyr-audio-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |
+| `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed).                    | `rgba(215, 26, 18, 0.1)`                                              |
+| `--plyr-tooltip-background`                    | The background color for tooltips.                                                                      | `rgba(255, 255, 255, 0.9)`                                            |
+| `--plyr-tooltip-color`                         | The text color for tooltips.                                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-tooltip-padding`                       | The padding for tooltips.                                                                               | `calc(var(--plyr-control-spacing) / 2))`                              |
+| `--plyr-tooltip-arrow-size`                    | The size of the arrow under tooltips.                                                                   | `4px`                                                                 |
+| `--plyr-tooltip-radius`                        | The border radius on tooltips.                                                                          | `3px`                                                                 |
+| `--plyr-tooltip-shadow`                        | The shadow on tooltips.                                                                                 | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |
+| `--plyr-font-family`                           | The font family used in the player.                                                                     |                                                                       |
+| `--plyr-font-size-base`                        | The base font size. Mainly used for captions.                                                           | `15px`                                                                |
+| `--plyr-font-size-small`                       | The smaller font size. Mainly used for captions.                                                        | `13px`                                                                |
+| `--plyr-font-size-large`                       | The larger font size. Mainly used for captions.                                                         | `18px`                                                                |
+| `--plyr-font-size-xlarge`                      | The even larger font size. Mainly used for captions.                                                    | `21px`                                                                |
+| `--plyr-font-size-time`                        | The font size for the time.                                                                             | `--plyr-font-size-small`                                              |
+| `--plyr-font-size-menu`                        | The font size used in the menu.                                                                         | `--plyr-font-size-small`                                              |
+| `--plyr-font-size-badge`                       | The font size used for badges.                                                                          | `9px`                                                                 |
+| `--plyr-font-weight-regular`                   | The regular font weight.                                                                                | `400`                                                                 |
+| `--plyr-font-weight-bold`                      | The bold font weight.                                                                                   | `600`                                                                 |
+| `--plyr-line-height`                           | The line height used within the player.                                                                 | `1.7`                                                                 |
+| `--plyr-font-smoothing`                        | Whether to enable font antialiasing within the player.                                                  | `false`                                                               |
+
+You can set them in your CSS for all players:
+
+```css
+:root {
+  --plyr-color-main: #1ac266;
+}
+```
+
+...or for a specific class name:
+
+```css
+.player {
+  --plyr-color-main: #1ac266;
+}
+```
+
+...or in your HTML:
+
+```html
+<video class="player" style="--plyr-color-main: #1ac266;">
+    ...
+</vieo>
+```
+
+### SASS
 
 You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The SASS requires you to
 use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions.

src/js/config/defaults.js

@@ -422,16 +422,16 @@ const defaults = {
     title: false,
     speed: true,
     transparent: false,
-        // These settings require a pro or premium account to work
+    // Whether the owner of the video has a Pro or Business account
-        sidedock: false,
+    // (which allows us to properly hide controls without CSS hacks, etc)
-        controls: false,
+    premium: false,
     // Custom settings from Plyr
     referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
   },
 
   // YouTube plugin
   youtube: {
-        noCookie: false, // Whether to use an alternative version of YouTube without cookies
+    noCookie: true, // Whether to use an alternative version of YouTube without cookies
     rel: 0, // No related vids
     showinfo: 0, // Hide info
     iv_load_policy: 3, // Hide annotations

src/js/controls.js

@@ -84,9 +84,7 @@ const controls = {
 
       // Seek tooltip
       if (is.element(this.elements.progress)) {
-                this.elements.display.seekTooltip = this.elements.progress.querySelector(
+        this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);
-                    `.${this.config.classNames.tooltip}`,
-                );
       }
 
       return true;

src/js/fullscreen.js

@@ -27,8 +27,8 @@ class Fullscreen {
 
     // Get the fullscreen element
     // Checks container is an ancestor, defaults to null
-        this.player.elements.fullscreen = player.config.fullscreen.container
+    this.player.elements.fullscreen =
-            && closest(this.player.elements.container, player.config.fullscreen.container);
+      player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container);
 
     // Register event listeners
     // Handle event (incase user presses escape etc)
@@ -207,10 +207,7 @@ class Fullscreen {
 
     // Get the current focused element
     const focused = document.activeElement;
-        const focusable = getElements.call(
+    const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');
-            this.player,
-            'a[href], button:not(:disabled), input:not(:disabled), [tabindex]',
-        );
     const [first] = focusable;
     const last = focusable[focusable.length - 1];
 

src/js/listeners.js

@@ -229,6 +229,7 @@ class Listeners {
 
     // Delay the adding of classname until the focus has changed
     // This event fires before the focusin event
+    if (event.type !== 'focusout') {
       this.focusTimer = setTimeout(() => {
         const focused = document.activeElement;
 
@@ -240,6 +241,7 @@ class Listeners {
         toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
       }, 10);
     }
+  }
 
   // Global window & document listeners
   global(toggle = true) {
@@ -257,7 +259,7 @@ class Listeners {
     once.call(player, document.body, 'touchstart', this.firstTouch);
 
     // Tab focus detection
-        toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
+    toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
   }
 
   // Container listeners
@@ -304,7 +306,7 @@ class Listeners {
 
     // Set a gutter for Vimeo
     const setGutter = (ratio, padding, toggle) => {
-            if (!player.isVimeo) {
+      if (!player.isVimeo || player.config.vimeo.premium) {
         return;
       }
 
@@ -354,7 +356,7 @@ class Listeners {
       // Set Vimeo gutter
       setGutter(ratio, padding, isEnter);
 
-            // If not using native fullscreen, we need to check for resizes of viewport
+      // If not using native browser fullscreen API, we need to check for resizes of viewport
       if (!usingNative) {
         if (isEnter) {
           on.call(player, window, 'resize', resized);

src/js/media.js

@@ -38,15 +38,13 @@ const media = {
       // Wrap the video in a container
       wrap(this.media, this.elements.wrapper);
 
-            // Faux poster container
+      // Poster image container
-            if (this.isEmbed) {
       this.elements.poster = createElement('div', {
         class: this.config.classNames.poster,
       });
 
       this.elements.wrapper.appendChild(this.elements.poster);
     }
-        }
 
     if (this.isHTML5) {
       html5.setup.call(this);

src/js/plugins/preview-thumbnails.js

@@ -417,8 +417,7 @@ class PreviewThumbnails {
       this.player.debug.log(`Loading image: ${thumbUrl}`);
 
       // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
-            previewImage.onload = () =>
+      previewImage.onload = () => this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
-                this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
       this.loadingImage = previewImage;
       this.removeOldImages(previewImage);
     } else {
@@ -512,8 +511,7 @@ class PreviewThumbnails {
                 previewImage.src = thumbURL;
                 previewImage.onload = () => {
                   this.player.debug.log(`Preloaded thumb filename: ${newThumbFilename}`);
-                                    if (!this.loadedImages.includes(newThumbFilename))
+                  if (!this.loadedImages.includes(newThumbFilename)) this.loadedImages.push(newThumbFilename);
-                                        this.loadedImages.push(newThumbFilename);
 
                   // We don't resolve until the thumb is loaded
                   resolve();
@@ -640,10 +638,16 @@ class PreviewThumbnails {
       const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
       this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-        } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+    } else if (
+      this.elements.thumb.imageContainer.clientHeight > 20 &&
+      this.elements.thumb.imageContainer.clientWidth < 20
+    ) {
       const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-        } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+    } else if (
+      this.elements.thumb.imageContainer.clientHeight < 20 &&
+      this.elements.thumb.imageContainer.clientWidth > 20
+    ) {
       const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
     }

src/js/plugins/vimeo.js

@@ -10,7 +10,6 @@ import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
-import { extend } from '../utils/objects';
 import { format, stripHTML } from '../utils/strings';
 import { setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
@@ -71,21 +70,25 @@ const vimeo = {
   ready() {
     const player = this;
     const config = player.config.vimeo;
+    const { premium, referrerPolicy, ...frameParams } = config;
+
+    // If the owner has a pro or premium account then we can hide controls etc
+    if (premium) {
+      Object.assign(frameParams, {
+        controls: false,
+        sidedock: false,
+      });
+    }
 
     // Get Vimeo params for the iframe
-        const params = buildUrlParams(
+    const params = buildUrlParams({
-            extend(
-                {},
-                {
       loop: player.config.loop.active,
       autoplay: player.autoplay,
       muted: player.muted,
       gesture: 'media',
       playsinline: !this.config.fullscreen.iosNative,
-                },
+      ...frameParams,
-                config,
+    });
-            ),
-        );
 
     // Get the source URL or ID
     let source = player.media.getAttribute('src');
@@ -101,20 +104,23 @@ const vimeo = {
     const src = format(player.config.urls.vimeo.iframe, id, params);
     iframe.setAttribute('src', src);
     iframe.setAttribute('allowfullscreen', '');
-        iframe.setAttribute('allowtransparency', '');
+    iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
-        iframe.setAttribute('allow', 'autoplay');
 
     // Set the referrer policy if required
-        if (!is.empty(config.referrerPolicy)) {
+    if (!is.empty(referrerPolicy)) {
-            iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+      iframe.setAttribute('referrerPolicy', referrerPolicy);
     }
 
-        // Get poster, if already set
-        const { poster } = player;
     // Inject the package
-        const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
+    const { poster } = player;
+    if (premium) {
+      iframe.setAttribute('data-poster', poster);
+      player.media = replaceElement(iframe, player.media);
+    } else {
+      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
+    }
 
     // Get poster image
     fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
@@ -201,10 +207,13 @@ const vimeo = {
         return speed;
       },
       set(input) {
-                player.embed.setPlaybackRate(input).then(() => {
+        player.embed
+          .setPlaybackRate(input)
+          .then(() => {
             speed = input;
             triggerEvent.call(player, player.media, 'ratechange');
-                }).catch(() => {
+          })
+          .catch(() => {
             // Cannot set Playback Rate, Video is probably not on Pro account
             player.options.speed = [1];
           });

src/js/plugins/youtube.js

@@ -124,7 +124,7 @@ const youtube = {
     // Get poster, if already set
     const { poster } = player;
     // Replace media element
-        const container = createElement('div', { id, poster });
+    const container = createElement('div', { id, 'data-poster': poster });
     player.media = replaceElement(container, player.media);
 
     // Id to poster wrapper

src/js/plyr.js

@@ -270,6 +270,9 @@ class Plyr {
       wrap(this.media, this.elements.container);
     }
 
+    // Migrate custom properties from media to container (so they work 😉)
+    ui.migrateStyles.call(this);
+
     // Add style hook
     ui.addStyleHook.call(this);
 
@@ -887,7 +890,7 @@ class Plyr {
       return null;
     }
 
-        return this.media.getAttribute('poster');
+    return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
   }
 
   /**

src/js/ui.js

@@ -170,12 +170,7 @@ const ui = {
     }
 
     // Set property synchronously to respect the call order
-        this.media.setAttribute('poster', poster);
+    this.media.setAttribute('data-poster', poster);
-
-        // HTML5 uses native poster attribute
-        if (this.isHTML5) {
-            return Promise.resolve(poster);
-        }
 
     // Wait until ui is ready
     return (
@@ -264,16 +259,31 @@ const ui = {
       // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
       this.toggleControls(
         Boolean(
-                    force ||
+          force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,
-                        this.loading ||
-                        this.paused ||
-                        controlsElement.pressed ||
-                        controlsElement.hover ||
-                        recentTouchSeek,
         ),
       );
     }
   },
+
+  // Migrate any custom properties from the media to the parent
+  migrateStyles() {
+    // Loop through values (as they are the keys when the object is spread 🤔)
+    Object.values({ ...this.media.style })
+      // We're only fussed about Plyr specific properties
+      .filter(key => key.startsWith('--plyr'))
+      .forEach(key => {
+        // Set on the container
+        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
+
+        // Clean up from media element
+        this.media.style.removeProperty(key);
+      });
+
+    // Remove attribute if empty
+    if (is.empty(this.media.style)) {
+      this.media.removeAttribute('style');
+    }
+  },
 };
 
 export default ui;

src/js/utils/elements.js

@@ -252,9 +252,7 @@ export function closest(element, selector) {
     return null;
   }
 
-    const method =
+  const method = prototype.closest || closestElement;
-        prototype.closest ||
-        closestElement;
 
   return method.call(element, selector);
 }

src/js/utils/events.js

@@ -90,7 +90,7 @@ export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
   // Create and dispatch the event
   const event = new CustomEvent(type, {
     bubbles,
-        detail: { ...detail, plyr: this,},
+    detail: { ...detail, plyr: this },
   });
 
   // Dispatch the event

src/js/utils/strings.js

@@ -28,17 +28,12 @@ export function getPercentage(current, max) {
 }
 
 // Replace all occurances of a string in a string
-export function replaceAll(input = '', find = '', replace = '') {
+export const replaceAll = (input = '', find = '', replace = '') =>
-    return input.replace(
+  input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-        new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'),
-        replace.toString(),
-    );
-}
 
 // Convert to title case
-export function toTitleCase(input = '') {
+export const toTitleCase = (input = '') =>
-    return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
+  input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
-}
 
 // Convert string to pascalCase
 export function toPascalCase(input = '') {

src/js/utils/style.js

@@ -64,9 +64,10 @@ export function setAspectRatio(input) {
   wrapper.style.paddingBottom = `${padding}%`;
 
   // For Vimeo we have an extra <div> to hide the standard controls and UI
-    if (this.isVimeo && this.supported.ui) {
+  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
-        const height = 240;
+    const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
     const offset = (height - padding) / (height / 50);
+
     this.media.style.transform = `translateY(-${offset}%)`;
   } else if (this.isHTML5) {
     wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);

src/sass/components/badges.scss

@@ -3,9 +3,9 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    background: $plyr-badge-bg;
+  background: $plyr-badge-background;
-    border-radius: 2px;
+  border-radius: $plyr-badge-border-radius;
-    color: $plyr-badge-color;
+  color: $plyr-badge-text-color;
   font-size: $plyr-font-size-badge;
   line-height: 1;
   padding: 3px 4px;

src/sass/components/captions.scss

@@ -10,7 +10,6 @@
 .plyr__captions {
   animation: plyr-fade-in 0.3s ease;
   bottom: 0;
-    color: $plyr-captions-color;
   display: none;
   font-size: $plyr-font-size-captions-small;
   left: 0;
@@ -20,27 +19,13 @@
   transition: transform 0.4s ease-in-out;
   width: 100%;
 
-    .plyr__caption {
-        background: $plyr-captions-bg;
-        border-radius: 2px;
-        box-decoration-break: clone;
-        line-height: 185%;
-        padding: 0.2em 0.5em;
-        white-space: pre-wrap;
-
-        // Firefox adds a <div> when using getCueAsHTML()
-        div {
-            display: inline;
-        }
-    }
-
   span:empty {
     display: none;
   }
 
   @media (min-width: $plyr-bp-sm) {
     font-size: $plyr-font-size-captions-base;
-        padding: ($plyr-control-spacing * 2);
+    padding: calc(#{$plyr-control-spacing} * 2);
   }
 
   @media (min-width: $plyr-bp-md) {
@@ -54,6 +39,20 @@
 
 // If the lower controls are shown and not empty
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 4));
+  transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }
 
+.plyr__caption {
+  background: $plyr-captions-background;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  color: $plyr-captions-text-color;
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
+
+  // Firefox adds a <div> when using getCueAsHTML()
+  div {
+    display: inline;
+  }
+}

src/sass/components/controls.scss

@@ -21,7 +21,7 @@
 
   // Spacing
   .plyr__controls__item {
-        margin-left: ($plyr-control-spacing / 4);
+    margin-left: calc(#{$plyr-control-spacing} / 4);
 
     &:first-child {
       margin-left: 0;
@@ -29,11 +29,11 @@
     }
 
     &.plyr__progress__container {
-            padding-left: ($plyr-control-spacing / 4);
+      padding-left: calc(#{$plyr-control-spacing} / 4);
     }
 
     &.plyr__time {
-            padding: 0 ($plyr-control-spacing / 2);
+      padding: 0 calc(#{$plyr-control-spacing} / 2);
     }
 
     &.plyr__progress__container:first-child,

src/sass/components/menus.scss

@@ -24,7 +24,7 @@
   // The actual menu container
   &__container {
     animation: plyr-popup 0.2s ease;
-        background: $plyr-menu-bg;
+    background: $plyr-menu-background;
     border-radius: 4px;
     bottom: 100%;
     box-shadow: $plyr-menu-shadow;
@@ -44,12 +44,12 @@
 
     // Arrow
     &::after {
-            border: 4px solid transparent;
+      border: $plyr-menu-arrow-size solid transparent;
-            border-top-color: $plyr-menu-bg;
+      border-top-color: $plyr-menu-background;
       content: '';
       height: 0;
       position: absolute;
-            right: 15px;
+      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
       top: 100%;
       width: 0;
     }
@@ -73,7 +73,10 @@
       color: $plyr-menu-color;
       display: flex;
       font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
+      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
+      padding-left: calc(#{$plyr-control-padding} * 1.5);
+      padding-right: calc(#{$plyr-control-padding} * 1.5);
+      padding-top: calc(#{$plyr-control-padding} / 1.5);
       user-select: none;
       width: 100%;
 
@@ -84,7 +87,7 @@
       }
 
       &::after {
-                border: 4px solid transparent;
+        border: $plyr-menu-item-arrow-size solid transparent;
         content: '';
         position: absolute;
         top: 50%;
@@ -92,11 +95,11 @@
       }
 
       &--forward {
-                padding-right: ceil($plyr-control-padding * 4);
+        padding-right: calc(#{$plyr-control-padding} * 4);
 
         &::after {
-                    border-left-color: rgba($plyr-menu-color, 0.8);
+          border-left-color: $plyr-menu-item-arrow-color;
-                    right: 5px;
+          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &.plyr__tab-focus::after,
@@ -106,26 +109,25 @@
       }
 
       &--back {
-                $horizontal-padding: ($plyr-control-padding * 2);
         font-weight: $plyr-font-weight-regular;
         margin: $plyr-control-padding;
-                margin-bottom: floor($plyr-control-padding / 2);
+        margin-bottom: calc(#{$plyr-control-padding} / 2);
-                padding-left: ceil($plyr-control-padding * 4);
+        padding-left: calc(#{$plyr-control-padding} * 4);
         position: relative;
-                width: calc(100% - #{$horizontal-padding});
+        width: calc(100% - (#{$plyr-control-padding} * 2));
 
         &::after {
-                    border-right-color: rgba($plyr-menu-color, 0.8);
+          border-right-color: $plyr-menu-item-arrow-color;
-                    left: $plyr-control-padding;
+          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &::before {
-                    background: $plyr-menu-border-color;
+          background: $plyr-menu-back-border-color;
-                    box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
           content: '';
           height: 1px;
           left: 0;
-                    margin-top: ceil($plyr-control-padding / 2);
+          margin-top: calc(#{$plyr-control-padding} / 2);
           overflow: hidden;
           position: absolute;
           right: 0;
@@ -172,7 +174,7 @@
 
       &[aria-checked='true'] {
         &::before {
-                    background: $plyr-color-main;
+          background: $plyr-control-toggle-checked-background;
         }
         &::after {
           opacity: 1;
@@ -182,7 +184,7 @@
 
       &.plyr__tab-focus::before,
       &:hover::before {
-                background: rgba(#000, 0.1);
+        background: rgba($plyr-color-gray-900, 0.1);
       }
     }
 
@@ -191,9 +193,9 @@
       align-items: center;
       display: flex;
       margin-left: auto;
-            margin-right: -($plyr-control-padding - 2);
+      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
       overflow: hidden;
-            padding-left: ceil($plyr-control-padding * 3.5);
+      padding-left: calc(#{$plyr-control-padding} * 3.5);
       pointer-events: none;
     }
   }

src/sass/components/progress.scss

@@ -6,14 +6,14 @@
 $plyr-progress-offset: $plyr-range-thumb-height;
 
 .plyr__progress {
-    left: $plyr-progress-offset / 2;
+  left: calc(#{$plyr-progress-offset} * 0.5);
   margin-right: $plyr-progress-offset;
   position: relative;
 
   input[type='range'],
   &__buffer {
-        margin-left: -($plyr-progress-offset / 2);
+    margin-left: calc(#{$plyr-progress-offset} * -0.5);
-        margin-right: -($plyr-progress-offset / 2);
+    margin-right: calc(#{$plyr-progress-offset} * -0.5);
     width: calc(100% + #{$plyr-progress-offset});
   }
 
@@ -36,7 +36,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   border-radius: 100px;
   height: $plyr-range-track-height;
   left: 0;
-    margin-top: -($plyr-range-track-height / 2);
+  margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
   padding: 0;
   position: absolute;
   top: 50%;
@@ -72,11 +72,11 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   animation: plyr-progress 1s linear infinite;
   background-image: linear-gradient(
     -45deg,
-        $plyr-progress-loading-bg 25%,
+    $plyr-progress-loading-background 25%,
     transparent 25%,
     transparent 50%,
-        $plyr-progress-loading-bg 50%,
+    $plyr-progress-loading-background 50%,
-        $plyr-progress-loading-bg 75%,
+    $plyr-progress-loading-background 75%,
     transparent 75%,
     transparent
   );
@@ -86,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-video-progress-buffered-bg;
+  background-color: $plyr-video-progress-buffered-background;
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-audio-progress-buffered-bg;
+  background-color: $plyr-audio-progress-buffered-background;
 }

src/sass/components/sliders.scss

@@ -7,11 +7,11 @@
   -webkit-appearance: none; /* stylelint-disable-line */
   background: transparent;
   border: 0;
-    border-radius: ($plyr-range-thumb-height * 2);
+  border-radius: calc(#{$plyr-range-thumb-height} * 2);
-    // color is used in JS to populate lower fill for WebKit
+  // `color` property is used in JS to populate lower fill for WebKit
-    color: $plyr-range-fill-bg;
+  color: $plyr-range-fill-background;
   display: block;
-    height: $plyr-range-max-height;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;
@@ -25,7 +25,7 @@
   &::-webkit-slider-thumb {
     @include plyr-range-thumb();
     -webkit-appearance: none; /* stylelint-disable-line */
-        margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
+    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
   }
 
   // Mozilla
@@ -39,7 +39,7 @@
 
   &::-moz-range-progress {
     background: currentColor;
-        border-radius: ($plyr-range-track-height / 2);
+    border-radius: calc(#{$plyr-range-track-height} / 2);
     height: $plyr-range-track-height;
   }
 

src/sass/components/times.scss

@@ -14,7 +14,7 @@
     margin-right: $plyr-control-spacing;
   }
 
-    @media (max-width: $plyr-bp-sm-max) {
+  @media (max-width: calc(#{$plyr-bp-md} - 1)) {
     display: none;
   }
 }

src/sass/components/tooltips.scss

@@ -3,7 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__tooltip {
-    background: $plyr-tooltip-bg;
+  background: $plyr-tooltip-background;
   border-radius: $plyr-tooltip-radius;
   bottom: 100%;
   box-shadow: $plyr-tooltip-shadow;
@@ -12,9 +12,9 @@
   font-weight: $plyr-font-weight-regular;
   left: 50%;
   line-height: 1.3;
-    margin-bottom: ($plyr-tooltip-padding * 2);
+  margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
   opacity: 0;
-    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
+  padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
   pointer-events: none;
   position: absolute;
   transform: translate(-50%, 10px) scale(0.8);
@@ -27,8 +27,8 @@
   &::before {
     border-left: $plyr-tooltip-arrow-size solid transparent;
     border-right: $plyr-tooltip-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+    border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
-        bottom: -$plyr-tooltip-arrow-size;
+    bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
     content: '';
     height: 0;
     left: 50%;
@@ -59,7 +59,7 @@
   transform-origin: 0 100%;
 
   &::before {
-        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
   }
 }
 
@@ -72,7 +72,7 @@
 
   &::before {
     left: auto;
-        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
     transform: translateX(50%);
   }
 }

src/sass/components/volume.scss

@@ -11,8 +11,8 @@
   width: 20%;
 
   input[type='range'] {
-        margin-left: ($plyr-control-spacing / 2);
+    margin-left: calc(#{$plyr-control-spacing} / 2);
-        margin-right: ($plyr-control-spacing / 2);
+    margin-right: calc(#{$plyr-control-spacing} / 2);
     position: relative;
     z-index: 2;
   }

src/sass/lib/css-vars.scss

@@ -0,0 +1,100 @@
+// Downloaded from https://github.com/malyw/css-vars (and modified)
+
+// global map to be filled via variables
+$css-vars: ();
+
+// the variable may be set to "true" anywhere in the code,
+// so native CSS custom properties will be used instead of the Sass global map
+$css-vars-use-native: false !default;
+
+///
+// Assigns a variable to the global map
+///
+@function css-var-assign($varName: null, $varValue: null) {
+  @return map-merge(
+    $css-vars,
+    (
+      $varName: $varValue,
+    )
+  );
+}
+
+///
+// Emulates var() CSS native function behavior
+//
+// $args[0] {String} "--" + variable name
+// [$args[1]] Optional default value if variable is not assigned yet
+//
+// E.G.:
+// color: var(--main-color);
+// background: var(--main-background, green);
+///
+@function var($args...) {
+  // CHECK PARAMS
+  @if (length($args) ==0) {
+    @error 'Variable name is expected to be passed to the var() function';
+  }
+  @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
+    @error "Variable name is expected to start from '--'";
+  }
+
+  // PROCESS
+  $var-name: nth($args, 1);
+  $var-value: map-get($css-vars, $var-name);
+
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: don't process function in case of native
+    @return unquote('var(' + $args + ')');
+  } @else {
+    @if ($var-value == null) {
+      // variable is not provided so far
+      @if (length($args) == 2) {
+        $var-value: nth($args, 2);
+      }
+    }
+
+    // Sass: return value from the map
+    @return $var-value;
+  }
+}
+
+///
+// SASS mixin to provide variables
+// E.G.:
+// @include css-vars((
+//    --color: rebeccapurple,
+//    --height: 68px,
+//    --margin-top: calc(2vh + 20px)
+// ));
+///
+@mixin css-vars($var-map: null) {
+  // CHECK PARAMS
+  @if ($var-map == null) {
+    @error 'Map of variables is expected, instead got: null';
+  }
+  @if (type_of($var-map) != map) {
+    @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
+  }
+
+  // PROCESS
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: assign CSS custom properties to the global scope
+    @at-root :root {
+      @each $var-name, $var-value in $var-map {
+        @if (type_of($var-value) == string) {
+          #{$var-name}: $var-value; // to prevent quotes interpolation
+        } @else {
+          #{$var-name}: #{$var-value};
+        }
+      }
+    }
+  } @else {
+    // Sass or debug
+    // merge variables and values to the global map (provides no output)
+    @each $var-name, $var-value in $var-map {
+      $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
+    }
+  }
+}

src/sass/lib/mixins.scss

@@ -4,9 +4,11 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
+@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
-    box-shadow: 0 0 0 5px rgba($color, 0.5);
+  outline-color: $color;
-    outline: 0;
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
 }
 
 // Font smoothing
@@ -15,9 +17,6 @@
   @if $mode {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    } @else {
-        -moz-osx-font-smoothing: auto;
-        -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -26,14 +25,14 @@
 @mixin plyr-range-track() {
   background: transparent;
   border: 0;
-    border-radius: ($plyr-range-track-height / 2);
+  border-radius: calc(#{$plyr-range-track-height} / 2);
   height: $plyr-range-track-height;
   transition: box-shadow 0.3s ease;
   user-select: none;
 }
 
 @mixin plyr-range-thumb() {
-    background: $plyr-range-thumb-bg;
+  background: $plyr-range-thumb-background;
   border: 0;
   border-radius: 100%;
   box-shadow: $plyr-range-thumb-shadow;
@@ -43,7 +42,7 @@
   width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
+@mixin plyr-range-thumb-active($color) {
   box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
@@ -69,8 +68,6 @@
   &.plyr--vimeo .plyr__video-wrapper {
     height: 0;
     position: relative;
-        top: 50%;
-        transform: translateY(-50%);
   }
 
   // Display correct icon

src/sass/plugins/ads.scss

@@ -23,7 +23,7 @@
 
   // The countdown label
   &::after {
-        background: rgba($plyr-color-gray-9, 0.8);
+    background: $plyr-color-gray-900;
     border-radius: 2px;
     bottom: $plyr-control-spacing;
     color: #fff;

src/sass/plugins/preview-thumbnails.scss

@@ -1,118 +0,0 @@
-// --------------------------------------------------------------
-// Preview Thumbnails
-// --------------------------------------------------------------
-
-$plyr-preview-padding: $plyr-tooltip-padding !default;
-$plyr-preview-bg: $plyr-tooltip-bg !default;
-$plyr-preview-radius: $plyr-tooltip-radius !default;
-$plyr-preview-shadow: $plyr-tooltip-shadow !default;
-$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
-$plyr-preview-image-bg: $plyr-color-gray-2 !default;
-$plyr-preview-time-font-size: $plyr-font-size-time !default;
-$plyr-preview-time-padding: 3px 6px !default;
-$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
-$plyr-preview-time-color: #fff;
-$plyr-preview-time-bottom-offset: 6px;
-
-.plyr__preview-thumb {
-    background-color: $plyr-preview-bg;
-    border-radius: 3px;
-    bottom: 100%;
-    box-shadow: $plyr-preview-shadow;
-    margin-bottom: $plyr-preview-padding * 2;
-    opacity: 0;
-    padding: $plyr-preview-radius;
-    pointer-events: none;
-    position: absolute;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 50% 100%;
-    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
-    z-index: 2;
-
-    &--is-shown {
-        opacity: 1;
-        transform: translate(0, 0) scale(1);
-    }
-
-    // The background triangle
-    &::before {
-        border-left: $plyr-preview-arrow-size solid transparent;
-        border-right: $plyr-preview-arrow-size solid transparent;
-        border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
-        bottom: -$plyr-preview-arrow-size;
-        content: '';
-        height: 0;
-        left: 50%;
-        position: absolute;
-        transform: translateX(-50%);
-        width: 0;
-        z-index: 2;
-    }
-
-    &__image-container {
-        background: $plyr-preview-image-bg;
-        border-radius: ($plyr-preview-radius - 1px);
-        overflow: hidden;
-        position: relative;
-        z-index: 0;
-
-        img {
-            height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
-            left: 0;
-            max-height: none;
-            max-width: none;
-            position: absolute;
-            top: 0;
-            width: 100%;
-        }
-    }
-
-    // Seek time text
-    &__time-container {
-        bottom: $plyr-preview-time-bottom-offset;
-        left: 0;
-        position: absolute;
-        right: 0;
-        white-space: nowrap;
-        z-index: 3;
-
-        span {
-            background-color: $plyr-preview-time-bg;
-            border-radius: ($plyr-preview-radius - 1px);
-            color: $plyr-preview-time-color;
-            font-size: $plyr-preview-time-font-size;
-            padding: $plyr-preview-time-padding;
-        }
-    }
-}
-
-.plyr__preview-scrubbing {
-    bottom: 0;
-    filter: blur(1px);
-    height: 100%;
-    left: 0;
-    margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
-    opacity: 0;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity 0.3s ease;
-    width: 100%;
-    z-index: 1;
-
-    &--is-shown {
-        opacity: 1;
-    }
-
-    img {
-        height: 100%;
-        left: 0;
-        max-height: none;
-        max-width: none;
-        object-fit: contain;
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-}

src/sass/plugins/preview-thumbnails/index.scss

@@ -0,0 +1,109 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+@import './settings';
+
+.plyr__preview-thumb {
+  background-color: $plyr-preview-background;
+  border-radius: 3px;
+  bottom: 100%;
+  box-shadow: $plyr-preview-shadow;
+  margin-bottom: calc(#{$plyr-preview-padding} * 2);
+  opacity: 0;
+  padding: $plyr-preview-radius;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+  z-index: 2;
+
+  &--is-shown {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+
+  // The background triangle
+  &::before {
+    border-left: $plyr-preview-arrow-size solid transparent;
+    border-right: $plyr-preview-arrow-size solid transparent;
+    border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
+    bottom: calc(#{$plyr-preview-arrow-size} * -1);
+    content: '';
+    height: 0;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+    z-index: 2;
+  }
+
+  &__image-container {
+    background: $plyr-preview-image-background;
+    border-radius: calc(#{$plyr-preview-radius} - 1px);
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+
+    img {
+      height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+      left: 0;
+      max-height: none;
+      max-width: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  // Seek time text
+  &__time-container {
+    bottom: $plyr-preview-time-bottom-offset;
+    left: 0;
+    position: absolute;
+    right: 0;
+    white-space: nowrap;
+    z-index: 3;
+
+    span {
+      background-color: $plyr-preview-time-background;
+      border-radius: calc(#{$plyr-preview-radius} - 1px);
+      color: $plyr-preview-time-color;
+      font-size: $plyr-preview-time-font-size;
+      padding: $plyr-preview-time-padding;
+    }
+  }
+}
+
+.plyr__preview-scrubbing {
+  bottom: 0;
+  filter: blur(1px);
+  height: 100%;
+  left: 0;
+  margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.3s ease;
+  width: 100%;
+  z-index: 1;
+
+  &--is-shown {
+    opacity: 1;
+  }
+
+  img {
+    height: 100%;
+    left: 0;
+    max-height: none;
+    max-width: none;
+    object-fit: contain;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

src/sass/plugins/preview-thumbnails/settings.scss

@@ -0,0 +1,15 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-background: $plyr-tooltip-background !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
+$plyr-preview-shadow: $plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
+$plyr-preview-image-background: $plyr-color-gray-200 !default;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-time-padding: 3px 6px !default;
+$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-bottom-offset: 6px;

src/sass/plyr.scss

@@ -5,6 +5,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import 'lib/css-vars';
+$css-vars-use-native: true;
+
 @import 'settings/breakpoints';
 @import 'settings/colors';
 @import 'settings/cosmetics';
@@ -43,7 +46,7 @@
 @import 'states/fullscreen';
 
 @import 'plugins/ads';
-@import 'plugins/preview-thumbnails';
+@import 'plugins/preview-thumbnails/index';
 
 @import 'utils/animation';
 @import 'utils/hidden';

src/sass/settings/badges.scss

@@ -2,5 +2,6 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-gray-7 !default;
+$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
-$plyr-badge-color: #fff !default;
+$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
+$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;

src/sass/settings/breakpoints.scss

@@ -1,12 +1,9 @@
 // ==========================================================================
 // Breakpoints
+// NOTE: we can't use CSS variables for breakpoints unfortunately
+// https://www.w3.org/TR/css-variables-1/#using-variables
 // ==========================================================================
 
 $plyr-bp-sm: 480px !default;
 $plyr-bp-md: 768px !default;
 $plyr-bp-lg: 1024px !default;
-
-// Max-width media queries
-$plyr-bp-xs-max: ($plyr-bp-sm - 1);
-$plyr-bp-sm-max: ($plyr-bp-md - 1);
-$plyr-bp-md-max: ($plyr-bp-lg - 1);

src/sass/settings/captions.scss

@@ -2,8 +2,9 @@
 // Captions
 // ==========================================================================
 
-$plyr-captions-bg: rgba(#000, 0.8) !default;
+$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
-$plyr-captions-color: #fff !default;
+$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
+
 $plyr-font-size-captions-base: $plyr-font-size-base !default;
 $plyr-font-size-captions-small: $plyr-font-size-small !default;
 $plyr-font-size-captions-medium: $plyr-font-size-large !default;

src/sass/settings/colors.scss

@@ -2,16 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: hsl(198, 100%, 50%) !default;
+$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
 
 // Grayscale
-$plyr-color-gray-9: hsl(210, 15%, 16%);
+$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
-$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
+$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
-$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
+$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
-$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
+$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
-$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
+$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
-$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
+$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
-$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
+$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
-$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
+$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
-$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
+$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
-$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
+$plyr-color-gray-50: hsl(216, 15%, 97%) !default;

src/sass/settings/controls.scss

@@ -2,17 +2,31 @@
 // Controls
 // ==========================================================================
 
-$plyr-control-icon-size: 18px !default;
+$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
-$plyr-control-spacing: 10px !default;
+$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
-$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
+$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
-$plyr-control-radius: 3px !default;
+$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
 
-$plyr-video-controls-bg: #000 !default;
+$plyr-control-toggle-checked-background: var(
-$plyr-video-control-color: #fff !default;
+  --plyr-control-toggle-checked-background,
-$plyr-video-control-color-hover: #fff !default;
+  var(--plyr-color-main, $plyr-color-main)
-$plyr-video-control-bg-hover: $plyr-color-main !default;
+) !default;
 
-$plyr-audio-controls-bg: #fff !default;
+$plyr-video-controls-background: var(
-$plyr-audio-control-color: $plyr-color-gray-7 !default;
+  --plyr-video-controls-background,
-$plyr-audio-control-color-hover: #fff !default;
+  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
-$plyr-audio-control-bg-hover: $plyr-color-main !default;
+) !default;
+$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
+$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
+$plyr-video-control-background-hover: var(
+  --plyr-video-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
+
+$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
+$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
+$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
+$plyr-audio-control-background-hover: var(
+  --plyr-audio-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;

src/sass/settings/cosmetics.scss

@@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: $plyr-color-main !default;
+$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;

src/sass/settings/menus.scss

@@ -2,9 +2,14 @@
 // Menus
 // ==========================================================================
 
-$plyr-menu-bg: rgba(#fff, 0.9) !default;
+$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
-$plyr-menu-color: $plyr-color-gray-7 !default;
+$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
-$plyr-menu-arrow-size: 6px !default;
+$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
-$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
-$plyr-menu-border-shadow-color: #fff !default;
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
-$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+
+$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+
+$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;

src/sass/settings/progress.scss

@@ -3,9 +3,12 @@
 // ==========================================================================
 
 // Loading
-$plyr-progress-loading-size: 25px !default;
+$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
+$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
 
 // Buffered
-$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
+$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
+$plyr-audio-progress-buffered-background: var(
+  --plyr-audio-progress-buffered-background,
+  rgba($plyr-color-gray-200, 0.6)
+) !default;

src/sass/settings/sliders.scss

@@ -2,23 +2,39 @@
 // Sliders
 // ==========================================================================
 
-// Active state
-$plyr-range-thumb-active-shadow-width: 3px !default;
-
 // Thumb
-$plyr-range-thumb-height: 13px !default;
+$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
-$plyr-range-thumb-bg: #fff !default;
+$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
-$plyr-range-thumb-border: 2px solid transparent !default;
+$plyr-range-thumb-shadow: var(
-$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
+  --plyr-range-thumb-shadow,
+  0 1px 1px rgba($plyr-color-gray-900, 0.15),
+  0 0 0 1px rgba($plyr-color-gray-900, 0.2)
+) !default;
+
+// Active state
+$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
-$plyr-range-track-height: 5px !default;
+$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
-$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 
 // Fill
-$plyr-range-fill-bg: $plyr-color-main !default;
+$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
 
 // Type specific
-$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
+$plyr-video-range-track-background: var(
-$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+  --plyr-video-range-track-background,
-$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
+  $plyr-video-progress-buffered-background
+) !default;
+$plyr-video-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba(#fff, 0.5)
+) !default;
+
+$plyr-audio-range-track-background: var(
+  --plyr-audio-range-track-background,
+  $plyr-audio-progress-buffered-background
+) !default;
+$plyr-audio-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba($plyr-color-gray-900, 0.1)
+) !default;

src/sass/settings/tooltips.scss

@@ -2,9 +2,9 @@
 // Tooltips
 // ==========================================================================
 
-$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
+$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
-$plyr-tooltip-color: $plyr-color-gray-7 !default;
+$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
-$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
+$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
-$plyr-tooltip-arrow-size: 4px !default;
+$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
-$plyr-tooltip-radius: 3px !default;
+$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
-$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

src/sass/settings/type.scss

@@ -2,19 +2,19 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
+$plyr-font-family: var(--plyr-font-family, inherit) !default;
-$plyr-font-size-base: 16px !default;
+$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
-$plyr-font-size-small: 14px !default;
+$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
-$plyr-font-size-large: 18px !default;
+$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
-$plyr-font-size-xlarge: 21px !default;
+$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
 
-$plyr-font-size-time: $plyr-font-size-small !default;
+$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-badge: 9px !default;
+$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
-$plyr-font-size-menu: $plyr-font-size-small !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
 
-$plyr-font-weight-regular: 500 !default;
+$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
-$plyr-font-weight-bold: 600 !default;
+$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
 
-$plyr-line-height: 1.7 !default;
+$plyr-line-height: var(--plyr-line-height, 1.7) !default;
 
-$plyr-font-smoothing: false !default;
+$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;

src/sass/types/audio.scss

@@ -9,7 +9,7 @@
 
 // Controls container
 .plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
+  background: $plyr-audio-controls-background;
   border-radius: inherit;
   color: $plyr-audio-control-color;
   padding: $plyr-control-spacing;
@@ -20,7 +20,7 @@
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
+    background: $plyr-audio-control-background-hover;
     color: $plyr-audio-control-color-hover;
   }
 }
@@ -28,34 +28,34 @@
 // Range inputs
 .plyr--full-ui.plyr--audio input[type='range'] {
   &::-webkit-slider-runnable-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   &::-moz-range-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   &::-ms-track {
-        background-color: $plyr-audio-range-track-bg;
+    background-color: $plyr-audio-range-track-background;
   }
 
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--audio .plyr__progress__buffer {
-    color: $plyr-audio-progress-buffered-bg;
+  color: $plyr-audio-progress-buffered-background;
 }

src/sass/types/video.scss

@@ -17,6 +17,7 @@
   height: 100%;
   margin: auto;
   overflow: hidden;
+  position: relative;
   width: 100%;
 }
 
@@ -52,20 +53,22 @@ $embed-padding: ((100 / 16) * 9);
 
 // Controls container
 .plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+  background: $plyr-video-controls-background;
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   bottom: 0;
   color: $plyr-video-control-color;
   left: 0;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
+  padding: calc(#{$plyr-control-spacing} / 2);
+  padding-top: calc(#{$plyr-control-spacing} * 2);
   position: absolute;
   right: 0;
   transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
   z-index: 3;
 
   @media (min-width: $plyr-bp-sm) {
-        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    padding: $plyr-control-spacing;
+    padding-top: calc(#{$plyr-control-spacing} * 3.5);
   }
 }
 
@@ -82,23 +85,25 @@ $embed-padding: ((100 / 16) * 9);
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-        background: $plyr-video-control-bg-hover;
+    background: $plyr-video-control-background-hover;
     color: $plyr-video-control-color-hover;
   }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
+  background: $plyr-video-control-background-hover;
   border: 0;
   border-radius: 100%;
   color: $plyr-video-control-color;
   display: none;
   left: 50%;
-    padding: ceil($plyr-control-spacing * 1.5);
+  opacity: 0.9;
+  padding: calc(#{$plyr-control-spacing} * 1.5);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
+  transition: 0.3s;
   z-index: 2;
 
   // Offset icon to make the play button look right
@@ -109,7 +114,7 @@ $embed-padding: ((100 / 16) * 9);
 
   &:hover,
   &:focus {
-        background: $plyr-video-control-bg-hover;
+    opacity: 1;
   }
 }
 
@@ -125,34 +130,34 @@ $embed-padding: ((100 / 16) * 9);
 // Video range inputs
 .plyr--full-ui.plyr--video input[type='range'] {
   &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
+    background-color: $plyr-video-range-track-background;
   }
 
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-            @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--video .plyr__progress__buffer {
-    color: $plyr-video-progress-buffered-bg;
+  color: $plyr-video-progress-buffered-background;
 }

tasks/build.js

@@ -14,8 +14,10 @@ const commonjs = require('rollup-plugin-commonjs');
 const resolve = require('rollup-plugin-node-resolve');
 // CSS
 const sass = require('gulp-sass');
-const clean = require('gulp-clean-css');
+const postcss = require('gulp-postcss');
-const prefix = require('gulp-autoprefixer');
+const autoprefixer = require('autoprefixer');
+const clean = require('postcss-clean');
+const customprops = require('postcss-custom-properties');
 // Images
 const svgstore = require('gulp-svgstore');
 const imagemin = require('gulp-imagemin');
@@ -29,10 +31,8 @@ const size = require('gulp-size');
 const sourcemaps = require('gulp-sourcemaps');
 const browserSync = require('browser-sync').create();
 // Configs
-const pkg = require('../package.json');
 const build = require('../build.json');
 // Info from package
-const { browserslist: browsers } = pkg;
 const minSuffix = '.min';
 // Paths
 const root = path.join(__dirname, '..');
@@ -156,12 +156,7 @@ Object.entries(build.css).forEach(([filename, entry]) => {
             .src(src)
             .pipe(plumber())
             .pipe(sass())
-            .pipe(
+            .pipe(postcss([customprops(), autoprefixer(), clean()]))
-                prefix(browsers, {
-                    cascade: false,
-                }),
-            )
-            .pipe(clean())
             .pipe(size(sizeOptions))
             .pipe(gulp.dest(dist)),
     );

yarn.lock

@@ -1384,7 +1384,7 @@ autoprefixer@^7.1.2:
     postcss "^6.0.17"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^9.6.1, autoprefixer@^9.7.4:
+autoprefixer@^9.7.4, autoprefixer@^9.7.5:
   version "9.7.5"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.5.tgz#8df10b9ff9b5814a8d411a5cfbab9c793c392376"
   integrity sha512-URo6Zvt7VYifomeAfJlMFnYDhow1rk2bufwkbamPEAtQFcL11moLk4PnR7n9vlu7M+BkXAZkHFA0mIcY7tjQFg==
@@ -1397,7 +1397,7 @@ autoprefixer@^9.6.1, autoprefixer@^9.7.4:
     postcss "^7.0.27"
     postcss-value-parser "^4.0.3"
 
-aws-sdk@^2.389.0, aws-sdk@^2.648.0:
+aws-sdk@^2.389.0:
   version "2.648.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.648.0.tgz#6cbea887b98c3ee8316870e9eead659194e35094"
   integrity sha512-b+PdZmCFvZBisqXEH68jO4xB30LrDHQMWrEX6MJoZaOlxPJfpOqRFUH3zsiAXF5Q2jTdjYLtS5bs3vcIwRzi3Q==
@@ -1412,6 +1412,21 @@ aws-sdk@^2.389.0, aws-sdk@^2.648.0:
     uuid "3.3.2"
     xml2js "0.4.19"
 
+aws-sdk@^2.649.0:
+  version "2.656.0"
+  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.656.0.tgz#0d74664ddbf30701073be9f9913ee7266afef3b4"
+  integrity sha512-UzqDvvt6i7gpuzEdK0GT/JOfBJcsCPranzZWdQ9HR4+5E0m5kf5gybZ6OX+UseIAE2/WND6Dv0aHgiI21AKenw==
+  dependencies:
+    buffer "4.9.1"
+    events "1.1.1"
+    ieee754 "1.1.13"
+    jmespath "0.15.0"
+    querystring "0.2.0"
+    sax "1.2.1"
+    url "0.10.3"
+    uuid "3.3.2"
+    xml2js "0.4.19"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2070,11 +2085,6 @@ chokidar@^3.0.0:
   optionalDependencies:
     fsevents "~2.1.2"
 
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
 ci-info@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
@@ -2095,7 +2105,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css@4.2.3:
+clean-css@^4.x:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -2632,7 +2642,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@3.X, debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.2.6:
+debug@3.X, debug@^3.0.0, debug@^3.0.1, debug@^3.1.0:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -2821,11 +2831,6 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@2.X:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -3145,7 +3150,7 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
+es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.5"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
   integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
@@ -3250,9 +3255,9 @@ eslint-module-utils@^2.4.1:
     pkg-dir "^2.0.0"
 
 eslint-plugin-import@^2.20.1:
-  version "2.20.1"
+  version "2.20.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz#802423196dcb11d9ce8435a5fc02a6d3b46939b3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz#91fc3807ce08be4837141272c8b99073906e588d"
-  integrity sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==
+  integrity sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==
   dependencies:
     array-includes "^3.0.3"
     array.prototype.flat "^1.2.1"
@@ -3727,6 +3732,11 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+figgy-pudding@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
+
 figures@^1.3.5:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -3957,9 +3967,9 @@ flat-cache@^2.0.1:
     write "1.0.3"
 
 flatted@^2.0.0:
-  version "2.0.1"
+  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
-  integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 flush-write-stream@^1.0.2:
   version "1.1.1"
@@ -3969,11 +3979,6 @@ flush-write-stream@^1.0.2:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-fn-name@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
-  integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
-
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
@@ -4053,13 +4058,6 @@ fs-extra@3.0.1:
     jsonfile "^3.0.0"
     universalify "^0.1.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-mkdirp-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz#0b7815fc3201c6a69e14db98ce098c16935259eb"
@@ -4497,18 +4495,6 @@ graceful-fs@4.X, graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, g
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
   integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
 
-gulp-autoprefixer@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-7.0.1.tgz#3c0dc26afc802d317e7560a7f760a0399049075a"
-  integrity sha512-QJGEmHw+bEt7FSqvmbAUTxbCuNLJYx4sz3ox9WouYqT/7j5FH5CQ8ZnpL1M7H5npX1bUJa7lUVY1w20jXxhOxg==
-  dependencies:
-    autoprefixer "^9.6.1"
-    fancy-log "^1.3.2"
-    plugin-error "^1.0.1"
-    postcss "^7.0.17"
-    through2 "^3.0.1"
-    vinyl-sourcemaps-apply "^0.2.1"
-
 gulp-awspublish@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/gulp-awspublish/-/gulp-awspublish-4.1.1.tgz#acc2e534b60dd96d3ac7d62513aab97cd2c49a39"
@@ -4536,16 +4522,6 @@ gulp-better-rollup@^4.0.1:
     vinyl "^2.1.0"
     vinyl-sourcemaps-apply "^0.2.1"
 
-gulp-clean-css@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/gulp-clean-css/-/gulp-clean-css-4.3.0.tgz#5b1e73f2fca46703eb636014cdd4553cea65146d"
-  integrity sha512-mGyeT3qqFXTy61j0zOIciS4MkYziF2U594t2Vs9rUnpkEHqfu6aDITMp8xOvZcvdX61Uz3y1mVERRYmjzQF5fg==
-  dependencies:
-    clean-css "4.2.3"
-    plugin-error "1.0.1"
-    through2 "3.0.1"
-    vinyl-sourcemaps-apply "0.2.1"
-
 gulp-cli@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.2.0.tgz#5533126eeb7fe415a7e3e84a297d334d5cf70ebc"
@@ -4956,7 +4932,7 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -4968,13 +4944,6 @@ ieee754@1.1.13, ieee754@^1.1.4:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
   integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 ignore@^3.3.3, ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@@ -5451,11 +5420,6 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
-is-hidden@^1.0.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-hidden/-/is-hidden-1.1.3.tgz#82e84cc7dbfffae42424d72037f80417f3b5e103"
-  integrity sha512-FFzhGKA9h59OFxeaJl0W5ILTYetI8WsdqdofKr69uLKZdV6hbDKxj8vkpG3L9uS/6Q/XYh1tkXm6xwRGFweETA==
-
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -5966,6 +5930,15 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+libnpmconfig@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/libnpmconfig/-/libnpmconfig-1.2.1.tgz#c0c2f793a74e67d4825e5039e7a02a0044dfcbc0"
+  integrity sha512-9esX8rTQAHqarx6qeZqmGQKBNZR5OIbl/Ayr0qQDy3oXja2iFVQQI81R6GZ2a02bSNZ9p3YOGX1O6HHCb1X7kA==
+  dependencies:
+    figgy-pudding "^3.5.1"
+    find-up "^3.0.0"
+    ini "^1.3.5"
+
 liftoff@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-3.1.0.tgz#c9ba6081f908670607ee79062d700df062c52ed3"
@@ -6021,12 +5994,12 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-load-plugin@^2.0.0:
+load-plugin@^3.0.0:
-  version "2.3.1"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/load-plugin/-/load-plugin-2.3.1.tgz#8024739afb4aa04de1e602e15e5b1a678c443d00"
+  resolved "https://registry.yarnpkg.com/load-plugin/-/load-plugin-3.0.0.tgz#8f3ce57cf4e5111639911012487bc1c2ba3d0e6c"
-  integrity sha512-dYB1lbwqHgPTrruy9glukCu8Ya9vzj6TMfouCtj2H/GuJ+8syioisgKTBPxnCi6m8K8jINKfTOxOHngFkUYqHw==
+  integrity sha512-od7eKCCZ62ITvFf8nHHrIiYmgOHb4xVNDRDqxBWSaao5FZyyZVX8OmRCbwjDGPrSrgIulwPNyBsWCGnhiDC0oQ==
   dependencies:
-    npm-prefix "^1.2.0"
+    libnpmconfig "^1.0.0"
     resolve-from "^5.0.0"
 
 loadjs@^4.2.0:
@@ -6364,6 +6337,13 @@ markdown-table@^1.1.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
   integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
 
+markdown-table@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
+  integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
+  dependencies:
+    repeat-string "^1.0.0"
+
 matchdep@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e"
@@ -6391,6 +6371,13 @@ mdast-util-compact@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+mdast-util-compact@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
+  integrity sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
 mdast-util-to-string@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
@@ -6589,21 +6576,6 @@ minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mitt@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
@@ -6696,15 +6668,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.2.1:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.3.tgz#a041ad1d04a871b0ebb666f40baaf1fb47867117"
-  integrity sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -6750,22 +6713,6 @@ node-gyp@^3.8.0:
     tar "^2.0.0"
     which "1"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.52:
   version "1.1.53"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
@@ -6801,14 +6748,6 @@ node-sass@^4.8.3:
   dependencies:
     abbrev "1"
 
-nopt@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
-  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -6857,13 +6796,6 @@ now-and-later@^2.0.0:
   dependencies:
     once "^1.3.2"
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
 npm-conf@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
@@ -6872,29 +6804,6 @@ npm-conf@^1.1.0:
     config-chain "^1.1.11"
     pify "^3.0.0"
 
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
-npm-prefix@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/npm-prefix/-/npm-prefix-1.2.0.tgz#e619455f7074ba54cc66d6d0d37dd9f1be6bcbc0"
-  integrity sha1-5hlFX3B0ulTMZtbQ033Z8b5ry8A=
-  dependencies:
-    rc "^1.1.0"
-    shellsubstitute "^1.1.0"
-    untildify "^2.1.0"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6902,7 +6811,7 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -7153,7 +7062,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@0, osenv@^0.1.4:
+osenv@0:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
   integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
@@ -7312,6 +7221,18 @@ parse-entities@^1.0.2, parse-entities@^1.1.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-filepath@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891"
@@ -7543,16 +7464,6 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-plugin-error@1.0.1, plugin-error@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
-  integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==
-  dependencies:
-    ansi-colors "^1.0.1"
-    arr-diff "^4.0.0"
-    arr-union "^3.1.0"
-    extend-shallow "^3.0.2"
-
 plugin-error@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
@@ -7564,6 +7475,16 @@ plugin-error@^0.1.2:
     arr-union "^2.0.1"
     extend-shallow "^1.1.2"
 
+plugin-error@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
+  integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==
+  dependencies:
+    ansi-colors "^1.0.1"
+    arr-diff "^4.0.0"
+    arr-union "^3.1.0"
+    extend-shallow "^3.0.2"
+
 plugin-log@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/plugin-log/-/plugin-log-0.1.0.tgz#86049cf6ab10833398a931f3689cbaee7b5e1333"
@@ -7601,6 +7522,14 @@ postcss-bem-linter@^3.0.0:
     postcss "^7.0.14"
     postcss-resolve-nested-selector "^0.1.1"
 
+postcss-clean@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-clean/-/postcss-clean-1.1.0.tgz#c2d61d5d8caf19a585adba16897726c2674c4207"
+  integrity sha512-83g3GqMbCM5NL6MlbbPLJ/m2NrUepBF44MoDk4Gt04QGXeXKh9+ilQa0DzLnYnvqYHQCw83nckuEzBFr2muwbg==
+  dependencies:
+    clean-css "^4.x"
+    postcss "^6.x"
+
 postcss-custom-properties@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-9.1.1.tgz#55822d70ff48004f6d307a338ba64a7fb0a4bfff"
@@ -7807,7 +7736,7 @@ postcss@^5.2.16:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.14, postcss@^6.0.17, postcss@^6.0.23, postcss@^6.0.6, postcss@^6.0.8:
+postcss@^6.0.14, postcss@^6.0.17, postcss@^6.0.23, postcss@^6.0.6, postcss@^6.0.8, postcss@^6.x:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -8043,7 +7972,7 @@ raw-body@^2.3.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.0.1, rc@^1.1.0, rc@^1.1.6, rc@^1.2.7:
+rc@^1.0.1, rc@^1.1.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -8276,14 +8205,14 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
-remark-cli@^7.0.1:
+remark-cli@^8.0.0:
-  version "7.0.1"
+  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/remark-cli/-/remark-cli-7.0.1.tgz#2d19d77674e20ea20a3f8ae31694ac30fddb1f52"
+  resolved "https://registry.yarnpkg.com/remark-cli/-/remark-cli-8.0.0.tgz#0cb405080d320de539656b181908b796c369f37d"
-  integrity sha512-CUjBLLSbEay0mNwOO+pptnLIoS8UB6cHlhZVpTRKbtbIcw6YEzEfD7jGjW1HCA8lZK87IfY3/DuWE6DlXu+hfg==
+  integrity sha512-5iRrk8ad+dU4espDl60H7ANhXqoaEXYsIyL8Mau0lDN6pP7QMAZsZTCX2XdoCfKfKEpiOggA7CHv43HkyVEppA==
   dependencies:
     markdown-extensions "^1.1.0"
-    remark "^11.0.0"
+    remark "^12.0.0"
-    unified-args "^7.0.0"
+    unified-args "^8.0.0"
 
 remark-parse@^4.0.0:
   version "4.0.0"
@@ -8327,25 +8256,26 @@ remark-parse@^6.0.0:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-parse@^7.0.0:
+remark-parse@^8.0.0:
-  version "7.0.2"
+  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.0.tgz#0aaae4b49e607ee7e972a6cf688026f46bbf6d1a"
-  integrity sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==
+  integrity sha512-Ck14G1Ns/GEPXhSw6m1Uv28kMtVk63e59NyL+QlhBBwBdIUXROM6MPfBehPhW6TW2d73batMdZsKwuxl5i3tEA==
   dependencies:
+    ccount "^1.0.0"
     collapse-white-space "^1.0.2"
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
     is-whitespace-character "^1.0.0"
     is-word-character "^1.0.0"
     markdown-escapes "^1.0.0"
-    parse-entities "^1.1.0"
+    parse-entities "^2.0.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
     trim "0.0.1"
     trim-trailing-lines "^1.0.0"
     unherit "^1.0.4"
-    unist-util-remove-position "^1.0.0"
+    unist-util-remove-position "^2.0.0"
-    vfile-location "^2.0.0"
+    vfile-location "^3.0.0"
     xtend "^4.0.1"
 
 remark-stringify@^4.0.0:
@@ -8388,10 +8318,10 @@ remark-stringify@^6.0.0:
     unherit "^1.0.4"
     xtend "^4.0.1"
 
-remark-stringify@^7.0.0:
+remark-stringify@^8.0.0:
-  version "7.0.4"
+  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-7.0.4.tgz#3de1e3f93853288d3407da1cd44f2212321dd548"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-8.0.0.tgz#33423ab8bf3076fb197f4cf582aaaf866b531625"
-  integrity sha512-qck+8NeA1D0utk1ttKcWAoHRrJxERYQzkHDyn+pF5Z4whX1ug98uCNPPSeFgLSaNERRxnD6oxIug6DzZQth6Pg==
+  integrity sha512-cABVYVloFH+2ZI5bdqzoOmemcz/ZuhQSH6W6ZNYnLojAUUn3xtX7u+6BpnYp35qHoGr2NFBsERV14t4vCIeW8w==
   dependencies:
     ccount "^1.0.0"
     is-alphanumeric "^1.0.0"
@@ -8399,12 +8329,12 @@ remark-stringify@^7.0.0:
     is-whitespace-character "^1.0.0"
     longest-streak "^2.0.1"
     markdown-escapes "^1.0.0"
-    markdown-table "^1.1.0"
+    markdown-table "^2.0.0"
-    mdast-util-compact "^1.0.0"
+    mdast-util-compact "^2.0.0"
-    parse-entities "^1.0.2"
+    parse-entities "^2.0.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
-    stringify-entities "^2.0.0"
+    stringify-entities "^3.0.0"
     unherit "^1.0.4"
     xtend "^4.0.1"
 
@@ -8431,14 +8361,14 @@ remark@^10.0.1:
     remark-stringify "^6.0.0"
     unified "^7.0.0"
 
-remark@^11.0.0:
+remark@^12.0.0:
-  version "11.0.2"
+  version "12.0.0"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-11.0.2.tgz#12b90ea100ac3362b1976fa87a6e4e0ab5968202"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-12.0.0.tgz#d1c145c07341c9232f93b2f8539d56da15a2548c"
-  integrity sha512-bh+eJgn8wgmbHmIBOuwJFdTVRVpl3fcVP6HxmpPWO0ULGP9Qkh6INJh0N5Uy7GqlV7DQYGoqaKiEIpM5LLvJ8w==
+  integrity sha512-oX4lMIS0csgk8AEbzY0h2jdR0ngiCHOpwwpxjmRa5TqAkeknY+tkhjRJGZqnCmvyuWh55/0SW5WY3R3nn3PH9A==
   dependencies:
-    remark-parse "^7.0.0"
+    remark-parse "^8.0.0"
-    remark-stringify "^7.0.0"
+    remark-stringify "^8.0.0"
-    unified "^8.2.0"
+    unified "^9.0.0"
 
 remark@^8.0.0:
   version "8.0.0"
@@ -8476,7 +8406,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.5.0, repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
+repeat-string@^1.0.0, repeat-string@^1.5.0, repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -8652,7 +8582,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@2, rimraf@^2.5.4, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.5.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -8710,10 +8640,10 @@ rollup-pluginutils@^2.8.1:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.2.0:
+rollup@^2.3.1:
-  version "2.2.0"
+  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.2.0.tgz#d82cfd6eda6d9561593a7e8a2fc0b72811a89b49"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.4.0.tgz#b136a4d701d24dd79ec9551ee0330e7f632ee9d2"
-  integrity sha512-iAu/j9/WJ0i+zT0sAMuQnsEbmOKzdQ4Yxu5rbPs9aUCyqveI1Kw3H4Fi9NWfCOpb8luEySD2lDyFWL9CrLE8iw==
+  integrity sha512-dYE2ZKl9+kxuFKDaaSuauZjIPa8hcKDqI7WrOq1pTXYG4GJw+6ypLifGIvCKw5yJpSmuFohuimYpg0wfRXTCLw==
   optionalDependencies:
     fsevents "~2.1.2"
 
@@ -8785,7 +8715,7 @@ sax@1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
   integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
 
-sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
+sax@>=0.6.0, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -8940,11 +8870,6 @@ shebang-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
-shellsubstitute@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shellsubstitute/-/shellsubstitute-1.2.0.tgz#e4f702a50c518b0f6fe98451890d705af29b6b70"
-  integrity sha1-5PcCpQxRiw9v6YRRiQ1wWvKba3A=
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -9340,21 +9265,39 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimleft@^2.1.1:
+string.prototype.trimend@^1.0.0:
-  version "2.1.1"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.0.tgz#ee497fd29768646d84be2c9b819e292439614373"
-  integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
+  integrity sha512-EEJnGqa/xNfIg05SxiPSqRS7S9qwDhYts1TSLR1BQfYUfPe1stofgGKvwERK9+9yf+PpfBMlpBaCHucXGPQfUA==
   dependencies:
     define-properties "^1.1.3"
-    function-bind "^1.1.1"
+    es-abstract "^1.17.5"
+
+string.prototype.trimleft@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
+  integrity sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    string.prototype.trimstart "^1.0.0"
 
 string.prototype.trimright@^2.1.1:
-  version "2.1.1"
+  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz#c76f1cef30f21bbad8afeb8db1511496cfb0f2a3"
-  integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
+  integrity sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==
   dependencies:
     define-properties "^1.1.3"
-    function-bind "^1.1.1"
+    es-abstract "^1.17.5"
+    string.prototype.trimend "^1.0.0"
+
+string.prototype.trimstart@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.0.tgz#afe596a7ce9de905496919406c9734845f01a2f2"
+  integrity sha512-iCP8g01NFYiiBOnwG1Xc3WZLyoo+RuBymwIlWncShXDDJYWN6DbnM3odslBJdgCdRlq94B5s63NWAZlcn2CS4w==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -9380,10 +9323,10 @@ stringify-entities@^1.0.1:
     is-alphanumerical "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-stringify-entities@^2.0.0:
+stringify-entities@^3.0.0:
-  version "2.0.0"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-2.0.0.tgz#fa7ca6614b355fb6c28448140a20c4ede7462827"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.0.tgz#455abe501f8b7859ba5726a25a8872333c65b0a7"
-  integrity sha512-fqqhZzXyAM6pGD9lky/GOPq6V4X0SeTAFBl0iXb/BzOegl40gpf/bV3QQP7zULNYvjr6+Dx8SCaDULjVoOru0A==
+  integrity sha512-h7NJJIssprqlyjHT2eQt2W1F+MCcNmwPGlKb0bWEdET/3N44QN3QbUF/ueKCgAssyKRZ3Br9rQ7FcXjHr0qLHw==
   dependencies:
     character-entities-html4 "^1.0.0"
     character-entities-legacy "^1.0.0"
@@ -9764,19 +9707,6 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
@@ -9867,7 +9797,7 @@ through2@2.X, through2@^2.0.0, through2@^2.0.1, through2@^2.0.3, through2@~2.0.0
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
-through2@3.0.1, through2@^3.0.1:
+through2@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
   integrity sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==
@@ -10183,45 +10113,42 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
-unified-args@^7.0.0:
+unified-args@^8.0.0:
-  version "7.1.0"
+  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/unified-args/-/unified-args-7.1.0.tgz#cd87a0ee54aa88d2308b5e0616dc1d289f1c351d"
+  resolved "https://registry.yarnpkg.com/unified-args/-/unified-args-8.0.0.tgz#c74d92a2b2ab43ed95c22c61d0ef81b4eed1bd80"
-  integrity sha512-soi9Rn7l5c1g0RfElSCHMwaxeiclSI0EsS3uZmMPUOfwMeeeZjLpNmHAowV9iSlQh59iiZhSMyQu9lB8WnIz5g==
+  integrity sha512-224jfXOL0Xu0e52fJTfxmAaNTuW1zopPmnXh/5GDAxx4Z6NbcZpjgQPBmo1xoLAhGih0rWVG2+a2kodzrEHfHw==
   dependencies:
     camelcase "^5.0.0"
-    chalk "^2.0.0"
+    chalk "^3.0.0"
     chokidar "^3.0.0"
     fault "^1.0.2"
     json5 "^2.0.0"
     minimist "^1.2.0"
     text-table "^0.2.0"
-    unified-engine "^7.0.0"
+    unified-engine "^8.0.0"
 
-unified-engine@^7.0.0:
+unified-engine@^8.0.0:
-  version "7.0.0"
+  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/unified-engine/-/unified-engine-7.0.0.tgz#37df3a0369d94435fa5a233d8cb40de23f89e476"
+  resolved "https://registry.yarnpkg.com/unified-engine/-/unified-engine-8.0.0.tgz#e3996ff6eaecc6ca3408af92b70e25691192d17d"
-  integrity sha512-zH/MvcISpWg3JZtCoY/GYBw1WnVHkhnPoMBWpmuvAifCPSS9mzT9EbtimesJp6t2nnr/ojI0mg3TmkO1CjIwVA==
+  integrity sha512-vLUezxCnjzz+ya4pYouRQVMT8k82Rk4fIj406UidRnSFJdGXFaQyQklAnalsQHJrLqAlaYPkXPUa1upfVSHGCA==
   dependencies:
     concat-stream "^2.0.0"
     debug "^4.0.0"
     fault "^1.0.0"
     figures "^3.0.0"
-    fn-name "^2.0.1"
     glob "^7.0.3"
     ignore "^5.0.0"
+    is-buffer "^2.0.0"
     is-empty "^1.0.0"
-    is-hidden "^1.0.1"
+    is-plain-obj "^2.0.0"
-    is-object "^1.0.1"
     js-yaml "^3.6.1"
-    load-plugin "^2.0.0"
+    load-plugin "^3.0.0"
-    parse-json "^4.0.0"
+    parse-json "^5.0.0"
     to-vfile "^6.0.0"
     trough "^1.0.0"
-    unist-util-inspect "^4.1.2"
+    unist-util-inspect "^5.0.0"
     vfile-reporter "^6.0.0"
     vfile-statistics "^1.1.0"
-    x-is-string "^0.1.0"
-    xtend "^4.0.1"
 
 unified@^6.0.0:
   version "6.2.0"
@@ -10249,13 +10176,14 @@ unified@^7.0.0:
     vfile "^3.0.0"
     x-is-string "^0.1.0"
 
-unified@^8.2.0:
+unified@^9.0.0:
-  version "8.4.2"
+  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.0.0.tgz#12b099f97ee8b36792dbad13d278ee2f696eed1d"
-  integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
+  integrity sha512-ssFo33gljU3PdlWLjNp15Inqb77d6JnJSfyplGJPT/a+fNRNyCBeveBAYJdO5khKdF6WVHa/yYCC7Xl6BDwZUQ==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
+    is-buffer "^2.0.0"
     is-plain-obj "^2.0.0"
     trough "^1.0.0"
     vfile "^4.0.0"
@@ -10297,10 +10225,10 @@ unist-util-find-all-after@^1.0.1, unist-util-find-all-after@^1.0.2:
   dependencies:
     unist-util-is "^3.0.0"
 
-unist-util-inspect@^4.1.2:
+unist-util-inspect@^5.0.0:
-  version "4.1.4"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-4.1.4.tgz#fefc4794445d0f79bffea7a2421c6f556e73a37c"
+  resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-5.0.1.tgz#168c8770a99902318ca268f8c391e294bcf44540"
-  integrity sha512-7xxyvKiZ1SC9vL5qrMqKub1T31gRHfau4242F69CcaOrXt//5PmRVOmDZ36UAEgiT+tZWzmQmbNZn+mVtnR9HQ==
+  integrity sha512-fPNWewS593JSmg49HbnE86BJKuBi1/nMWhDSccBvbARfxezEuJV85EaARR9/VplveiwCoLm2kWq+DhP8TBaDpw==
   dependencies:
     is-empty "^1.0.0"
 
@@ -10321,6 +10249,13 @@ unist-util-remove-position@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+unist-util-remove-position@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz#5d19ca79fdba712301999b2b73553ca8f3b352cc"
+  integrity sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
 unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
@@ -10387,13 +10322,6 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-untildify@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-2.1.0.tgz#17eb2807987f76952e9c0485fc311d06a826a2e0"
-  integrity sha1-F+soB5h/dpUunASF/DEdBqgmouA=
-  dependencies:
-    os-homedir "^1.0.0"
-
 unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
@@ -10558,10 +10486,15 @@ vfile-location@^2.0.0:
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
   integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
 
+vfile-location@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.0.1.tgz#d78677c3546de0f7cd977544c367266764d31bb3"
+  integrity sha512-yYBO06eeN/Ki6Kh1QAkgzYpWT1d3Qln+ZCtSbJqFExPl1S3y2qqotJQXoh6qEvl/jDlgpUJolBn3PItVnnZRqQ==
+
 vfile-message@*, vfile-message@^2.0.0:
-  version "2.0.3"
+  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.3.tgz#0dd4f6879fb240a8099b22bd3755536c92e59ba5"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
-  integrity sha512-qQg/2z8qnnBHL0psXyF72kCjb9YioIynvyltuNKFaUhRtqTIcIMP3xnBaPzirVZNuBrUe1qwFciSx2yApa4byw==
+  integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
   dependencies:
     "@types/unist" "^2.0.0"
     unist-util-stringify-position "^2.0.0"
@@ -10616,9 +10549,9 @@ vfile@^3.0.0:
     vfile-message "^1.0.0"
 
 vfile@^4.0.0:
-  version "4.0.3"
+  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.0.3.tgz#1e50b824fb5e5affd718e225c7bb1af6d97d4408"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.1.0.tgz#d79248957f43225d57ff67a56effc67bef08946e"
-  integrity sha512-lREgT5sF05TQk68LO6APy0In+TkFGnFEgKChK2+PHIaTrFQ9oHCKXznZ7VILwgYVBcl0gv4lGATFZBLhi2kVQg==
+  integrity sha512-BaTPalregj++64xbGK6uIlsurN3BCRNM/P2Pg8HezlGzKd1O9PrwIac6bd9Pdx2uTb0QHoioZ+rXKolbVXEgJg==
   dependencies:
     "@types/unist" "^2.0.0"
     is-buffer "^2.0.0"
@@ -10662,7 +10595,7 @@ vinyl-sourcemap@^1.1.0:
     remove-bom-buffer "^3.0.0"
     vinyl "^2.0.0"
 
-vinyl-sourcemaps-apply@0.2.1, vinyl-sourcemaps-apply@^0.2.0, vinyl-sourcemaps-apply@^0.2.1:
+vinyl-sourcemaps-apply@^0.2.0, vinyl-sourcemaps-apply@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
   integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=
@@ -10834,7 +10767,7 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==