docs deserve to be tested

This commit is contained in:
Yiffy Dev 2024-10-31 17:07:03 +05:00 • committed by spushk
commit e433a5d66c
Signed by: spushk
GPG key ID: 7797B761E105E8AA
6 changed files with 1167 additions and 100 deletions

1087
Cargo.lock generated

File diff suppressed because it is too large Load diff

View file

@ -26,7 +26,7 @@ publish = true
[package]
name = "sabry"
description = "Syntactically Awesome But RustY - crate that brings SCSS/SASS into rust."
description = "Syntactically Awesome But RustY - crate that brings SCSS/SASS into rust"
keywords = ["web", "sass", "scss", "macro"]
repository.workspace = true
version.workspace = true
@ -41,6 +41,9 @@ sabry_procmacro = {workspace = true, optional = true}
sabry_build = {workspace = true, optional = true}
sabry_intrnl = {workspace = true}
[dev-dependencies]
leptos = {version = "0.7.0-gamma3"}
[features]
default = ["procmacro"]
lepty-scoping = [

View file

@ -134,7 +134,7 @@ Also, just about everything is pub-available in this crate - Sabry is ready for
Feel free to check out examples:
|[crate of styles](./examples//define-styles/)|[style usage](./examples/use-styles/)|[leptos-axum with sabry](./examples/leptos-axum)|
|[crate of styles](https://github.com/yiffyrusdev/sabry/tree/master/examples/define-styles)|[style usage](https://github.com/yiffyrusdev/sabry/tree/master/examples/use-styles)|[leptos-axum with sabry](https://github.com/yiffyrusdev/sabry/tree/master/examples/leptos-axum)|
|-|-|-|
### Create a crate full of arbitrary SASS
@ -148,11 +148,11 @@ The only need is the dependency
sabry = {version = "0.0.1"}
```
And a proc-macro
```rust,ignore
```rust
// lib.rs
use sabry::sassy;
sassy!(mixins "assets/mixins.scss");
sassy!(mixins "tests/assets/mixins.scss");
sassy!(styles {
$primary-color: black;
@mixin colored($col: primary) {
@ -179,7 +179,7 @@ Depend on sabry
sabry = {version = "0.0.1"}
```
And create a style scope wherever you want:
```rust,ignore
```rust
// breadbadgelist.rs
use sabry::styly;
@ -195,13 +195,10 @@ styly!(const styles {
}
});
fn render() -> HtmlElement {
div().class(styles::badges).chain(
ul().class(styles::_list(styles::badges))
).chain(
span().id(styles::thewolf)
)
}
/* Now you can use all scoped selectors: */
let badges_scoped_class = styles::badges;
let wolf_scoped_id = styles::thewolf;
let badges__list_scoped_class = styles::___list(styles::badges);
```
> That `const` usage is covered in the [following](#constant-styly-scopes) section. In this example we dont invoke sabry build-magic, so, to be as close to real life as possible, I used a const.
@ -229,8 +226,6 @@ sabry = {version = "0.0.1", features = ["build"]}
Then you have to tell sabry when code should be compiled. We'll do this in *build.rs* file.
```rust,ignore
// build.rs
use shared_styles::{mixins, styles};
fn main(){
sabry::buildy(
sabry::usey!(
@ -243,11 +238,12 @@ fn main(){
`buildy` is the entry function of sabry build-time process. The handy `usey!` macro will do just proper handling of our style-macros for it.
Now lets get back to the code and use the mixin defined in another crate:
```rust,ignore
```rust
// breadbadgelist.rs
use sabry::styly;
styly!(styles {
// "mixins" is available beacuse we did call mixins!() macro in the example below
@use "mixins";
.badges {
display: flex;
@ -259,14 +255,6 @@ styly!(styles {
@include mixins.colored(white);
}
});
fn render() -> HtmlElement {
div().class(styles::badges).chain(
ul().class(styles::_list(styles::badges))
).chain(
span().id(styles::thewolf)
)
}
```
So the `mixins!` macro we just passed to the `usey!` macro inside of `buildy` function call is now accessible with simple and natural `@use "mixins"` SASS rule!
@ -274,7 +262,9 @@ So the `mixins!` macro we just passed to the `usey!` macro inside of `buildy` fu
With [leptos](https://github.com/leptos-rs/leptos) framework you can do the trick to apply some class to most of HtmlElements for the entire component/island:
```rust,ignore
```rust
use leptos::prelude::*;
#[component]
fn component() -> impl IntoView {
view! {class="cls1", /* <- here */
@ -297,8 +287,12 @@ sabry = {version = "0.0.1", features = ["lepty-scoping"]}
sabry = {version = "0.0.1", features = ["build", "lepty-scoping"]}
```
```rust,ignore
```rust
use leptos::prelude::*;
use sabry::styly;
styly!(scope {
// assuming we have tokens!() macro generated by `sassy!`, which is handled by `buildy`
@use "tokens";
h1 {
@include tokens.sectionhead();
@ -443,14 +437,19 @@ It does accept the following syntax: `$name(:$syntax)? ({ $code })|($filename)`,
- *$filename* is a string literal which contains path to the file relative to package root
Examples:
```rust,ignore
```rust
use sabry::sassy;
sassy!(module1 {$primary-color: red;});
sassy!(module2 "src/assets/module2.scss");
sassy!(module3:sass "src/assets/module3.sass");
sassy!(module2 "tests/assets/mixins.scss");
sassy!(module3:sass "tests/assets/mixins.sass");
// works, but there are catches.
sassy!(module4:sass {
=colored
color: red
=colored($col: primary)
@if $col == primary
color: white
@else
color: red
});
```
@ -474,15 +473,17 @@ It does accept the following syntax: `pub? const? $ident(:$syntax)? ({ $code })|
- *$filename* is a string literal which contains path to the file relative to package root
Examples
```rust,ignore
styly!(fox {.fur {color: red; &-dark {color: black;}}})
styly!(pub fox {.fur {color: red; &-dark {color: black;}}})
styly!(pub const fox:sass {
```rust
use sabry::styly;
styly!(private_fox {.fur {color: red; &-dark {color: black;}}});
styly!(pub public_fox {.fur {color: red; &-dark {color: black;}}});
styly!(pub const pub_compiletime_fox:sass {
.fur
color: red
&-dark
color: black
})
});
```
Every of those calls will produce the styling scope as a module. Differences are explained right below.
@ -510,8 +511,8 @@ You can read more about scoping and hashing in the [scoping](#scoping) section.
By default generated `mod` is private. You can make both mod and wrapper style constant public by adding the `pub` to macro call:
```rust,ignore
styly!(pub whatever "src/assets/whatever.scss");
```rust
sabry::styly!(pub whatever "tests/assets/mixins.scss");
```
#### Constant styly scopes
@ -521,7 +522,7 @@ As you've seen above, scope doe not contain any style code by itself. That's the
However you could still compile styles into the artifact by simply adding the `const` to the macro call:
```rust,ignore
styly!(const scope "src/assets/scope.scss");
sabry::styly!(const scope "tests/assets/mixins.scss");
```
Which results in following:
```rust,ignore
@ -610,8 +611,8 @@ Different selector types are scoped differently:
As for **SASS parent selectors**: they are currently handled in different way. Instead of
walking up the syntax tree sabry just creates function member for the scope and leave the rest to grass:
```rust,ignore
styly!(scope {
```rust
sabry::styly!(scope {
.cls1 {
&-dark {}
}

View file

@ -48,7 +48,10 @@ pub fn sassy(input: TokenStream) -> TokenStream {
/// ## Usage
///
/// Write style in rusty code (rust-analyzer wont autocomplete your scope members)
///
/// ```ignore
/// use sabry::styly;
///
/// styly!(scope1 {
/// /* SCSS */
/// });
@ -107,9 +110,8 @@ pub fn styly(input: TokenStream) -> TokenStream {
/// use brandstyle::tokens as brand_tokens;
///
/// usey!(
/// brandstyle::theme!(),
/// tokens!(),
/// brand_tokens!(),
/// theme!(),
/// tokens!()
/// );
/// ```
///

5
tests/assets/mixins.sass Normal file
View file

@ -0,0 +1,5 @@
=colored($color: primary)
@if $color == primary
color: white
@else
color: $col

9
tests/assets/mixins.scss Normal file
View file

@ -0,0 +1,9 @@
$primary-color: black;
@mixin colored($col: primary) {
@if $col == primary {
color: $primary-color;
} @else {
color: $col;
}
}