Some changes to the build process:

- Added PostCSS, mostly so that cssnano could be used. This is a CSS minifier that makes many focused optimizations. With this, I was able to shave about 2% off the final build. It's not much, but as the project matures, it may be good to be proactive.
- Since cssnano was added, I removed CleanCSS. This necessitated some changes, notably that errors/warnings are no longer captured since PostCSS doesn't provide those in its own results process.
- Changed division of length to 1024, since a kilobyte is 2^10 bytes, not 1000.

index.html

@@ -31,7 +31,7 @@
     <p>
       Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any
       preprocessing at all. The minified version is only
-      <span data-minifiedSize>31KB</span> and much smaller when gzipped.
+      <span data-minifiedSize>29KB</span> and much smaller when gzipped.
     </p>
     <p>
       Just link to <code>shoelace.css</code> and add customizations to your stylesheet.

package.json

@@ -11,11 +11,13 @@
   },
   "devDependencies": {
     "chalk": "^2.0.1",
-    "clean-css": "^4.1.7",
     "commander": "^2.11.0",
+    "cssnano": "^3.10.0",
     "del": "^3.0.0",
     "dotenv": "^4.0.0",
     "fs": "0.0.1-security",
+    "postcss": "^6.0.8",
+    "postcss-import": "^10.0.0",
     "s3": "^4.4.0"
   }
 }

shoelace.js

@@ -3,13 +3,15 @@
 global.__version = require('./package.json').version;
 
 require('dotenv').config();
-const CleanCSS = require('clean-css');
 const Chalk = require('chalk');
 const Del = require('del');
 const FS = require('fs');
 const Path = require('path');
 const Program = require('commander');
 const S3 = require('s3');
+const postcss = require('postcss');
+const cssnano = require('cssnano');
+const atImport = require('postcss-import');
 
 let source = Path.join(__dirname, 'source/css');
 let dist = Path.join(__dirname, 'dist');
@@ -37,41 +39,39 @@ if(!process.argv.slice(2).length) {
 
 // Run build task
 if(Program.build) {
-  const clean = new CleanCSS({
-    // format: 'beautify',
-    inline: ['local'],
-    rebaseTo: Path.dirname(dist),
-    specialComments: 'all'
-  });
-
   Promise.resolve()
     // Generate minified version
-    .then(() => new Promise((resolve, reject) => {
-      clean.minify({
-        [inFile]: { styles: FS.readFileSync(inFile, 'utf8') }
-      }, (errors, output) => {
-        // Show errors
-        if(errors) {
-          errors.forEach((err) => console.log(Chalk.red(err)));
-          reject(new Error('Failed to minify styles.'));
-          return;
+    .then(() => new Promise((resolve, reject) =>{
+      let css = FS.readFileSync(inFile, 'utf8');
+      let output = {
+        stats: {
+          originalSize: css.length
         }
+      }
 
+      postcss([atImport, cssnano({
+        safe: true
+      })]).process(css, {
+        from: inFile
+      }).then((result) => {
+        output.styles = result.css;
+        output.stats.minifiedSize = output.styles.length;
         resolve(output);
+      }).catch((err) => {
+        reject(err);
       });
-
     }))
     // Write dist files
     .then((output) => new Promise((resolve, reject) => {
       // Get stats
       let stats = {
-        originalSize: parseInt(output.stats.originalSize / 1000) + 'KB', // KB
-        minifiedSize: parseInt(output.stats.minifiedSize / 1000) + 'KB' // KB
+        originalSize: parseInt(output.stats.originalSize / 1024) + 'KB', // KB
+        minifiedSize: parseInt(output.stats.minifiedSize / 1024) + 'KB' // KB
       };
 
       // Show output warnings and errors
-      output.warnings.forEach((err) => console.log(Chalk.red(err)));
-      output.errors.forEach((err) => console.log(Chalk.red(err)));
+      // output.warnings.forEach((err) => console.log(Chalk.red(err)));
+      // output.errors.forEach((err) => console.log(Chalk.red(err)));
 
       // Update placeholders in CSS
       output.styles = output.styles