Merge pull request #7 from malchata/master

Added postcss/cssnano, updated docs.

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>32KB</span> and much smaller when gzipped.
+      <span data-minifiedSize>31.4KB</span> and much smaller when gzipped.
     </p>
     <p>
       Just link to <code>shoelace.css</code> and add customizations to your stylesheet.
@@ -113,10 +113,14 @@
 <pre>
 &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta5</span>/shoelace.css&quot;&gt;
 </pre>
-    <p class="text-right">
-      <a href="https://www.keycdn.com/">
-        <img src="https://logos.keycdn.com/keycdn-logo.svg" alt="KeyCDN logo" class="width-20">
-      </a>
+    <p>
+      If you decide to use the CDN link, consider speeding up performance by adding a <code>preload</code> resource hint to give the browser a head start on loading the CSS. You can do this by adding this <code>Link</code> HTTP response header to your web server configuration for requests to pages:
+    </p>
+<pre>
+Link: &lt;https://cdn.shoelace.style/<span data-version>1.0.0-beta5</span>/shoelace.css&gt;; rel=preload; as=style; crossorigin
+</pre>
+    <p>
+      For more information on resource hints and how they work, <a href="https://www.w3.org/TR/resource-hints/" rel="noopener">check out the W3C specification</a>. You can also use <code>preload</code> even if you serve Shoelace from your own server.
     </p>
 
     <h3 id="download">Download</h3>

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,42 +39,36 @@ 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: (output.stats.originalSize / 1024).toFixed(1) + 'KB', // KB
+        minifiedSize: (output.stats.minifiedSize / 1024).toFixed(1) + '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)));
-
       // Update placeholders in CSS
       output.styles = output.styles
         .replace(/\{version\}/g, __version)