critters
critters copied to clipboard
GoogleChromeLabs
Critters is adding `<html><head>` and `</head><body></body></html>` to partial templates
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?
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.
@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
