From 556bd198fe47f36221b196917724e0e4bbb4b40e Mon Sep 17 00:00:00 2001
From: tiye <jiyinyiyong@gmail.com>
Date: Wed, 11 Dec 2024 03:37:13 +0800
Subject: [PATCH 1/3] tricky support for container styles; tag 0.1.15

---
 Cargo.lock                    |  66 +++++++++----------
 demo_respo/Cargo.toml         |   4 +-
 demo_respo/src/main.rs        |  13 +++-
 respo/Cargo.toml              |  10 +--
 respo/src/node/css.rs         | 115 ++++++++++++++++++++++++++++++++++
 respo_state_derive/Cargo.toml |   2 +-
 6 files changed, 167 insertions(+), 43 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index dc448d3..a60a634 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -109,10 +109,11 @@ checksum = "49f1f14873335454500d59611f1cf4a4b0f786f9ac11f4312a78e4cf2566695b"
 
 [[package]]
 name = "js-sys"
-version = "0.3.70"
+version = "0.3.76"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1868808506b929d7b0cfa8f75951347aa71bb21144b7791bae35d9bccfcfe37a"
+checksum = "6717b6b5b077764fb5966237269cb3c64edddde4b14ce42647430a78ced9e7b7"
 dependencies = [
+ "once_cell",
  "wasm-bindgen",
 ]
 
@@ -183,9 +184,9 @@ checksum = "86f0b0d4bf799edbc74508c1e8bf170ff5f41238e5f8225603ca7caaae2b7860"
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.85"
+version = "1.0.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22244ce15aa966053a896d1accb3a6e68469b97c7f33f284b99f0d576879fc23"
+checksum = "37d3544b3f2748c54e147655edb5025752e2303145b5aefb3c3ea2c78b973bb0"
 dependencies = [
  "unicode-ident",
 ]
@@ -201,7 +202,7 @@ dependencies = [
 
 [[package]]
 name = "respo"
-version = "0.1.14"
+version = "0.1.15"
 dependencies = [
  "cirru_parser",
  "js-sys",
@@ -219,7 +220,7 @@ name = "respo_state_derive"
 version = "0.0.1"
 dependencies = [
  "quote",
- "syn 2.0.77",
+ "syn 2.0.90",
 ]
 
 [[package]]
@@ -229,7 +230,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "604687f92aa7e859453ffc3615280146aa01b2b882e14c7c8d4dee530151bfb1"
 dependencies = [
  "quote",
- "syn 2.0.77",
+ "syn 2.0.90",
 ]
 
 [[package]]
@@ -246,29 +247,29 @@ checksum = "f3cb5ba0dc43242ce17de99c180e96db90b235b8a9fdc9543c96d2209116bd9f"
 
 [[package]]
 name = "serde"
-version = "1.0.210"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c8e3592472072e6e22e0a54d5904d9febf8508f65fb8552499a1abc7d1078c3a"
+checksum = "6513c1ad0b11a9376da888e3e0baa0077f1aed55c17f50e7b2397136129fb88f"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.210"
+version = "1.0.215"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "243902eda00fad750862fc144cea25caca5e20d615af0a81bee94ca738f1df1f"
+checksum = "ad1e866f866923f252f05c889987993144fb74e722403468a4ebd70c3cd756c0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.77",
+ "syn 2.0.90",
 ]
 
 [[package]]
 name = "serde_json"
-version = "1.0.128"
+version = "1.0.133"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6ff5456707a1de34e7e37f2a6fd3d3f808c318259cbd01ab6377795054b483d8"
+checksum = "c7fceb2473b9166b2294ef05efcb65a3db80803f0b03ef86a5fc88a2b85ee377"
 dependencies = [
  "itoa",
  "memchr",
@@ -289,9 +290,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.77"
+version = "2.0.90"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f35bcdf61fd8e7be6caf75f429fdca8beb3ed76584befb503b1569faee373ed"
+checksum = "919d3b74a5dd0ccd15aeb8f93e7006bd9e14c295087c9896a110f490752bcf31"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -306,9 +307,9 @@ checksum = "d22af068fba1eb5edcb4aea19d382b2a3deb4c8f9d475c589b6ada9e0fd493ee"
 
 [[package]]
 name = "uuid"
-version = "1.10.0"
+version = "1.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81dfa00651efa65069b0b6b651f4aaa31ba9e3c3ce0137aaad053604ee7e0314"
+checksum = "f8c5f0a0af699448548ad1a2fbf920fb4bee257eae39953ba95cb84891a0446a"
 dependencies = [
  "getrandom",
  "wasm-bindgen",
@@ -334,9 +335,9 @@ checksum = "fd6fbd9a79829dd1ad0cc20627bf1ed606756a7f77edff7b66b7064f9cb327c6"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.93"
+version = "0.2.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a82edfc16a6c469f5f44dc7b571814045d60404b55a0ee849f9bcfa2e63dd9b5"
+checksum = "a474f6281d1d70c17ae7aa6a613c87fce69a127e2624002df63dcb39d6cf6396"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -345,24 +346,23 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.93"
+version = "0.2.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9de396da306523044d3302746f1208fa71d7532227f15e347e2d93e4145dd77b"
+checksum = "5f89bb38646b4f81674e8f5c3fb81b562be1fd936d84320f3264486418519c79"
 dependencies = [
  "bumpalo",
  "log",
- "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.77",
+ "syn 2.0.90",
  "wasm-bindgen-shared",
 ]
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.93"
+version = "0.2.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "585c4c91a46b072c92e908d99cb1dcdf95c5218eeb6f3bf1efa991ee7a68cccf"
+checksum = "2cc6181fd9a7492eef6fef1f33961e3695e4579b9872a6f7c83aee556666d4fe"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -370,28 +370,28 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.93"
+version = "0.2.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "afc340c74d9005395cf9dd098506f7f44e38f2b4a21c6aaacf9a105ea5e1e836"
+checksum = "30d7a95b763d3c45903ed6c81f156801839e5ee968bb07e534c44df0fcd330c2"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.77",
+ "syn 2.0.90",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.93"
+version = "0.2.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c62a0a307cb4a311d3a07867860911ca130c3494e8c2719593806c08bc5d0484"
+checksum = "943aab3fdaaa029a6e0271b35ea10b72b943135afe9bffca82384098ad0e06a6"
 
 [[package]]
 name = "web-sys"
-version = "0.3.70"
+version = "0.3.76"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "26fdeaafd9bd129f65e7c031593c24d62186301e0c72c8978fa1678be7d532c0"
+checksum = "04dd7223427d52553d3702c004d3b2fe07c148165faa56313cb00211e31c12bc"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
diff --git a/demo_respo/Cargo.toml b/demo_respo/Cargo.toml
index 64967a0..9445f86 100644
--- a/demo_respo/Cargo.toml
+++ b/demo_respo/Cargo.toml
@@ -17,13 +17,13 @@ respo = { path = "../respo/" }
 js-sys = "0.3.69"
 wasm-bindgen = "0.2.93"
 console_error_panic_hook = "0.1.7"
-uuid = { version = "1.10.0", features = ["v4", "js"] }
+uuid = { version = "1.11.0", features = ["v4", "js"] }
 serde = { version = "1.0.210", features = ["derive", "rc"] }
 serde_json = "1.0.128"
 respo_state_derive = { path = "../respo_state_derive" }
 
 [dependencies.web-sys]
-version = "0.3.70"
+version = "0.3.76"
 features = [
   "console",
   'Document',
diff --git a/demo_respo/src/main.rs b/demo_respo/src/main.rs
index 2c626e2..a643185 100644
--- a/demo_respo/src/main.rs
+++ b/demo_respo/src/main.rs
@@ -14,7 +14,7 @@ use std::rc::Rc;
 
 use inner_text::comp_inner_text;
 use respo::css::respo_style;
-use respo::{space, RespoAction};
+use respo::{contained_styles, space, RespoAction};
 use web_sys::Node;
 
 use respo::ui::ui_global;
@@ -64,7 +64,7 @@ impl RespoApp for App {
 
     Ok(
       div()
-        .class(ui_global())
+        .class(ui_global() + " " + &style_container())
         .style(respo_style().padding(12))
         .children([
           comp_counter(&states.pick("counter"), store.counted)?.to_node(),
@@ -97,3 +97,12 @@ fn main() {
 
   app.render_loop().expect("app render");
 }
+
+contained_styles!(
+  style_container,
+  (
+    Some("@media only screen and (max-width: 600px)".to_owned()),
+    "&",
+    respo_style().background_color(respo::css::CssColor::Hsl(0, 0, 95))
+  )
+);
diff --git a/respo/Cargo.toml b/respo/Cargo.toml
index 31947fd..35dda6a 100644
--- a/respo/Cargo.toml
+++ b/respo/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "respo"
-version = "0.1.14"
+version = "0.1.15"
 edition = "2021"
 description = "a tiny virtual DOM library migrated from ClojureScript"
 license = "Apache-2.0"
@@ -12,14 +12,14 @@ readme = "README.md"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-js-sys = "0.3.69"
+js-sys = "0.3.76"
 wasm-bindgen = "0.2.93"
 lazy_static = "1.5.0"
 cirru_parser = "0.1.31"
 # cirru_parser = { path = "/Users/chenyong/repo/cirru/parser.rs" }
 rust-hsluv = "0.1.4"
-serde = { version = "1.0.210", features = ["derive", "rc"] }
-serde_json = "1.0.128"
+serde = { version = "1.0.215", features = ["derive", "rc"] }
+serde_json = "1.0.133"
 # respo_state_derive = { path = "../respo_state_derive" }
 respo_state_derive = "0.0.1"
 
@@ -28,7 +28,7 @@ respo_state_derive = "0.0.1"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies.web-sys]
-version = "0.3.70"
+version = "0.3.76"
 features = [
   "console",
   'Document',
diff --git a/respo/src/node/css.rs b/respo/src/node/css.rs
index 33183da..d998c36 100644
--- a/respo/src/node/css.rs
+++ b/respo/src/node/css.rs
@@ -736,6 +736,55 @@ where
     name.into()
   }
 }
+/// does internal work inside the macro `contained_style!(name, &styles)`.
+/// inserts CSS as `<style .. />` under `<head ... />` element
+/// notice that the code only generats once and being cached as DOM states, with extra `<contained> { ... }` wrapper
+///
+/// NOT working for dynamic styles that changes over time, use inline styles instead.
+pub fn declare_contained_style<T, U>(name: T, rules: &[(Option<String>, U, RespoStyle)]) -> String
+where
+  T: Into<String> + Clone,
+  U: Into<String> + Clone + Display,
+{
+  let mut defined_styles = CLASS_NAME_IN_TAGS.write().expect("access styles");
+  if defined_styles.contains(&name.to_owned().into()) {
+    name.into()
+  } else {
+    let window = web_sys::window().expect("window");
+    let document = window.document().expect("load document");
+    let head = document.head().expect("head");
+    let style_tag = document.create_element("style").expect("create style tag");
+    style_tag
+      .set_attribute("id", &format!("def__{}", name.to_owned().into()))
+      .expect("name tag");
+
+    let mut styles = String::from("");
+    for (contained, query, properties) in rules {
+      styles.push_str(
+        &query
+          .to_string()
+          .replace("$0", &format!(".{}", &name.to_owned().into()))
+          .replace('&', &format!(".{}", &name.to_owned().into())),
+      );
+      styles.push_str(" {\n");
+      styles.push_str(&properties.to_string());
+      styles.push_str("}\n");
+
+      if let Some(contained) = contained {
+        styles = format!("{} {{\n{}\n}}", contained, styles);
+      }
+    }
+
+    style_tag.dyn_ref::<Element>().expect("into element").set_inner_html(&styles);
+    head
+      .append_child(style_tag.dyn_ref::<Element>().expect("get element"))
+      .expect("add style");
+
+    defined_styles.insert(name.to_owned().into());
+
+    name.into()
+  }
+}
 
 /// turns `src/a/b.rs` into `a_b`, (used inside macro)
 pub fn css_name_from_path(p: &str) -> String {
@@ -814,3 +863,69 @@ macro_rules! static_styles {
     $crate::static_style_seq!($a, &[$b, $c, $d, $e, $f]);
   };
 }
+
+/// macro to create a public function of CSS rules with a slice at current file scope,
+/// ```rust
+/// respo::contained_style_seq!(the_name,
+///   &[
+///     (Some("@container".to_string()), "&", respo::css::respo_style())
+///   ]
+/// );
+/// ```
+/// gets a function like:
+/// ```ignore
+/// pub fn the_name() -> String
+/// ```
+#[macro_export]
+macro_rules! contained_style_seq {
+  ($a:ident, $b:expr) => {
+    pub fn $a() -> String {
+      // let name = $crate::css_name_from_path(std::file!());
+      let name = $crate::css::css_name_from_path(std::module_path!());
+      $crate::css::declare_contained_style(format!("{}__{}", name, stringify!($a)), $b)
+    }
+  };
+}
+
+/// macro to create a public function of CSS rules(up to 5 tuples) at current file scope,
+/// ```rust
+/// respo::contained_styles!(the_name,
+///   (Some("@container".to_string()), "&", respo::css::respo_style())
+/// );
+/// ```
+/// gets a function like:
+/// ```ignore
+/// pub fn the_name() -> String
+/// ```
+/// if you have more styles to specify, use `static_style_seq!` instead.
+#[macro_export]
+macro_rules! contained_styles {
+  ($a:ident, $b:expr) => {
+    $crate::contained_style_seq!($a, &[$b]);
+  };
+  // to allow optional trailing comma
+  ($a:ident, $b:expr,) => {
+    $crate::contained_style_seq!($a, &[$b]);
+  };
+  ($a:ident, $b:expr, $c:expr) => {
+    $crate::contained_style_seq!($a, &[$b, $c]);
+  };
+  ($a:ident, $b:expr, $c:expr,) => {
+    $crate::contained_style_seq!($a, &[$b, $c]);
+  };
+  ($a:ident, $b:expr, $c:expr, $d:expr) => {
+    $crate::contained_style_seq!($a, &[$b, $c, $d]);
+  };
+  ($a:ident, $b:expr, $c:expr, $d:expr,) => {
+    $crate::contained_style_seq!($a, &[$b, $c, $d]);
+  };
+  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr) => {
+    $crate::contained_style_seq!($a, &[$b, $c, $d, $e]);
+  };
+  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr,) => {
+    $crate::contained_style_seq!($a, &[$b, $c, $d, $e]);
+  };
+  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr, $f:expr) => {
+    $crate::contained_style_seq!($a, &[$b, $c, $d, $e, $f]);
+  };
+}
diff --git a/respo_state_derive/Cargo.toml b/respo_state_derive/Cargo.toml
index e0f100e..d8af844 100644
--- a/respo_state_derive/Cargo.toml
+++ b/respo_state_derive/Cargo.toml
@@ -11,7 +11,7 @@ readme = "README.md"
 
 [dependencies]
 quote = { version = "1.0.37", features = ["proc-macro"] }
-syn = { version = "2.0.77", features = [
+syn = { version = "2.0.90", features = [
   "clone-impls",
   "derive",
   "parsing",

From 003cf26dbd36def563a6360dab47f6b813ed42c6 Mon Sep 17 00:00:00 2001
From: tiye <jiyinyiyong@gmail.com>
Date: Thu, 12 Dec 2024 01:17:29 +0800
Subject: [PATCH 2/3] upgrade deps

---
 demo_respo/Cargo.toml | 6 +++---
 respo/src/node/css.rs | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo_respo/Cargo.toml b/demo_respo/Cargo.toml
index 9445f86..d0a8696 100644
--- a/demo_respo/Cargo.toml
+++ b/demo_respo/Cargo.toml
@@ -14,12 +14,12 @@ readme = "README.md"
 [dependencies]
 memoize = "0.4.2"
 respo = { path = "../respo/" }
-js-sys = "0.3.69"
+js-sys = "0.3.76"
 wasm-bindgen = "0.2.93"
 console_error_panic_hook = "0.1.7"
 uuid = { version = "1.11.0", features = ["v4", "js"] }
-serde = { version = "1.0.210", features = ["derive", "rc"] }
-serde_json = "1.0.128"
+serde = { version = "1.0.215", features = ["derive", "rc"] }
+serde_json = "1.0.133"
 respo_state_derive = { path = "../respo_state_derive" }
 
 [dependencies.web-sys]
diff --git a/respo/src/node/css.rs b/respo/src/node/css.rs
index d998c36..fba9a2e 100644
--- a/respo/src/node/css.rs
+++ b/respo/src/node/css.rs
@@ -897,7 +897,7 @@ macro_rules! contained_style_seq {
 /// ```ignore
 /// pub fn the_name() -> String
 /// ```
-/// if you have more styles to specify, use `static_style_seq!` instead.
+/// if you have more styles to specify, use `contained_style_seq!` instead.
 #[macro_export]
 macro_rules! contained_styles {
   ($a:ident, $b:expr) => {

From 869fef3f3b8442f0b4633fda39ecac62f9946bb8 Mon Sep 17 00:00:00 2001
From: tiye <jiyinyiyong@gmail.com>
Date: Fri, 13 Dec 2024 13:33:03 +0800
Subject: [PATCH 3/3] smarter style macro thanks to coderabbit

---
 Cargo.lock            |  8 ++---
 demo_respo/Cargo.toml |  2 +-
 respo/Cargo.toml      |  2 +-
 respo/src/node/css.rs | 79 +++++++++++--------------------------------
 4 files changed, 25 insertions(+), 66 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index a60a634..2c48c9c 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -247,18 +247,18 @@ checksum = "f3cb5ba0dc43242ce17de99c180e96db90b235b8a9fdc9543c96d2209116bd9f"
 
 [[package]]
 name = "serde"
-version = "1.0.215"
+version = "1.0.216"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6513c1ad0b11a9376da888e3e0baa0077f1aed55c17f50e7b2397136129fb88f"
+checksum = "0b9781016e935a97e8beecf0c933758c97a5520d32930e460142b4cd80c6338e"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.215"
+version = "1.0.216"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad1e866f866923f252f05c889987993144fb74e722403468a4ebd70c3cd756c0"
+checksum = "46f859dbbf73865c6627ed570e78961cd3ac92407a2d117204c49232485da55e"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/demo_respo/Cargo.toml b/demo_respo/Cargo.toml
index d0a8696..731e7a0 100644
--- a/demo_respo/Cargo.toml
+++ b/demo_respo/Cargo.toml
@@ -18,7 +18,7 @@ js-sys = "0.3.76"
 wasm-bindgen = "0.2.93"
 console_error_panic_hook = "0.1.7"
 uuid = { version = "1.11.0", features = ["v4", "js"] }
-serde = { version = "1.0.215", features = ["derive", "rc"] }
+serde = { version = "1.0.216", features = ["derive", "rc"] }
 serde_json = "1.0.133"
 respo_state_derive = { path = "../respo_state_derive" }
 
diff --git a/respo/Cargo.toml b/respo/Cargo.toml
index 35dda6a..1df0e33 100644
--- a/respo/Cargo.toml
+++ b/respo/Cargo.toml
@@ -18,7 +18,7 @@ lazy_static = "1.5.0"
 cirru_parser = "0.1.31"
 # cirru_parser = { path = "/Users/chenyong/repo/cirru/parser.rs" }
 rust-hsluv = "0.1.4"
-serde = { version = "1.0.215", features = ["derive", "rc"] }
+serde = { version = "1.0.216", features = ["derive", "rc"] }
 serde_json = "1.0.133"
 # respo_state_derive = { path = "../respo_state_derive" }
 respo_state_derive = "0.0.1"
diff --git a/respo/src/node/css.rs b/respo/src/node/css.rs
index fba9a2e..0680bbf 100644
--- a/respo/src/node/css.rs
+++ b/respo/src/node/css.rs
@@ -834,33 +834,8 @@ macro_rules! static_style_seq {
 /// if you have more styles to specify, use `static_style_seq!` instead.
 #[macro_export]
 macro_rules! static_styles {
-  ($a:ident, $b:expr) => {
-    $crate::static_style_seq!($a, &[$b]);
-  };
-  // to allow optional trailing comma
-  ($a:ident, $b:expr,) => {
-    $crate::static_style_seq!($a, &[$b]);
-  };
-  ($a:ident, $b:expr, $c:expr) => {
-    $crate::static_style_seq!($a, &[$b, $c]);
-  };
-  ($a:ident, $b:expr, $c:expr,) => {
-    $crate::static_style_seq!($a, &[$b, $c]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr) => {
-    $crate::static_style_seq!($a, &[$b, $c, $d]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr,) => {
-    $crate::static_style_seq!($a, &[$b, $c, $d]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr) => {
-    $crate::static_style_seq!($a, &[$b, $c, $d, $e]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr,) => {
-    $crate::static_style_seq!($a, &[$b, $c, $d, $e]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr, $f:expr) => {
-    $crate::static_style_seq!($a, &[$b, $c, $d, $e, $f]);
+  ($a:ident, $($b:expr),* $(,)?) => {
+    $crate::static_style_seq!($a, &[$($b),*]);
   };
 }
 
@@ -889,43 +864,27 @@ macro_rules! contained_style_seq {
 
 /// macro to create a public function of CSS rules(up to 5 tuples) at current file scope,
 /// ```rust
-/// respo::contained_styles!(the_name,
-///   (Some("@container".to_string()), "&", respo::css::respo_style())
+/// // Example with multiple container queries
+/// use respo::css::{CssSize, CssColor};
+/// respo::contained_style_seq!(responsive_card,
+///   &[
+///     (None, "&", respo::css::respo_style().width(CssSize::Px(200.))),
+///     (Some("@container (min-width: 300px)".to_string()), "&", respo::css::respo_style().width(CssSize::Px(300.))),
+///   ]
+/// );
+///
+/// // Example combining with media queries
+/// respo::contained_style_seq!(hybrid_responsive,
+///   &[
+///     (Some("@media (prefers-color-scheme: dark)".to_string()), "&",
+///       respo::css::respo_style().background_color(CssColor::Rgb(20, 20, 20)))
+///   ]
 /// );
-/// ```
-/// gets a function like:
-/// ```ignore
-/// pub fn the_name() -> String
 /// ```
 /// if you have more styles to specify, use `contained_style_seq!` instead.
 #[macro_export]
 macro_rules! contained_styles {
-  ($a:ident, $b:expr) => {
-    $crate::contained_style_seq!($a, &[$b]);
-  };
-  // to allow optional trailing comma
-  ($a:ident, $b:expr,) => {
-    $crate::contained_style_seq!($a, &[$b]);
-  };
-  ($a:ident, $b:expr, $c:expr) => {
-    $crate::contained_style_seq!($a, &[$b, $c]);
-  };
-  ($a:ident, $b:expr, $c:expr,) => {
-    $crate::contained_style_seq!($a, &[$b, $c]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr) => {
-    $crate::contained_style_seq!($a, &[$b, $c, $d]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr,) => {
-    $crate::contained_style_seq!($a, &[$b, $c, $d]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr) => {
-    $crate::contained_style_seq!($a, &[$b, $c, $d, $e]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr,) => {
-    $crate::contained_style_seq!($a, &[$b, $c, $d, $e]);
-  };
-  ($a:ident, $b:expr, $c:expr, $d:expr, $e:expr, $f:expr) => {
-    $crate::contained_style_seq!($a, &[$b, $c, $d, $e, $f]);
+  ($a:ident, $($b:expr),* $(,)?) => {
+    $crate::contained_style_seq!($a, &[$($b),*]);
   };
 }