Merge pull request #15 from abishekatp/style_modularized

Style modularized

Cargo.toml

@@ -3,4 +3,4 @@ members = ["stylers", "stylers_test"]
 exclude = ["examples"]
 
 [workspace.package]
-version = "0.2.2"
+version = "0.3.0"

README.md

@@ -1,17 +1,18 @@
 # Stylers
 - Scoped CSS for Rust web frameworks like Leptos.
-- style! macro is for writing css inside rust functions directly. It will validates css properties as well.
-- style_sheet! macro is for writing css in external css file and importing that.
+- `style!` macro is for writing css inside rust functions directly. It will validates css properties as well.
+- `style_sheet!` macro is for writing css in external css file and importing that inside rust functions.
+- `style_str!` macro is same as `style!` macro but it will return the tuple `(class_name, style_val)` instead of saving the style_val to the separate file.
+- `style_sheet_str!` this same as `style_sheet!` macro but returns `(class_name, style_val)` instead of saving the style_val to the separate file.
 
-### Installtion
+## Installtion
 ```cargo add stylers```
 
 ## Leptos Example
 ### style!
 ```rust
 #[component]
 fn Hello(cx: Scope, name: &'static str) -> impl IntoView {
-
     let styler_class = style! {"Hello",
         #two{
             color: blue;
@@ -60,10 +61,69 @@ fn Hello(cx: Scope, name: &'static str) -> impl IntoView {
     }
 }
 ```
-- In this case ```hello.css``` file should be located inside the root directory of the project.
+- In this case you should be place the ```hello.css``` file inside the `root` directory of the project.
+
+### style_str!
+- Note that in `style_str!` macro we don't need to pass the component name as we do in `style!` macro.
+```rust
+#[component]
+pub fn GreenButton(cx: Scope) -> impl IntoView {
+    let (class_name, style_val) = style_str! {
+        button {
+            background-color: green;
+            border-radius: 8px;
+            border-style: none;
+            box-sizing: border-box;
+            color: yellow;
+            cursor: pointer;
+            display: inline-block;
+            font-family: r#"Haas Grot Text R Web"#, r#"Helvetica Neue"#, Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+            height: 40px;
+            line-height: 20px;
+            list-style: none;
+            margin: 0;
+            outline: none;
+            padding: 10px 16px;
+            position: relative;
+            text-align: center;
+            text-decoration: none;
+            transition: color 100ms;
+            vertical-align: baseline;
+            user-select: none;
+            -webkit-user-select: none;
+        }
+        button:hover{
+            background-color: yellow;
+            color: green;
+        }
+    };
+
+    view! {cx, class = class_name,
+        <style>{style_val}</style>
+        <button>"I am green button"</button>
+    }
+}
+```
+
+### style_sheet_str!
+```rusr
+#[component]
+pub fn BlueButton(cx: Scope) -> impl IntoView {
+    let (class_name, style_val) = style_sheet_str!("./src/button.css");
+
+    view! {cx, class = class_name,
+        <style>{style_val}</style>
+        <button>"I am blue button"</button>
+    }
+}
+```
+- In this case you should be place the ```button.css``` file inside the `src` directory of the project.
+
 ## How it works:
 
-- Both style and style_sheet macros generate a css file with the given name inside the `./target/stylers/css` directory.
+- Both `style!` and `style_sheet!` macros generate a css file with the given name inside the `./target/stylers/css` directory.
 - For e.g. below code generates mystyle.css in `./target/stylers/css` directory and also generates one combined `./target/stylers/main.css` with all css files.
 ```rust
 style!{"mystyle",
@@ -73,8 +133,9 @@ style!{"mystyle",
 }
 ```
 
-## Edge cases for style! macro
+## Edge cases handled for `style` and `style_sheet` macros
 - By default double quotes ( " ) around css property values will be removed. If user wants to retain the double quotes they have to wrap it using ```raw_str``` as given below:
+- these rules apply for both `style` and `style_sheet` macros
 #### Input
 ```rust
 style!(
@@ -92,7 +153,7 @@ style!(
     }
 ```
 
-## Optional build process using Trunk
+## Optional build process using Trunk(Only when you use `style` or `style_sheet` macro )
 - You have to include generated main.css in the index.html
 (e.g ```<link rel="stylesheet" href="/main.css">```).
 

examples/style_macro/index.html → examples/style/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Styler</title>
+    <title>Stylers</title>
 
     <link rel="stylesheet" href="/main.css">
 </head>