Don’t bundle Core styles with everything, because of CSS conflicts

To use Dashboard, you now have to include the following css:
```js
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'
```

packages/@uppy/dashboard/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 @import '@uppy/informer/src/style.scss';
 @import '@uppy/status-bar/src/style.scss';
 @import '@uppy/provider-views/src/style.scss';

packages/@uppy/drag-drop/src/style.scss

@@ -1,62 +1,59 @@
-@import '@uppy/core/src/style.scss';
-
-// .Uppy {
-
-  .uppy-DragDrop-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 7px;
-    background-color: $color-white;
-    // cursor: pointer;
-  }
-
-  .uppy-DragDrop-inner {
-    margin: 0;
-    text-align: center;
-    padding: 80px 20px;
-    line-height: 1.4;
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
+
+.uppy-DragDrop-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  background-color: $color-white;
+  // cursor: pointer;
+}
+
+.uppy-DragDrop-inner {
+  margin: 0;
+  text-align: center;
+  padding: 80px 20px;
+  line-height: 1.4;
+}
+
+.uppy-DragDrop-arrow {
+  width: 60px;
+  height: 60px;
+  fill: lighten($color-gray, 30%);
+  margin-bottom: 17px;
+}
+
+  .uppy-DragDrop--is-dragdrop-supported {
+    border: 2px dashed;
+    border-color: lighten($color-gray, 10%);
   }
 
-  .uppy-DragDrop-arrow {
-    width: 60px;
-    height: 60px;
-    fill: lighten($color-gray, 30%);
-    margin-bottom: 17px;
-  }
-
-    .uppy-DragDrop--is-dragdrop-supported {
-      border: 2px dashed;
-      border-color: lighten($color-gray, 10%);
-    }
-
-    // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText {
-    //   display: inline;
-    // }
-
-    .uppy-DragDrop-container.drag {
-      border-color: $color-gray;
-      background-color: darken($color-white, 10%);
-    }
-
-    .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
-      fill: $color-gray;
-    }
-
-  .uppy-DragDrop-label {
-    display: block;
-    cursor: pointer;
-    font-size: 1.15em;
-    margin-bottom: 5px;
-  }
+  // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText {
+  //   display: inline;
+  // }
 
