feature(MultipleCssFiles) #22 Concat all custom styles to a single (#26)

* feature(MultipleCssFiles) #22 Concat all custom styles to a single <style> * feature(MultipleCssFiles) #22 Concat all custom styles to a single <style> Co-authored-by: Ruslan Kazakov <[email protected]>
rkazakov · Jul 1, 2022 · cf43fc1 · cf43fc1
1 parent e813f1a
commit cf43fc1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/index.js b/index.js
@@ -162,35 +162,34 @@ module.exports = (html, options, canonicalURL) => {
     }
   });
 
+  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;
     };
 
     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) {
-        const response = responses[src];
-        if (response === true) {
-          throw new Error('No CSS for', src);
-        }
-        file = setFile(response.data);
+        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;

diff --git a/test/styles.test.js b/test/styles.test.js
@@ -4,8 +4,15 @@ const assert = require('./assert');
 describe('inline styles', () => {
   test('should inject inline css into style tag', () => {
     assert(
-      '<link rel="stylesheet" href="styles.css">',
-      '<style amp-custom="">body{background-color:#fff}</style>',
+      '<head><link rel="stylesheet" href="styles.css"></head>',
+      '<head><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><style amp-custom="">body{background-color:#fff}</style></head>',
+      { cwd: __dirname.split(path.sep).pop() },
+    );
+  });
+  test('should inject inline css into style tag on multiple files', () => {
+    assert(
+      '<head><link rel="stylesheet" href="styles.css"><link rel="stylesheet" href="styles1.css"></head>',
+      '<head><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><style amp-custom="">body{background-color:#fff}footer{background-color:#fff}</style></head>',
       { cwd: __dirname.split(path.sep).pop() },
     );
   });

diff --git a/test/styles1.css b/test/styles1.css
@@ -0,0 +1,3 @@
+footer {
+  background-color: #FFF;
+}