From 7d460043da5a6038058dbc35eacba4f4ebebcbfb Mon Sep 17 00:00:00 2001
From: Kaede Hoshikawa <futursolo@icloud.com>
Date: Fri, 20 Aug 2021 21:03:56 +0900
Subject: [PATCH] Implement Global and GlobalStyle properly.

---
 CHANGELOG.md                                  |   3 +-
 examples/benchmarks/src/main.rs               |   6 +-
 examples/yew-integration/src/main.rs          |   6 +-
 examples/yew-shadow/src/main.rs               |   6 +-
 examples/yew-theme-agent/src/main.rs          |   6 +-
 examples/yew-theme-yewdux/src/main.rs         |   6 +-
 packages/stylist-core/Cargo.toml              |   4 +
 packages/stylist-core/src/ast/block.rs        |   7 +-
 packages/stylist-core/src/ast/mod.rs          |   6 +-
 packages/stylist-core/src/ast/rule.rs         |   2 +-
 packages/stylist-core/src/ast/rule_content.rs |   2 +-
 .../stylist-core/src/ast/scope_content.rs     |   2 +-
 packages/stylist-core/src/ast/selector.rs     |  64 ++++--
 packages/stylist-core/src/ast/sheet.rs        |   2 +-
 packages/stylist-core/src/ast/style_attr.rs   |   2 +-
 packages/stylist-core/src/ast/to_style_str.rs |   6 +-
 packages/stylist-core/src/lib.rs              |   4 +
 packages/stylist-core/src/yew.rs              |  29 +++
 packages/stylist/Cargo.toml                   |   2 +-
 packages/stylist/src/bindings/mod.rs          |   5 -
 packages/stylist/src/bindings/yew.rs          | 202 ----------------
 packages/stylist/src/global_style.rs          | 216 ++++++++++++++++++
 packages/stylist/src/lib.rs                   |  26 +--
 packages/stylist/src/manager.rs               |  19 +-
 packages/stylist/src/registry.rs              |  14 +-
 packages/stylist/src/style.rs                 |  59 ++---
 packages/stylist/src/yew.rs                   | 137 +++++++++++
 27 files changed, 518 insertions(+), 325 deletions(-)
 create mode 100644 packages/stylist-core/src/yew.rs
 delete mode 100644 packages/stylist/src/bindings/mod.rs
 delete mode 100644 packages/stylist/src/bindings/yew.rs
 create mode 100644 packages/stylist/src/global_style.rs
 create mode 100644 packages/stylist/src/yew.rs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e532120..01a6221 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,8 @@
   and styled-components.
 
 ### Other Changes:
-- Added a `<GlobalStyle />` Component for global styling.
+- Added a `GlobalStyle` struct to register global styles.
+- Added a `<Global />` Component for global styling for yew applications.
 - Supported `@supports` CSS at-rule.
 - Added an alternative counter-based class name on the style when
   feature `random` is disabled.
diff --git a/examples/benchmarks/src/main.rs b/examples/benchmarks/src/main.rs
index d5b1dce..fc3d96a 100644
--- a/examples/benchmarks/src/main.rs
+++ b/examples/benchmarks/src/main.rs
@@ -1,7 +1,7 @@
 use std::borrow::Cow;
 
 use gloo::timers::callback::Timeout;
-use stylist::yew::GlobalStyle;
+use stylist::yew::Global;
 use stylist::YieldStyle;
 use yew::prelude::*;
 
@@ -11,7 +11,7 @@ mod benchmarks;
 mod utils;
 
 static GLOBAL_STYLE: &str = r#"
