Merge pull request #744 from transloadit/build/add-postcss-important-typescript

Add postcss-safe-important and typescript

bin/build-css.js

@@ -2,6 +2,7 @@ var sass = require('node-sass')
 var postcss = require('postcss')
 var autoprefixer = require('autoprefixer')
 var cssnano = require('cssnano')
+var safeImportant = require('postcss-safe-important')
 var chalk = require('chalk')
 var fs = require('fs')
 var path = require('path')
@@ -38,7 +39,7 @@ function compileCSS () {
   return new Promise(function (resolve) {
     sass.render({file: './src/scss/uppy.scss'}, function (err, sassResult) {
       if (err) handleErr(err)
-      postcss([ autoprefixer ])
+      postcss([ autoprefixer, safeImportant ])
         .process(sassResult.css, { from: path.join(__dirname, '../src/scss/uppy.scss') })
         .then(function (postCSSResult) {
           postCSSResult.warnings().forEach(function (warn) {

package-lock.json

@@ -14105,6 +14105,29 @@
         }
       }
     },
+    "postcss-safe-important": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-important/-/postcss-safe-important-1.1.0.tgz",
+      "integrity": "sha1-asaEGwpCujY0FnxYmxB6VNwDID8=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
+          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "js-base64": "2.1.9",
+            "source-map": "0.5.6",
+            "supports-color": "3.2.3"
+          }
+        }
+      }
+    },
     "postcss-selector-parser": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz",
@@ -16720,6 +16743,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.1.tgz",
+      "integrity": "sha512-Ao/f6d/4EPLq0YwzsQz8iXflezpTkQzqAyenTiw4kCUGr1uPiFLC3+fZ+gMZz6eeI/qdRUqvC+HxIJzUAzEFdg=="
+    },
     "ua-parser-js": {
       "version": "0.7.12",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.12.tgz",

package.json

@@ -86,6 +86,8 @@
     "npm-run-all": "^4.1.2",
     "onchange": "^3.3.0",
     "postcss": "^6.0.16",
+    "postcss-safe-important": "^1.1.0",
+    "typescript": "^2.8.1",
     "pre-commit": "^1.2.2",
     "redux": "^3.7.2",
     "replace-x": "^1.5.0",
@@ -139,6 +141,7 @@
     "test:acceptance": "./bin/endtoend-build && wdio test/endtoend/wdio.remote.conf.js",
     "test:acceptance:local": "./bin/endtoend-build && wdio test/endtoend/wdio.local.conf.js",
     "test:unit": "jest --testPathPattern=./src --coverage",
+    "test:type": "tsc -p .",
     "test": "npm run lint && npm run test:unit",
     "test:watch": "jest --watch --testPathPattern=src",
     "travis:deletecache": "travis cache --delete",

src/scss/_dashboard.scss

@@ -55,7 +55,7 @@
   right: 4px;
   bottom: -23px;
   font-size: 11px;
-  font-weight: 300;
+  // font-weight: 300;
   color: rgba($color-gray, 0.8);
   text-align: right;
   text-decoration: none;
@@ -583,7 +583,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: rgba($color-black, 0.65);
+    background-color: rgba($color-black, 0.65) /* no !important */;
     display: none;
     z-index: $zIndex-2;
   }
@@ -1044,7 +1044,7 @@
   justify-content: center;
   flex-grow: 1;
   border-bottom: 1px solid rgba($color-gray, 0.3);
-  background-color: lighten($color-gray, 40%);
+  background-color: lighten($color-gray, 40%); /* no !important */
   position: relative;
 }
 

src/scss/_microtip.scss

@@ -18,12 +18,12 @@
   [1] Base Styles
 -------------------------------------------------*/
 
