docs deserve to be tested
This commit is contained in:
parent
154b0b0ae2
commit
e433a5d66c
6 changed files with 1167 additions and 100 deletions
1087
Cargo.lock
generated
1087
Cargo.lock
generated
File diff suppressed because it is too large
Load diff
|
|
@ -26,7 +26,7 @@ publish = true
|
||||||
|
|
||||||
[package]
|
[package]
|
||||||
name = "sabry"
|
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"]
|
keywords = ["web", "sass", "scss", "macro"]
|
||||||
repository.workspace = true
|
repository.workspace = true
|
||||||
version.workspace = true
|
version.workspace = true
|
||||||
|
|
@ -41,6 +41,9 @@ sabry_procmacro = {workspace = true, optional = true}
|
||||||
sabry_build = {workspace = true, optional = true}
|
sabry_build = {workspace = true, optional = true}
|
||||||
sabry_intrnl = {workspace = true}
|
sabry_intrnl = {workspace = true}
|
||||||
|
|
||||||
|
[dev-dependencies]
|
||||||
|
leptos = {version = "0.7.0-gamma3"}
|
||||||
|
|
||||||
[features]
|
[features]
|
||||||
default = ["procmacro"]
|
default = ["procmacro"]
|
||||||
lepty-scoping = [
|
lepty-scoping = [
|
||||||
|
|
|
||||||
79
README.md
79
README.md
|
|
@ -134,7 +134,7 @@ Also, just about everything is pub-available in this crate - Sabry is ready for
|
||||||
|
|
||||||
Feel free to check out examples:
|
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
|
### Create a crate full of arbitrary SASS
|
||||||
|
|
@ -148,11 +148,11 @@ The only need is the dependency
|
||||||
sabry = {version = "0.0.1"}
|
sabry = {version = "0.0.1"}
|
||||||
```
|
```
|
||||||
And a proc-macro
|
And a proc-macro
|
||||||
```rust,ignore
|
```rust
|
||||||
// lib.rs
|
// lib.rs
|
||||||
use sabry::sassy;
|
use sabry::sassy;
|
||||||
|
|
||||||
sassy!(mixins "assets/mixins.scss");
|
sassy!(mixins "tests/assets/mixins.scss");
|
||||||
sassy!(styles {
|
sassy!(styles {
|
||||||
$primary-color: black;
|
$primary-color: black;
|
||||||
@mixin colored($col: primary) {
|
@mixin colored($col: primary) {
|
||||||
|
|
@ -179,7 +179,7 @@ Depend on sabry
|
||||||
sabry = {version = "0.0.1"}
|
sabry = {version = "0.0.1"}
|
||||||
```
|
```
|
||||||
And create a style scope wherever you want:
|
And create a style scope wherever you want:
|
||||||
```rust,ignore
|
```rust
|
||||||
// breadbadgelist.rs
|
// breadbadgelist.rs
|
||||||
use sabry::styly;
|
use sabry::styly;
|
||||||
|
|
||||||
|
|
@ -195,13 +195,10 @@ styly!(const styles {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
fn render() -> HtmlElement {
|
/* Now you can use all scoped selectors: */
|
||||||
div().class(styles::badges).chain(
|
let badges_scoped_class = styles::badges;
|
||||||
ul().class(styles::_list(styles::badges))
|
let wolf_scoped_id = styles::thewolf;
|
||||||
).chain(
|
let badges__list_scoped_class = styles::___list(styles::badges);
|
||||||
span().id(styles::thewolf)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
> 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.
|
> 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.
|
Then you have to tell sabry when code should be compiled. We'll do this in *build.rs* file.
|
||||||
```rust,ignore
|
```rust,ignore
|
||||||
// build.rs
|
// build.rs
|
||||||
use shared_styles::{mixins, styles};
|
|
||||||
|
|
||||||
fn main(){
|
fn main(){
|
||||||
sabry::buildy(
|
sabry::buildy(
|
||||||
sabry::usey!(
|
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.
|
`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:
|
Now lets get back to the code and use the mixin defined in another crate:
|
||||||
```rust,ignore
|
```rust
|
||||||
// breadbadgelist.rs
|
// breadbadgelist.rs
|
||||||
use sabry::styly;
|
use sabry::styly;
|
||||||
|
|
||||||
styly!(styles {
|
styly!(styles {
|
||||||
|
// "mixins" is available beacuse we did call mixins!() macro in the example below
|
||||||
@use "mixins";
|
@use "mixins";
|
||||||
.badges {
|
.badges {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -259,14 +255,6 @@ styly!(styles {
|
||||||
@include mixins.colored(white);
|
@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!
|
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:
|
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]
|
#[component]
|
||||||
fn component() -> impl IntoView {
|
fn component() -> impl IntoView {
|
||||||
view! {class="cls1", /* <- here */
|
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"]}
|
sabry = {version = "0.0.1", features = ["build", "lepty-scoping"]}
|
||||||
```
|
```
|
||||||
|
|
||||||
```rust,ignore
|
```rust
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use sabry::styly;
|
||||||
|
|
||||||
styly!(scope {
|
styly!(scope {
|
||||||
|
// assuming we have tokens!() macro generated by `sassy!`, which is handled by `buildy`
|
||||||
@use "tokens";
|
@use "tokens";
|
||||||
h1 {
|
h1 {
|
||||||
@include tokens.sectionhead();
|
@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
|
- *$filename* is a string literal which contains path to the file relative to package root
|
||||||
|
|
||||||
Examples:
|
Examples:
|
||||||
```rust,ignore
|
```rust
|
||||||
|
use sabry::sassy;
|
||||||
|
|
||||||
sassy!(module1 {$primary-color: red;});
|
sassy!(module1 {$primary-color: red;});
|
||||||
sassy!(module2 "src/assets/module2.scss");
|
sassy!(module2 "tests/assets/mixins.scss");
|
||||||
sassy!(module3:sass "src/assets/module3.sass");
|
sassy!(module3:sass "tests/assets/mixins.sass");
|
||||||
// works, but there are catches.
|
// works, but there are catches.
|
||||||
sassy!(module4:sass {
|
sassy!(module4:sass {
|
||||||
=colored
|
=colored($col: primary)
|
||||||
color: red
|
@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
|
- *$filename* is a string literal which contains path to the file relative to package root
|
||||||
|
|
||||||
Examples
|
Examples
|
||||||
```rust,ignore
|
```rust
|
||||||
styly!(fox {.fur {color: red; &-dark {color: black;}}})
|
use sabry::styly;
|
||||||
styly!(pub fox {.fur {color: red; &-dark {color: black;}}})
|
|
||||||
styly!(pub const fox:sass {
|
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
|
.fur
|
||||||
color: red
|
color: red
|
||||||
&-dark
|
&-dark
|
||||||
color: black
|
color: black
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
Every of those calls will produce the styling scope as a module. Differences are explained right below.
|
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:
|
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
|
```rust
|
||||||
styly!(pub whatever "src/assets/whatever.scss");
|
sabry::styly!(pub whatever "tests/assets/mixins.scss");
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Constant styly scopes
|
#### 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:
|
However you could still compile styles into the artifact by simply adding the `const` to the macro call:
|
||||||
|
|
||||||
```rust,ignore
|
```rust,ignore
|
||||||
styly!(const scope "src/assets/scope.scss");
|
sabry::styly!(const scope "tests/assets/mixins.scss");
|
||||||
```
|
```
|
||||||
Which results in following:
|
Which results in following:
|
||||||
```rust,ignore
|
```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
|
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:
|
walking up the syntax tree sabry just creates function member for the scope and leave the rest to grass:
|
||||||
|
|
||||||
```rust,ignore
|
```rust
|
||||||
styly!(scope {
|
sabry::styly!(scope {
|
||||||
.cls1 {
|
.cls1 {
|
||||||
&-dark {}
|
&-dark {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,10 @@ pub fn sassy(input: TokenStream) -> TokenStream {
|
||||||
/// ## Usage
|
/// ## Usage
|
||||||
///
|
///
|
||||||
/// Write style in rusty code (rust-analyzer wont autocomplete your scope members)
|
/// Write style in rusty code (rust-analyzer wont autocomplete your scope members)
|
||||||
|
///
|
||||||
/// ```ignore
|
/// ```ignore
|
||||||
|
/// use sabry::styly;
|
||||||
|
///
|
||||||
/// styly!(scope1 {
|
/// styly!(scope1 {
|
||||||
/// /* SCSS */
|
/// /* SCSS */
|
||||||
/// });
|
/// });
|
||||||
|
|
@ -107,9 +110,8 @@ pub fn styly(input: TokenStream) -> TokenStream {
|
||||||
/// use brandstyle::tokens as brand_tokens;
|
/// use brandstyle::tokens as brand_tokens;
|
||||||
///
|
///
|
||||||
/// usey!(
|
/// usey!(
|
||||||
/// brandstyle::theme!(),
|
/// theme!(),
|
||||||
/// tokens!(),
|
/// tokens!()
|
||||||
/// brand_tokens!(),
|
|
||||||
/// );
|
/// );
|
||||||
/// ```
|
/// ```
|
||||||
///
|
///
|
||||||
|
|
|
||||||
5
tests/assets/mixins.sass
Normal file
5
tests/assets/mixins.sass
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
=colored($color: primary)
|
||||||
|
@if $color == primary
|
||||||
|
color: white
|
||||||
|
@else
|
||||||
|
color: $col
|
||||||
9
tests/assets/mixins.scss
Normal file
9
tests/assets/mixins.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
$primary-color: black;
|
||||||
|
|
||||||
|
@mixin colored($col: primary) {
|
||||||
|
@if $col == primary {
|
||||||
|
color: $primary-color;
|
||||||
|
} @else {
|
||||||
|
color: $col;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue