fix!: bring the scope autocompletion in by changing style input syntax
BREAKING CHANGE: `styly`, `sassy` macros syntax change. Now requires `{"$code"}`.
This commit is contained in:
Yiffy Dev
parent
8bc362501d
commit
e1bd0b8c27
1 changed files with 133 additions and 101 deletions
88
README.md
88
README.md
|
|
@ -24,8 +24,8 @@ At first, I'll show how this crate "tastes". With SABRY, its in your power to:
|
|||
|
||||
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.
|
||||
|
||||
```rust,ignore
|
||||
sassy!(tokens {@mixin colored{color: red;}});
|
||||
```rust
|
||||
sabry::sassy!(tokens {"@mixin colored{color: red;}"});
|
||||
```
|
||||
|
||||
</td>
|
||||
|
|
@ -38,9 +38,9 @@ sassy!(tokens {@mixin colored{color: red;}});
|
|||
|
||||
Code your SASS in separate files to get proper syntax highlighting, or do sass-in-the-rust to keep things in one place
|
||||
|
||||
```rust,ignore
|
||||
styly!(component {.btn {color: green;}});
|
||||
styly!(extras "src/components/extras.scss");
|
||||
```rust
|
||||
sabry::styly!(component {".btn {color: green;}"});
|
||||
sabry::styly!(extras "tests/assets/mixins.scss");
|
||||
```
|
||||
|
||||
</td>
|
||||
|
|
@ -68,11 +68,11 @@ tgk_brandstyle = {version = "0.0.1", features = ["utils"]}
|
|||
|
||||
`@use` your style-crates in sass code *naturally*
|
||||
|
||||
```rust,ignore
|
||||
styly!(breadbadge {
|
||||
```rust
|
||||
sabry::styly!(breadbadge {"
|
||||
@use 'tokens';
|
||||
.scope {@include tokens.badge(primary);}
|
||||
})
|
||||
"});
|
||||
```
|
||||
|
||||
</td>
|
||||
|
|
@ -85,10 +85,11 @@ styly!(breadbadge {
|
|||
|
||||
Keep things as private and modular as you wish
|
||||
|
||||
```rust
|
||||
sabry::styly!(pub cats "tests/assets/mixins.scss");
|
||||
sabry::styly!(dogs {"#howl {border: none;}"});
|
||||
```
|
||||
```rust,ignore
|
||||
styly!(pub cats "src/sections/cats/style.scss");
|
||||
styly!(dogs {#howl {border: none;}})
|
||||
|
||||
/// something like render function
|
||||
{
|
||||
<div class={cats::meow}>
|
||||
|
|
@ -107,9 +108,9 @@ styly!(dogs {#howl {border: none;}})
|
|||
|
||||
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
|
||||
|
||||
```rust,ignore
|
||||
styly!(cssbundle {.c1 {color: white;}})
|
||||
styly!(const binary {.c2 {color: black;}})
|
||||
```rust
|
||||
sabry::styly!(cssbundle {".c1 {color: white;}"});
|
||||
sabry::styly!(const binary {".c2 {color: black;}"});
|
||||
```
|
||||
|
||||
</td>
|
||||
|
|
@ -127,8 +128,7 @@ Sabry will gladly:
|
|||
- prepare ready CSS bundle and put it wherever you wish
|
||||
- include CSS into the build artifact - if you really want it
|
||||
|
||||
Also, just about everything is pub-available in this crate - Sabry is ready for experiments.
|
||||
|
||||
Also, just about everything is pub-available in this crate (with *internals* feature flag) - Sabry is ready for experiments.
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ And a proc-macro
|
|||
use sabry::sassy;
|
||||
|
||||
sassy!(mixins "tests/assets/mixins.scss");
|
||||
sassy!(styles {
|
||||
sassy!(styles {"
|
||||
$primary-color: black;
|
||||
@mixin colored($col: primary) {
|
||||
@if $col == primary {
|
||||
|
|
@ -162,8 +162,10 @@ sassy!(styles {
|
|||
color: $col;
|
||||
}
|
||||
}
|
||||
});
|
||||
"});
|
||||
```
|
||||
*\* 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.*
|
||||
|
||||
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.
|
||||
|
||||
|
|
@ -183,7 +185,7 @@ And create a style scope wherever you want:
|
|||
// breadbadgelist.rs
|
||||
use sabry::styly;
|
||||
|
||||
styly!(const styles {
|
||||
styly!(const styles {"
|
||||
.badges {
|
||||
display: flex;
|
||||
&__list {
|
||||
|
|
@ -193,7 +195,7 @@ styly!(const styles {
|
|||
#wolf {
|
||||
color: white;
|
||||
}
|
||||
});
|
||||
"});
|
||||
|
||||
/* Now you can use all scoped selectors: */
|
||||
let badges_scoped_class = styles::badges;
|
||||
|
|
@ -242,9 +244,9 @@ Now lets get back to the code and use the mixin defined in another crate:
|
|||
// breadbadgelist.rs
|
||||
use sabry::styly;
|
||||
|
||||
styly!(styles {
|
||||
// "mixins" is available beacuse we did call mixins!() macro in the example below
|
||||
@use "mixins";
|
||||
styly!(styles {"
|
||||
// 'mixins' is available beacuse we did call mixins!() macro in the example below
|
||||
@use 'mixins';
|
||||
.badges {
|
||||
display: flex;
|
||||
&__list {
|
||||
|
|
@ -254,7 +256,7 @@ styly!(styles {
|
|||
#wolf {
|
||||
@include mixins.colored(white);
|
||||
}
|
||||
});
|
||||
"});
|
||||
```
|
||||
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!
|
||||
|
||||
|
|
@ -291,9 +293,9 @@ sabry = {version = "0.0.1", features = ["build", "lepty-scoping"]}
|
|||
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 {
|
||||
@include tokens.sectionhead();
|
||||
img {
|
||||
|
|
@ -306,7 +308,7 @@ styly!(scope {
|
|||
@include tokens.badge(secondary);
|
||||
}
|
||||
}
|
||||
});
|
||||
"});
|
||||
|
||||
#[component]
|
||||
fn component() -> impl IntoView {
|
||||
|
|
@ -441,17 +443,17 @@ Examples:
|
|||
```rust
|
||||
use sabry::sassy;
|
||||
|
||||
sassy!(module1 {$primary-color: red;});
|
||||
sassy!(module1 {"$primary-color: red;"});
|
||||
sassy!(module2 "tests/assets/mixins.scss");
|
||||
sassy!(module3:sass "tests/assets/mixins.sass");
|
||||
// works, but there are catches.
|
||||
sassy!(module4:sass {
|
||||
sassy!(module4:sass {"
|
||||
=colored($col: primary)
|
||||
@if $col == primary
|
||||
color: white
|
||||
@else
|
||||
color: red
|
||||
});
|
||||
"});
|
||||
```
|
||||
|
||||
You may omit the syntax specifier - sabry uses SCSS as the default one.
|
||||
|
|
@ -477,14 +479,14 @@ Examples
|
|||
```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 {
|
||||
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.
|
||||
|
||||
|
|
@ -522,7 +524,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
|
||||
```rust
|
||||
sabry::styly!(const scope "tests/assets/mixins.scss");
|
||||
```
|
||||
Which results in following:
|
||||
|
|
@ -613,11 +615,11 @@ As for **SASS parent selectors**: they are currently handled in different way. I
|
|||
walking up the syntax tree sabry just creates function member for the scope and leave the rest to grass:
|
||||
|
||||
```rust
|
||||
sabry::styly!(scope {
|
||||
sabry::styly!(scope {"
|
||||
.cls1 {
|
||||
&-dark {}
|
||||
}
|
||||
});
|
||||
"});
|
||||
```
|
||||
is something like
|
||||
```rust,ignore
|
||||
|
|
@ -648,10 +650,20 @@ Not any valid CSS selector is a valid rust identifier. In general this section s
|
|||
|
||||
*(sorted by my own priority)*, "dones" are excluded
|
||||
|
||||
- [ ] Somehow achieve the autocompletion for scopes. The problem is explained in details [here](https://github.com/yiffyrusdev/sabry/issues/2)
|
||||
- [x] Somehow achieve the autocompletion for scopes. The problem is explained in details [here](https://github.com/yiffyrusdev/sabry/issues/2)
|
||||
- [ ] some weird unrelated stuff I can see in autocompletion
|
||||
- [ ] Crates of styled components - currently the only way to create them seems to be const styly.
|
||||
- [ ] CSS support
|
||||
- [ ] Currently the crate causes "dependency inheritance" infection. We cant get rid of it, however should be doable to at least get rid of flag inheritance
|
||||
- [ ] Use sass-in-rust without quoted styles for variable injection:
|
||||
```rust, ignore
|
||||
let myvar = "content";
|
||||
styly!(scope {
|
||||
.c::after {
|
||||
content: somehow(myvar);
|
||||
}
|
||||
})
|
||||
```
|
||||
- [ ] There are some strange parsing errors, seems like a bug, however very hard to reproduce. Have to investigate. Maybe do more tests.
|
||||
- [ ] Experience with cargo-leptos is fine, and we do use it, however its a bit "raughy". Need to do something about it.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue