Process inline styles and scripts

src/Bundler.js

@@ -207,9 +207,9 @@ class Bundler extends EventEmitter {
         });
       });
     }
-    
-    this.emit('buildStart', this.entryFiles)
-    
+
+    this.emit('buildStart', this.entryFiles);
+
     let isInitialBundle = !this.entryAssets;
     let startTime = Date.now();
     this.pending = true;

src/assets/HTMLAsset.js

@@ -62,6 +62,11 @@ const META = {
   ]
 };
 
+const SCRIPT_TYPES = {
+  'application/javascript': 'js',
+  'application/json': 'json'
+};
+
 // Options to be passed to `addURLDependency` for certain tags + attributes
 const OPTIONS = {
   a: {
@@ -160,8 +165,71 @@ class HTMLAsset extends Asset {
     }
   }
 
-  generate() {
-    return this.isAstDirty ? render(this.ast) : this.contents;
+  async generate() {
+    let parts = [];
+    this.ast.walk(node => {
+      if (node.tag === 'script' || node.tag === 'style') {
+        if (node.content) {
+          let value = node.content.join('').trim();
+          if (value) {
+            parts.push({
+              type:
+                node.tag === 'style'
+                  ? 'css'
+                  : node.attrs && node.attrs.type
+                    ? SCRIPT_TYPES[node.attrs.type] || 'js'
+                    : 'js',
+              value
+            });
+          }
+        }
+      }
+
+      if (node.attrs && node.attrs.style) {
+        parts.push({
+          type: 'css',
+          value: node.attrs.style
+        });
+      }
+
+      return node;
+    });
+
+    return parts;
+  }
+
+  async postProcess(generated) {
+    // Hacky way of filtering out the css hmr JS
+    // Related: https://github.com/parcel-bundler/parcel/issues/1389
+    generated = generated.filter(
+      generatedAsset =>
+        !(generatedAsset.type === 'js' && generatedAsset.value === '')
+    );
+
+    // Update processed inlined assets
+    let index = 0;
+    this.ast.walk(node => {
+      if (node.tag === 'script' || node.tag === 'style') {
+        if (node.content && node.content.join('').trim()) {
+          node.content = generated[index].value;
+          index++;
+        }
+      }
+
+      if (node.attrs && node.attrs.style) {
+        node.attrs.style = generated[index].value;
+        index++;
+      }
+
+      return node;
+    });
+
+    return [
+      {
+        type: 'html',
+        value: render(this.ast)
+      }
+    ];
   }
 }
 

src/assets/SASSAsset.js

@@ -27,18 +27,28 @@ class SASSAsset extends Asset {
       path.dirname(this.name)
     );
     opts.data = opts.data ? opts.data + os.EOL + code : code;
-    let type = this.options.rendition ? this.options.rendition.type : path.extname(this.name).toLowerCase().replace('.','');
-    opts.indentedSyntax = typeof opts.indentedSyntax === 'boolean' ? opts.indentedSyntax : type === 'sass';
+    let type = this.options.rendition
+      ? this.options.rendition.type
+      : path
+          .extname(this.name)
+          .toLowerCase()
+          .replace('.', '');
+    opts.indentedSyntax =
+      typeof opts.indentedSyntax === 'boolean'
+        ? opts.indentedSyntax
+        : type === 'sass';
 
     opts.functions = Object.assign({}, opts.functions, {
       url: node => {
         let filename = this.addURLDependency(node.getValue());
         return new sass.types.String(`url(${JSON.stringify(filename)})`);
       }
     });
-    
+
     opts.importer = opts.importer || [];
-    opts.importer = Array.isArray(opts.importer) ? opts.importer : [opts.importer];
+    opts.importer = Array.isArray(opts.importer)
+      ? opts.importer
+      : [opts.importer];
     opts.importer.push((url, prev, done) => {
       if (!/^(~|\.\/|\/)/.test(url)) {
         url = './' + url;

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
   });

test/html.js

@@ -277,11 +277,6 @@ describe('html', function() {
       )
     );
 
-    // minifyJson
-    assert(
-      html.includes('<script type="application/json">{"user":"me"}</script>')
-    );
-
     // minifySvg is false
     assert(
       html.includes(
@@ -576,4 +571,37 @@ 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: []
+        }
+      ]
+    });
+  });
 });

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>

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>