Move media quesries inside a CSS file to a <style> element
- Dominant language
- JavaScript
- Stars
- 438
- Forks
- 77
- PR merge metrics
- No merged PRs in 30d
Description
My request is as follows:
When you have an HTML file that uses ``, to a CSS file, and it has @media queries, have an option to move the media queries to a `` 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.
Contributor guide
Assessment
This issue has not been assessed yet.