rustyworks/sabry
Watch
1
0
Fork
You've already forked sabry
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: relative style paths & component crate example

Browse source
This commit is contained in:
Yiffy Dev 2024-11-16 22:32:38 +05:00
commit 17fa4ab197
No known key found for this signature in database
GPG key ID: FB83DFEAFB3F4709
17 changed files with 376 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

9
examples/define-styles/Cargo.lock generated
View file

@ -974,7 +974,7 @@ checksum = "f3cb5ba0dc43242ce17de99c180e96db90b235b8a9fdc9543c96d2209116bd9f"
[[package]]
name = "sabry"
version = "0.0.1-beta.2"
version = "0.0.1"
dependencies = [
"sabry_intrnl",
"sabry_procmacro",
@ -982,7 +982,7 @@ dependencies = [
[[package]]
name = "sabry_intrnl"
version = "0.0.1-beta.2"
version = "0.0.1"
dependencies = [
"base64",
"blake3",
@ -1001,14 +1001,15 @@ dependencies = [
[[package]]
name = "sabry_procmacro"
version = "0.0.1-beta.2"
version = "0.0.1"
dependencies = [
"cfg-if",
"sabry_procmacro_impl",
]
[[package]]
name = "sabry_procmacro_impl"
version = "0.0.1-beta.2"
version = "0.0.1"
dependencies = [
"proc-macro2",
"quote",

2
examples/define-styles/Cargo.toml
View file

@ -6,4 +6,4 @@ rust-version = "1.82"
publish = false
[dependencies]
sabry = {path = "../../"}
sabry = {path = "../../", features = ["nightly"]}

4
examples/define-styles/src/lib.rs
View file

@ -1,6 +1,8 @@
use sabry::scssy;
scssy!(style "src/style.scss");
// relative path is available because 'nightly' feature flag is set.
// If you don't - this will be "src/style.scss"
scssy!(style "./style.scss");
scssy!(utils {"
@mixin flex($direction, $align, $justify, $gap: .5rem) {

13
examples/leptos-axum/Cargo.toml
View file

@ -9,16 +9,16 @@ publish = false
crate-type = ["cdylib", "rlib"]
[dependencies]
leptos = { version = "0.7.0-gamma3" }
leptos_axum = { version = "0.7.0-gamma3", optional = true }
leptos_meta = { version = "0.7.0-gamma3" }
leptos_router = { version = "0.7.0-gamma3" }
leptos = { version = "0.7.0-rc1" }
leptos_axum = { version = "0.7.0-rc1", optional = true }
leptos_meta = { version = "0.7.0-rc1" }
leptos_router = { version = "0.7.0-rc1" }
axum = { version = "0.7", optional = true }
console_error_panic_hook = "0.1"
tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
tower = { version = "0.4", optional = true }
tower-http = { version = "0.5", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.93"
wasm-bindgen = "=0.2.95"
thiserror = "1"
tracing = { version = "0.1", optional = true }
http = "1"
@ -26,6 +26,9 @@ http = "1"
# sabry with sass
sabry = {path = "../../", features = ["lepty-scoping"]}
# our component library
leptos-components = {path = "../leptos-components"}
[build-dependencies]
# sabry for build with sass
sabry = {path = "../../", features = ["build", "lepty-scoping"]}

1
examples/leptos-axum/src/main.rs
View file

@ -4,6 +4,7 @@
async fn main() {
use axum::Router;
use leptos::prelude::*;
use leptos::logging::*;
use leptos_axum::{generate_route_list, LeptosRoutes};
use leptos_axum_sabry::shell::*;

1
examples/leptos-axum/src/routes/home.rs
View file

@ -45,6 +45,7 @@ pub fn Route() -> impl IntoView {
let on_click = move |_| *count.write() += 1;
view! {class = STYLE,
<leptos_components::Aside/> // lets use our component
<section class=style::table>
<h2>"Welcome to Leptos"</h2>
<h2 class="">

11
examples/leptos-axum/src/shell.rs
View file

@ -4,6 +4,7 @@ use leptos_router::{
components::{Route, Router, Routes},
StaticSegment,
};
use sabry::styly;
use crate::routes;
@ -29,7 +30,7 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
pub fn App() -> impl IntoView {
provide_meta_context();
view! {
view! {class=APP,
<Stylesheet id="leptos" href="/pkg/leptos-axum.css"/>
<Title text="Welcome to Leptos"/>
<Router>
@ -41,3 +42,11 @@ pub fn App() -> impl IntoView {
</Router>
}
}
styly!(app:scss {"
@use 'theme';
main {
@include theme.surface(primary);
}
"});

14
examples/leptos-components/.gitignore vendored Normal file
View file

@ -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

33
examples/leptos-components/Cargo.toml Normal file
View file

@ -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"

24
examples/leptos-components/LICENSE Normal file
View file

@ -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>

6
examples/leptos-components/README.md Normal file
View file

@ -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)

11
examples/leptos-components/build.rs Normal file
View file

@ -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");
}

52
examples/leptos-components/src/lib.rs Normal file
View file

@ -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();
}
"});

1
examples/use-styles/Cargo.lock generated
View file

@ -1016,6 +1016,7 @@ dependencies = [
name = "sabry_procmacro"
version = "0.0.1"
dependencies = [
"cfg-if",
"sabry_procmacro_impl",
]

4
examples/use-styles/Cargo.toml
View file

@ -6,10 +6,10 @@ rust-version = "1.82"
publish = false
[dependencies]
sabry = {path = "../../"}
sabry = {path = "../../", features = ["nightly"]}
[build-dependencies]
sabry = {path = "../../", features = ["build"]}
sabry = {path = "../../", features = ["build", "nightly"]}
define-styles = {path = "../define-styles"}
[package.metadata.sabry]

12
examples/use-styles/build.rs
View file

@ -9,14 +9,8 @@ scssy!(utils {"
}
"});
fn main(){
fn main() {
/* Declare modules to use with sabry */
sabry::buildy(
usey!(
theme!(),
tokens!(),
utils_dup!(),
utils!()
)
).expect("Failed to build sabry styles");
sabry::buildy(usey!(theme!(), tokens!(), utils_dup!(), utils!()))
.expect("Failed to build sabry styles");
}

5
examples/use-styles/src/main.rs
View file

@ -17,7 +17,9 @@ styly!(pub const bundlemod {"
}
"});
styly!(pub filemod:sass "src/main.sass");
// relative path is available because 'nightly' feature flag is set.
// If you don't - this will be "src/main.sass"
styly!(pub const filemod:sass "./main.sass");
fn main() {
println!("someth class codemod styles: {}", bundlemod::someth);
@ -28,5 +30,6 @@ fn main() {
);
println!("#fox id will be: {}", bundlemod::thefox);
println!("Bundles const CSS will be: {}", BUNDLEMOD_CSS);
println!("Bundles const CSS from file will be: {}", FILEMOD_CSS); // false-positive from relative file.
println!("Thats how we used the styles! Good luck!!");
}