Move stylesheets into packages.

bin/build-css

@@ -1,13 +0,0 @@
-#!/usr/bin/env bash
-set -o pipefail
-set -o errexit
-set -o nounset
-# set -o xtrace
-
-# Set magic variables for current file & dir
-__dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-__file="${__dir}/$(basename "${BASH_SOURCE[0]}")"
-__base="$(basename ${__file} .sh)"
-
-node_modules/.bin/node-sass src/scss/ \
-  --output dist/

bin/build-css.js

@@ -1,64 +1,77 @@
-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')
-var mkdirp = require('mkdirp')
+const sass = require('node-sass')
+const postcss = require('postcss')
+const autoprefixer = require('autoprefixer')
+const cssnano = require('cssnano')
+const safeImportant = require('postcss-safe-important')
+const chalk = require('chalk')
+const { promisify } = require('util')
+const fs = require('fs')
+const path = require('path')
+const resolve = require('resolve')
+const mkdirp = promisify(require('mkdirp'))
+const glob = promisify(require('glob'))
 
-mkdirp.sync('./dist/')
+const renderScss = promisify(sass.render)
+const writeFile = promisify(fs.writeFile)
+
+const cwd = process.cwd()
 
 function handleErr (err) {
   console.error(chalk.red('✗ Error:'), chalk.red(err.message))
 }
 
-function minifyCSS () {
-  return new Promise(function (resolve) {
-    fs.readFile('./dist/uppy.css', function (err, css) {
-      if (err) handleErr(err)
-      postcss([ cssnano ])
-        .process(css, { from: path.join(__dirname, '../dist/uppy.css') })
-        .then(function (postCSSResult) {
-          postCSSResult.warnings().forEach(function (warn) {
-            console.warn(warn.toString())
-          })
-          fs.writeFile('./dist/uppy.min.css', postCSSResult.css, function (err) {
-            if (err) handleErr(err)
-            console.info(chalk.green('✓ Minified Bundle CSS:'), chalk.magenta('uppy.min.css'))
-            resolve()
-          })
+async function compileCSS () {
+  const files = await glob('packages/{,@uppy/}*/src/style.scss')
+  for (const file of files) {
+    const scssResult = await renderScss({
+      file,
+      importedFiles: new Set(),
+      importer (url, from, done) {
+        resolve(url, {
+          basedir: path.dirname(from),
+          filename: from,
+          extensions: ['.scss']
+        }, (err, res) => {
+          if (err) return done(err)
+
+          res = fs.realpathSync(res)
+
+          if (this.options.importedFiles.has(res)) return done({ contents: '' })
+          this.options.importedFiles.add(res)
+
+          done({ file: res })
         })
-        .catch(err => handleErr(err))
+      }
     })
-  })
-}
 
-function compileCSS () {
-  return new Promise(function (resolve) {
-    sass.render({file: './src/scss/uppy.scss'}, function (err, sassResult) {
-      if (err) handleErr(err)
-      postcss([ autoprefixer, safeImportant ])
-        .process(sassResult.css, { from: path.join(__dirname, '../src/scss/uppy.scss') })
-        .then(function (postCSSResult) {
-          postCSSResult.warnings().forEach(function (warn) {
-            console.warn(warn.toString())
-          })
-          fs.writeFile('./dist/uppy.css', postCSSResult.css, function (err) {
-            if (err) handleErr(err)
-            console.info(chalk.green('✓ Built Uppy CSS:'), chalk.magenta('uppy.css'))
-            resolve()
-          })
-        })
-        .catch(err => handleErr(err))
+    const postcssResult = await postcss([ autoprefixer, safeImportant ])
+      .process(scssResult.css, { from: file })
+    postcssResult.warnings().forEach(function (warn) {
+      console.warn(warn.toString())
+    })
+
+    const outdir = path.join(path.dirname(file), '../dist')
+    const outfile = path.join(outdir, 'style.css')
+    await mkdirp(outdir)
+    await writeFile(outfile, postcssResult.css)
+    console.info(
+      chalk.green('✓ Built Uppy CSS:'),
+      chalk.magenta(path.relative(cwd, outfile))
+    )
+
+    const minifiedResult = await postcss([ cssnano ])
+        .process(postcssResult.css, { from: outfile })
+    minifiedResult.warnings().forEach(function (warn) {
+      console.warn(warn.toString())
     })
-  })
+    await writeFile(outfile.replace(/\.css$/, '.min.css'), minifiedResult.css)
+    console.info(
+      chalk.green('✓ Minified Bundle CSS:'),
+      chalk.magenta(path.relative(cwd, outfile).replace(/\.css$/, '.min.css'))
+    )
+  }
 }
 
-compileCSS()
-  .then(minifyCSS)
-  .then(function () {
-    console.info(chalk.yellow('✓ CSS Bundle 🎉'))
-  })
-  .catch(err => handleErr(err))
+compileCSS().then(() => {
+  console.info(chalk.yellow('✓ CSS Bundles 🎉'))
+}, handleErr)

packages/@uppy/core/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

@@ -0,0 +1,3 @@
+@import './_variables.scss';
+@import './_utils.scss';
+@import './_common.scss';

packages/@uppy/dashboard/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

@@ -1,3 +1,7 @@
+@import '@uppy/core/src/style.scss';
+@import '@uppy/informer/src/style.scss';
+@import '@uppy/statusbar/src/style.scss';
+
 .uppy-Dashboard--modal {
   z-index: $zIndex-2;
 }
@@ -37,7 +41,7 @@
       from { transform: translate3d(0, 0, 0); opacity: 1; }
       to { transform: translate3d(0, -20%, 0); opacity: 0; }
     }
-  
+
   .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-inner {
     animation: uppy-Dashboard-slideDownAndFadeIn--small 0.3s cubic-bezier(0, 0, .2, 1);
 
@@ -152,7 +156,7 @@
 }
 
 .uppy-Dashboard-close:hover {
-  color: $color-cornflower-blue; 
+  color: $color-cornflower-blue;
 }
 
 
@@ -1028,7 +1032,7 @@
 .uppy-DashboardFileCard {
   transform: translate3d(0, 0, 0);
   transition: transform 0.2s ease-in-out;
-  
+
   width: 100%;
   height: 100%;
   position: absolute;

packages/@uppy/drag-drop/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

@@ -1,3 +1,5 @@
+@import '@uppy/core/src/style.scss';
+
 // .Uppy {
 
   .uppy-DragDrop-container {
@@ -8,30 +10,30 @@
     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-container.is-dragdrop-supported .uppy-DragDrop-dragText {
     //   display: inline;
     // }
-  
+
     .uppy-DragDrop-container.drag {
       border-color: $color-gray;
       background-color: darken($color-white, 10%);
@@ -40,7 +42,7 @@
     .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
       fill: $color-gray;
     }
-  
+
   .uppy-DragDrop-label {
     display: block;
     cursor: pointer;
@@ -52,7 +54,7 @@
     font-size: 1em;
     color: lighten($color-gray, 10%);
   }
-  
+
   .uppy-DragDrop-dragText {
     color: $color-cornflower-blue;
   }

packages/@uppy/file-input/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

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

packages/@uppy/informer/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",
@@ -21,6 +22,7 @@
     "url": "git+https://github.com/transloadit/uppy.git"
   },
   "dependencies": {
+    "@uppy/utils": "^0.25.5",
     "preact": "^8.2.9"
   },
   "peerDependencies": {

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

@@ -1,3 +1,6 @@
+@import '@uppy/core/src/style.scss';
+@import '@uppy/utils/src/microtip.scss';
+
 .uppy-Informer {
   position: absolute;
   bottom: 0;

packages/@uppy/progress-bar/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

@@ -1,3 +1,5 @@
+@import '@uppy/core/src/style.scss';
+
 .uppy-ProgressBar {
   /* no important */
   position: absolute;

packages/@uppy/provider-views/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

@@ -1,3 +1,5 @@
+@import '@uppy/core/src/style.scss';
+
 .uppy-Provider-auth,
 .uppy-Provider-error,
 .uppy-Provider-loading,

packages/@uppy/statusbar/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

src/scss/_statusbar.scss → packages/@uppy/statusbar/src/style.scss

@@ -1,3 +1,6 @@
+@import '@uppy/core/src/style.scss';
+@import '@uppy/utils/src/microtip.scss';
+
 .uppy-StatusBar {
   display: flex;
   position: relative;

packages/@uppy/url/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

@@ -1,9 +1,11 @@
+@import '@uppy/core/src/style.scss';
+
 .uppy-Url {
-  width: 100%; 
-  height: 100%; 
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center; 
+  justify-content: center;
   align-items: center;
 }
 

packages/@uppy/webcam/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

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

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

packages/uppy/package.json

@@ -6,6 +6,7 @@
   "main": "index.js",
   "module": "index.mjs",
   "unpkg": "dist/uppy.min.js",
+  "style": "dist/style.min.css",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

packages/uppy/src/style.scss

@@ -0,0 +1,10 @@
+@import '@uppy/core/src/style.scss';
+@import '@uppy/dashboard/src/style.scss';
+@import '@uppy/drag-drop/src/style.scss';
+@import '@uppy/file-input/src/style.scss';
+@import '@uppy/informer/src/style.scss';
+@import '@uppy/progress-bar/src/style.scss';
+@import '@uppy/provider-views/src/style.scss';
+@import '@uppy/statusbar/src/style.scss';
+@import '@uppy/url/src/style.scss';
+@import '@uppy/webcam/src/style.scss';