From 7423541be5bb5974e13862190ba82899ebaa0367 Mon Sep 17 00:00:00 2001
From: Jasper De Moor <jasperdemoor@gmail.com>
Date: Sat, 21 Jul 2018 10:57:21 -0700
Subject: [PATCH] Process inline styles and scripts (#1456)

---
 src/Pipeline.js                               |   6 +
 src/assets/CSSAsset.js                        |  27 ++--
 src/assets/HTMLAsset.js                       |  95 +++++++++++++-
 src/transforms/htmlnano.js                    |  13 +-
 src/visitors/dependencies.js                  |  12 ++
 test/html.js                                  | 116 +++++++++++++++++-
 .../html-inline-coffeescript/index.html       |  11 ++
 .../html-inline-css-import/index.html         |   8 ++
 .../html-inline-css-import/test.css           |   3 +
 .../html-inline-js-require/index.html         |   8 ++
 .../html-inline-js-require/test.js            |   1 +
 test/integration/html-inline-js/index.html    |  23 ++++
 test/integration/html-inline-sass/index.html  |  12 ++
 test/integration/html-inline-styles/bg.jpg    |   1 +
 test/integration/html-inline-styles/img.jpg   |   1 +
 .../integration/html-inline-styles/index.html |  20 +++
 16 files changed, 337 insertions(+), 20 deletions(-)
 create mode 100644 test/integration/html-inline-coffeescript/index.html
 create mode 100644 test/integration/html-inline-css-import/index.html
 create mode 100644 test/integration/html-inline-css-import/test.css
 create mode 100644 test/integration/html-inline-js-require/index.html
 create mode 100644 test/integration/html-inline-js-require/test.js
 create mode 100644 test/integration/html-inline-js/index.html
 create mode 100644 test/integration/html-inline-sass/index.html
 create mode 100644 test/integration/html-inline-styles/bg.jpg
 create mode 100644 test/integration/html-inline-styles/img.jpg
 create mode 100644 test/integration/html-inline-styles/index.html

diff --git a/src/Pipeline.js b/src/Pipeline.js
index 16c9a9c5b02..4d20622ae3c 100644
--- a/src/Pipeline.js
+++ b/src/Pipeline.js
@@ -65,6 +65,12 @@ class Pipeline {
         subAsset.cacheData = Object.assign(asset.cacheData, subAsset.cacheData);
 
         let processed = await this.processAsset(subAsset);
+        if (rendition.meta) {
+          for (let res of processed) {
+            res.meta = rendition.meta;
+          }
+        }
+
         generated = generated.concat(processed);
         asset.hash = md5(asset.hash + subAsset.hash);
       } else {
diff --git a/src/assets/CSSAsset.js b/src/assets/CSSAsset.js
index 4cf066ac1f0..db4631ef53a 100644
--- a/src/assets/CSSAsset.js
+++ b/src/assets/CSSAsset.js
@@ -29,19 +29,19 @@ class CSSAsset extends Asset {
 
   collectDependencies() {
     this.ast.root.walkAtRules('import', rule => {
-      let params = valueParser(rule.params).nodes;
-      let [name, ...media] = params;
+      let params = valueParser(rule.params);
+      let [name, ...media] = params.nodes;
       let dep;
-      if (name.type === 'string') {
-        dep = name.value;
-      } else if (
+      if (
         name.type === 'function' &&
         name.value === 'url' &&
         name.nodes.length
       ) {
-        dep = name.nodes[0].value;
+        name = name.nodes[0];
       }
 
+      dep = name.value;
+
       if (!dep) {
         throw new Error('Could not find import name for ' + rule);
       }
@@ -50,10 +50,19 @@ class CSSAsset extends Asset {
         return;
       }
 
-      media = valueParser.stringify(media).trim();
-      this.addDependency(dep, {media, loc: rule.source.start});
+      // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
+      // TODO: run CSSPackager on inline style tags.
+      let inlineHTML =
+        this.options.rendition && this.options.rendition.inlineHTML;
+      if (inlineHTML) {
+        name.value = this.addURLDependency(dep, {loc: rule.source.start});
+        rule.params = params.toString();
+      } else {
+        media = valueParser.stringify(media).trim();
+        this.addDependency(dep, {media, loc: rule.source.start});
+        rule.remove();
+      }
 
-      rule.remove();
       this.ast.dirty = true;
     });
 
diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js
index 2dd0f56de65..81ace3252cf 100644
--- a/src/assets/HTMLAsset.js
+++ b/src/assets/HTMLAsset.js
@@ -61,6 +61,12 @@ const META = {
   ]
 };
 
+const SCRIPT_TYPES = {
+  'application/javascript': 'js',
+  'text/javascript': 'js',
+  'application/json': false
+};
+
 // Options to be passed to `addURLDependency` for certain tags + attributes
 const OPTIONS = {
   a: {
@@ -172,8 +178,93 @@ class HTMLAsset extends Asset {
     }
   }
 
-  generate() {
-    return this.isAstDirty ? render(this.ast) : this.contents;
+  async generate() {
+    // Extract inline <script> and <style> tags for processing.
+    let parts = [];
+    this.ast.walk(node => {
+      if (node.tag === 'script' || node.tag === 'style') {
+        let value = node.content && node.content.join('').trim();
+        if (value) {
+          let type;
+
+          if (node.tag === 'style') {
+            if (node.attrs && node.attrs.type) {
+              type = node.attrs.type.split('/')[1];
+            } else {
+              type = 'css';
+            }
+          } else if (node.attrs && node.attrs.type) {
+            // Skip JSON
+            if (SCRIPT_TYPES[node.attrs.type] === false) {
+              return node;
+            }
+
+            if (SCRIPT_TYPES[node.attrs.type]) {
+              type = SCRIPT_TYPES[node.attrs.type];
+            } else {
+              type = node.attrs.type.split('/')[1];
+            }
+          } else {
+            type = 'js';
+          }
+
+          parts.push({
+            type,
+            value,
+            inlineHTML: true,
+            meta: {
+              type: 'tag',
+              node
+            }
+          });
+        }
+      }
+
+      // Process inline style attributes.
+      if (node.attrs && node.attrs.style) {
+        parts.push({
+          type: 'css',
+          value: node.attrs.style,
+          meta: {
+            type: 'attr',
+            node
+          }
+        });
+      }
+
+      return node;
+    });
+
+    return parts;
+  }
+
+  async postProcess(generated) {
+    // Replace inline scripts and styles with processed results.
+    for (let rendition of generated) {
+      let {type, node} = rendition.meta;
+      if (type === 'attr' && rendition.type === 'css') {
+        node.attrs.style = rendition.value;
+      } else if (type === 'tag') {
+        if (
+          (rendition.type === 'js' && node.tag === 'script') ||
+          (rendition.type === 'css' && node.tag === 'style')
+        ) {
+          node.content = rendition.value;
+        }
+
+        // Delete "type" attribute, since CSS and JS are the defaults.
+        if (node.attrs) {
+          delete node.attrs.type;
+        }
+      }
+    }
+
+    return [
+      {
+        type: 'html',
+        value: render(this.ast)
+      }
+    ];
   }
 }
 
diff --git a/src/transforms/htmlnano.js b/src/transforms/htmlnano.js
index 96acbf7dd8c..44e22153a4f 100644
--- a/src/transforms/htmlnano.js
+++ b/src/transforms/htmlnano.js
@@ -4,10 +4,17 @@ const htmlnano = require('htmlnano');
 module.exports = async function(asset) {
   await asset.parseIfNeeded();
 
-  let htmlNanoConfig = await asset.getConfig(
-    ['.htmlnanorc', '.htmlnanorc.js'],
-    {packageKey: 'htmlnano'}
+  let htmlNanoConfig = Object.assign(
+    {},
+    await asset.getConfig(['.htmlnanorc', '.htmlnanorc.js'], {
+      packageKey: 'htmlnano'
+    }),
+    {
+      minifyCss: false,
+      minifyJs: false
+    }
   );
+
   let res = await posthtml([htmlnano(htmlNanoConfig)]).process(asset.ast, {
     skipParse: true
   });
diff --git a/src/visitors/dependencies.js b/src/visitors/dependencies.js
index fb2db76948d..806209cc4be 100644
--- a/src/visitors/dependencies.js
+++ b/src/visitors/dependencies.js
@@ -156,6 +156,18 @@ function addDependency(asset, node, opts = {}) {
     return;
   }
 
+  // If this came from an inline <script> tag, throw an error.
+  // TODO: run JSPackager on inline script tags.
+  let inlineHTML =
+    asset.options.rendition && asset.options.rendition.inlineHTML;
+  if (inlineHTML) {
+    let err = new Error(
+      'Imports and requires are not supported inside inline <script> tags yet.'
+    );
+    err.loc = node.loc && node.loc.start;
+    throw err;
+  }
+
   if (!asset.options.bundleNodeModules) {
     const isRelativeImport = /^[/~.]/.test(node.value);
     if (!isRelativeImport) return;
diff --git a/test/html.js b/test/html.js
index a88a68d3853..f2df83c6f2f 100644
--- a/test/html.js
+++ b/test/html.js
@@ -283,16 +283,16 @@ describe('html', function() {
 
     let html = await fs.readFile(__dirname + '/dist/index.html', 'utf8');
 
-    // mergeStyles
+    // minifyJson
     assert(
-      html.includes(
-        '<style>h1{color:red}div{font-size:20px}</style><style media="print">div{color:blue}</style>'
-      )
+      html.includes('<script type="application/json">{"user":"me"}</script>')
     );
 
-    // minifyJson
+    // mergeStyles
     assert(
-      html.includes('<script type="application/json">{"user":"me"}</script>')
+      html.includes(
+        '<style>h1{color:red}div{font-size:20px}</style><style media="print">div{color:#00f}</style>'
+      )
     );
 
     // minifySvg is false
@@ -589,4 +589,108 @@ describe('html', function() {
       ]
     });
   });
+
+  it('should process inline JS', async function() {
+    let b = await bundle(__dirname + '/integration/html-inline-js/index.html', {
+      production: true
+    });
+
+    const bundleContent = (await fs.readFile(b.name)).toString();
+    assert(!bundleContent.includes('someArgument'));
+  });
+
+  it('should process inline styles', async function() {
+    let b = await bundle(
+      __dirname + '/integration/html-inline-styles/index.html',
+      {production: true}
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html'],
+      childBundles: [
+        {
+          type: 'jpg',
+          assets: ['bg.jpg'],
+          childBundles: []
+        },
+        {
+          type: 'jpg',
+          assets: ['img.jpg'],
+          childBundles: []
+        }
+      ]
+    });
+  });
+
+  it('should process inline styles using lang', async function() {
+    let b = await bundle(
+      __dirname + '/integration/html-inline-sass/index.html',
+      {production: true}
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html']
+    });
+
+    let html = await fs.readFile(__dirname + '/dist/index.html', 'utf8');
+
+    assert(html.includes('<style>.index{color:#00f}</style>'));
+  });
+
+  it('should process inline non-js scripts', async function() {
+    let b = await bundle(
+      __dirname + '/integration/html-inline-coffeescript/index.html',
+      {production: true}
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html']
+    });
+
+    let html = await fs.readFile(__dirname + '/dist/index.html', 'utf8');
+
+    assert(html.includes('alert("Hello, World!")'));
+  });
+
+  it('should handle inline css with @imports', async function() {
+    let b = await bundle(
+      __dirname + '/integration/html-inline-css-import/index.html',
+      {production: true}
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html'],
+      childBundles: [
+        {
+          type: 'css',
+          assets: ['test.css']
+        }
+      ]
+    });
+
+    let html = await fs.readFile(__dirname + '/dist/index.html', 'utf8');
+    assert(html.includes('@import'));
+  });
+
+  it('should error on imports and requires in inline <script> tags', async function() {
+    let err;
+    try {
+      await bundle(
+        __dirname + '/integration/html-inline-js-require/index.html',
+        {production: true}
+      );
+    } catch (e) {
+      err = e;
+    }
+
+    assert(err);
+    assert.equal(
+      err.message,
+      'Imports and requires are not supported inside inline <script> tags yet.'
+    );
+  });
 });
diff --git a/test/integration/html-inline-coffeescript/index.html b/test/integration/html-inline-coffeescript/index.html
new file mode 100644
index 00000000000..2f6cc931d76
--- /dev/null
+++ b/test/integration/html-inline-coffeescript/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Inline JavaScript Parcel</title>
+</head>
+<body>
+  <script type="application/coffee">
+    alert "Hello, World!"
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/integration/html-inline-css-import/index.html b/test/integration/html-inline-css-import/index.html
new file mode 100644
index 00000000000..69ef7a89736
--- /dev/null
+++ b/test/integration/html-inline-css-import/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <style>
+    @import './test.css';  
+  </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/integration/html-inline-css-import/test.css b/test/integration/html-inline-css-import/test.css
new file mode 100644
index 00000000000..454e0aae0d6
--- /dev/null
+++ b/test/integration/html-inline-css-import/test.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red
+}
\ No newline at end of file
diff --git a/test/integration/html-inline-js-require/index.html b/test/integration/html-inline-js-require/index.html
new file mode 100644
index 00000000000..db239f85561
--- /dev/null
+++ b/test/integration/html-inline-js-require/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <script>
+    require('./test');
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/integration/html-inline-js-require/test.js b/test/integration/html-inline-js-require/test.js
new file mode 100644
index 00000000000..4b2e66372c8
--- /dev/null
+++ b/test/integration/html-inline-js-require/test.js
@@ -0,0 +1 @@
+console.log('test')
diff --git a/test/integration/html-inline-js/index.html b/test/integration/html-inline-js/index.html
new file mode 100644
index 00000000000..edcdbc27493
--- /dev/null
+++ b/test/integration/html-inline-js/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Inline JavaScript Parcel</title>
+</head>
+<body>
+  <script>
+    var hello = "Hello";
+    let getHello = (someArgument) => {
+      return someArgument;
+    }
+  </script>
+  <script>
+    var world = "world";
+  </script>
+  <script>
+    var end = "!";
+  </script>
+  <script>
+    console.log(`${hello} ${world}${end}`);
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/integration/html-inline-sass/index.html b/test/integration/html-inline-sass/index.html
new file mode 100644
index 00000000000..51d5848b1dd
--- /dev/null
+++ b/test/integration/html-inline-sass/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Inline JavaScript Parcel</title>
+</head>
+<body>
+  <style type="text/sass">
+    .index
+      color: blue
+  </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/integration/html-inline-styles/bg.jpg b/test/integration/html-inline-styles/bg.jpg
new file mode 100644
index 00000000000..084f7b47390
--- /dev/null
+++ b/test/integration/html-inline-styles/bg.jpg
@@ -0,0 +1 @@
+This is a background image
\ No newline at end of file
diff --git a/test/integration/html-inline-styles/img.jpg b/test/integration/html-inline-styles/img.jpg
new file mode 100644
index 00000000000..ff5ab932824
--- /dev/null
+++ b/test/integration/html-inline-styles/img.jpg
@@ -0,0 +1 @@
+This should be an image
\ No newline at end of file
diff --git a/test/integration/html-inline-styles/index.html b/test/integration/html-inline-styles/index.html
new file mode 100644
index 00000000000..8379ebc2c5c
--- /dev/null
+++ b/test/integration/html-inline-styles/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Inline JavaScript Parcel</title>
+</head>
+<body>
+  <style>
+    .someClass {
+      background: blue;
+      color: white;
+    }
+  </style>
+
+  <div class="someClass">
+    <h1 style="color: green;"></h1>
+    <p style="background: url(./img.jpg);"></p>
+    <p style="background-image: url(./bg.jpg);"></p>
+  </div>
+</body>
+</html>
\ No newline at end of file