-[aria-label][role~="tooltip"] {
+.Uppy-root [aria-label][role~="tooltip"] {
   position: relative;
 }
 
-[aria-label][role~="tooltip"]::before,
-[aria-label][role~="tooltip"]::after {
+.Uppy-root [aria-label][role~="tooltip"]::before,
+.Uppy-root [aria-label][role~="tooltip"]::after {
   transform: translate3d(0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
@@ -37,12 +37,12 @@
   transform-origin: top;
 }
 
-[aria-label][role~="tooltip"]::before {
+.Uppy-root [aria-label][role~="tooltip"]::before {
   background-size: 100% auto !important;
   content: "";
 }
 
-[aria-label][role~="tooltip"]::after {
+.Uppy-root [aria-label][role~="tooltip"]::after {
   background: rgba(17, 17, 17, .9);
   border-radius: 4px;
   color: #ffffff;
@@ -55,10 +55,10 @@
   box-sizing: content-box;
 }
 
-[aria-label][role~="tooltip"]:hover::before,
-[aria-label][role~="tooltip"]:hover::after,
-[aria-label][role~="tooltip"]:focus::before,
-[aria-label][role~="tooltip"]:focus::after {
+.Uppy-root [aria-label][role~="tooltip"]:hover::before,
+.Uppy-root [aria-label][role~="tooltip"]:hover::after,
+.Uppy-root [aria-label][role~="tooltip"]:focus::before,
+.Uppy-root [aria-label][role~="tooltip"]:focus::after {
   opacity: 1;
   pointer-events: auto;
 }
@@ -69,46 +69,46 @@
   [2] Position Modifiers
 -------------------------------------------------*/
 
-[role~="tooltip"][data-microtip-position|="top"]::before {
+.Uppy-root [role~="tooltip"][data-microtip-position|="top"]::before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 6px;
   width: 18px;
   margin-bottom: 5px;
 }
 
-[role~="tooltip"][data-microtip-position|="top"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position|="top"]::after {
   margin-bottom: 11px;
 }
 
-[role~="tooltip"][data-microtip-position|="top"]::before {
+.Uppy-root [role~="tooltip"][data-microtip-position|="top"]::before {
   transform: translate3d(-50%, 0, 0);
   bottom: 100%;
   left: 50%;
 }
 
-[role~="tooltip"][data-microtip-position|="top"]:hover::before {
+.Uppy-root [role~="tooltip"][data-microtip-position|="top"]:hover::before {
   transform: translate3d(-50%, -5px, 0);
 }
 
-[role~="tooltip"][data-microtip-position|="top"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position|="top"]::after {
   transform: translate3d(-50%, 0, 0);
   bottom: 100%;
   left: 50%;
 }
 
-[role~="tooltip"][data-microtip-position="top"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="top"]:hover::after {
   transform: translate3d(-50%, -5px, 0);
 }
 
 /* ------------------------------------------------
   [2.1] Top Left
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-position="top-left"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="top-left"]::after {
   transform: translate3d(calc(-100% + 16px), 0, 0);
   bottom: 100%;
 }
 
-[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="top-left"]:hover::after {
   transform: translate3d(calc(-100% + 16px), -5px, 0);
 }
 
@@ -116,12 +116,12 @@
 /* ------------------------------------------------
   [2.2] Top Right
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-position="top-right"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="top-right"]::after {
   transform: translate3d(calc(0% + -16px), 0, 0);
   bottom: 100%;
 }
 
-[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="top-right"]:hover::after {
   transform: translate3d(calc(0% + -16px), -5px, 0);
 }
 
@@ -129,7 +129,7 @@
 /* ------------------------------------------------
   [2.3] Bottom
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-position|="bottom"]::before {
+.Uppy-root [role~="tooltip"][data-microtip-position|="bottom"]::before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 6px;
   width: 18px;
@@ -137,28 +137,28 @@
   margin-bottom: 0;
 }
 
-[role~="tooltip"][data-microtip-position|="bottom"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position|="bottom"]::after {
   margin-top: 11px;
 }
 
-[role~="tooltip"][data-microtip-position|="bottom"]::before {
+.Uppy-root [role~="tooltip"][data-microtip-position|="bottom"]::before {
   transform: translate3d(-50%, -10px, 0);
   bottom: auto;
   left: 50%;
   top: 100%;
 }
 
-[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+.Uppy-root [role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
   transform: translate3d(-50%, 0, 0);
 }
 
-[role~="tooltip"][data-microtip-position|="bottom"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position|="bottom"]::after {
   transform: translate3d(-50%, -10px, 0);
   top: 100%;
   left: 50%;
 }
 
-[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
   transform: translate3d(-50%, 0, 0);
 }
 
@@ -166,12 +166,12 @@
 /* ------------------------------------------------
   [2.4] Bottom Left
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="bottom-left"]::after {
   transform: translate3d(calc(-100% + 16px), -10px, 0);
   top: 100%;
 }
 
-[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
   transform: translate3d(calc(-100% + 16px), 0, 0);
 }
 
@@ -179,12 +179,12 @@
 /* ------------------------------------------------
   [2.5] Bottom Right
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="bottom-right"]::after {
   transform: translate3d(calc(0% + -16px), -10px, 0);
   top: 100%;
 }
 
-[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
   transform: translate3d(calc(0% + -16px), 0, 0);
 }
 
@@ -192,8 +192,8 @@
 /* ------------------------------------------------
   [2.6] Left
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-position="left"]::before,
-[role~="tooltip"][data-microtip-position="left"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="left"]::before,
+.Uppy-root [role~="tooltip"][data-microtip-position="left"]::after {
   bottom: auto;
   left: auto;
   right: 100%;
@@ -201,7 +201,7 @@
   transform: translate3d(10px, -50%, 0);
 }
 
-[role~="tooltip"][data-microtip-position="left"]::before {
+.Uppy-root [role~="tooltip"][data-microtip-position="left"]::before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 18px;
   width: 6px;
@@ -209,12 +209,12 @@
   margin-bottom: 0;
 }
 
-[role~="tooltip"][data-microtip-position="left"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="left"]::after {
   margin-right: 11px;
 }
 
-[role~="tooltip"][data-microtip-position="left"]:hover::before,
-[role~="tooltip"][data-microtip-position="left"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="left"]:hover::before,
+.Uppy-root [role~="tooltip"][data-microtip-position="left"]:hover::after {
   transform: translate3d(0, -50%, 0);
 }
 
@@ -222,15 +222,15 @@
 /* ------------------------------------------------
   [2.7] Right
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-position="right"]::before,
-[role~="tooltip"][data-microtip-position="right"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="right"]::before,
+.Uppy-root [role~="tooltip"][data-microtip-position="right"]::after {
   bottom: auto;
   left: 100%;
   top: 50%;
   transform: translate3d(-10px, -50%, 0);
 }
 
-[role~="tooltip"][data-microtip-position="right"]::before {
+.Uppy-root [role~="tooltip"][data-microtip-position="right"]::before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 18px;
   width: 6px;
@@ -238,29 +238,29 @@
   margin-left: 5px;
 }
 
-[role~="tooltip"][data-microtip-position="right"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="right"]::after {
   margin-left: 11px;
 }
 
-[role~="tooltip"][data-microtip-position="right"]:hover::before,
-[role~="tooltip"][data-microtip-position="right"]:hover::after {
+.Uppy-root [role~="tooltip"][data-microtip-position="right"]:hover::before,
+.Uppy-root [role~="tooltip"][data-microtip-position="right"]:hover::after {
   transform: translate3d(0, -50%, 0);
 }
 
 /* ------------------------------------------------
   [3] Size
 -------------------------------------------------*/
-[role~="tooltip"][data-microtip-size="small"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-size="small"]::after {
   white-space: initial;
   width: 80px;
 }
 
-[role~="tooltip"][data-microtip-size="medium"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-size="medium"]::after {
   white-space: initial;
   width: 150px;
 }
 
-[role~="tooltip"][data-microtip-size="large"]::after {
+.Uppy-root [role~="tooltip"][data-microtip-size="large"]::after {
   white-space: initial;
   width: 260px;
 }