fix: improve docs

This commit is contained in:
yiffyrusdev 2024-12-14 10:44:04 +05:00
commit 02e8efb990
No known key found for this signature in database
GPG key ID: FB83DFEAFB3F4709

108
README.md
View file

@ -18,9 +18,7 @@
At first, I'll show how this crate "tastes". With SABRY, its in your power to: At first, I'll show how this crate "tastes". With SABRY, its in your power to:
<table> <hr/>
<tr>
<td>
Write arbitrary SASS/SCSS code and ship it *as a crate* however you please: with modules, with feature flags, etc. Say "bye" to manual copying, cli-tools and consts. Write arbitrary SASS/SCSS code and ship it *as a crate* however you please: with modules, with feature flags, etc. Say "bye" to manual copying, cli-tools and consts.
@ -28,10 +26,7 @@ Write arbitrary SASS/SCSS code and ship it *as a crate* however you please: with
sabry::scssy!(tokens {"@mixin colored{color: red;}"}); sabry::scssy!(tokens {"@mixin colored{color: red;}"});
``` ```
</td> <hr/>
</tr>
<tr>
<td>
Get the *(almost)* proper autocompletion for your scope from rust-analyzer Get the *(almost)* proper autocompletion for your scope from rust-analyzer
@ -42,10 +37,7 @@ scope::cls1;
scope::theid1; scope::theid1;
``` ```
</td> <hr/>
</tr>
<tr>
<td>
Code your SASS in separate files to get proper syntax highlighting, or do sass-in-the-rust to keep things in one place Code your SASS in separate files to get proper syntax highlighting, or do sass-in-the-rust to keep things in one place
@ -54,22 +46,18 @@ sabry::styly!(component {".btn {color: green;}"});
sabry::styly!(extras "tests/assets/mixin-module.scss"); sabry::styly!(extras "tests/assets/mixin-module.scss");
``` ```
</td> <hr/>
</tr>
<tr>
<td>
Depend on styles with cargo, at build time, which brings all the rusty sweeties in: versions, updates, cratesio, local registries, workspaces, etc. Depend on styles with cargo, at build time, which brings all the rusty sweeties in: versions, updates, cratesio, local registries, workspaces, etc.
```toml ```toml
[build-dependencies] [build-dependencies.your_styles]
tgk_brandstyle = {version = "0.0.1", features = ["utils"]} registry = "your_registry_isnt_that_cool"
version = "^0.1"
features = ["darkmode", "mobile"]
``` ```
</td> <hr/>
</tr>
<tr>
<td>
`@use` your style-crates in sass code *naturally* `@use` your style-crates in sass code *naturally*
@ -80,10 +68,7 @@ sabry::styly!(breadbadge {"
"}); "});
``` ```
</td> <hr/>
</tr>
<tr>
<td>
Keep things as private and modular as you wish Keep things as private and modular as you wish
@ -100,10 +85,7 @@ sabry::styly!(dogs {"#howl {border: none;}"});
} }
``` ```
</td> <hr/>
</tr>
<tr>
<td>
Compile all the sweet SASS/SCSS into the optimized CSS bundle, ship it in CSS shunks or even include the compiled style into the binary Compile all the sweet SASS/SCSS into the optimized CSS bundle, ship it in CSS shunks or even include the compiled style into the binary
@ -112,9 +94,7 @@ sabry::styly!(cssbundle {".c1 {color: white;}"});
sabry::styly!(const binary {".c2 {color: black;}"}); sabry::styly!(const binary {".c2 {color: black;}"});
``` ```
</td> <hr/>
</tr>
</table>
Sabry will gladly: Sabry will gladly:
@ -160,7 +140,7 @@ scssy!(styles {"
} }
"}); "});
``` ```
*\* Unlike most of other crates that do sass-in-the-rust, sabry currently does not allow unquoted sass/scss. You still have to write it in a string-quotes. Unquoted sass/scss is reserved for the future, where we shall introduce variable injection.* *\* Unlike most of other crates that do sass-in-the-rust, sabry currently does not allow unquoted sass/scss. You still have to write it in a string-quotes. Unquoted sass/scss is reserved for the future, where, hopefully, I'll find more exciting usage for it. In the meantime it does look like Zed, for example, still highlights your code (:*
Now you can build and see two ready for export macros: `mixins!` and `styles!`. Now you can build and see two ready for export macros: `mixins!` and `styles!`.
These are usefull on their own, as invocation of `mixins!()` or `styles!()` - both shall give you the code literal. These are usefull on their own, as invocation of `mixins!()` or `styles!()` - both shall give you the code literal.
@ -273,6 +253,68 @@ detected by sabry.
for sabry, so you can use styles from relative paths `styly!(const comp "./style.scss")` for sabry, so you can use styles from relative paths `styly!(const comp "./style.scss")`
- Which will give you an error from rust-analyzer wether file exists or not. However, if the path is correct, it will build fine. - Which will give you an error from rust-analyzer wether file exists or not. However, if the path is correct, it will build fine.
<details>
<summary>I'd suggest something like this</summary>
```rust,ignore
// lib.rs
pub mod utils;
pub mod form;
pub const fn css() -> &'static str {
concatcp!(utils::css(), form::css())
}
```
```rust,ignore
// utils.rs
use sabry::styly;
styly!(pub const scope:scss {"
.whatever {
&__code {}
&[you-please] {}
}
"});
styly!(pub const another:scss {"
.whatever {
&__code {}
&[you-please] {}
}
"});
pub const fn css() -> &'static str {
concatcp!(SCOPE, ANOTHER)
}
```
```rust,ignore
// form.rs
use sabry::styly;
styly!(pub const scope:scss {"
.whatever {
&__code {}
&[you-please] {}
}
"});
styly!(pub const another:scss {"
.whatever {
&__code {}
&[you-please] {}
}
"});
pub const fn css() -> &'static str {
concatcp!(SCOPE, ANOTHER)
}
```
So I'd say - do the const function back-propogation and let the consumer decide how to include the CSS of the component crate.
</details>
### Leptos specials ### Leptos specials
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: