feat: Support the data-css-inline=keep attribute

Stranger6667 · Stranger6667 · commit c80a665bf72d · 2024-01-19T13:36:54.000+01:00
Signed-off-by: Dmitry Dygalo &lt;dmitry@dygalo.dev&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Added
 
 - A way to customize resolving remote stylesheets.
+- Support for the `data-css-inline="keep"` attribute to enforce keeping the `style` tag.
 
 ### Changed
 
diff --git a/README.md b/README.md
@@ -126,6 +126,21 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
 </body>
 ```
 
+Alternatively, you may keep `style` from being removed by using the `data-css-inline="keep"` attribute.
+This is useful if you want to keep `@media` queries for responsive emails in separate `style` tags:
+
+```html
+<head>
+  <!-- Styles below are not removed -->
+  <style data-css-inline="keep">h1 { color:blue; }</style>
+</head>
+<body>
+  <h1>Big Text</h1>
+</body>
+```
+
+Such tags will be kept in the resulting HTML even if the `keep_style_tags` option is set to `false`.
+
 If you'd like to load stylesheets from your filesystem, use the `file://` scheme:
 
 ```rust
diff --git a/bindings/c/CHANGELOG.md b/bindings/c/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Support for the `data-css-inline="keep"` attribute to enforce keeping the `style` tag.
+
 ### Fixed
 
 - Lookups for previous / next siblings, affecting selectors like `nth-child`. [#324](https://github.com/Stranger6667/css-inline/issues/324)
diff --git a/bindings/c/README.md b/bindings/c/README.md
@@ -141,6 +141,21 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
 </body>
 ```
 
+Alternatively, you may keep `style` from being removed by using the `data-css-inline="keep"` attribute.
+This is useful if you want to keep `@media` queries for responsive emails in separate `style` tags:
+
+```html
+<head>
+  <!-- Styles below are not removed -->
+  <style data-css-inline="keep">h1 { color:blue; }</style>
+</head>
+<body>
+  <h1>Big Text</h1>
+</body>
+```
+
+Such tags will be kept in the resulting HTML even if the `keep_style_tags` option is set to `false`.
+
 ## License
 
 This project is licensed under the terms of the [MIT license](https://opensource.org/licenses/MIT).
diff --git a/bindings/javascript/CHANGELOG.md b/bindings/javascript/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Support for the `data-css-inline="keep"` attribute to enforce keeping the `style` tag.
+
 ### Fixed
 
 - Lookups for previous / next siblings, affecting selectors like `nth-child`. [#324](https://github.com/Stranger6667/css-inline/issues/324)
diff --git a/bindings/javascript/README.md b/bindings/javascript/README.md
@@ -110,6 +110,21 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
 </body>
 ```
 
+Alternatively, you may keep `style` from being removed by using the `data-css-inline="keep"` attribute.
+This is useful if you want to keep `@media` queries for responsive emails in separate `style` tags:
+
+```html
+<head>
+  <!-- Styles below are not removed -->
+  <style data-css-inline="keep">h1 { color:blue; }</style>
+</head>
+<body>
+  <h1>Big Text</h1>
+</body>
+```
+
+Such tags will be kept in the resulting HTML even if the `keep_style_tags` option is set to `false`.
+
 ## WebAssembly
 
 `css-inline` also ships a WebAssembly module built with `wasm-bindgen` to run in browsers.
diff --git a/bindings/python/CHANGELOG.md b/bindings/python/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Support for the `data-css-inline="keep"` attribute to enforce keeping the `style` tag.
+
 ### Fixed
 
 - Lookups for previous / next siblings, affecting selectors like `nth-child`. [#324](https://github.com/Stranger6667/css-inline/issues/324)
diff --git a/bindings/python/README.md b/bindings/python/README.md
@@ -144,6 +144,21 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
 </body>
 ```
 
+Alternatively, you may keep `style` from being removed by using the `data-css-inline="keep"` attribute.
+This is useful if you want to keep `@media` queries for responsive emails in separate `style` tags:
+
+```html
+<head>
+  <!-- Styles below are not removed -->
+  <style data-css-inline="keep">h1 { color:blue; }</style>
+</head>
+<body>
+  <h1>Big Text</h1>
+</body>
+```
+
+Such tags will be kept in the resulting HTML even if the `keep_style_tags` option is set to `false`.
+
 If you'd like to load stylesheets from your filesystem, use the `file://` scheme:
 
 ```python
diff --git a/bindings/ruby/CHANGELOG.md b/bindings/ruby/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Support for the `data-css-inline="keep"` attribute to enforce keeping the `style` tag.
+
 ### Fixed
 
 - Lookups for previous / next siblings, affecting selectors like `nth-child`. [#324](https://github.com/Stranger6667/css-inline/issues/324)
diff --git a/bindings/ruby/README.md b/bindings/ruby/README.md
@@ -125,6 +125,21 @@ The `data-css-inline="ignore"` attribute also allows you to skip `link` and `sty
 </body>
 ```
 
+Alternatively, you may keep `style` from being removed by using the `data-css-inline="keep"` attribute.
+This is useful if you want to keep `@media` queries for responsive emails in separate `style` tags:
+
+```html
+<head>
+  <!-- Styles below are not removed -->
+  <style data-css-inline="keep">h1 { color:blue; }</style>
+</head>
+<body>
+  <h1>Big Text</h1>
+</body>
+```
+
+Such tags will be kept in the resulting HTML even if the `keep_style_tags` option is set to `false`.
+
 If you'd like to load stylesheets from your filesystem, use the `file://` scheme:
 
 ```ruby
diff --git a/css-inline/src/html/serializer.rs b/css-inline/src/html/serializer.rs
@@ -65,6 +65,7 @@ impl<'a> Sink<'a> {
     fn should_skip_element(&self, element: &ElementData) -> bool {
         if element.name.local == local_name!("style") {
             !self.keep_style_tags
+                && element.attributes.get("data-css-inline".into()) != Some("keep")
         } else if element.name.local == local_name!("link")
             && element.attributes.get(local_name!("rel")) == Some("stylesheet")
         {
diff --git a/css-inline/tests/test_inlining.rs b/css-inline/tests/test_inlining.rs
@@ -91,6 +91,36 @@ h1 { color: blue; }
     ))
 }
 
+#[test]
+fn keep_attribute_style() {
+    // When a `style` tag contains `data-css-inline="keep"`
+    let html = r#"
+<html>
+<head>
+<style data-css-inline="keep">
+h1 { color: blue; }
+</style>
+</head>
+<body>
+<h1>Big Text</h1>
+</body>
+</html>"#;
+    let result = inline(html).unwrap();
+    // Then it should be kept as is even if the configuration implies removing style tags
+    assert_eq!(
+        result,
+        r#"<html><head>
+<style data-css-inline="keep">
+h1 { color: blue; }
+</style>
+</head>
+<body>
+<h1 style="color: blue;">Big Text</h1>
+
+</body></html>"#
+    );
+}
+
 #[test]
 fn ignore_inlining_attribute_link() {
     // When a `link` tag contains `data-css-inline="ignore"`
