feature(MultipleCssFiles) rkazakov#22 Concat all custom styles to a s…

…ingle <style>

index.js

@@ -113,31 +113,35 @@ module.exports = (html, options) => {
     }
   });
 
+  let inlineCss = '';
   /* inline styles */
   $('link[rel=stylesheet]').each((index, element) => {
     const src = $(element).attr('href');
     let path = src;
-    let file = '';
     const setFile = (data) => {
-      const minified = new CleanCss().minify(data).styles;
-      return `<style amp-custom>${minified}</style>`;
+      return new CleanCss().minify(data).styles;
+      // return `<style amp-custom>${minified}</style>`;
     };
 
     try {
       if (src.indexOf('//') === -1) {
         path = `${options.cwd}/${src}`;
         if (fs.existsSync(path)) {
-          file = setFile(String(fs.readFileSync(path)));
+          inlineCss += setFile(String(fs.readFileSync(path)));
         }
       } else if (src.indexOf('//') !== -1) {
-        file = setFile(String(request('GET', path).body));
+        inlineCss += setFile(String(request('GET', path).body));
       }
     } catch (err) {
       console.dir(err);
     }
-    $(element).replaceWith(file);
+    $(element).remove();
   });
 
+  if (inlineCss !== '') {
+    $('head').append(`<style amp-custom>${inlineCss}</style>`);
+  }
+
   /* youtube */
   $('iframe[src*="http://www.youtube.com"],iframe[src*="https://www.youtube.com"],iframe[src*="http://youtu.be/"],iframe[src*="https://youtu.be/"]').each((index, element) => {
     youtube = true;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ampify",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Convert plain HTML to Google Accelerated Mobile Pages (AMP)",
   "main": "index.js",
   "author": {

test/styles1.css

@@ -0,0 +1,3 @@
+footer {
+  background-color: #FFF;
+}