search

GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
https://npm.im/critters-webpack-plugin
Apache License 2.0
3.42k stars 108 forks source link

Critters is adding `<html><head>` and `</head><body></body></html>` to partial templates #38

Open jaydiablo opened 5 years ago

jaydiablo commented 5 years ago

Was testing using Critters to inline some critical CSS and noticed that it's inserting HTML/HEAD/BODY tags into output files that don't already have these tags.

These files intentionally don't have these tags because they're partials that are loaded by a separate system (in this case PHP). Removing Critters from the plugin chain prevents these tags from being added.

As an example, Critters is turning something like this:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="preload" crossorigin="anonymous" type="text/css">

<script src="/assets/dist/modernizr.bundle.js"></script>
<script src="/assets/dist/header.bundle.js"></script>

Into this:

<html><head>

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="preload" crossorigin="anonymous" type="text/css">

<script src="/assets/dist/modernizr.bundle.js"></script>
<script src="/assets/dist/header.bundle.js"></script>

</head><body></body></html>

Possible to disable this behavior via an option?

developit commented 5 years ago

Ah that's a tough one. I think this happened when we switched from htmlparser2 to jsdom. Seems like the only option here is to pre-parse using a simpler HTML parser, detect the root tags, and then find those roots in the JSDOM-parsed version for extraction.

ghost commented 4 years ago

@developit Is it possible if this comes in the near feature? Or is it possible if we can manually show where to inject? An issue on their end. https://github.com/jsdom/jsdom/issues/710