oops, make readme to pass tests
This commit is contained in:
parent
2f7d3ab173
commit
cdc1400fd7
1 changed files with 20 additions and 19 deletions
39
README.md
39
README.md
|
|
@ -20,7 +20,7 @@ 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.
|
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
|
```rust,ignore
|
||||||
sassy!(tokens {@mixin colored{color: red;}});
|
sassy!(tokens {@mixin colored{color: red;}});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -34,7 +34,7 @@ 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
|
Code your SASS in separate files to get proper syntax highlighting, or do sass-in-the-rust to keep things in one place
|
||||||
|
|
||||||
```rust
|
```rust,ignore
|
||||||
styly!(component {.btn {color: green;}});
|
styly!(component {.btn {color: green;}});
|
||||||
styly!(extras "src/components/extras.scss");
|
styly!(extras "src/components/extras.scss");
|
||||||
```
|
```
|
||||||
|
|
@ -64,7 +64,7 @@ tgk_brandstyle = {version = "0.0.1", features = ["utils"]}
|
||||||
|
|
||||||
`@use` your style-crates in sass code *naturally*
|
`@use` your style-crates in sass code *naturally*
|
||||||
|
|
||||||
```rust
|
```rust,ignore
|
||||||
styly!(breadcumb {
|
styly!(breadcumb {
|
||||||
@use 'tokens';
|
@use 'tokens';
|
||||||
.scope {@include tokens.badge(primary);}
|
.scope {@include tokens.badge(primary);}
|
||||||
|
|
@ -81,7 +81,7 @@ styly!(breadcumb {
|
||||||
|
|
||||||
Keep things as private and modular as you wish
|
Keep things as private and modular as you wish
|
||||||
|
|
||||||
```rust
|
```rust,ignore
|
||||||
styly!(pub cats "src/sections/cats/style.scss");
|
styly!(pub cats "src/sections/cats/style.scss");
|
||||||
styly!(dogs {#howl {border: none;}})
|
styly!(dogs {#howl {border: none;}})
|
||||||
|
|
||||||
|
|
@ -103,7 +103,7 @@ 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
|
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
|
```rust,ignore
|
||||||
styly!(cssbundle {.c1 {color: white;}})
|
styly!(cssbundle {.c1 {color: white;}})
|
||||||
styly!(const binary {.c2 {color: black;}})
|
styly!(const binary {.c2 {color: black;}})
|
||||||
```
|
```
|
||||||
|
|
@ -144,7 +144,7 @@ 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
|
```rust,ignore
|
||||||
// lib.rs
|
// lib.rs
|
||||||
use sabry::sassy;
|
use sabry::sassy;
|
||||||
|
|
||||||
|
|
@ -175,7 +175,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
|
```rust,ignore
|
||||||
// breadcumblist.rs
|
// breadcumblist.rs
|
||||||
use sabry::styly;
|
use sabry::styly;
|
||||||
|
|
||||||
|
|
@ -221,7 +221,7 @@ sabry = {version = "0.0.1", features = ["build"]}
|
||||||
> If you do use some non-default feature flags make sure to keep them in sync between sabry-dependency and sabry-build-dependency.
|
> If you do use some non-default feature flags make sure to keep them in sync between sabry-dependency and sabry-build-dependency.
|
||||||
|
|
||||||
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
|
```rust,ignore
|
||||||
// build.rs
|
// build.rs
|
||||||
use shared_styles::{mixins, styles};
|
use shared_styles::{mixins, styles};
|
||||||
|
|
||||||
|
|
@ -237,7 +237,7 @@ 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
|
```rust,ignore
|
||||||
// breadcumblist.rs
|
// breadcumblist.rs
|
||||||
use sabry::styly;
|
use sabry::styly;
|
||||||
|
|
||||||
|
|
@ -370,7 +370,7 @@ 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
|
```rust,ignore
|
||||||
sassy!(module1 {$primary-color: red;});
|
sassy!(module1 {$primary-color: red;});
|
||||||
sassy!(module2 "src/assets/module2.scss");
|
sassy!(module2 "src/assets/module2.scss");
|
||||||
sassy!(module3:sass "src/assets/module3.sass");
|
sassy!(module3:sass "src/assets/module3.sass");
|
||||||
|
|
@ -401,7 +401,7 @@ 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
|
```rust,ignore
|
||||||
styly!(fox {.fur {color: red; &-dark {color: black;}}})
|
styly!(fox {.fur {color: red; &-dark {color: black;}}})
|
||||||
styly!(pub fox {.fur {color: red; &-dark {color: black;}}})
|
styly!(pub fox {.fur {color: red; &-dark {color: black;}}})
|
||||||
styly!(pub const fox:sass {
|
styly!(pub const fox:sass {
|
||||||
|
|
@ -414,7 +414,7 @@ styly!(pub const fox:sass {
|
||||||
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.
|
||||||
|
|
||||||
In general the scope does look like this:
|
In general the scope does look like this:
|
||||||
```rust
|
```rust,ignore
|
||||||
const FOX: &str = "J9k_s9";
|
const FOX: &str = "J9k_s9";
|
||||||
mod fox {
|
mod fox {
|
||||||
pub const fur: &str = "J9k_s9 fur";
|
pub const fur: &str = "J9k_s9 fur";
|
||||||
|
|
@ -437,7 +437,7 @@ 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
|
```rust,ignore
|
||||||
styly!(pub whatever "src/assets/whatever.scss");
|
styly!(pub whatever "src/assets/whatever.scss");
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -447,11 +447,11 @@ 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
|
```rust,ignore
|
||||||
styly!(const scope "src/assets/scope.scss");
|
styly!(const scope "src/assets/scope.scss");
|
||||||
```
|
```
|
||||||
Which results in following:
|
Which results in following:
|
||||||
```rust
|
```rust,ignore
|
||||||
const SCOPE: &str = /* scope hash */;
|
const SCOPE: &str = /* scope hash */;
|
||||||
const SCOPE_CSS: &str = /* compiled from src/assets/scope.scss */;
|
const SCOPE_CSS: &str = /* compiled from src/assets/scope.scss */;
|
||||||
mod scope {/* selector collection */}
|
mod scope {/* selector collection */}
|
||||||
|
|
@ -475,12 +475,12 @@ Each of those pairs is processed as a file which sabry needs to write into
|
||||||
the configured `intermediate_dir` and then passed into the CSS compiler.
|
the configured `intermediate_dir` and then passed into the CSS compiler.
|
||||||
|
|
||||||
You could, for example, define the module "mixin_a":
|
You could, for example, define the module "mixin_a":
|
||||||
```rust
|
```rust,ignore
|
||||||
buildy(vec![("mixin_a".to_string(), "@mixin a(){}".to_string())]);
|
buildy(vec![("mixin_a".to_string(), "@mixin a(){}".to_string())]);
|
||||||
```
|
```
|
||||||
|
|
||||||
However there's a usey macro, which handles this for you:
|
However there's a usey macro, which handles this for you:
|
||||||
```rust
|
```rust,ignore
|
||||||
buildy(
|
buildy(
|
||||||
usey!(mixins!(), utils!())
|
usey!(mixins!(), utils!())
|
||||||
);
|
);
|
||||||
|
|
@ -535,7 +535,7 @@ 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
|
```rust,ignore
|
||||||
styly!(scope {
|
styly!(scope {
|
||||||
.cls1 {
|
.cls1 {
|
||||||
&-dark {}
|
&-dark {}
|
||||||
|
|
@ -543,7 +543,7 @@ styly!(scope {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
is something like
|
is something like
|
||||||
```rust
|
```rust,ignore
|
||||||
const SCOPE: &str = "Ut8CskJ";
|
const SCOPE: &str = "Ut8CskJ";
|
||||||
mod scope {
|
mod scope {
|
||||||
pub const cls1: &str = "Ut8CskJ cls1";
|
pub const cls1: &str = "Ut8CskJ cls1";
|
||||||
|
|
@ -561,6 +561,7 @@ This isn't very handy, also isn't strict enough, and is a high-priority subject
|
||||||
|
|
||||||
- [] Crates of styled components - currently the only way to create them seems to be const styly.
|
- [] Crates of styled components - currently the only way to create them seems to be const styly.
|
||||||
- [] CSS support
|
- [] 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
|
||||||
- [] There are some strange parsing errors, seems like a bug, however very hard to reproduce. Have to investigate. Maybe do more tests.
|
- [] 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.
|
- [] 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