Add styling macro.

Author: Conner-PYS

html-node-core/src/node/doctype.rs

@@ -11,7 +11,7 @@ pub struct Doctype {
     /// The value of the doctype.
     ///
     /// ```html
-    /// <!DOCTYPE synax>
+    /// <!DOCTYPE syntax>
     /// ```
     pub syntax: String,
 }

html-node-core/src/node/unsafe_text.rs

@@ -14,7 +14,7 @@ pub struct UnsafeText {
 }
 
 impl Display for UnsafeText {
-    /// Unformatted text.
+    /// Unescaped text.
     ///
     /// This string is **not** HTML encoded!
     fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {

html-node-macro/Cargo.toml

@@ -1,15 +1,16 @@
 [package]
 name = "html-node-macro"
-authors.workspace = true
-categories.workspace = true
+
+authors.workspace     = true
+categories.workspace  = true
 description.workspace = true
-edition.workspace = true
-homepage.workspace = true
-keywords.workspace = true
-license.workspace = true
-readme.workspace = true
-repository.workspace = true
-version.workspace = true
+edition.workspace     = true
+homepage.workspace    = true
+keywords.workspace    = true
+license.workspace     = true
+readme.workspace      = true
+repository.workspace  = true
+version.workspace     = true
 
     [package.metadata.docs.rs]
     all-features = true
@@ -19,12 +20,13 @@ version.workspace = true
 proc-macro = true
 
 [dependencies]
-proc-macro2 = "1"
+proc-macro2             = "1"
 proc-macro2-diagnostics = { version = "0.10", default-features = false }
-quote = "1"
-rstml = { version = "0.11", default-features = false }
-syn = "2"
-syn_derive = { version = "0.1", optional = true }
+quote                   = "1"
+rstml                   = { version = "0.11", default-features = false }
+syn                     = "2"
+syn_derive              = { version = "0.1", optional = true }
 
 [features]
-typed = ["dep:syn_derive"]
+basic-css = []
+typed     = ["dep:syn_derive"]

html-node-macro/src/lib.rs

@@ -7,27 +7,29 @@
 
 mod node_handlers;
 
-use std::{
-    collections::{HashMap, HashSet},
-    os::linux::raw,
-};
+use std::collections::{HashMap, HashSet};
 
 use node_handlers::{
     handle_block, handle_comment, handle_doctype, handle_element, handle_fragment, handle_raw_text,
     handle_text,
 };
 use proc_macro::TokenStream;
-use proc_macro2::{Ident, Span, TokenStream as TokenStream2};
+use proc_macro2::{Ident, TokenStream as TokenStream2};
 use proc_macro2_diagnostics::Diagnostic;
-use quote::{quote, quote_spanned};
+use quote::quote;
+#[cfg(feature = "basic-css")]
+use quote::quote_spanned;
 use rstml::{node::Node, Parser, ParserConfig};
-use syn::{spanned::Spanned, Type};
+#[cfg(feature = "basic-css")]
+use syn::spanned::Spanned;
+use syn::Type;
 
 #[proc_macro]
 pub fn html(tokens: TokenStream) -> TokenStream {
     html_inner(tokens.into(), None)
 }
 
+#[cfg(feature = "basic-css")]
 #[proc_macro]
 pub fn style(tokens: TokenStream) -> TokenStream {
     style_inner(tokens.into())
@@ -178,11 +180,22 @@ fn tokenize_nodes(
     (token_streams, diagnostics)
 }
 
+/// Naive conversion of a rust token stream into css content.
+///
+/// Strips all whitespace from the given tokens, concatenates them into a
+/// single string and returns a token stream of the given css content
+/// wrapped in an HTML style tag.
+#[cfg(feature = "basic-css")]
 fn style_inner(tokens: TokenStream2) -> TokenStream {
     let span = tokens.span();
     let raw_css = tokens
         .into_iter()
-        .map(|t| t.to_string().split_whitespace().collect::<String>())
+        .map(|token_tree| {
+            token_tree
+                .to_string()
+                .split_whitespace()
+                .collect::<String>()
+        })
         .collect::<String>();
 
     quote_spanned! { span=>

html-node-macro/src/node_handlers/mod.rs

@@ -5,7 +5,7 @@ use std::collections::{HashMap, HashSet};
 
 use proc_macro2::{Ident, Literal, TokenStream as TokenStream2};
 use proc_macro2_diagnostics::{Diagnostic, SpanDiagnosticExt};
-use quote::{quote, quote_spanned, ToTokens};
+use quote::{quote, ToTokens};
 use rstml::node::{
     KeyedAttribute, NodeAttribute, NodeBlock, NodeComment, NodeDoctype, NodeElement, NodeFragment,
     NodeName, NodeText, RawText,

html-node/Cargo.toml

@@ -26,6 +26,10 @@ required-features = ["axum"]
 name              = "typed_custom_attributes"
 required-features = ["typed"]
 
+[[example]]
+name              = "styling"
+required-features = ["basic-css"]
+
 [dependencies]
 html-node-core  = { version = "0.2", path = "../html-node-core" }
 html-node-macro = { version = "0.2", path = "../html-node-macro" }
@@ -35,7 +39,8 @@ axum  = "0.6"
 tokio = { version = "1", features = ["macros", "rt-multi-thread"] }
 
 [features]
-axum   = ["html-node-core/axum"]
-pretty = ["html-node-core/pretty"]
-serde  = ["html-node-core/serde"]
-typed  = ["html-node-core/typed", "html-node-macro/typed"]
+axum      = ["html-node-core/axum"]
+basic-css = ["html-node-macro/basic-css"]
+pretty    = ["html-node-core/pretty"]
+serde     = ["html-node-core/serde"]
+typed     = ["html-node-core/typed", "html-node-macro/typed"]

html-node/examples/axum.rs

@@ -100,18 +100,3 @@ async fn pretty() -> Pretty {
         </div>
     }))
 }
-
-async fn css() -> Pretty {
-    Pretty(layout(html! {
-        { style! {
-            html {
-                margin: 0;
-                padding: 0;
-                height: 100vh;
-            }
-        } }
-        <div>
-            <h1>Pretty</h1>
-        </div>
-    }))
-}

html-node/examples/styling.rs

@@ -0,0 +1,191 @@
+use html_node::{html, style};
+
+fn main() {
+    bare_style();
+    string_style();
+    macro_style_unsupported_css();
+    macro_style_supported_css();
+}
+
+/// Try and directly insert CSS into the style element.
+///
+/// # Output
+///
+/// ```text
+/// Bare style:
+/// <div>
+///    <style>
+///        ul { outline : 5px solid # CCDDFF ; padding - top : 15px ; }
+///    </style>
+///    <ul>
+///        <li>
+///            one
+///        </li>
+///        <li>
+///            two
+///        </li>
+///    </ul>
+/// </div>
+/// ```
+fn bare_style() {
+    let node = html! {
+        <div>
+            <style>
+                ul {
+                    outline: 5px solid #CCDDFF;
+                    padding-top: 15px;
+                }
+            </style>
+            <ul>
+                <li>one</li>
+                <li>two</li>
+            </ul>
+        </div>
+    };
+
+    println!("Bare style:\n{node:#}");
+}
+
+/// Try and insert CSS into the style element via a string.
+///
+/// # Output
+///
+/// ```text
+/// String style:
+/// <div><style>"
+///                 ul {
+///                     outline: 5px solid #CCDDFF;
+///                     padding-top: 15px;
+///                 }
+///             "</style><ul><li>one</li><li>two</li></ul></div>
+///
+/// Pretty string style:
+/// <div>
+///     <style>
+///         "
+///                         ul {
+///                             outline: 5px solid #CCDDFF;
+///                             padding-top: 15px;
+///                         }
+///                     "
+///     </style>
+///     <ul>
+///         <li>
+///             one
+///         </li>
+///         <li>
+///             two
+///         </li>
+///     </ul>
+/// </div>
+/// ```
+fn string_style() {
+    let node = html! {
+        <div>
+            <style>"
+                ul {
+                    outline: 5px solid #CCDDFF;
+                    padding-top: 15px;
+                }
+            "</style>
+            <ul>
+                <li>one</li>
+                <li>two</li>
+            </ul>
+        </div>
+    };
+
+    println!("String style:\n{node}");
+    println!("Pretty string style:\n{node:#}");
+}
+
+/// Insert a style element and inner CSS content.
+///
+/// The macro naively strips all whitespace from the CSS content, meaning the
+/// shorthand version of outline as used below will still be rendered
+/// incorrectly. See the next example for a workaround.
+///
+/// Note that the `<style></style>` tags are inserted by the macro.
+///
+/// # Output
+///
+/// ```text
+/// Macro + unsupported CSS style:
+/// <div>
+///     <style>
+///         ul{outline:5pxsolid#CCDDFF;padding-top:15px;}
+///     </style>
+///     <ul>
+///         <li>
+///             one
+///         </li>
+///         <li>
+///             two
+///         </li>
+///     </ul>
+/// </div>
+/// ```
+fn macro_style_unsupported_css() {
+    let node = html! {
+        <div>
+            { style! {
+                ul {
+                    outline: 5px solid #CCDDFF;
+                    padding-top: 15px;
+                }
+            } }
+            <ul>
+                <li>one</li>
+                <li>two</li>
+            </ul>
+        </div>
+    };
+
+    println!("Macro + unsupported CSS style:\n{node:#}");
+}
+
+/// Insert a style element and inner CSS content, correctly.
+///
+/// Since the macro strips all whitespace, use long-form CSS properties to
+/// specify the needed selectors and rules.
+///
+/// Note that the `<style></style>` tags are inserted by the macro.
+///
+/// # Output
+///
+/// ```text
+/// Macro + CSS style:
+/// <div>
+///     <style>
+///         ul{outline-width:5px;outline-style:solid;outline-color:#CCDDFF;padding-top:15px;}
+///     </style>
+///     <ul>
+///         <li>
+///             one
+///         </li>
+///         <li>
+///             two
+///         </li>
+///     </ul>
+/// </div>
+/// ```
+fn macro_style_supported_css() {
+    let node = html! {
+        <div>
+            { style! {
+                ul {
+                    outline-width: 5px;
+                    outline-style: solid;
+                    outline-color: #CCDDFF;
+                    padding-top: 15px;
+                }
+            } }
+            <ul>
+                <li>one</li>
+                <li>two</li>
+            </ul>
+        </div>
+    };
+
+    println!("Macro + CSS style:\n{node:#}");
+}