-  .uppy-DragDrop-note {
-    font-size: 1em;
-    color: lighten($color-gray, 10%);
+  .uppy-DragDrop-container.drag {
+    border-color: $color-gray;
+    background-color: darken($color-white, 10%);
   }
 
-  .uppy-DragDrop-dragText {
-    color: $color-cornflower-blue;
+  .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
+    fill: $color-gray;
   }
 
-// }
+.uppy-DragDrop-label {
+  display: block;
+  cursor: pointer;
+  font-size: 1.15em;
+  margin-bottom: 5px;
+}
+
+.uppy-DragDrop-note {
+  font-size: 1em;
+  color: lighten($color-gray, 10%);
+}
+
+.uppy-DragDrop-dragText {
+  color: $color-cornflower-blue;
+}

packages/@uppy/file-input/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-FileInput-container {
   margin-bottom: 15px;

packages/@uppy/informer/src/style.scss

@@ -1,5 +1,5 @@
-@import '@uppy/core/src/style.scss';
-@import '@uppy/utils/src/microtip.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-Informer {
   position: absolute;

packages/@uppy/progress-bar/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-ProgressBar {
   /* no important */

packages/@uppy/provider-views/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-DashboardContent-panelBody {
   display: flex;

packages/@uppy/status-bar/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 @import '@uppy/utils/src/microtip.scss';
 
 .uppy-StatusBar {

packages/@uppy/url/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-Url {
   width: 100%;

packages/@uppy/webcam/src/style.scss

@@ -1,4 +1,5 @@
-@import '@uppy/core/src/style.scss';
+@import '@uppy/core/src/_utils.scss';
+@import '@uppy/core/src/_variables.scss';
 
 .uppy-Webcam-container {
   width: 100%;

website/src/docs/dashboard.md

@@ -43,11 +43,18 @@ const Dashboard = Uppy.Dashboard
 
 ## CSS
 
-The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+The `@uppy/dashboard` plugin comes with a CSS file for styling:
 
-The CSS file lives at `@uppy/dashboard/dist/style.css`. A minified version is at `@uppy/dashboard/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
 
-Import one of these files into your project. The way to do this depends on your build system.
+Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well.
 
 ## Options
 

website/src/docs/dragdrop.md

@@ -39,9 +39,12 @@ const DragDrop = Uppy.DragDrop
 
 The `@uppy/drag-drop` plugin includes some simple styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead.
 
-The CSS file lives at `@uppy/drag-drop/dist/style.css`. A minified version is at `@uppy/drag-drop/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+```
 
-Import one of these files into your project. The way to do this depends on your build system.
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Drag & Drop styles from `@uppy/drag-drop/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
 ## Options
 

website/src/docs/fileinput.md

@@ -42,9 +42,12 @@ const FileInput = Uppy.FileInput
 
 The `@uppy/file-input` plugin includes some simple styles for use with the [`pretty`](#pretty-true) option, like shown in the [example](/examples/xhrupload). You can also choose not to use it and provide your own styles instead.
 
-The CSS file lives at `@uppy/file-input/dist/style.css`. A minified version is at `@uppy/file-input/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/file-input/dist/style.css'
+```
 
-Import one of these files into your project. The way to do this depends on your build system.
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Drag & Drop styles from `@uppy/file-input/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
 ## Options
 

website/src/docs/index.md

@@ -67,9 +67,14 @@ npm install @uppy/core @uppy/xhr-upload @uppy/dashboard
 ```
 
 ```js
+// Import the plugins
 const Uppy = require('@uppy/core')
 const XHRUpload = require('@uppy/xhr-upload')
 const Dashboard = require('@uppy/dashboard')
+
+// And their styles (for UI plugins)
+require('@uppy/core/dist/style.css')
+require('@uppy/dashboard/dist/style.css')
  
 const uppy = Uppy()
   .use(Dashboard, {

website/src/docs/informer.md

@@ -40,11 +40,16 @@ const Informer = Uppy.Informer
 
 ## CSS
 
-The `@uppy/informer` plugin includes CSS a file for styling. If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Informer, because the Dashboard already includes it.
+The `@uppy/informer` plugin comes with a CSS file for styling:
 
-The CSS file lives at `@uppy/informer/dist/style.css`. A minified version is at `@uppy/informer/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/informer/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/informer/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
-Import one of these files into your project. The way to do this depends on your build system.
+⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.
 
 ## Options
 

website/src/docs/progressbar.md

@@ -37,6 +37,19 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const ProgressBar = Uppy.ProgressBar
 ```
 
+## CSS
+
+The `@uppy/progress-bar` plugin comes with a CSS file for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/progress-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/progress-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.
+
 ## Options
 
 The `@uppy/progress-bar` plugin has the following configurable options:

website/src/docs/statusbar.md

@@ -38,11 +38,16 @@ const StatusBar = Uppy.StatusBar
 
 ## CSS
 
-The `@uppy/status-bar` plugin includes a CSS file for styling. If you are using the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the StatusBar, because the Dashboard already includes it.
+The `@uppy/status-bar` plugin comes with a CSS file for styling:
 
-The CSS file lives at `@uppy/status-bar/dist/style.css`. A minified version can be found at `@uppy/status-bar/dist/style.min.css`.
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/status-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/status-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
 
-Import one of these files into your project. The way to do this depends on your build system.
+⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.
 
 ## Options
 

website/src/docs/url.md

@@ -36,6 +36,17 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Url = Uppy.Url
 ```
 
+## CSS
+
+The `@uppy/url` plugin comes with a CSS file for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/url/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/url/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Options
 
 The `@uppy/url` plugin has the following configurable options:

website/src/docs/webcam.md

@@ -36,6 +36,17 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Webcam = Uppy.Webcam
 ```
 
+## CSS
+
+The `@uppy/webcam` plugin comes with a CSS file for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/webcam/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/webcam/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Options
 
 The `@uppy/webcam` plugin has the following configurable options: