feat: relative style paths & component crate example

.github/workflows/cbt.yml

@@ -1,26 +1,41 @@
 name: cargo basic build-test
 
 on:
-  push:
-    branches: ["window", "master"]
-  pull_request:
-    branches: ["window"]
+    push:
+        branches: ["window", "master"]
+    pull_request:
+        branches: ["window"]
 
 env:
-  CARGO_TERM_COLOR: always
+    CARGO_TERM_COLOR: always
 
 jobs:
-  build_and_test:
-    name: Sabry - latest
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        toolchain:
-          - stable
-          - nightly
-    steps:
-      - uses: actions/checkout@v4
-      - run: rustup update ${{ matrix.toolchain }} && rustup default ${{ matrix.toolchain }}
-      - run: cargo build --verbose
-      - run: cargo test --verbose --all
-      - run: cargo test --verbose --all --all-features
+    build_and_test:
+        name: Sabry - latest
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                toolchain:
+                    - stable
+                    - nightly
+        steps:
+            - uses: actions/checkout@v4
+            - run: rustup update ${{ matrix.toolchain }} && rustup default ${{ matrix.toolchain }}
+            - run: cargo build --verbose
+            - run: cargo test --verbose --all
+            - run: cargo test --verbose --all --all-features
+
+    build_examples:
+        name: Sabry - latset - examples
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                example:
+                    - define-styles
+                    - use-styles
+                    - leptos-axum
+        steps:
+            - uses: actions/checkout@v4
+            - run: rustup update nightly && rustup default nightly
+            - run: cd examples/${{ matrix.example }}
+            - run: cargo build --verbose

Cargo.toml

