More hygenic version of styled_components

Cargo.toml

@@ -3,6 +3,7 @@ members = [
     "packages/stylist",
     "packages/stylist-core",
     "packages/stylist-macros",
+    "packages/stylist-yew-macros",
 
     "examples/benchmarks",
     "examples/yew-proc-macros",

examples/yew-integration/src/main.rs

@@ -1,10 +1,11 @@
-use stylist::yew::{styled_component, Global};
+use stylist::yew::{use_stylist, Global};
 use yew::prelude::*;
 
 use log::Level;
 
-#[styled_component(Inside)]
+#[function_component(Inside)]
 pub fn inside() -> Html {
+    use_stylist!(css);
     html! {
         <div class={css!(r#"
             width: 200px;
@@ -24,8 +25,9 @@ pub fn inside() -> Html {
     }
 }
 
-#[styled_component(App)]
+#[function_component(App)]
 pub fn app() -> Html {
+    use_stylist!(css);
     html! {
         <>
             // Global Styles can be applied with <Global /> component.

examples/yew-proc-macros/src/main.rs

@@ -1,10 +1,11 @@
-use stylist::yew::{styled_component, Global};
+use stylist::yew::{use_stylist, Global};
 use yew::prelude::*;
 
 use log::Level;
 
-#[styled_component(Inside)]
+#[function_component(Inside)]
 pub fn inside() -> Html {
+    use_stylist!(css);
     html! {
         <div class={css!(r#"
             width: 200px;
@@ -24,8 +25,9 @@ pub fn inside() -> Html {
     }
 }
 
-#[styled_component(App)]
+#[function_component(App)]
 pub fn app() -> Html {
+    use_stylist!(css);
     html! {
         <>
             // Global Styles can be applied with <Global /> component.

examples/yew-theme-context/src/contexts/theme.rs

@@ -1,7 +1,6 @@
 use std::ops::Deref;
 
 use once_cell::sync::Lazy;
-use stylist::yew::styled_component;
 use yew::html::ImplicitClone;
 use yew::prelude::*;
 
@@ -80,7 +79,7 @@ pub(crate) struct ThemeProviderProps {
     pub children: Children,
 }
 
-#[styled_component(ThemeProvider)]
+#[function_component(ThemeProvider)]
 pub(crate) fn theme_provider(props: &ThemeProviderProps) -> Html {
     let theme_kind = use_state(|| ThemeKind::Light);
 

examples/yew-theme-context/src/main.rs

@@ -1,4 +1,4 @@
-use stylist::yew::{styled_component, Global};
+use stylist::yew::{use_stylist, Global};
 use yew::prelude::*;
 
 use log::Level;
@@ -7,8 +7,9 @@ mod contexts;
 
 use contexts::{use_theme, ThemeKind, ThemeProvider};
 
-#[styled_component(Inside)]
+#[function_component(Inside)]
 pub fn inside() -> Html {
+    use_stylist!(css);
     let theme = use_theme();
 
     let theme_str = match theme.kind() {
@@ -37,8 +38,9 @@ pub fn inside() -> Html {
     }
 }
 
-#[styled_component(App)]
+#[function_component(App)]
 pub fn app() -> Html {
+    use_stylist!(css);
     let theme = use_theme();
 
     let theme_str = match theme.kind() {
@@ -97,7 +99,7 @@ pub fn app() -> Html {
     }
 }
 
-#[styled_component(Root)]
+#[function_component(Root)]
 pub fn root() -> Html {
     html! {
         <ThemeProvider>

packages/stylist-macros/src/lib.rs

@@ -13,13 +13,11 @@ mod inline;
 mod literal;
 
 mod css;
-mod css_yew_impl;
 mod global_style;
 mod output;
 mod sheet;
 mod spacing_iterator;
 mod style;
-mod styled_component;
 
 #[proc_macro]
 #[proc_macro_error]
@@ -44,14 +42,3 @@ pub fn global_style(input: TokenStream) -> TokenStream {
 pub fn css(input: TokenStream) -> TokenStream {
     css::macro_fn(input.into()).into()
 }
-
-#[proc_macro]
-#[proc_macro_error]
-pub fn __css_yew_impl(input: TokenStream) -> TokenStream {
-    css_yew_impl::macro_fn(input.into()).into()
-}
-
-#[proc_macro_attribute]
-pub fn styled_component(attr: TokenStream, item: TokenStream) -> TokenStream {
-    styled_component::macro_fn(attr, item)
-}

packages/stylist-yew-macros/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "stylist-yew-macros"
+version = "0.1.0"
+edition = "2018"
+license = "MIT"
+repository = "https://github.com/futursolo/stylist-rs"
+authors = [
+    "Kaede Hoshiakwa <futursolo@icloud.com>",
+    "Martin Molzer <ga65guy@mytum.de>",
+]
+description = "Stylist is a CSS-in-Rust styling solution for WebAssembly Applications."
+keywords = [
+    "CSS",
+    "web",
+    "css-in-rust",
+    "yew"
+]
+categories = ["wasm", "web-programming"]
+readme = "README.md"
+homepage = "https://github.com/futursolo/stylist-rs"
+resolver = "2"

packages/stylist-yew-macros/README.md

@@ -0,0 +1,8 @@
+## Stylist Yew Macros
+
+This crate exists mainly to work around with documentation, otherwise it should be understood to be part of ::stylist::yew.
+
+To be more specific, `#[macro_export] macro_rules!` exports a macro at the crate root, which also shows up documentation, unless marked as `#[doc(hidden)]`, which on the other hand is infectuous and hides also reexports, which we'd want to do to use it as `::stylist::yew::use_stylist!`. They also can't be exported from proc-macro crates, i.e. `stylist-macros` yet.
+
+Tracking issue:
+- rustdoc: doc(hidden) also hides re-exports: https://github.com/rust-lang/rust/issues/59368

packages/stylist-yew-macros/src/lib.rs

@@ -0,0 +1,61 @@
+#![no_std]
+
+#[macro_export]
+macro_rules! __use_stylist_item {
+    (($dol:tt) , $mgr:ident, use css as $i:ident) => {
+        macro_rules! $i
+                {
+                    ($dol( $dol args:tt )*) => {
+                        ::stylist::css!($dol( $dol args )*).with_manager($mgr.clone())
+                    };
+                }
+    };
+    (($dol:tt) , $mgr:ident, use style as $i:ident) => {
+        macro_rules! $i
+                {
+                    ($dol( $dol args:tt )*) => {
+                        ::stylist::style!($dol( $dol args )*).with_manager($mgr.clone())
+                    };
+                }
+    };
+    (($dol:tt) , $mgr:ident, use global_style as $i:ident) => {
+        macro_rules! $i
+                {
+                    ($dol( $dol args:tt )*) => {
+                        ::stylist::global_style!($dol( $dol args )*).with_manager($mgr.clone())
+                    };
+                }
+    };
+}
+
+#[macro_export]
+macro_rules! __use_stylist_item_dispatch {
+    ($mgr:ident, use css as $i:ident) => {
+        $crate::__use_stylist_item!(($) , $mgr, use css as $i)
+    };
+    ($mgr:ident, use css) => {
+        $crate::__use_stylist_item!(($) , $mgr, use css as css)
+    };
+    ($mgr:ident, use style as $i:ident) => {
+        $crate::__use_stylist_item!(($) , $mgr, use style as $i)
+    };
+    ($mgr:ident, use style) => {
+        $crate::__use_stylist_item!(($) , $mgr, use style as style)
+    };
+    ($mgr:ident, use global_style as $i:ident) => {
+        $crate::__use_stylist_item!(($) , $mgr, use global_style as $i)
+    };
+    ($mgr:ident, use global_style) => {
+        $crate::__use_stylist_item!(($) , $mgr, use global_style as global_style)
+    };
+}
+
+#[macro_export]
+macro_rules! __use_stylist {
+    ($($l:ident $(as $i:ident)?),+) => {
+        let __stylist_style_manager__ =
+            ::yew::functional::use_context::<::stylist::manager::StyleManager>()
+                .unwrap_or_default();
+        $($crate::__use_stylist_item_dispatch!(__stylist_style_manager__, use $l$( as $i)?));*
+    };
+}

packages/stylist/Cargo.toml

@@ -26,6 +26,7 @@ crate-type = ["cdylib", "rlib"]
 [dependencies]
 stylist-core = { path = "../stylist-core", version = "0.10.0" }
 stylist-macros = { path = "../stylist-macros", version = "0.10.0", optional = true }
+stylist-yew-macros = { path = "../stylist-yew-macros", version = "0.1.0" }
 
 once_cell = "1.8.0"
 rand = { version = "0.8.4", optional = true }

packages/stylist/src/lib.rs

@@ -20,10 +20,11 @@
 //! use std::borrow::Cow;
 //!
 //! use yew::prelude::*;
-//! use stylist::yew::styled_component;
+//! use stylist::yew::use_stylist;
 //!
-//! #[styled_component(MyStyledComponent)]
+//! #[function_component(MyStyledComponent)]
 //! fn my_styled_component() -> Html {
+//!     use_stylist!(css);
 //!     html! {<div class={css!("color: red;")}>{"Hello World!"}</div>}
 //! }
 //! ```

packages/stylist/src/yew/mod.rs

@@ -3,34 +3,28 @@
 use yew::html::Classes;
 use yew::html::IntoPropValue;
 
-#[doc(hidden)]
-#[cfg(feature = "macros")]
-pub use stylist_macros::__css_yew_impl;
-
-/// A procedural macro to style Yew component.
+/// A procedural macro to style a functional Yew component. This introduces context
+/// sensitive versions of stylist macros that respect the [`StyleManager`] scoped to
+/// the component.
+/// The arguments are the comma separated names of the macros you want to use, optionally
+/// followed by `as <ident>`.
 ///
 /// # Example:
 ///
 /// ```rust
-/// use std::borrow::Cow;
-///
 /// use yew::prelude::*;
-/// use stylist::yew::styled_component;
+/// use stylist::yew::use_stylist;
 ///
-/// #[styled_component(MyStyledComponent)]
+/// #[function_component(MyStyledComponent)]
 /// fn my_styled_component() -> Html {
+///     use_stylist!(css, style as sstyle, global_style);
 ///     html! {<div class={css!("color: red;")}>{"Hello World!"}</div>}
 /// }
 /// ```
-///
-/// # Note:
-///
-/// You don't need to import [`css!`](crate::css) inside of a `styled_component`.
-///
-/// This macro imports a special version of [`css!`](crate::css) macro that is aware of the current style manager.
+#[doc(inline)]
 #[cfg_attr(documenting, doc(cfg(feature = "macros")))]
 #[cfg(feature = "macros")]
-pub use stylist_macros::styled_component;
+pub use stylist_yew_macros::__use_stylist as use_stylist;
 
 use crate::ast::Sheet;
 use crate::manager::StyleManager;