feat: relative style paths & component crate example

examples/leptos-components/.gitignore

@@ -0,0 +1,14 @@
+# Generated by Cargo
+# will have compiled files and executables
+debug/
+target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb

examples/leptos-components/Cargo.toml

@@ -0,0 +1,33 @@
+[package]
+name = "leptos-components"
+version = "0.1.0"
+rust-version = "1.82"
+edition = "2021"
+publish = false
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+leptos = { version = "0.7.0-rc1" }
+leptos_meta = { version = "0.7.0-rc1" }
+leptos_router = { version = "0.7.0-rc1" }
+
+sabry = {path = "../../", features = ["lepty-scoping"]}
+
+[build-dependencies]
+sabry = {path = "../../", features = ["build", "lepty-scoping"]}
+define-styles = {path = "../define-styles"}
+
+[features]
+hydrate = ["leptos/hydrate"]
+ssr = [
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+]
+
+[package.metadata.sabry]
+css.minify = true
+# No need for bundle
+# css.bundle = "target/.sabry/target/bundle.css"

examples/leptos-components/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

examples/leptos-components/README.md

@@ -0,0 +1,6 @@
+<picture>
+    <source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
+    <img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
+</picture>
+
+This is an example of sabry with leptos-axum, made with [leptos-axum sterter template](https://github.com/leptos-rs/start-axum)

examples/leptos-components/build.rs

@@ -0,0 +1,11 @@
+use define_styles::{theme, utils, tokens};
+
+fn main(){
+    sabry::buildy(
+        sabry::usey!(
+            utils!(),
+            theme!(),
+            tokens!()
+        )
+    ).expect("Failed to build with sabry");
+}

examples/leptos-components/src/lib.rs

@@ -0,0 +1,52 @@
+use leptos::prelude::*;
+use leptos_meta::Style;
+use sabry::styly;
+
+#[component]
+pub fn Aside() -> impl IntoView {
+    let showme = RwSignal::new(true);
+
+    view!{class=SCOPE,
+        <Style>{SCOPE_CSS}</Style>
+        <Show when=move|| *showme.read()>
+            <aside>
+                <h1>"Welcome to 'sabried' leptos!"</h1>
+                <p>"This is the 'Aside' component"</p>
+                <p>"which we declared in another crate"</p>
+                <p>"styled with sabry too!"</p>
+                <br/>
+                <button class="btn" on:click=move|_| *showme.write() = false>
+                    "Click me to hide aside!"
+                </button>
+            </aside>
+        </Show>
+    }
+}
+
+styly!(const scope:scss {"
+    @use 'theme';
+    @use 'utils';
+    @use 'tokens';
+
+    aside {
+        @include theme.surface(secondary);
+        @include utils.flex(column, center, center);
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: max-content;
+        z-index: 1000;
+    }
+
+    p {
+        @include theme.txt(primary);
+        font-size: 1rem;
+    }
+
+    .btn {
+        @include theme.surface(accent);
+        @include tokens.clickable();
+    }
+"});