@@ -59,6 +59,9 @@ build = [
 net-files = [
     "sabry_build/net-files"
 ]
+nightly = [
+    "sabry_procmacro?/nightly"
+]
 internals = []
 
 [package.metadata.docs.rs]

README.md

@@ -130,8 +130,8 @@ Also, just about everything is pub-available in this crate (with *internals* fea
 
 Feel free to check out examples:
 
-|[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)|
-|-|-|-|
+|[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)|[leptos components](https://github.com/yiffyrusdev/sabry/tree/master/examples/leptos-components)|
+|-|-|-|-|
 
 ### Create a crate full of arbitrary SASS
 
@@ -256,6 +256,23 @@ styly!(styles {"
 ```
 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!
 
+### Create crate of styled components
+
+This is currently an alpha-testing-early-concept feature which comes
+with some things to avoid.
+
+While the process depends much on the framework you prefer, there are
+some limitations and essential recommendations:
+
+- Sabry will scope (hash) your styles at build time, which means
+higher collision probability between the component crate and the main application, which *can not* be currently
+detected by sabry.
+- You have to write style scopes for components with `const` styly macro flavour: `styly!(const whatever {""})`
+    - And then you have to solve the task of injecting those generated CSS for your component manually.
+- If you want to write styles in separate SASS/SCSS files, you need the nightly rust and the 'nightly' feature flag set
+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.
+
 ### 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:
@@ -461,6 +478,8 @@ The given code to `scssy!` is not checked to be valid code in given syntax (wip)
 
 > SASS support inside of rust files is experimental. If you do want to use SASS tabbed syntax - consider to use files path instead of sass-in-rust option.
 
+> With *nightly* feature flag if using the relative path like `scssy!(module "./module.scss")` you'll get false-positive error even if file exists. Also you won't get autocompletion and rust-analyzer will complain on `module!` macro. WIP.
+
 ### Scoping with `styly!`
 
 The `styly!` macro is available with *procmacro* feature flag which is enabled by default.
@@ -541,6 +560,8 @@ mod scope {/* selector collection */}
 >
 > Worth of notice: sabry will still include const-flavored styles into the CSS bundle during build time.
 
+> With *nightly* feature flag if using the relative path like `styly!(const scope "./sctyle.scss")` you'll get false-positive error even if file exists. Also you won't get autocompletion and rust-analyzer will complain on `SCOPE_CSS`, `scope::whatever` etc. WIP.
+
 ### Building with `buildy` and `usey!`
 
 The `buildy` function is available with *build* feature which needs to be enabled explicitly.
@@ -658,6 +679,8 @@ Not any valid CSS selector is a valid rust identifier. In general this section s
 
 **lepty-scoping** - overhauls the scope generation logic, best suitable for the leptos. Check out the [section](#leptos-specials) and an [example](https://github.com/yiffyrusdev/sabry/tree/master/examples/leptos-axum)
 
+**nightly** - allows relative path selection with `scssy!` and `styly!` macros. However rust-analyzer will raise false-positives for reachable files as well.
+
 ## WIP
 
 *(sorted by my own priority)*, "dones" are excluded
@@ -666,6 +689,8 @@ Not any valid CSS selector is a valid rust identifier. In general this section s
     - [ ] 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
+    - [x] Allow relative path selection (with 'nightly' feature on nightly rust)
+        - [ ] Somehow get rid of false-positives AND retain proper autocompletion
 - [ ] 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

examples/define-styles/Cargo.lock

@@ -974,7 +974,7 @@ checksum = "f3cb5ba0dc43242ce17de99c180e96db90b235b8a9fdc9543c96d2209116bd9f"
 
 [[package]]
 name = "sabry"
-version = "0.0.1-beta.2"
+version = "0.0.1"
 dependencies = [
  "sabry_intrnl",
  "sabry_procmacro",
@@ -982,7 +982,7 @@ dependencies = [
 
 [[package]]
 name = "sabry_intrnl"
-version = "0.0.1-beta.2"
+version = "0.0.1"
 dependencies = [
  "base64",
  "blake3",
@@ -1001,14 +1001,15 @@ dependencies = [
 
 [[package]]
 name = "sabry_procmacro"
-version = "0.0.1-beta.2"
+version = "0.0.1"
 dependencies = [
+ "cfg-if",
  "sabry_procmacro_impl",
 ]
 
 [[package]]
 name = "sabry_procmacro_impl"
-version = "0.0.1-beta.2"
+version = "0.0.1"
 dependencies = [
  "proc-macro2",
  "quote",

examples/define-styles/Cargo.toml

@@ -6,4 +6,4 @@ rust-version = "1.82"
 publish = false
 
 [dependencies]
-sabry = {path = "../../"}
+sabry = {path = "../../", features = ["nightly"]}

examples/define-styles/src/lib.rs

@@ -1,6 +1,8 @@
 use sabry::scssy;
 
-scssy!(style "src/style.scss");
+// relative path is available because 'nightly' feature flag is set.
+// If you don't - this will be "src/style.scss"
+scssy!(style "./style.scss");
 
 scssy!(utils {"
     @mixin flex($direction, $align, $justify, $gap: .5rem) {

examples/leptos-axum/Cargo.toml

@@ -9,16 +9,16 @@ publish = false
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-leptos = { version = "0.7.0-gamma3" }
-leptos_axum = { version = "0.7.0-gamma3", optional = true }
-leptos_meta = { version = "0.7.0-gamma3" }
-leptos_router = { version = "0.7.0-gamma3" }
+leptos = { version = "0.7.0-rc1" }
+leptos_axum = { version = "0.7.0-rc1", optional = true }
+leptos_meta = { version = "0.7.0-rc1" }
+leptos_router = { version = "0.7.0-rc1" }
 axum = { version = "0.7", optional = true }
 console_error_panic_hook = "0.1"
 tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
 tower = { version = "0.4", optional = true }
 tower-http = { version = "0.5", features = ["fs"], optional = true }
-wasm-bindgen = "=0.2.93"
+wasm-bindgen = "=0.2.95"
 thiserror = "1"
 tracing = { version = "0.1", optional = true }
 http = "1"
@@ -26,6 +26,9 @@ http = "1"
 # sabry with sass
 sabry = {path = "../../", features = ["lepty-scoping"]}
 
+# our component library
+leptos-components = {path = "../leptos-components"}
+
 [build-dependencies]
 # sabry for build with sass
 sabry = {path = "../../", features = ["build", "lepty-scoping"]}

examples/leptos-axum/src/main.rs

@@ -4,6 +4,7 @@
 async fn main() {
     use axum::Router;
     use leptos::prelude::*;
+    use leptos::logging::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
     use leptos_axum_sabry::shell::*;
 

examples/leptos-axum/src/routes/home.rs

@@ -45,6 +45,7 @@ pub fn Route() -> impl IntoView {
     let on_click = move |_| *count.write() += 1;
 
     view! {class = STYLE,
+        <leptos_components::Aside/> // lets use our component
         <section class=style::table>
             <h2>"Welcome to Leptos"</h2>
             <h2 class="">

examples/leptos-axum/src/shell.rs

@@ -4,6 +4,7 @@ use leptos_router::{
     components::{Route, Router, Routes},
     StaticSegment,
 };
+use sabry::styly;
 
 use crate::routes;
 
@@ -29,7 +30,7 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
 pub fn App() -> impl IntoView {
     provide_meta_context();
 
-    view! {
+    view! {class=APP,
         <Stylesheet id="leptos" href="/pkg/leptos-axum.css"/>
         <Title text="Welcome to Leptos"/>
         <Router>
@@ -41,3 +42,11 @@ pub fn App() -> impl IntoView {
         </Router>
     }
 }
+
+styly!(app:scss {"
+    @use 'theme';
+
+    main {
+        @include theme.surface(primary);
+    }
+"});

examples/leptos-components/.gitignore

@@ -0,0 +1,14 @@
+# Generated by Cargo
+# will have compiled files and executables
+debug/
+target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb

examples/leptos-components/Cargo.toml

@@ -0,0 +1,33 @@
+[package]
+name = "leptos-components"
+version = "0.1.0"
+rust-version = "1.82"
+edition = "2021"
+publish = false
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+leptos = { version = "0.7.0-rc1" }
+leptos_meta = { version = "0.7.0-rc1" }
+leptos_router = { version = "0.7.0-rc1" }
+
+sabry = {path = "../../", features = ["lepty-scoping"]}
+
+[build-dependencies]
+sabry = {path = "../../", features = ["build", "lepty-scoping"]}
+define-styles = {path = "../define-styles"}
+
+[features]
+hydrate = ["leptos/hydrate"]
+ssr = [
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+]
+
+[package.metadata.sabry]
+css.minify = true
+# No need for bundle
+# css.bundle = "target/.sabry/target/bundle.css"

examples/leptos-components/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

examples/leptos-components/README.md

@@ -0,0 +1,6 @@
+<picture>
+    <source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
+    <img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
+</picture>
+
+This is an example of sabry with leptos-axum, made with [leptos-axum sterter template](https://github.com/leptos-rs/start-axum)

examples/leptos-components/build.rs

@@ -0,0 +1,11 @@
+use define_styles::{theme, utils, tokens};
+
+fn main(){
+    sabry::buildy(
+        sabry::usey!(
+            utils!(),
+            theme!(),
+            tokens!()
+        )
+    ).expect("Failed to build with sabry");
+}

examples/leptos-components/src/lib.rs

@@ -0,0 +1,52 @@
+use leptos::prelude::*;
+use leptos_meta::Style;
+use sabry::styly;
+
+#[component]
+pub fn Aside() -> impl IntoView {
+    let showme = RwSignal::new(true);
+
+    view!{class=SCOPE,
+        <Style>{SCOPE_CSS}</Style>
+        <Show when=move|| *showme.read()>
+            <aside>
+                <h1>"Welcome to 'sabried' leptos!"</h1>
+                <p>"This is the 'Aside' component"</p>
+                <p>"which we declared in another crate"</p>
+                <p>"styled with sabry too!"</p>
+                <br/>
+                <button class="btn" on:click=move|_| *showme.write() = false>
+                    "Click me to hide aside!"
+                </button>
+            </aside>
+        </Show>
+    }
+}
+
+styly!(const scope:scss {"
+    @use 'theme';
+    @use 'utils';
+    @use 'tokens';
+
+    aside {
+        @include theme.surface(secondary);
+        @include utils.flex(column, center, center);
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: max-content;
+        z-index: 1000;
+    }
+
+    p {
+        @include theme.txt(primary);
+        font-size: 1rem;
+    }
+
+    .btn {
+        @include theme.surface(accent);
+        @include tokens.clickable();
+    }
+"});

examples/use-styles/Cargo.lock

@@ -1016,6 +1016,7 @@ dependencies = [
 name = "sabry_procmacro"
 version = "0.0.1"
 dependencies = [
+ "cfg-if",
  "sabry_procmacro_impl",
 ]
 

examples/use-styles/Cargo.toml

@@ -6,10 +6,10 @@ rust-version = "1.82"
 publish = false
 
 [dependencies]
-sabry = {path = "../../"}
+sabry = {path = "../../", features = ["nightly"]}
 
 [build-dependencies]
-sabry = {path = "../../", features = ["build"]}
+sabry = {path = "../../", features = ["build", "nightly"]}
 define-styles = {path = "../define-styles"}
 
 [package.metadata.sabry]

examples/use-styles/build.rs

@@ -9,14 +9,8 @@ scssy!(utils {"
     }
 "});
 
-fn main(){
+fn main() {
     /* Declare modules to use with sabry */
-    sabry::buildy(
-        usey!(
-            theme!(),
-            tokens!(),
-            utils_dup!(),
-            utils!()
-        )
-    ).expect("Failed to build sabry styles");
+    sabry::buildy(usey!(theme!(), tokens!(), utils_dup!(), utils!()))
+        .expect("Failed to build sabry styles");
 }

examples/use-styles/src/main.rs

@@ -17,7 +17,9 @@ styly!(pub const bundlemod {"
     }
 "});
 
-styly!(pub filemod:sass "src/main.sass");
+// relative path is available because 'nightly' feature flag is set.
+// If you don't - this will be "src/main.sass"
+styly!(pub const filemod:sass "./main.sass");
 
 fn main() {
     println!("someth class codemod styles: {}", bundlemod::someth);
@@ -28,5 +30,6 @@ fn main() {
     );
     println!("#fox id will be: {}", bundlemod::thefox);
     println!("Bundles const CSS will be: {}", BUNDLEMOD_CSS);
+    println!("Bundles const CSS from file will be: {}", FILEMOD_CSS); // false-positive from relative file.
     println!("Thats how we used the styles! Good luck!!");
 }