:mailbox: Create, preview, and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more!Project mention: HTML template for Nodemailer? | reddit.com/r/node | 2022-01-25
Juice inlines CSS stylesheets into your HTML source. (by Automattic)Project mention: In-lining Styles Client Side | dev.to | 2021-11-11
And it in-lines tagged HTML wonderfully. Works well.
Immediately disconcerting is the npm documentation for this package. It says simply "Inspired by juice" and fails to tell us why the authors felt that embarking on a new project was worth their while. It hints at the fact that it's better than Juice in some way or other (why else start a new project inspired by it?), but lays no claim as to if or how that might be the case. A dark horse.
Still, it also depends on cheerio, and so falls a little short of a native solution but worse, it does not provide us with any suggestion as to run-context (server side or client side).
So for my needs, it goes respectfully into the too-hard basket. Failed, in a sense, by the poor quality of its own introductory presentation. An irony, because there is some nice documentation there, just not a nice introduction that spells out whether it runs client-side or not, how to if so, and how it's different from Juice and why we'd use it. All the obvious questions I have surfing in on it.
document.styleSheetsprovides us with a collection of
CSSStyleSheet.rulesin turn provides all of the
CSSStyleRulesin use and
Element.matches()tells us if
CSSStyleRule.selectorTextapplies to a given element.
window.getComputedStyle()provides rapid access to the complete set of computed styles. That is, crucially it has taken all those styles that position things relative to the browser window and calculated where, in real coordinates it landed. Among other things. Crucially, it also has resolved all of CSS variables. It describes what an element actually looks like on the screen, rather than in the abstract CSS.
We can use the style sheets and the computed styles to update the style attribute of each element and then, when all is done the
outerHTMLare available for the the
text/htmlMIME parts respectively.
Given we're in-lining styles, and we don't want to actually change the element in the DOM (we're just aiming to copy it to the clipboard in one form or another), we have to take a copy of the DOM element and in-line the styles on that. We have to use the computed style from the source element however as it is rendered on screen and the copy is not (hence has not got computed styles). To wit, we will have a source and target element one that is in the DOM and provides computed styles, and one that is not in the DOM and receives in-lined style attributes.
But ... performance, performance ... turns out that it's not slow, but it's not fast either, let's take a look at performance next, before we dive into an actual code implementation of the above schema - next week's article.
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
I'm using a Netlify build plugin to automatically split out and inline critical CSS for my personal website.
Are you hiring? Post a new remote job listing for free.