-    html&, body {
+    html, body {
         margin: 0;
         padding: 0;
         font-family: sans-serif;
@@ -256,7 +256,7 @@ impl Component for App {
     fn view(&self) -> Html {
         html! {
             <>
-                <GlobalStyle css=GLOBAL_STYLE />
+                <Global css=GLOBAL_STYLE />
                 <div class=self.style()>
                     <h1>{"Stylist Benchmark"}</h1>
                     {
diff --git a/examples/yew-integration/src/main.rs b/examples/yew-integration/src/main.rs
index c105288..de44b51 100644
--- a/examples/yew-integration/src/main.rs
+++ b/examples/yew-integration/src/main.rs
@@ -1,6 +1,6 @@
 use std::borrow::Cow;
 
-use stylist::yew::GlobalStyle;
+use stylist::yew::Global;
 use stylist::{Style, YieldStyle};
 use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
@@ -100,8 +100,8 @@ impl Component for App {
         html! {
             <>
                 // Global Styles can be applied with <GlobalStyle /> component.
-                <GlobalStyle css=r#"
-                    &, & body {
+                <Global css=r#"
+                    html, body {
                         font-family: sans-serif;
 
                         padding: 0;
diff --git a/examples/yew-shadow/src/main.rs b/examples/yew-shadow/src/main.rs
index 24e5ca8..86a7657 100644
--- a/examples/yew-shadow/src/main.rs
+++ b/examples/yew-shadow/src/main.rs
@@ -1,7 +1,7 @@
 use std::borrow::Cow;
 
 use stylist::manager::StyleManager;
-use stylist::yew::GlobalStyle;
+use stylist::yew::Global;
 use stylist::{Style, YieldStyle};
 use web_sys::{window, Element, ShadowRootInit, ShadowRootMode};
 use yew::prelude::*;
@@ -104,8 +104,8 @@ impl Component for App {
     fn view(&self) -> Html {
         html! {
             <>
-                <GlobalStyle css=r#"
-                    &, & body {
+                <Global css=r#"
+                    html, body {
                         font-family: sans-serif;
 
                         padding: 0;
diff --git a/examples/yew-theme-agent/src/main.rs b/examples/yew-theme-agent/src/main.rs
index caa7f6d..518a939 100644
--- a/examples/yew-theme-agent/src/main.rs
+++ b/examples/yew-theme-agent/src/main.rs
@@ -1,7 +1,7 @@
 use std::borrow::Cow;
 use std::sync::Arc;
 
-use stylist::yew::GlobalStyle;
+use stylist::yew::Global;
 use stylist::YieldStyle;
 use yew::{html, Bridge, Component, ComponentLink, Html, ShouldRender};
 use yewtil::store::{Bridgeable, ReadOnly, StoreWrapper};
@@ -152,9 +152,9 @@ impl Component for App {
         html! {
             <>
                 // Global Styles can be applied with <GlobalStyle /> component.
-                <GlobalStyle css=format!(
+                <Global css=format!(
                     r#"
-                        &, & body {{
+                        html, body {{
                             font-family: sans-serif;
 
                             padding: 0;
diff --git a/examples/yew-theme-yewdux/src/main.rs b/examples/yew-theme-yewdux/src/main.rs
index 880e408..fd3824d 100644
--- a/examples/yew-theme-yewdux/src/main.rs
+++ b/examples/yew-theme-yewdux/src/main.rs
@@ -1,6 +1,6 @@
 use std::borrow::Cow;
 
-use stylist::yew::GlobalStyle;
+use stylist::yew::Global;
 use stylist::YieldStyle;
 use yew::{html, Component, ComponentLink, Html, ShouldRender};
 use yewdux::prelude::*;
@@ -106,9 +106,9 @@ impl Component for App {
         html! {
             <>
                 // Global Styles can be applied with <GlobalStyle /> component.
-                <GlobalStyle css=format!(
+                <Global css=format!(
                     r#"
-                        &, & body {{
+                        html, body {{
                             font-family: sans-serif;
 
                             padding: 0;
diff --git a/packages/stylist-core/Cargo.toml b/packages/stylist-core/Cargo.toml
index aff73cf..61c9331 100644
--- a/packages/stylist-core/Cargo.toml
+++ b/packages/stylist-core/Cargo.toml
@@ -23,6 +23,7 @@ homepage = "https://github.com/futursolo/stylist-rs"
 nom = "6.2.1"
 thiserror = "1.0"
 wasm-bindgen = "0.2.74"
+yew = { version = "0.18.0", optional = true, default-features = false }
 
 [dev-dependencies]
 log = "0.4"
@@ -30,3 +31,6 @@ env_logger = "0.9"
 
 [target.'cfg(target_arch = "wasm32")'.dev-dependencies]
 wasm-bindgen-test = "0.3.24"
+
+[features]
+yew_integration = ["yew"]
diff --git a/packages/stylist-core/src/ast/block.rs b/packages/stylist-core/src/ast/block.rs
index 9129369..2026a9e 100644
--- a/packages/stylist-core/src/ast/block.rs
+++ b/packages/stylist-core/src/ast/block.rs
@@ -23,7 +23,7 @@ pub struct Block {
 }
 
 impl ToStyleStr for Block {
-    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: &str) -> fmt::Result {
+    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: Option<&str>) -> fmt::Result {
         if !self.condition.is_empty() {
             for (index, sel) in self.condition.iter().enumerate() {
                 sel.write_style(w, class_name)?;
@@ -32,8 +32,11 @@ impl ToStyleStr for Block {
                 }
                 write!(w, " ")?;
             }
+        } else if let Some(m) = class_name {
+            write!(w, ".{} ", m)?;
         } else {
-            write!(w, ".{} ", class_name)?;
+            // Generates global style for dangling block.
+            write!(w, "html ")?;
         }
 
         writeln!(w, "{{")?;
diff --git a/packages/stylist-core/src/ast/mod.rs b/packages/stylist-core/src/ast/mod.rs
index e2d0737..a5dff30 100644
--- a/packages/stylist-core/src/ast/mod.rs
+++ b/packages/stylist-core/src/ast/mod.rs
@@ -4,7 +4,7 @@
 //! struct Sheet
 //! └── Vec<enum ScopeContent>
 //!     ├── struct Block
-//!     │   ├── selector: String
+//!     │   ├── selector: Vec<Selector>
 //!     │   └── Vec<struct StyleAttribute>
 //!     │       ├── key: String
 //!     │       └── value: String
@@ -75,7 +75,7 @@ width: 200px;
             }),
         ]);
         assert_eq!(
-            test_block.to_style_str("test"),
+            test_block.to_style_str(Some("test")),
             r#".test {
 width: 100vw;
 }
@@ -133,7 +133,7 @@ width: 200px;
             .into(),
         })]);
         assert_eq!(
-            test_block.to_style_str("test"),
+            test_block.to_style_str(Some("test")),
             r#"@media only screen and (min-width: 1000px) {
 .test {
 width: 100vw;
diff --git a/packages/stylist-core/src/ast/rule.rs b/packages/stylist-core/src/ast/rule.rs
index ab450f9..645610b 100644
--- a/packages/stylist-core/src/ast/rule.rs
+++ b/packages/stylist-core/src/ast/rule.rs
@@ -25,7 +25,7 @@ pub struct Rule {
 }
 
 impl ToStyleStr for Rule {
-    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: &str) -> fmt::Result {
+    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: Option<&str>) -> fmt::Result {
         writeln!(w, "{} {{", self.condition)?;
 
         for i in self.content.iter() {
diff --git a/packages/stylist-core/src/ast/rule_content.rs b/packages/stylist-core/src/ast/rule_content.rs
index e2fe468..d102ffe 100644
--- a/packages/stylist-core/src/ast/rule_content.rs
+++ b/packages/stylist-core/src/ast/rule_content.rs
@@ -26,7 +26,7 @@ impl From<ScopeContent> for RuleContent {
 }
 
 impl ToStyleStr for RuleContent {
-    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: &str) -> fmt::Result {
+    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: Option<&str>) -> fmt::Result {
         match self {
             RuleContent::Block(ref b) => b.write_style(w, class_name),
             RuleContent::Rule(ref r) => r.write_style(w, class_name),
diff --git a/packages/stylist-core/src/ast/scope_content.rs b/packages/stylist-core/src/ast/scope_content.rs
index 0e4e532..ffe829a 100644
--- a/packages/stylist-core/src/ast/scope_content.rs
+++ b/packages/stylist-core/src/ast/scope_content.rs
@@ -31,7 +31,7 @@ pub enum ScopeContent {
 }
 
 impl ToStyleStr for ScopeContent {
-    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: &str) -> fmt::Result {
+    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: Option<&str>) -> fmt::Result {
         match self {
             ScopeContent::Block(ref b) => b.write_style(w, class_name),
             ScopeContent::Rule(ref r) => r.write_style(w, class_name),
diff --git a/packages/stylist-core/src/ast/selector.rs b/packages/stylist-core/src/ast/selector.rs
index 5201eab..ec54969 100644
--- a/packages/stylist-core/src/ast/selector.rs
+++ b/packages/stylist-core/src/ast/selector.rs
@@ -15,26 +15,35 @@ pub struct Selector {
 }
 
 impl ToStyleStr for Selector {
-    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: &str) -> fmt::Result {
-        // If contains current selector or root pseudo class, replace them with class name.
-        if self.inner.contains('&') || self.inner.contains(":root") {
-            let scoped_class = format!(".{}", class_name);
-
-            write!(
-                w,
-                "{}",
-                self.inner
-                    .replace("&", scoped_class.as_str())
-                    .replace(":root", scoped_class.as_str())
-            )?;
-
-        // If selector starts with a pseudo-class, apply it to the root element.
-        } else if self.inner.starts_with(':') {
-            write!(w, ".{}{}", class_name, self.inner)?;
-
-        // For other selectors, scope it to be the children of the root element.
+    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: Option<&str>) -> fmt::Result {
+        if let Some(m) = class_name {
+            // If contains current selector or root pseudo class, replace them with class name.
+            if self.inner.contains('&') || self.inner.contains(":root") {
+                let scoped_class = format!(".{}", m);
+
+                write!(
+                    w,
+                    "{}",
+                    self.inner
+                        .replace("&", scoped_class.as_str())
+                        .replace(":root", scoped_class.as_str())
+                )?;
+
+            // If selector starts with a pseudo-class, apply it to the root element.
+            } else if self.inner.starts_with(':') {
+                write!(w, ".{}{}", m, self.inner)?;
+
+            // For other selectors, scope it to be the children of the root element.
+            } else {
+                write!(w, ".{} {}", m, self.inner)?;
+            }
+
+        // For global styles, if it contains &, it will be replaced with html.
+        } else if self.inner.contains('&') {
+            write!(w, "{}", self.inner.replace("&", "html"))?;
+        // For other styles, it will be written as is.
         } else {
-            write!(w, ".{} {}", class_name, self.inner)?;
+            write!(w, "{}", self.inner)?;
         }
 
         Ok(())
@@ -55,7 +64,10 @@ mod tests {
     fn test_selector_gen_simple() {
         let s: Selector = ".abc".into();
 
-        assert_eq!(s.to_style_str("stylist-abcdefgh"), ".stylist-abcdefgh .abc");
+        assert_eq!(
+            s.to_style_str(Some("stylist-abcdefgh")),
+            ".stylist-abcdefgh .abc"
+        );
     }
 
     #[test]
@@ -63,7 +75,7 @@ mod tests {
         let s: Selector = ":hover".into();
 
         assert_eq!(
-            s.to_style_str("stylist-abcdefgh"),
+            s.to_style_str(Some("stylist-abcdefgh")),
             ".stylist-abcdefgh:hover"
         );
     }
@@ -72,13 +84,19 @@ mod tests {
     fn test_selector_root_pseduo() {
         let s: Selector = ":root.big".into();
 
-        assert_eq!(s.to_style_str("stylist-abcdefgh"), ".stylist-abcdefgh.big");
+        assert_eq!(
+            s.to_style_str(Some("stylist-abcdefgh")),
+            ".stylist-abcdefgh.big"
+        );
     }
 
     #[test]
     fn test_selector_gen_current() {
         let s: Selector = "&.big".into();
 
-        assert_eq!(s.to_style_str("stylist-abcdefgh"), ".stylist-abcdefgh.big");
+        assert_eq!(
+            s.to_style_str(Some("stylist-abcdefgh")),
+            ".stylist-abcdefgh.big"
+        );
     }
 }
diff --git a/packages/stylist-core/src/ast/sheet.rs b/packages/stylist-core/src/ast/sheet.rs
index 497fb48..6dea6fd 100644
--- a/packages/stylist-core/src/ast/sheet.rs
+++ b/packages/stylist-core/src/ast/sheet.rs
@@ -58,7 +58,7 @@ impl Default for Sheet {
 }
 
 impl ToStyleStr for Sheet {
-    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: &str) -> fmt::Result {
+    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: Option<&str>) -> fmt::Result {
         for scope in self.0.iter() {
             scope.write_style(w, class_name)?;
             writeln!(w)?;
diff --git a/packages/stylist-core/src/ast/style_attr.rs b/packages/stylist-core/src/ast/style_attr.rs
index 180e768..029f6df 100644
--- a/packages/stylist-core/src/ast/style_attr.rs
+++ b/packages/stylist-core/src/ast/style_attr.rs
@@ -14,7 +14,7 @@ pub struct StyleAttribute {
 }
 
 impl ToStyleStr for StyleAttribute {
-    fn write_style<W: fmt::Write>(&self, w: &mut W, _class_name: &str) -> fmt::Result {
+    fn write_style<W: fmt::Write>(&self, w: &mut W, _class_name: Option<&str>) -> fmt::Result {
         write!(w, "{}: {};", self.key, self.value)
     }
 }
diff --git a/packages/stylist-core/src/ast/to_style_str.rs b/packages/stylist-core/src/ast/to_style_str.rs
index 1ed0224..48d44d1 100644
--- a/packages/stylist-core/src/ast/to_style_str.rs
+++ b/packages/stylist-core/src/ast/to_style_str.rs
@@ -3,12 +3,14 @@ use std::fmt;
 /// Structs implementing this trait should be able to turn into
 /// a part of a CSS style sheet.
 pub trait ToStyleStr {
-    fn to_style_str(&self, class_name: &str) -> String {
+    fn to_style_str(&self, class_name: Option<&str>) -> String {
         let mut s = String::new();
 
         self.write_style(&mut s, class_name).unwrap();
 
         s
     }
-    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: &str) -> fmt::Result;
+
+    // If None is passed as class_name, it means to write a global style.
+    fn write_style<W: fmt::Write>(&self, w: &mut W, class_name: Option<&str>) -> fmt::Result;
 }
diff --git a/packages/stylist-core/src/lib.rs b/packages/stylist-core/src/lib.rs
index cff09a7..2d5e0c4 100644
--- a/packages/stylist-core/src/lib.rs
+++ b/packages/stylist-core/src/lib.rs
@@ -9,3 +9,7 @@ mod error;
 pub use error::{Error, Result};
 pub mod ast;
 mod parser;
+
+#[cfg_attr(documenting, doc(cfg(feature = "yew_integration")))]
+#[cfg(feature = "yew_integration")]
+mod yew;
diff --git a/packages/stylist-core/src/yew.rs b/packages/stylist-core/src/yew.rs
new file mode 100644
index 0000000..f02f0e0
--- /dev/null
+++ b/packages/stylist-core/src/yew.rs
@@ -0,0 +1,29 @@
+use std::borrow::Cow;
+
+use yew::html::IntoPropValue;
+
+use crate::ast::Sheet;
+
+impl<'a> IntoPropValue<Sheet> for String {
+    fn into_prop_value(self) -> Sheet {
+        self.parse::<Sheet>().expect("Failed to parse style.")
+    }
+}
+
+impl<'a> IntoPropValue<Sheet> for &'a str {
+    fn into_prop_value(self) -> Sheet {
+        self.parse::<Sheet>().expect("Failed to parse style.")
+    }
+}
+
+impl<'a> IntoPropValue<Sheet> for Cow<'a, str> {
+    fn into_prop_value(self) -> Sheet {
+        self.parse::<Sheet>().expect("Failed to parse style.")
+    }
+}
+
+impl<'a> IntoPropValue<Sheet> for &'a Sheet {
+    fn into_prop_value(self) -> Sheet {
+        self.clone()
+    }
+}
diff --git a/packages/stylist/Cargo.toml b/packages/stylist/Cargo.toml
index 610cec6..4cdcebc 100644
--- a/packages/stylist/Cargo.toml
+++ b/packages/stylist/Cargo.toml
@@ -50,7 +50,7 @@ env_logger = "0.9"
 [features]
 random = ["rand", "getrandom"]
 default = ["random"]
-yew_integration = ["yew"]
+yew_integration = ["yew", "stylist-core/yew_integration"]
 
 [package.metadata.docs.rs]
 features = ["yew_integration"]
diff --git a/packages/stylist/src/bindings/mod.rs b/packages/stylist/src/bindings/mod.rs
deleted file mode 100644
index 1b8927e..0000000
--- a/packages/stylist/src/bindings/mod.rs
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright © 2020 Lukas Wagner
-
-#[cfg_attr(documenting, doc(cfg(feature = "yew_integration")))]
-#[cfg(feature = "yew_integration")]
-pub mod yew;
diff --git a/packages/stylist/src/bindings/yew.rs b/packages/stylist/src/bindings/yew.rs
deleted file mode 100644
index e73efd7..0000000
--- a/packages/stylist/src/bindings/yew.rs
+++ /dev/null
@@ -1,202 +0,0 @@
-//! This module contains yew specific features.
-
-use std::borrow::Cow;
-
-use yew::html::Classes;
-use yew::html::IntoPropValue;
-use yew::prelude::*;
-
-#[cfg(target_arch = "wasm32")]
-use crate::arch::document;
-use crate::Style;
-
-impl From<Style> for Classes {
-    fn from(style: Style) -> Self {
-        let mut classes = Self::new();
-        classes.push(style.get_class_name().to_string());
-        classes
-    }
-}
-
-impl IntoPropValue<Style> for String {
-    fn into_prop_value(self) -> Style {
-        self.parse().expect("Failed to parse style.")
-    }
-}
-
-impl IntoPropValue<Style> for &str {
-    fn into_prop_value(self) -> Style {
-        self.parse().expect("Failed to parse style.")
-    }
-}
-
-impl IntoPropValue<Style> for Cow<'_, str> {
-    fn into_prop_value(self) -> Style {
-        self.parse().expect("Failed to parse style.")
-    }
-}
-
-// /// A struct that implements [`From`] for both Style and anything that implements [`AsRef<str>`] and panics when
-// /// failed to parse the string into a stylesheet.
-// #[derive(Debug, Clone)]
-// pub struct StyleOrPanic {
-//     inner: Style,
-// }
-
-// impl From<Style> for StyleOrPanic {
-//     fn from(style: Style) -> Self {
-//         Self { inner: style }
-//     }
-// }
-
-// impl<T: AsRef<str>> From<T> for StyleOrPanic {
-//     fn from(style: T) -> Self {
-//         Self {
-//             inner: style.as_ref().parse().expect("Failed to parse style."),
-//         }
-//     }
-// }
-
-// impl IntoPropValue<StyleOrPanic> for String {
-//     fn into_prop_value(self) -> StyleOrPanic {
-//         self.into()
-//     }
-// }
-
-// impl IntoPropValue<StyleOrPanic> for &str {
-//     fn into_prop_value(self) -> StyleOrPanic {
-//         self.into()
-//     }
-// }
-
-// impl IntoPropValue<StyleOrPanic> for Cow<'_, str> {
-//     fn into_prop_value(self) -> StyleOrPanic {
-//         self.into()
-//     }
-// }
-
-// impl Deref for StyleOrPanic {
-//     type Target = Style;
-//     fn deref(&self) -> &Self::Target {
-//         &self.inner
-//     }
-// }
-
-/// The properties for [`GlobalStyle`] Component, please see its documentation for usage.
-#[derive(Properties, Clone, Debug)]
-pub struct GlobalStyleProps {
-    pub css: Style,
-}
-
-/// A Global Style that will be applied to `<html />` tag, inspired by [emotion](https://emotion.sh).
-///
-/// The `css` attribute accepts either a [`Style`] or anything that implements [`IntoPropValue<Style>`] and
-/// panics if the string failed to be parsed into a stylesheet.
-///
-/// # Example:
-///
-/// ```
-/// use yew::prelude::*;
-/// use stylist::yew::GlobalStyle;
-///
-/// struct App;
-///
-/// impl Component for App {
-///     type Message = ();
-///     type Properties = ();
-///
-///     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-///         Self
-///     }
-///
-///     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-///         false
-///     }
-///
-///     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-///         false
-///     }
-///
-///     fn view(&self) -> Html {
-///         html! {
-///             <>
-///                 <GlobalStyle css="color: red;" />
-///                 <div>{"Hello World!"}</div>
-///             </>
-///         }
-///     }
-/// }
-/// ```
-#[derive(Debug)]
-pub struct GlobalStyle {
-    props: GlobalStyleProps,
-
-    #[cfg(target_arch = "wasm32")]
-    style_class: Option<String>,
-}
-
-impl Component for GlobalStyle {
-    type Message = ();
-    type Properties = GlobalStyleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self {
-            props,
-
-            #[cfg(target_arch = "wasm32")]
-            style_class: None,
-        }
-    }
-
-    #[cfg(target_arch = "wasm32")]
-    fn rendered(&mut self, first_render: bool) {
-        if first_render {
-            self.update_global_style();
-        }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        false
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props = props;
-
-        #[cfg(target_arch = "wasm32")]
-        self.update_global_style();
-
-        false
-    }
-
-    fn view(&self) -> Html {
-        Html::default()
-    }
-}
-
-#[cfg(target_arch = "wasm32")]
-impl GlobalStyle {
-    fn update_global_style(&mut self) {
-        let next_style = self.props.css.get_class_name();
-        if Some(next_style) == self.style_class.as_deref() {
-            return;
-        }
-
-        let html_element = document()
-            .ok()
-            .and_then(|m| m.document_element())
-            .expect("Failed to get <html /> element.");
-        let html_class_list = html_element.class_list();
-
-        if let Some(ref m) = self.style_class {
-            html_class_list
-                .remove_1(m)
-                .expect("Failed to remove existing class.");
-        }
-
-        html_class_list
-            .add_1(&next_style)
-            .expect("Failed to add class.");
-
-        self.style_class = Some(next_style.to_string());
-    }
-}
diff --git a/packages/stylist/src/global_style.rs b/packages/stylist/src/global_style.rs
new file mode 100644
index 0000000..7f929bf
--- /dev/null
+++ b/packages/stylist/src/global_style.rs
@@ -0,0 +1,216 @@
+use std::borrow::Cow;
+use std::rc::Rc;
+use std::str::FromStr;
+
+use once_cell::unsync::OnceCell;
+
+use crate::ast::IntoSheet;
+use crate::ast::Sheet;
+use crate::manager::StyleManager;
+use crate::registry::StyleKey;
+use crate::style::StyleContent;
+use crate::style::StyleId;
+use crate::utils::get_entropy;
+use crate::{Error, Result};
+
+/// A struct that represents a global Style.
+///
+/// This class is equivalent to [`Style`](crate::Style) but for global styles.
+///
+/// It will replace Current Selectors (`&`) with `html` and apply dangling style attributes to
+/// html.
+#[derive(Debug, Clone)]
+pub struct GlobalStyle {
+    inner: Rc<StyleContent>,
+}
+
+impl GlobalStyle {
+    // The big method is monomorphic, so less code duplication and code bloat through generics
+    // and inlining
+    fn create_impl(css: Cow<'_, Sheet>, manager: StyleManager) -> Result<Self> {
+        let prefix = format!("{}-global", manager.prefix());
+
+        // Creates the StyleKey, return from registry if already cached.
+        let key = StyleKey {
+            is_global: true,
+            prefix: prefix.into(),
+            ast: css,
+        };
+
+        let reg = manager.get_registry();
+        let mut reg = reg.borrow_mut();
+
+        if let Some(m) = reg.get(&key) {
+            return Ok(Self { inner: m });
+        }
+
+        let key = StyleKey {
+            is_global: true,
+            prefix: key.prefix,
+            // I don't think there's a way to turn a Cow<'_, Sheet> to a Cow<'static, Sheet>
+            // if inner is &'static Sheet without cloning.
+            // But I think it would be good enough if allocation only happens once.
+            ast: Cow::Owned(key.ast.into_owned()),
+        };
+
+        let new_style = Self {
+            inner: StyleContent {
+                is_global: true,
+                id: StyleId(format!("{}-{}", key.prefix, get_entropy())),
+                style_str: OnceCell::new(),
+                manager,
+                key: Rc::new(key),
+            }
+            .into(),
+        };
+
+        new_style.inner.manager().mount(&new_style.inner)?;
+
+        // Register the created Style.
+        reg.register(new_style.inner.clone());
+
+        Ok(new_style)
+    }
+
+    /// Creates a new style from some parsable css with a default prefix.
+    ///
+    /// # Examples
+    ///
+    /// ```rust
+    /// use stylist::Style;
+    ///
+    /// let style = Style::new("background-color: red;")?;
+    /// # Ok::<(), stylist::Error>(())
+    /// ```
+    pub fn new<'a, Css>(css: Css) -> Result<Self>
+    where
+        Css: IntoSheet<'a>,
+    {
+        Self::new_with_manager(css, StyleManager::default())
+    }
+
+    /// Creates a new style using a custom manager.
+    pub fn new_with_manager<'a, Css, M>(css: Css, manager: M) -> Result<Self>
+    where
+        Css: IntoSheet<'a>,
+        M: Into<StyleManager>,
+    {
+        let css = css.into_sheet()?;
+        let mgr = manager.into();
+        Self::create_impl(css, mgr)
+    }
+
+    /// Get the parsed and generated style in `&str`.
+    ///
+    /// This is usually used for debug purposes or testing in non-wasm32 targets.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use stylist::GlobalStyle;
+    ///
+    /// let style = GlobalStyle::new("background-color: red;")?;
+    ///
+    /// // Example Output:
+    /// // html {
+    /// // background-color: red;
+    /// // }
+    /// println!("{}", style.get_style_str());
+    /// # Ok::<(), stylist::Error>(())
+    /// ```
+    pub fn get_style_str(&self) -> &str {
+        self.inner.get_style_str()
+    }
+
+    /// Returns a reference of style key.
+    pub(crate) fn key(&self) -> Rc<StyleKey<'static>> {
+        self.inner.key()
+    }
+
+    /// Unregister current style from style registry.
+    ///
+    /// After calling this method, the style will be unmounted from DOM after all its clones are freed.
+    pub fn unregister(&self) {
+        let reg = self.inner.manager().get_registry();
+        let mut reg = reg.borrow_mut();
+        reg.unregister(self.key());
+    }
+
+    /// Returns the [`StyleId`] for current style.
+    pub fn id(&self) -> &StyleId {
+        self.inner.id()
+    }
+}
+
+impl FromStr for GlobalStyle {
+    type Err = Error;
+
+    fn from_str(s: &str) -> Result<Self> {
+        GlobalStyle::new(s)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_simple() {
+        let global_style =
+            GlobalStyle::new("background-color: black;").expect("Failed to create Style.");
+        assert_eq!(
+            global_style.get_style_str(),
+            r#"html {
+background-color: black;
+}
+"#
+        );
+    }
+
+    #[test]
+    fn test_complex() {
+        let global_style = GlobalStyle::new(
+            r#"
+                background-color: black;
+                .with-class {
+                    color: red;
+                }
+                @media screen and (max-width: 600px) {
+                    color: yellow;
+                }
+                @supports (display: grid) {
+                    display: grid;
+                }
+
+                header, footer {
+                    border: 1px solid black;
+                }
+            "#,
+        )
+        .expect("Failed to create Style.");
+
+        assert_eq!(
+            global_style.get_style_str(),
+            r#"html {
+background-color: black;
+}
+.with-class {
+color: red;
+}
+@media screen and (max-width: 600px) {
+html {
+color: yellow;
+}
+}
+@supports (display: grid) {
+html {
+display: grid;
+}
+}
+header, footer {
+border: 1px solid black;
+}
+"#,
+        )
+    }
+}
diff --git a/packages/stylist/src/lib.rs b/packages/stylist/src/lib.rs
index 8b9229c..cf517bc 100644
--- a/packages/stylist/src/lib.rs
+++ b/packages/stylist/src/lib.rs
@@ -29,24 +29,6 @@
 //! ).expect("Failed to create style");
 //! ```
 //!
-//! If you want to use a custom prefix for your class name,
-//! you can use [`Style::create`].
-//!
-//! ```rust
-//! use stylist::Style;
-//!
-//! let style = Style::create(
-//!     "my-component",
-//!     r#"
-//!     background-color: red;
-//!
-//!     .nested {
-//!         background-color: blue;
-//!         width: 100px
-//!     }"#,
-//! ).expect("Failed to create style");
-//! ```
-//!
 //! ### YieldStyle API
 //!
 //! Alternatively, any struct that implements [`YieldStyle`] trait can call
@@ -169,9 +151,7 @@
 //! - `random`: Enabled by default, this flag uses `rand` crate to generate a random
 //!   class name. Disabling this flag will opt for a class name that is counter-based.
 //! - `yew_integration`: This flag enables yew integration, which implements [`Classes`](::yew::html::Classes) for
-//!   [`Style`] and provides a [`GlobalStyle`](yew::GlobalStyle) component for applying global styles.
-
-mod bindings;
+//!   [`Style`] and provides a [`Global`](yew::Global) component for applying global styles.
 
 #[cfg(target_arch = "wasm32")]
 #[path = "arch_wasm.rs"]
@@ -180,16 +160,18 @@ mod arch;
 pub mod manager;
 mod registry;
 
+mod global_style;
 mod style;
 mod utils;
 mod yield_style;
 
+pub use global_style::GlobalStyle;
 pub use style::Style;
 pub use yield_style::YieldStyle;
 
 #[cfg_attr(documenting, doc(cfg(feature = "yew_integration")))]
 #[cfg(feature = "yew_integration")]
-pub use bindings::yew;
+pub mod yew;
 
 #[doc(inline)]
 pub use stylist_core::ast;
diff --git a/packages/stylist/src/manager.rs b/packages/stylist/src/manager.rs
index 3665f62..7044264 100644
--- a/packages/stylist/src/manager.rs
+++ b/packages/stylist/src/manager.rs
@@ -13,8 +13,9 @@ use once_cell::unsync::Lazy;
 use web_sys::Node;
 
 use crate::registry::StyleRegistry;
+use crate::style::StyleContent;
 pub use crate::style::StyleId;
-use crate::{Result, Style};
+use crate::Result;
 
 /// A builder for [`StyleManager`].
 #[derive(Debug, Clone)]
@@ -84,7 +85,7 @@ impl StyleManagerBuilder {
     }
 }
 
-/// A struct to customise behaviour of [`Style`].
+/// A struct to customise behaviour of [`Style`](crate::Style).
 #[derive(Debug, Clone)]
 pub struct StyleManager {
     inner: Rc<StyleManagerBuilder>,
@@ -96,7 +97,7 @@ impl StyleManager {
         StyleManagerBuilder::new()
     }
 
-    /// The default prefix used by the managed [`Style`] instances.
+    /// The default prefix used by the managed [`Style`](crate::Style) instances.
     pub fn prefix(&self) -> Cow<'static, str> {
         self.inner.prefix.clone()
     }
@@ -111,9 +112,9 @@ impl StyleManager {
         self.inner.registry.clone()
     }
 
-    /// Mount the [`Style`] into the DOM tree.
+    /// Mount the [`Style`](crate::Style) into the DOM tree.
     #[cfg(target_arch = "wasm32")]
-    pub(crate) fn mount(&self, style: &Style) -> Result<()> {
+    pub(crate) fn mount(&self, content: &StyleContent) -> Result<()> {
         use crate::arch::document;
         use crate::Error;
 
@@ -122,8 +123,8 @@ impl StyleManager {
 
         (|| {
             let style_element = document.create_element("style")?;
-            style_element.set_attribute("data-style", style.id())?;
-            style_element.set_text_content(Some(style.get_style_str()));
+            style_element.set_attribute("data-style", content.id())?;
+            style_element.set_text_content(Some(content.get_style_str()));
 
             // Prepend element
             if !self.inner.append {
@@ -138,7 +139,7 @@ impl StyleManager {
         .map_err(|e| Error::Web(Some(e)))
     }
 
-    /// Unmount the [`Style`] from the DOM tree.
+    /// Unmount the [`Style`](crate::Style) from the DOM tree.
     #[cfg(target_arch = "wasm32")]
     pub(crate) fn unmount(&self, id: &StyleId) -> Result<()> {
         use crate::arch::document;
@@ -160,7 +161,7 @@ impl StyleManager {
     /// Mount the [`Style`] in to the DOM tree.
     #[cfg(not(target_arch = "wasm32"))]
     #[allow(unused_variables)]
-    pub(crate) fn mount(&self, style: &Style) -> Result<()> {
+    pub(crate) fn mount(&self, content: &StyleContent) -> Result<()> {
         // Does nothing on non-wasm targets.
         Ok(())
     }
diff --git a/packages/stylist/src/registry.rs b/packages/stylist/src/registry.rs
index bb2d74a..8171880 100644
--- a/packages/stylist/src/registry.rs
+++ b/packages/stylist/src/registry.rs
@@ -3,7 +3,7 @@ use std::collections::HashMap;
 use std::rc::Rc;
 
 use crate::ast::Sheet;
-use crate::Style;
+use crate::style::StyleContent;
 
 /// A [`StyleKey`].
 ///
@@ -11,6 +11,7 @@ use crate::Style;
 /// registry.
 #[derive(Debug, Clone, PartialEq, Hash, Eq)]
 pub(crate) struct StyleKey<'a> {
+    pub is_global: bool,
     pub prefix: Cow<'static, str>,
     pub ast: Cow<'a, Sheet>,
 }
@@ -18,13 +19,13 @@ pub(crate) struct StyleKey<'a> {
 /// The style registry is a registry that keeps an instance of all styles for current manager.
 #[derive(Debug, Default)]
 pub(crate) struct StyleRegistry {
-    styles: HashMap<Rc<StyleKey<'static>>, Style>,
+    styles: HashMap<Rc<StyleKey<'static>>, Rc<StyleContent>>,
 }
 
 impl StyleRegistry {
-    pub(crate) fn register(&mut self, style: Style) {
-        let key = style.key().clone();
-        if self.styles.insert(key, style).is_some() {
+    pub(crate) fn register(&mut self, content: Rc<StyleContent>) {
+        let key = content.key().clone();
+        if self.styles.insert(key, content).is_some() {
             panic!("A Style with this StyleKey has already been created.");
         }
     }
@@ -33,7 +34,7 @@ impl StyleRegistry {
         self.styles.remove(&key);
     }
 
-    pub(crate) fn get(&self, key: &StyleKey<'_>) -> Option<Style> {
+    pub(crate) fn get(&self, key: &StyleKey<'_>) -> Option<Rc<StyleContent>> {
         self.styles.get(key).cloned()
     }
 }
@@ -45,6 +46,7 @@ mod tests {
 
     use super::*;
     use crate::manager::StyleManager;
+    use crate::*;
 
     fn sample_scopes() -> Sheet {
         "color: red;".parse().expect("Failed to Parse style.")
diff --git a/packages/stylist/src/style.rs b/packages/stylist/src/style.rs
index f2c8b93..d0b8a0f 100644
--- a/packages/stylist/src/style.rs
+++ b/packages/stylist/src/style.rs
@@ -19,7 +19,7 @@ use crate::utils::get_entropy;
 ///
 /// This is primarily used by [`StyleManager`] to track the mounted instance of [`Style`].
 #[derive(Debug, Clone, PartialEq, Eq, Hash)]
-pub struct StyleId(String);
+pub struct StyleId(pub(crate) String);
 
 impl Deref for StyleId {
     type Target = str;
@@ -35,43 +35,42 @@ impl fmt::Display for StyleId {
 }
 
 #[derive(Debug)]
-struct StyleContent {
-    key: Rc<StyleKey<'static>>,
+pub(crate) struct StyleContent {
+    pub is_global: bool,
 
-    /// The designated class name of this style
-    class_name: String,
+    pub id: StyleId,
 
-    style_str: OnceCell<String>,
+    pub key: Rc<StyleKey<'static>>,
 
-    id: OnceCell<StyleId>,
+    pub style_str: OnceCell<String>,
 
-    manager: StyleManager,
+    pub manager: StyleManager,
 }
 
 impl StyleContent {
-    fn id(&self) -> &StyleId {
-        self.id
-            .get_or_init(|| StyleId(self.get_class_name().to_owned()))
-    }
-
-    fn get_class_name(&self) -> &str {
-        &self.class_name
+    pub fn id(&self) -> &StyleId {
+        &self.id
     }
 
-    fn get_style_str(&self) -> &str {
-        self.style_str
-            .get_or_init(|| self.key.ast.to_style_str(self.get_class_name()))
+    pub fn get_style_str(&self) -> &str {
+        self.style_str.get_or_init(|| {
+            self.key.ast.to_style_str(if self.is_global {
+                None
+            } else {
+                Some(&*self.id())
+            })
+        })
     }
 
-    fn unmount(&self) -> Result<()> {
+    pub fn unmount(&self) -> Result<()> {
         self.manager().unmount(self.id())
     }
 
-    fn key(&self) -> Rc<StyleKey<'static>> {
+    pub fn key(&self) -> Rc<StyleKey<'static>> {
         self.key.clone()
     }
 
-    fn manager(&self) -> &StyleManager {
+    pub fn manager(&self) -> &StyleManager {
         &self.manager
     }
 }
@@ -87,7 +86,7 @@ impl Drop for StyleContent {
 ///
 /// # Style Scoping and Substitution Rule for Current Selector(`&`):
 ///
-/// Currently, Stylist processes selectors follow the following rules:
+/// Currently, Stylist processes selectors with the following rules:
 ///
 /// If a style attribute is not in any block (dangling style attribute), it will be scoped with
 ///   the generated class name. (Applied to the element where the generated class name is applied
@@ -113,7 +112,7 @@ impl Drop for StyleContent {
 ///   apply:
 /// - If a selector contains a Current Selector(`&`), the current selector will be substituted with
 ///   the generated class name.
-/// - If a selectors starts with a pseudo-class selector, it will be applied to the root element.
+/// - If a selector starts with a pseudo-class selector, it will be applied to the root element.
 /// - For other selectors, it will be prefixed with the generated class name.
 ///
 ///   Example, original style:
@@ -166,6 +165,7 @@ impl Style {
     ) -> Result<Self> {
         // Creates the StyleKey, return from registry if already cached.
         let key = StyleKey {
+            is_global: false,
             prefix: class_prefix,
             ast: css,
         };
@@ -174,10 +174,11 @@ impl Style {
         let mut reg = reg.borrow_mut();
 
         if let Some(m) = reg.get(&key) {
-            return Ok(m);
+            return Ok(Style { inner: m });
         }
 
         let key = StyleKey {
+            is_global: false,
             prefix: key.prefix,
             // I don't think there's a way to turn a Cow<'_, Sheet> to a Cow<'static, Sheet>
             // if inner is &'static Sheet without cloning.
@@ -187,19 +188,19 @@ impl Style {
 
         let new_style = Self {
             inner: StyleContent {
-                class_name: format!("{}-{}", key.prefix, get_entropy()),
+                is_global: false,
+                id: StyleId(format!("{}-{}", key.prefix, get_entropy())),
                 style_str: OnceCell::new(),
-                id: OnceCell::new(),
                 manager,
                 key: Rc::new(key),
             }
             .into(),
         };
 
-        new_style.inner.manager().mount(&new_style)?;
+        new_style.inner.manager().mount(&new_style.inner)?;
 
         // Register the created Style.
-        reg.register(new_style.clone());
+        reg.register(new_style.inner.clone());
 
         Ok(new_style)
     }
@@ -280,7 +281,7 @@ impl Style {
     /// # Ok::<(), stylist::Error>(())
     /// ```
     pub fn get_class_name(&self) -> &str {
-        self.inner.get_class_name()
+        self.inner.id()
     }
 
     /// Get the parsed and generated style in `&str`.
diff --git a/packages/stylist/src/yew.rs b/packages/stylist/src/yew.rs
new file mode 100644
index 0000000..74313b5
--- /dev/null
+++ b/packages/stylist/src/yew.rs
@@ -0,0 +1,137 @@
+//! This module contains yew specific features.
+
+use std::borrow::Cow;
+
+use crate::ast::Sheet;
+use yew::html::Classes;
+use yew::html::IntoPropValue;
+use yew::prelude::*;
+
+use crate::Style;
+
+use crate::GlobalStyle;
+
+impl From<Style> for Classes {
+    fn from(style: Style) -> Self {
+        let mut classes = Self::new();
+        classes.push(style.get_class_name().to_string());
+        classes
+    }
+}
+
+impl IntoPropValue<Style> for String {
+    fn into_prop_value(self) -> Style {
+        self.parse().expect("Failed to parse style.")
+    }
+}
+
+impl IntoPropValue<Style> for &str {
+    fn into_prop_value(self) -> Style {
+        self.parse().expect("Failed to parse style.")
+    }
+}
+
+impl IntoPropValue<Style> for Cow<'_, str> {
+    fn into_prop_value(self) -> Style {
+        self.parse().expect("Failed to parse style.")
+    }
+}
+
+/// The properties for [`Global`] Component, please see its documentation for usage.
+#[derive(Properties, Clone, Debug)]
+pub struct GlobalProps {
+    pub css: Sheet,
+}
+
+/// A Global Style that will be applied to `<html />` tag, inspired by [emotion](https://emotion.sh).
+///
+/// The `css` attribute accepts anything that implements [`IntoPropValue<Sheet>`] and
+/// panics if the string failed to be parsed into a stylesheet.
+///
+/// # Example:
+///
+/// ```
+/// use yew::prelude::*;
+/// use stylist::yew::Global;
+///
+/// struct App;
+///
+/// impl Component for App {
+///     type Message = ();
+///     type Properties = ();
+///
+///     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+///         Self
+///     }
+///
+///     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+///         false
+///     }
+///
+///     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///         html! {
+///             <>
+///                 <Global css="color: red;" />
+///                 <div>{"Hello World!"}</div>
+///             </>
+///         }
+///     }
+/// }
+/// ```
+#[derive(Debug)]
+pub struct Global {
+    props: GlobalProps,
+
+    global_style: Option<GlobalStyle>,
+}
+
+impl Component for Global {
+    type Message = ();
+    type Properties = GlobalProps;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self {
+            props,
+
+            global_style: None,
+        }
+    }
+
+    fn rendered(&mut self, first_render: bool) {
+        if first_render {
+            self.update_global_style();
+        }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        false
+    }
+
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        self.props = props;
+
+        #[cfg(target_arch = "wasm32")]
+        self.update_global_style();
+
+        false
+    }
+
+    fn view(&self) -> Html {
+        Html::default()
+    }
+}
+
+impl Global {
+    fn update_global_style(&mut self) {
+        if let Some(ref m) = self.global_style {
+            m.unregister();
+        }
+
+        self.global_style =
+            Some(GlobalStyle::new(&self.props.css).expect("Failed to parse style."));
+    }
+}