Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
TELUS-Alexander opened this issue Mar 10, 2022 · 4 comments
Open

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

TELUS-Alexander opened this issue Mar 10, 2022 · 4 comments

Comments

@TELUS-Alexander
Copy link

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.

@MishaChernov
Copy link

Any solutions?

@bkilinc
Copy link

bkilinc commented Jan 28, 2023

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
Copy link

r1m commented Apr 18, 2023

This is what I did

  1. 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");
}
  1. 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);

@chenweigh
Copy link

chenweigh commented May 29, 2024

@TELUS-Alexander

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.

How do I convert @media css to inline style ?
Do you resolve it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants