Move media quesries inside a CSS file to a <style> element #113

TELUS-Alexander · 2022-03-10T18:20:25Z

My request is as follows:

When you have an HTML file that uses <link />, to a CSS file, and it has @media queries, have an option to move the media queries to a <style> element.

The reason for this request is that now if you have a media query inside the style.css file, it will either:

remain in the <link /> file, which is mostly not supported in email clients
be removed entirely

For example:

style.css

body {
  background-color: #FFFFFF;
}

@media all and (max-width: 600px) {
  background-color: #E5F0FF;
}

email.html

...
<head>
...
<link rel="stylesheet" href="style.css" />
...
</head>
<body>
...
</body>

After processing the file, via inline-css, with the option preserveMediaQueries: true the file would be as such:

email-inline-css.html

...
<head>
...
<style type="text/css">
@media all and (max-width: 600px) {
  background-color: #E5F0FF;
}
</head>
<body>
...
</body>

All the inline CSS rules would apply and the media queries would be moved to a <style> element.

Thank you for the great package.

The text was updated successfully, but these errors were encountered:

MishaChernov · 2022-12-01T22:05:00Z

Any solutions?

bkilinc · 2023-01-28T08:47:16Z

Because of this issue I don't use linked style files. But it would be great if I can use. A workaround might be preprocessing the file to replace style links with style content. This should be a simple task but I could not find a ready-made solution for it.

r1m · 2023-04-18T11:45:00Z

This is what I did

create an extracMediaQueriesCSS using the built-in packages (there are all already dependencies of this package) :

import * as getHrefContent from "href-content";
import * as getStylesheetList from "list-stylesheets";
import * as mediaQueryText from "mediaquery-text";
import { promisify } from "util";
const getHrefContentAsync = promisify(getHrefContent);

export async function extractMediaQueriesCss(html: string, options) {
  const data = getStylesheetList(html, options);
  let mediaCss = [];
  for (const href of data.hrefs) {
    const linkedStyle = await getHrefContentAsync(href, options.url);
    mediaCss.push(mediaQueryText(linkedStyle));
  }

  return mediaCss.join("\n");
}

use that method to get the css then shamelessly inject it inside your html before calling inlineCSS

  const inlineCssOptions = {
      url: `file://${templateFile}`,
     preserveMediaQueries: true,
     applyLinkTags: true,
  };
  const extraCss = await extractMediaQueriesCss(templateContent, inlineCssOptions);
  // inline the linked CSS mediaquery rules inside the html itself
  templateContent = templateContent.replace("</head>", `<style type="text/css">${extraCss}</style></head>`);
  templateContent = await inlineCss(templateContent, inlineCssOptions);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move media quesries inside a CSS file to a <style> element #113

Move media quesries inside a CSS file to a <style> element #113

TELUS-Alexander commented Mar 10, 2022

MishaChernov commented Dec 1, 2022

bkilinc commented Jan 28, 2023

r1m commented Apr 18, 2023 •

edited

Move media quesries inside a CSS file to a <style> element #113

Move media quesries inside a CSS file to a <style> element #113

Comments

TELUS-Alexander commented Mar 10, 2022

MishaChernov commented Dec 1, 2022

bkilinc commented Jan 28, 2023

r1m commented Apr 18, 2023 • edited

r1m commented Apr 18, 2023 •

edited