parcel-bundler · devongovett · Jul 21, 2018 · May 29, 2018 · May 29, 2018 · Jun 14, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@
 
 ## Getting started
 
-1. Install with yarn:
+1.  Install with yarn:
 
 ```shell
 yarn global add parcel-bundler
@@ -37,7 +37,7 @@ or with npm:
 npm install -g parcel-bundler
 ```
 
-2. Parcel can take any type of file as an entry point, but an HTML or JavaScript file is a good place to start. If you link your main JavaScript file in the HTML using a relative path, Parcel will also process it for you, and replace the reference with a URL to the output file.
+2.  Parcel can take any type of file as an entry point, but an HTML or JavaScript file is a good place to start. If you link your main JavaScript file in the HTML using a relative path, Parcel will also process it for you, and replace the reference with a URL to the output file.
 
 ```html
 <html>
@@ -47,13 +47,13 @@ npm install -g parcel-bundler
 </html>
 ```
 
-3. Parcel has a development server built in, which will automatically rebuild your app as you change files and supports hot module replacement for fast development. Just point it at your entry file:
+3.  Parcel has a development server built in, which will automatically rebuild your app as you change files and supports hot module replacement for fast development. Just point it at your entry file:
 
 ```shell
 parcel index.html
 ```
 
-4. Now open http://localhost:1234/ in your browser. If needed, you can also override the default port with the `-p` option. Add `--open` to automatically open a browser.
+4.  Now open http://localhost:1234/ in your browser. If needed, you can also override the default port with the `-p` option. Add `--open` to automatically open a browser.
 
 See [parceljs.org](https://parceljs.org) for more documentation!
 

diff --git a/package.json b/package.json
@@ -8,12 +8,7 @@
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
   },
-  "files": [
-    "bin/",
-    "lib/",
-    "src/",
-    "index.js"
-  ],
+  "files": ["bin/", "lib/", "src/", "index.js"],
   "dependencies": {
     "ansi-to-html": "^0.6.4",
     "babel-code-frame": "^6.26.0",
@@ -114,10 +109,13 @@
     "format": "prettier --write \"./{src,bin,test}/**/*.{js,json,md}\"",
     "build": "yarn minify && babel src -d lib && ncp src/builtins lib/builtins",
     "prepublish": "yarn build",
-    "minify": "terser -c -m -o src/builtins/prelude.min.js src/builtins/prelude.js && terser -c -m -o src/builtins/prelude2.min.js src/builtins/prelude2.js",
+    "minify":
+      "terser -c -m -o src/builtins/prelude.min.js src/builtins/prelude.js && terser -c -m -o src/builtins/prelude2.min.js src/builtins/prelude2.js",
     "precommit": "npm run lint && lint-staged",
-    "lint": "eslint . && prettier \"./{src,bin,test}/**/*.{js,json,md}\" --list-different",
-    "postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mLove Parcel? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/parcel/donate\\u001b[0m')\""
+    "lint":
+      "eslint . && prettier \"./{src,bin,test}/**/*.{js,json,md}\" --list-different",
+    "postinstall":
+      "node -e \"console.log('\\u001b[35m\\u001b[1mLove Parcel? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/parcel/donate\\u001b[0m')\""
   },
   "bin": {
     "parcel": "bin/cli.js"
@@ -126,10 +124,7 @@
     "node": ">= 6.0.0"
   },
   "lint-staged": {
-    "*.{js,json,md}": [
-      "prettier --write",
-      "git add"
-    ]
+    "*.{js,json,md}": ["prettier --write", "git add"]
   },
   "collective": {
     "type": "opencollective",

diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js
@@ -61,6 +61,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: {
@@ -172,8 +177,97 @@ 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) {
+            let type;
+
+            if (node.tag === 'style') {
+              if (node.attrs && node.attrs.type) {
+                type = node.attrs.type.replace('text/', '');
+              } else {
+                type = 'css';
+              }
+            } else {
+              if (node.attrs && node.attrs.type) {
+                if (SCRIPT_TYPES[node.attrs.type]) {
+                  type = SCRIPT_TYPES[node.attrs.type];
+                } else {
+                  type = node.attrs.type.replace('application/', '');
+                }
+              } else {
+                type = 'js';
+              }
+            }
+
+            parts.push({type, value});
+
+            if (!node.attrs) {
+              node.attrs = {};
+            }
+
+            if (node.tag === 'style') {
+              node.attrs.type = 'text/css';
+            } else if (node.attrs && !SCRIPT_TYPES[node.attrs.type]) {
+              node.attrs.type = 'application/javascript';
+            }
+          }
+        }
+      }
+
+      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 CSS HMR & sourcemaps
+    // Related: https://github.com/parcel-bundler/parcel/issues/1389
+    generated = generated.filter(
+      generatedAsset =>
+        !(
+          (generatedAsset.type === 'js' && generatedAsset.value === '') ||
+          generatedAsset.type === 'map' ||
+          generatedAsset.value.includes('_css_loader')
+        )
+    );
+
+    // 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)
+      }
+    ];
   }
 }
 

diff --git 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/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,69 @@ 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 type="text/css">.index{color:#00f}</style>'));
+  });
+
+  it.only('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!")'));
+  });
 });
diff --git a/test/integration/html-inline-coffeescript/index.html 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>
diff --git a/test/integration/html-inline-js/index.html 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>
diff --git a/test/integration/html-inline-sass/index.html 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>
diff --git a/test/integration/html-inline-styles/bg.jpg b/test/integration/html-inline-styles/bg.jpg
diff --git a/test/integration/html-inline-styles/img.jpg b/test/integration/html-inline-styles/img.jpg
diff --git a/test/integration/html-inline-styles/index.html 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>