Process inline styles and scripts #1456

DeMoorJasper · 2018-05-29T11:45:05Z

This PR changes the behaviour of inline scripts and styles in html to be processed by Parcel, similar to how we process Vue Assets.

Adds the ability to use files in css and modern syntax in JS.

Also removes the need for any minification for JS or CSS from htmlnano

Closes #541 Closes #1297 Closes #1231 Closes #1491

DeMoorJasper · 2018-05-29T11:46:32Z

src/assets/HTMLAsset.js

+  async postProcess(generated) {
+    // Hacky way of filtering out the css hmr JS
+    // Related: https://github.com/parcel-bundler/parcel/issues/1389
+    generated = generated.filter(


This line might cause issues, related to this issue: #1389
There is currently no way to tell in generated you don't want the hmr code for css assets.

I think this won't work if HMR is actually enabled - the generated code won't be empty in that case.

Also probably need to filter out source maps or they'll mess up the indexing below

mohsen1 · 2018-05-29T15:30:34Z

src/assets/HTMLAsset.js

+        if (node.content) {
+          let value = node.content.join('').trim();
+          if (value) {
+            parts.push({


This is a bit too clever for my IQ 😅

stevengill · 2018-06-14T03:43:53Z

This PR looks great!

One thing I noticed is it doesn't handle inline background-image: url(./someImg.png). If i have that code in a css file, it works fine (realizes someImg.png is a dependency, hashes it and moves it over to dist, updates references to it)

I think it is handled in SASSAsset at https://github.com/parcel-bundler/parcel/blob/master/src/assets/SASSAsset.js#L41-L46 and CSSAsset at https://github.com/parcel-bundler/parcel/blob/master/src/assets/CSSAsset.js#L61-L77

DeMoorJasper · 2018-06-14T06:27:35Z

@stevengill Not sure what you mean, I got it to work in a new test I've added, could you create a small test-case that fails?

stevengill · 2018-06-14T18:56:04Z

my mistake @DeMoorJasper! Sorry about that. It is definiltey working. I tried it yesterday for a while and couldn't get it working. I think it was because I was using quotes in url("./SomeImg.png");

Thanks again!

stevengill · 2018-06-14T20:27:58Z

Alright, I've played around more with the branch and run into some issues.

I've got a sample repo with a index.html that renders fine with master branch (minus the background-image:url('./someImg.png').

With this branch, the styles are all messed up. I haven't tracked down what in the html is causing this to happen with this branch yet.

Please ignore the (text) in the html 😛. It is an internal email newsletter we sent out a while ago at work.

I'll continue to play around with this and see if I can figure out what is going on. It would be really nice if I could actually add some console.logs to HTMLAsset so I could debug this. My logs never show up though (parcel-bundler is yarn linked)

devongovett · 2018-07-04T20:43:44Z

This is cool. How are we going to handle imports/requires inside the inline scripts/styles though? We'd need to run the packager to merge the modules together somehow, and then put the result back in the HTML...

What happens right now when you put a require() call in your inline script?

devongovett · 2018-07-04T20:45:17Z

Or maybe we don't try to inline require at all, and make another external <script> tag before the inline one to load it?

DeMoorJasper · 2018-07-05T07:08:50Z

@devongovett I originally made this to prevent any posthtml issues with js or css transformations. If you'd like this to handle requires as well it should probably inline the full bundle including the requires.

Currently it works perfectly with requiring images and such in css which was one of the issues this PR resolves.

For JS it currently just creates the JS bundle and throws an error, the bundle doesn't get added to html using the script tag

devongovett · 2018-07-06T04:02:29Z

src/assets/HTMLAsset.js

@@ -62,6 +62,11 @@ const META = {
  ]
 };

+const SCRIPT_TYPES = {
+  'application/javascript': 'js',
+  'application/json': 'json'


parcel compiles json to javascript currently, so this might actually break things. haven't tested.

It does, and it does mess up the inlining, might have to look into that

devongovett · 2018-07-06T04:04:22Z

src/assets/HTMLAsset.js

+  async postProcess(generated) {
+    // Hacky way of filtering out the css hmr JS
+    // Related: https://github.com/parcel-bundler/parcel/issues/1389
+    generated = generated.filter(


I think this won't work if HMR is actually enabled - the generated code won't be empty in that case.

devongovett · 2018-07-06T04:04:42Z

src/assets/HTMLAsset.js

+  async postProcess(generated) {
+    // Hacky way of filtering out the css hmr JS
+    // Related: https://github.com/parcel-bundler/parcel/issues/1389
+    generated = generated.filter(


Also probably need to filter out source maps or they'll mess up the indexing below

devongovett · 2018-07-06T04:06:03Z

src/assets/HTMLAsset.js

+            parts.push({
+              type:
+                node.tag === 'style'
+                  ? 'css'


should we also support the type attribute on style elements as well to allow other languages like sass or stylus to be inlined in an HTML file? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

Sure, shouldn't be very hard

devongovett · 2018-07-06T04:06:35Z

test/html.js

@@ -277,11 +277,6 @@ describe('html', function() {
      )
    );

-    // minifyJson


why was this removed?

Because htmlnano is no longer responsible for JSON minifying, although this caused the tests to not show that it actually changed json into JS so I've put it back

devongovett · 2018-07-06T08:36:59Z

I do like the idea of this feature, we just have to make sure that it is not inconsistent with how the rest of parcel works. Extracting dependencies from inline CSS is obviously a good thing, but the fact that require/import/@import don't work inside script and style tags might be weird for people. That would also be the hardest thing to implement...

Maybe we start with this for now and design packagers in a way that's more compassable for Parcel 2 so that we can just use the CSS and JS packagers inside the HTML one for inline stuff. Then we can fully support require etc. at that time. In the mean time, we will still get the benefits of at least some of this.

QingLeiLi · 2018-07-06T11:27:57Z

@devongovett I`m glad to hear we have a plan to parcel2, anything else about the plan?

DeMoorJasper · 2018-07-06T11:35:47Z

Awesome, I’ll try to resolve those issues soonish

_{Sent with GitHawk}

RobertWHurst · 2018-07-18T00:10:56Z

test/html.js

@@ -638,4 +638,20 @@ describe('html', function() {

    assert(html.includes('<style type="text/css">.index{color:#00f}</style>'));
  });
+
+  it.only('should process inline non-js scripts', async function() {


Just a heads up, you've left an only call here

DeMoorJasper · 2018-07-18T00:22:59Z

Should be working in most cases now. If anyone would like to test this, please do.

devongovett · 2018-07-21T17:56:36Z

Simplified slightly so that we actually pass through the original nodes to the pipeline so we can more easily replace their contents in postProcess without hackiness to detect things like css hmr.

Also added some temporary handling for @import in <style> tags, and import/require in <script> tags. For CSS, the imports are not inlined as usual, but modified to point to the correct URL for a separate bundle. For JS, we just throw an error saying imports and requires aren't supported in inline scripts yet. This should be clearer than just not working at runtime.

process inline style && scripts

f09cfc5

DeMoorJasper commented May 29, 2018

View reviewed changes

minor fix

a612b82

mohsen1 reviewed May 29, 2018

View reviewed changes

DeMoorJasper mentioned this pull request Jun 4, 2018

Inline script imports are not bundled / copied #1492

Closed

KeineLimonade mentioned this pull request Jun 5, 2018

Script tags are not executed in the global scope and do not work after bundling #1491

Closed

add bg-img test

63cd6c8

devongovett mentioned this pull request Jul 4, 2018

Add support for collectting html inline-style dependencies(#541) #947

Closed

devongovett requested changes Jul 6, 2018

View reviewed changes

Merge branch 'master' into feature/inline-processing

d7e5e85

This was referenced Jul 15, 2018

added html importing from js file #1528

Closed

HTML bundle loader #1732

Merged

devongovett added the 🙋‍♀️ Feature label Jul 16, 2018

demoor and others added 7 commits July 17, 2018 15:41

fix conflict

0480066

fix conflict

611a2ab

fix html test

a496c4a

restore failing json test

0c2bbd5

add support for custom style syntaxes

b5de45f

support custom scripting languages inline

5524c82

inline coffee test

3b5c509

RobertWHurst reviewed Jul 18, 2018

View reviewed changes

fix json

7a6d18c

tim-evans mentioned this pull request Jul 18, 2018

Editor! CondeNast/atjson#58

Closed

devongovett added 2 commits July 21, 2018 09:57

Slight simplification

d6facce

Revert formatting changes

bc2a891

devongovett force-pushed the feature/inline-processing branch from b37420f to bc2a891 Compare July 21, 2018 17:01

Handle imports in <script> and <style> tags

9451aa1

devongovett approved these changes Jul 21, 2018

View reviewed changes

devongovett merged commit 7423541 into master Jul 21, 2018

devongovett deleted the feature/inline-processing branch July 21, 2018 17:57

jono-hayward mentioned this pull request Aug 6, 2018

Inline HTML background-image assets are not parsed #1855

Closed

yurifyodorov mentioned this pull request Sep 1, 2018

images from built-in styles do not appear #1974

Closed

mikehenrty mentioned this pull request Oct 11, 2018

support latest release of parcel bundler gongpeione/parcel-plugin-markdown#6

Merged

devongovett pushed a commit that referenced this pull request Oct 15, 2018

Process inline styles and scripts (#1456)

8696020

devongovett pushed a commit that referenced this pull request Oct 15, 2018

Process inline styles and scripts (#1456)

ed3e147

edify17 mentioned this pull request Apr 8, 2020

Inline Javascript (<script> tag) always get minified in html #4455

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Process inline styles and scripts #1456

Process inline styles and scripts #1456

DeMoorJasper commented May 29, 2018 •

edited

DeMoorJasper May 29, 2018

devongovett Jul 6, 2018

devongovett Jul 6, 2018

mohsen1 May 29, 2018

stevengill commented Jun 14, 2018 •

edited

DeMoorJasper commented Jun 14, 2018

stevengill commented Jun 14, 2018

stevengill commented Jun 14, 2018

devongovett commented Jul 4, 2018

devongovett commented Jul 4, 2018

DeMoorJasper commented Jul 5, 2018 •

edited

devongovett Jul 6, 2018

DeMoorJasper Jul 17, 2018

devongovett Jul 6, 2018

devongovett Jul 6, 2018

devongovett Jul 6, 2018

DeMoorJasper Jul 17, 2018

devongovett Jul 6, 2018

DeMoorJasper Jul 17, 2018

devongovett commented Jul 6, 2018

QingLeiLi commented Jul 6, 2018

DeMoorJasper commented Jul 6, 2018

RobertWHurst Jul 18, 2018

DeMoorJasper commented Jul 18, 2018 •

edited

devongovett commented Jul 21, 2018

Process inline styles and scripts #1456

Process inline styles and scripts #1456

Conversation

DeMoorJasper commented May 29, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stevengill commented Jun 14, 2018 • edited

DeMoorJasper commented Jun 14, 2018

stevengill commented Jun 14, 2018

stevengill commented Jun 14, 2018

devongovett commented Jul 4, 2018

devongovett commented Jul 4, 2018

DeMoorJasper commented Jul 5, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devongovett commented Jul 6, 2018

QingLeiLi commented Jul 6, 2018

DeMoorJasper commented Jul 6, 2018

Choose a reason for hiding this comment

DeMoorJasper commented Jul 18, 2018 • edited

devongovett commented Jul 21, 2018

DeMoorJasper commented May 29, 2018 •

edited

stevengill commented Jun 14, 2018 •

edited

DeMoorJasper commented Jul 5, 2018 •

edited

DeMoorJasper commented Jul 18, 2018 •

edited