Merge pull request #1344 from transloadit/chore/remove-important

Build: remove !important

bin/build-css.js

@@ -2,7 +2,7 @@ const sass = require('node-sass')
 const postcss = require('postcss')
 const autoprefixer = require('autoprefixer')
 const cssnano = require('cssnano')
-const safeImportant = require('postcss-safe-important')
+// const safeImportant = require('postcss-safe-important')
 const chalk = require('chalk')
 const { promisify } = require('util')
 const fs = require('fs')
@@ -44,7 +44,7 @@ async function compileCSS () {
       }
     })
 
-    const postcssResult = await postcss([ autoprefixer, safeImportant ])
+    const postcssResult = await postcss([ autoprefixer ])
       .process(scssResult.css, { from: file })
     postcssResult.warnings().forEach(function (warn) {
       console.warn(warn.toString())

examples/dev/index.html

@@ -17,6 +17,26 @@
         margin: auto;
         text-align: left;
       }
+
+      a {
+        color: purple;
+      }
+
+      button,
+      input {
+        color: green;
+        font-size: 30px;
+        text-align: right;
+        border: 2px solid purple;
+      }
+
+      ul {
+        margin: 60px;
+      }
+
+      li {
+        margin: 60px;
+      }
     </style>
     <main>
       <h1>Uppy is here</h1>

packages/@uppy/core/src/_common.scss

@@ -45,72 +45,46 @@
 // Utilities
 
 .uppy-u-reset {
-  // @include reset-button;
-  animation: none 0s ease 0s 1 normal none running;
+  -webkit-appearance: none;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  color: inherit;
   backface-visibility: visible;
-  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: none;
   border: medium none currentColor;
   border-collapse: separate;
   border-image: none;
   border-radius: 0;
   border-spacing: 0;
-  bottom: auto;
   box-shadow: none;
-  // box-sizing: content-box;
-  caption-side: top;
   clear: none;
-  clip: auto;
-  color: #000;
-  columns: auto;
-  column-count: auto;
-  column-fill: balance;
-  column-gap: normal;
-  column-rule: medium none currentColor;
-  column-span: 1;
-  column-width: auto;
-  content: normal;
-  counter-increment: none;
-  counter-reset: none;
   cursor: auto;
-  // direction: ltr;
   display: inline;
   empty-cells: show;
   float: none;
   font-family: inherit;
-  font-size: medium;
+  font-size: inherit;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   font-stretch: normal;
-  line-height: normal;
-  height: auto;
   hyphens: none;
   left: auto;
   letter-spacing: normal;
-  list-style: disc outside none;
+  list-style: none;
   margin: 0;
   max-height: none;
   max-width: none;
   min-height: 0;
   min-width: 0;
   opacity: 1;
-  orphans: 2;
   outline: medium none invert;
   overflow: visible;
   overflow-x: visible;
   overflow-y: visible;
-  padding: 0;
-  page-break-after: auto;
-  page-break-before: auto;
-  page-break-inside: auto;
-  perspective: none;
-  perspective-origin: 50% 50%;
-  position: static;
-  right: auto;
-  tab-size: 8;
-  table-layout: auto;
   text-align: left;
-  text-align-last: auto;
   text-decoration: none;
   text-indent: 0;
   text-shadow: none;
@@ -124,11 +98,7 @@
   vertical-align: baseline;
   visibility: visible;
   white-space: normal;
-  widows: 2;
-  width: auto;
-  word-spacing: normal;
   z-index: auto;
-  // all: initial;
 }
 
 // Inputs