├── .envrc ├── .gitignore ├── .gitmodules ├── BUILD.md ├── Cargo.toml ├── LICENSE ├── README.md ├── classes.rs ├── crates ├── dioxus-class-internal │ ├── CHANGELOG.md │ ├── Cargo.toml │ ├── README.md │ └── src │ │ ├── class.rs │ │ └── lib.rs ├── dioxus-class-macro │ ├── CHANGELOG.md │ ├── Cargo.toml │ ├── README.md │ └── src │ │ ├── build.rs │ │ ├── class.rs │ │ └── lib.rs ├── dioxus-class │ ├── CHANGELOG.md │ ├── Cargo.toml │ ├── README.md │ └── src │ │ ├── build.rs │ │ ├── lib.rs │ │ └── macros.rs ├── dioxus-daisyui │ ├── CHANGELOG.md │ ├── Cargo.toml │ ├── README.md │ └── src │ │ ├── actions.rs │ │ ├── colors.rs │ │ ├── display.rs │ │ ├── feedback.rs │ │ ├── input.rs │ │ ├── layout.rs │ │ ├── lib.rs │ │ ├── macros.rs │ │ ├── mockup.rs │ │ └── navigation.rs └── dioxus-tailwindcss │ ├── CHANGELOG.md │ ├── Cargo.toml │ ├── README.md │ └── src │ ├── accessibility.rs │ ├── backgrounds.rs │ ├── borders.rs │ ├── build.rs │ ├── dark_mode.rs │ ├── effects.rs │ ├── filters.rs │ ├── flex.rs │ ├── interactivity.rs │ ├── layout.rs │ ├── lib.rs │ ├── macros.rs │ ├── modifier.rs │ ├── responsive.rs │ ├── sizing.rs │ ├── spacing.rs │ ├── svg.rs │ ├── tables.rs │ ├── transforms.rs │ ├── transitions.rs │ └── typography.rs ├── css.rs ├── demo └── emoji-browser │ ├── .gitignore │ ├── Cargo.toml │ ├── Dioxus.toml │ ├── README.md │ ├── assets │ └── css │ │ └── tailwind.css │ ├── build.rs │ ├── classes.rs │ ├── css │ ├── .gitignore │ ├── Cargo.toml │ ├── build.rs │ ├── classes.html │ ├── classes.rs │ ├── justfile │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── lib.rs │ ├── tailwind.config.js │ └── tailwind.input.css │ ├── justfile │ └── src │ ├── app.rs │ ├── components │ ├── emoji_card.rs │ ├── emoji_grid.rs │ ├── emoji_search.rs │ └── mod.rs │ ├── lib.rs │ ├── main.rs │ └── pages │ ├── home.rs │ └── mod.rs ├── flake.lock ├── flake.nix └── justfile /.envrc: -------------------------------------------------------------------------------- 1 | #See https://github.com/direnv/direnv 2 | # PATH_add tools/ 3 | 4 | # https://github.com/nix-community/nix-direnv 5 | use flake 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | 5 | # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries 6 | # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html 7 | Cargo.lock 8 | 9 | # These are backup files generated by rustfmt 10 | **/*.rs.bk 11 | .direnv/ 12 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "external/emojic"] 2 | path = external/emojic 3 | url = git@github.com:edger-dev/emojic.git 4 | -------------------------------------------------------------------------------- /BUILD.md: -------------------------------------------------------------------------------- 1 | # Build Process 2 | 3 | For CSS frameworks such as tailwindcss to work, an extra build process is needed, which usually use regular expression to find all source codes for possible classes. Since we are using rust constants and functions instead of plain strings, this is not working at all. 4 | 5 | It's quite tricky to get it work in regular expression in source code level, so I stucked for a better solution, previous I used dioxus-ssr to generate a few html pages, then use that as input to tailwindcss, which works, but quite messy, also might missed some classes if the related page wasn't generated. 6 | 7 | Later I found a much nicer solutions by [procout](https://github.com/plasticartsshow/procout), which add file generation in `proc_macro!`, so I borrow the idea, so far it seems works pretty good. 8 | 9 | Check [Emoji Browser](https://github.com/edger-dev/dioxus-class/tree/main/demos/emoji-browser) for a complete sample. 10 | 11 | ## How It Works 12 | 13 | A special feature `build-classes` is added, when it's activated, all `class!` calls will be written to `classes.rs`, which contains all generated rust codes. 14 | 15 | We will run `cargo test --features "build-classes"` to generate that file, then we will include the generated file in `build.rs` to create the html file with all CSS classes, then that file can be used as input for tailwindcss. 16 | 17 | ## Build Steps 18 | 19 | I'm using [just](https://github.com/casey/just) to run these steps, also provided sample for watching src folder and rebuild the classes with `cargo watch` 20 | 21 | ```just 22 | build-classes: 23 | DIOXUS_CLASS_BUILD_PATH="$PWD/css/classes.rs" cargo test --features "web build-classes" 24 | cargo build 25 | cd css && cargo build 26 | 27 | clear-buffer: 28 | echo -e -n "\\0033c" && tmux clear-history 29 | 30 | watch-classes: 31 | cargo watch -w src/ -s "just clear-buffer && cargo rustc --lib -- -Awarnings && just build-classes" 32 | ``` 33 | 34 | 35 | ### Generate `classes.rs` 36 | 37 | `DIOXUS_CLASS_BUILD_PATH="$PWD/css/classes.rs" cargo test --features "web build-classes"` 38 | 39 | By running `cargo test` with `build-classes` feature, classes.rs will be created at given position. 40 | 41 | Note that by default, cargo will also run doctest, so the file will be generated twice, adding this to `Cargo.toml` can bypass the doctest running 42 | 43 | ``` 44 | [lib] 45 | doctest = false 46 | ``` 47 | 48 | ### Make sure `classes.rs` is having proper format 49 | 50 | [build.rs](https://github.com/edger-dev/dioxus-class/tree/main/demos/emoji-browser/build.rs) 51 | 52 | `check_classes` will check the given file, if it's not there, create an empty one with `vec![]` as content, of checking whether it ends with `]`, if not, adding one. 53 | 54 | This step is needed, since I can't find a way to execute cleanup logic in the classes generation, for that file to be used later, it must be a valid `vec`. 55 | 56 | ```rust 57 | use std::env; 58 | use std::path::Path; 59 | use dioxus_daisyui::build::*; 60 | 61 | fn main() -> Result<(), Box> { 62 | println!("cargo:rerun-if-changed=css/classes.rs"); 63 | let current_dir = env::current_dir()?; 64 | let css_dir = Path::new(¤t_dir).join("css"); 65 | let classes_path = Path::new(&css_dir).join("classes.rs"); 66 | check_classes(classes_path) 67 | } 68 | ``` 69 | 70 | ### Generate `classes.html` and build with tailwindcss 71 | 72 | [A simple cargo project created for this step](https://github.com/edger-dev/dioxus-class/tree/main/demos/emoji-browser/css) 73 | 74 | [build.rs](https://github.com/edger-dev/dioxus-class/tree/main/demos/emoji-browser/css/build.rs) 75 | 76 | ``` 77 | use std::env; 78 | use std::path::Path; 79 | 80 | use dioxus_daisyui::build::*; 81 | use dioxus_daisyui::prelude::*; 82 | 83 | fn main() -> Result<(), Box> { 84 | println!("cargo:rerun-if-changed=classes.rs"); 85 | // let out_dir = env::var_os("OUT_DIR").unwrap(); 86 | let current_dir = env::current_dir()?; 87 | 88 | let classes_path = Path::new(¤t_dir).join("classes.html"); 89 | let classes = include!("classes.rs"); 90 | generate_classes(classes_path, classes)?; 91 | 92 | npx_tailwindcss(current_dir, "tailwind.input.css", "../assets/css/tailwind.css") 93 | } 94 | 95 | ``` -------------------------------------------------------------------------------- /Cargo.toml: -------------------------------------------------------------------------------- 1 | [workspace.package] 2 | edition = "2021" 3 | license = "MIT" 4 | homepage = "https://github.com/edger-dev/dioxus-class" 5 | repository = "https://github.com/edger-dev/dioxus-class" 6 | 7 | [workspace] 8 | members = [ 9 | "crates/dioxus-class", 10 | "crates/dioxus-class-internal", 11 | "crates/dioxus-class-macro", 12 | "crates/dioxus-tailwindcss", 13 | "crates/dioxus-daisyui", 14 | "demo/emoji-browser", 15 | "demo/emoji-browser/css", 16 | ] 17 | 18 | resolver = "2" 19 | 20 | [workspace.dependencies] 21 | dioxus-class = { path = "crates/dioxus-class", version = "0.8.0" } 22 | dioxus-class-internal = { path = "crates/dioxus-class-internal", version = "0.8.0" } 23 | dioxus-class-macro = { path = "crates/dioxus-class-macro", version = "0.8.0" } 24 | dioxus-tailwindcss = { path = "crates/dioxus-tailwindcss", version = "0.8.0" } 25 | dioxus-daisyui = { path = "crates/dioxus-daisyui", version = "0.8.0" } 26 | 27 | dioxus = "0.6.0" 28 | paste = "1.0.15" 29 | fehler = "1.0" 30 | 31 | quote = "1.0" 32 | proc-macro2 = "1.0" 33 | syn = { version = "2.0", features = [ "full" ]} 34 | 35 | # demo 36 | lazy_static = "1.4.0" 37 | 38 | simsearch = "0.2.4" 39 | 40 | [profile] 41 | 42 | [profile.wasm-dev] 43 | inherits = "dev" 44 | opt-level = 1 45 | 46 | [profile.server-dev] 47 | inherits = "dev" 48 | 49 | [profile.android-dev] 50 | inherits = "dev" 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 edger-dev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Dioxus Class](https://github.com/edger-dev/dioxus-class) 2 | 3 | When using dioxus for GUI development, by default plain strings are used for CSS class, which is not ideal IMO, there is no compile time validation, and also the auto completion is only text based, and it's not easy to reuse class constants. 4 | 5 | ## [dioxus-class](https://github.com/edger-dev/dioxus-class/tree/main/crates/dioxus-class) 6 | 7 |
8 | 9 | 10 | Crates.io version 12 | 13 | 14 | 15 | Download 17 | 18 |
19 | 20 | Class type been provided, which is just a wrapper struct around `Vec`, some basic `From<>` and `Add<>` implementation make it easier to be used. 21 | 22 | `constant!` macro for easier definition for css values, e.g. 23 | 24 | ```rust 25 | constant!(table column group); 26 | ``` 27 | 28 | will be transformed to: 29 | 30 | ```rust 31 | pub const table_column_group: &'static str = "table-column-group"; 32 | ``` 33 | 34 | `class!` macro provided for easier definition using string constants, e.g. 35 | 36 | ```rust 37 | rsx! { 38 | div { 39 | class: class!(card_body text_center items_center hover(scale_105)), 40 | div { 41 | class: class!(card_title text_sm text_base_content), 42 | "text" 43 | } 44 | } 45 | } 46 | ``` 47 | 48 | ## [dioxus-tailwindcss](https://github.com/edger-dev/dioxus-class/tree/main/crates/dioxus-tailwindcss) 49 | 50 |
51 | 52 | 53 | Crates.io version 55 | 56 | 57 | 58 | Download 60 | 61 |
62 | 63 | Defined constants and modifiers for [tailwindcss](https://tailwindcss.com) 64 | 65 | ## [dioxus-daisyui](https://github.com/edger-dev/dioxus-class/tree/main/crates/dioxus-daisyui) 66 | 67 |
68 | 69 | 70 | Crates.io version 72 | 73 | 74 | 75 | Download 77 | 78 |
79 | 80 | Defined constants and modifiers for [daisyui](https://daisyui.com) 81 | 82 | ## [Emoji Browser](https://github.com/edger-dev/dioxus-class/tree/main/demos/emoji-browser) 83 | 84 | Open web app in new tab 85 | 86 | Search emoji by shortcode, built as demo project. 87 | 88 | 89 | ## Build All Used CSS Classes 90 | 91 | Since tailwindcss need to get all used values, when using `class!`, the default build process is not working. 92 | 93 | Check [BUILD.md](https://github.com/edger-dev/dioxus-class/tree/main/BUILD.md) for how to handle this process. -------------------------------------------------------------------------------- /classes.rs: -------------------------------------------------------------------------------- 1 | vec![ 2 | 3 | /* #256 bytes(434..539) 4 | class!(card card_compact w_64 h_64 bg_base_300 shadow_xl text_center hover(bg_base_200) hover(scale_105)) 5 | */ 6 | Class :: 7 | from(vec! 8 | [String :: from(card), String :: from(card_compact), String :: from(w_64), 9 | String :: from(h_64), String :: from(bg_base_300), String :: from(shadow_xl), 10 | String :: from(text_center), String :: from(hover(bg_base_200)), String :: 11 | from(hover(scale_105))]), 12 | 13 | /* #262 bytes(582..604) 14 | class!(text_8xl py_10) 15 | */ 16 | Class :: from(vec! [String :: from(text_8xl), String :: from(py_10)]), 17 | 18 | /* #267 bytes(689..731) 19 | class!(card_body text_center items_center) 20 | */ 21 | Class :: 22 | from(vec! 23 | [String :: from(card_body), String :: from(text_center), String :: 24 | from(items_center)]), 25 | 26 | /* #272 bytes(782..826) 27 | class!(card_title text_sm text_base_content) 28 | */ 29 | Class :: 30 | from(vec! 31 | [String :: from(card_title), String :: from(text_sm), String :: 32 | from(text_base_content)]), 33 | 34 | /* #292 bytes(1067..1124) 35 | class!(flex flex_row flex_wrap justify_center gap_4 mx_2) 36 | */ 37 | Class :: 38 | from(vec! 39 | [String :: from(flex), String :: from(flex_row), String :: from(flex_wrap), 40 | String :: from(justify_center), String :: from(gap_4), String :: from(mx_2)]), 41 | 42 | /* #315 bytes(1376..1446) 43 | class!(w_80 h_12 text_2xl m_4 px_2 input input_primary input_bordered) 44 | */ 45 | Class :: 46 | from(vec! 47 | [String :: from(w_80), String :: from(h_12), String :: from(text_2xl), String 48 | :: from(m_4), String :: from(px_2), String :: from(input), String :: 49 | from(input_primary), String :: from(input_bordered)]), 50 | 51 | /* #323 bytes(2028..2057) 52 | class!(bottom_0 h_full mt_20) 53 | */ 54 | Class :: 55 | from(vec! 56 | [String :: from(bottom_0), String :: from(h_full), String :: from(mt_20)]), 57 | 58 | /* #328 bytes(2101..2115) 59 | class!(hidden) 60 | */ 61 | Class :: from(vec! [String :: from(hidden)]), 62 | 63 | /* #333 bytes(2186..2200) 64 | class!(hidden) 65 | */ 66 | Class :: from(vec! [String :: from(hidden)]), 67 | 68 | /* #361 bytes(2269..2294) 69 | class!(w_screen h_screen) 70 | */ 71 | Class :: from(vec! [String :: from(w_screen), String :: from(h_screen)]), 72 | 73 | /* #366 bytes(2337..2400) 74 | class!(fixed top_0 w_full z_10 bg_base_100 flex justify_center) 75 | */ 76 | Class :: 77 | from(vec! 78 | [String :: from(fixed), String :: from(top_0), String :: from(w_full), String 79 | :: from(z_10), String :: from(bg_base_100), String :: from(flex), String :: 80 | from(justify_center)]), 81 | 82 | -------------------------------------------------------------------------------- /crates/dioxus-class-internal/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | ## [0.7.0] - 2024-04-09 11 | 12 | - Cleanup 13 | 14 | ## [0.5.0] - 2024-03-28 15 | 16 | ### Added 17 | 18 | - Class struct 19 | 20 | ### Fixed 21 | 22 | ### Removed 23 | 24 | ## [0.5.0] - 2024-03-28 25 | 26 | Initial version, created for dioxus-class-macro 27 | 28 | ### Added 29 | 30 | - Class struct -------------------------------------------------------------------------------- /crates/dioxus-class-internal/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | version = "0.8.0" 3 | name = "dioxus-class-internal" 4 | description = "Dioxus class internal" 5 | 6 | edition = { workspace = true } 7 | license = { workspace = true } 8 | homepage = { workspace = true } 9 | repository = { workspace = true } 10 | 11 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 12 | 13 | [dependencies] 14 | dioxus = { workspace = true } 15 | -------------------------------------------------------------------------------- /crates/dioxus-class-internal/README.md: -------------------------------------------------------------------------------- 1 | # dioxus-class-internal 2 | 3 | Internal crate for dioxus-class, define Class struct 4 | -------------------------------------------------------------------------------- /crates/dioxus-class-internal/src/class.rs: -------------------------------------------------------------------------------- 1 | use std::fmt::Display; 2 | use std::ops::Add; 3 | use dioxus::prelude::*; 4 | use dioxus::dioxus_core::AttributeValue; 5 | 6 | /// Class struct is just a wrapper of `Vec` 7 | /// 8 | /// several From<> provided for easier construction 9 | /// most of the time, you'll use class! proc_macro to 10 | /// create instance. 11 | /// 12 | /// Some Add<> helper also provided, so you can define 13 | /// common part, and append extra values if needed. 14 | /// 15 | #[derive(Clone, PartialEq, Eq, PartialOrd, Ord, Debug)] 16 | pub struct Class(pub Vec); 17 | 18 | impl Display for Class { 19 | fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { 20 | write!(f, "{}", self.to_class()) 21 | } 22 | } 23 | 24 | impl Class { 25 | pub const NONE: Class = Class(vec![]); 26 | 27 | pub fn to_class(&self) -> String { 28 | self.0.join(" ") 29 | } 30 | pub fn validate(&mut self) -> () { 31 | //TODO: validate the string format for css 32 | self.0.sort_unstable(); 33 | self.0.dedup(); 34 | } 35 | pub fn validated(&mut self) -> Self { 36 | self.validate(); 37 | self.to_owned() 38 | } 39 | pub fn append(&mut self, v: &str) -> () { 40 | self.0.push(v.to_string()); 41 | } 42 | } 43 | 44 | impl IntoAttributeValue for Class { 45 | fn into_value(self) -> AttributeValue { 46 | AttributeValue::Text(self.to_class()) 47 | } 48 | } 49 | 50 | impl IntoAttributeValue for &Class { 51 | fn into_value(self) -> AttributeValue { 52 | AttributeValue::Text(self.to_class()) 53 | } 54 | } 55 | 56 | impl From> for Class { 57 | fn from(v: Vec<&str>) -> Self { 58 | Self(v.iter().map(|x| x.to_string()).collect::>()) 59 | } 60 | } 61 | 62 | impl From> for Class { 63 | fn from(v: Vec) -> Self { 64 | Self(v) 65 | } 66 | } 67 | 68 | impl From<&[&str]> for Class { 69 | fn from(v: &[&str]) -> Self { 70 | Self(v.iter().map(|x| x.to_string()).collect::>()) 71 | } 72 | } 73 | 74 | impl From<&[String]> for Class { 75 | fn from(v: &[String]) -> Self { 76 | Self(v.to_vec()) 77 | } 78 | } 79 | 80 | impl Add<&str> for Class { 81 | type Output = Self; 82 | 83 | fn add(self, rhs: &str) -> Self::Output { 84 | let mut result = self.clone(); 85 | result.append(rhs); 86 | result.validated() 87 | } 88 | } 89 | 90 | impl Add for Class { 91 | type Output = Self; 92 | 93 | fn add(self, rhs: String) -> Self::Output { 94 | let mut result = self.clone(); 95 | result.append(&rhs); 96 | result.validated() 97 | } 98 | } 99 | 100 | impl Add> for Class { 101 | type Output = Self; 102 | 103 | fn add(self, rhs: Vec<&str>) -> Self::Output { 104 | let mut result = self.clone(); 105 | for part in rhs { 106 | result.append(part); 107 | } 108 | result.validated() 109 | } 110 | } 111 | 112 | impl Add> for Class { 113 | type Output = Self; 114 | 115 | fn add(self, rhs: Vec) -> Self::Output { 116 | let mut result = self.clone(); 117 | for part in rhs { 118 | result.append(&part); 119 | } 120 | result.validated() 121 | } 122 | } 123 | 124 | impl Add for Class { 125 | type Output = Self; 126 | 127 | fn add(self, rhs: Class) -> Self::Output { 128 | let mut result = self.clone(); 129 | for part in rhs.0 { 130 | result.append(&part); 131 | } 132 | result.validated() 133 | } 134 | } 135 | 136 | impl Add<&Class> for Class { 137 | type Output = Self; 138 | 139 | fn add(self, rhs: &Class) -> Self::Output { 140 | let mut result = self.clone(); 141 | for part in rhs.0.iter() { 142 | result.append(&part); 143 | } 144 | result.validated() 145 | } 146 | } 147 | 148 | impl Add> for Class { 149 | type Output = Self; 150 | 151 | fn add(self, rhs: Option<&str>) -> Self::Output { 152 | match rhs { 153 | Some(rhs) => self + rhs, 154 | None => self, 155 | } 156 | } 157 | } 158 | 159 | impl Add> for Class { 160 | type Output = Self; 161 | 162 | fn add(self, rhs: Option) -> Self::Output { 163 | match rhs { 164 | Some(rhs) => self + rhs, 165 | None => self, 166 | } 167 | } 168 | } 169 | 170 | impl Add>> for Class { 171 | type Output = Self; 172 | 173 | fn add(self, rhs: Option>) -> Self::Output { 174 | match rhs { 175 | Some(rhs) => self + rhs, 176 | None => self, 177 | } 178 | } 179 | } 180 | 181 | impl Add>> for Class { 182 | type Output = Self; 183 | 184 | fn add(self, rhs: Option>) -> Self::Output { 185 | match rhs { 186 | Some(rhs) => self + rhs, 187 | None => self, 188 | } 189 | } 190 | } 191 | 192 | impl Add> for Class { 193 | type Output = Self; 194 | 195 | fn add(self, rhs: Option) -> Self::Output { 196 | match rhs { 197 | Some(rhs) => self + rhs, 198 | None => self, 199 | } 200 | } 201 | } 202 | 203 | impl Add> for Class { 204 | type Output = Self; 205 | 206 | fn add(self, rhs: Option<&Class>) -> Self::Output { 207 | match rhs { 208 | Some(rhs) => self + rhs, 209 | None => self, 210 | } 211 | } 212 | } 213 | 214 | impl Add<&Option<&Class>> for Class { 215 | type Output = Self; 216 | 217 | #[allow(suspicious_double_ref_op)] 218 | fn add(self, rhs: &Option<&Class>) -> Self::Output { 219 | match rhs { 220 | Some(rhs) => self + rhs.clone(), 221 | None => self, 222 | } 223 | } 224 | } -------------------------------------------------------------------------------- /crates/dioxus-class-internal/src/lib.rs: -------------------------------------------------------------------------------- 1 | #![doc = include_str!("../README.md")] 2 | 3 | pub mod class; 4 | 5 | pub use class::Class; -------------------------------------------------------------------------------- /crates/dioxus-class-macro/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | ## [0.7.0] - 2024-04-09 11 | 12 | - Support DIOXUS_CLASS_BUILD_PATH env to control where to write the classes.rs file 13 | - Tweak logging for classes build process 14 | 15 | ## [0.5.0] - 2024-03-28 16 | 17 | ### Added 18 | 19 | - class! macro 20 | 21 | ### Fixed 22 | 23 | ### Removed 24 | -------------------------------------------------------------------------------- /crates/dioxus-class-macro/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "dioxus-class-macro" 3 | version = "0.8.0" 4 | description = "Dioxus class proc_macro" 5 | 6 | edition.workspace = true 7 | license.workspace = true 8 | homepage.workspace = true 9 | repository.workspace = true 10 | 11 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 12 | 13 | [lib] 14 | proc-macro = true 15 | 16 | [features] 17 | build-classes = [ 18 | "lazy_static", 19 | ] 20 | 21 | [dependencies] 22 | dioxus-class-internal = { workspace = true } 23 | 24 | quote = { workspace = true } 25 | proc-macro2 = { workspace = true } 26 | syn = { workspace = true } 27 | fehler = { workspace = true } 28 | 29 | lazy_static = { workspace = true, optional = true } 30 | -------------------------------------------------------------------------------- /crates/dioxus-class-macro/README.md: -------------------------------------------------------------------------------- 1 | # dioxus-class-macro 2 | 3 | `class!` proc_macro provided to define class clearly 4 | 5 | ## Example 6 | ```rust 7 | rsx! { 8 | div { 9 | class: class!(card card_compact w_64 h_64 bg_base_300 shadow_xl text_center hover(bg_base_200) hover(scale_105)), 10 | div { 11 | class: class!(text_8xl py_10), 12 | "{value}", 13 | }, 14 | div { 15 | class: class!(card_body text_center items_center), 16 | div { 17 | class: class!(card_title text_sm text_base_content), 18 | "{alias}", 19 | } 20 | } 21 | } 22 | } 23 | ``` 24 | 25 | The elements such as `card_compact` are just normal rust expressions, they are all checked by compiler, 26 | and when defined as constants, can provide auto-complete in editor. The only requirement is that they 27 | can be converted to String with String::from() 28 | 29 | -------------------------------------------------------------------------------- /crates/dioxus-class-macro/src/build.rs: -------------------------------------------------------------------------------- 1 | use std::env; 2 | use std::{fs::File, io::LineWriter, sync::RwLock}; 3 | use std::io::Write; 4 | 5 | use lazy_static::lazy_static; 6 | 7 | pub const DIOXUS_CLASS_BUILD_PATH: &'static str = "DIOXUS_CLASS_BUILD_PATH"; 8 | 9 | lazy_static! { 10 | static ref WRITER: RwLock> = RwLock::new(create_writer().unwrap()); 11 | } 12 | 13 | fn create_writer() -> Result, Box> { 14 | let path = match env::var_os(DIOXUS_CLASS_BUILD_PATH) { 15 | Some(build_path) => { 16 | println!("cargo:warning=dioxus-class-macro::build: {} = {:?}", DIOXUS_CLASS_BUILD_PATH, build_path); 17 | std::path::Path::new(&build_path).into() 18 | }, 19 | None => { 20 | let mut path = std::env::current_dir()?.clone(); 21 | path.push("classes"); 22 | path.set_extension("rs"); 23 | path 24 | }, 25 | }; 26 | println!("cargo:warning=dioxus-class-macro::build::create_writer(): {:?}", path); 27 | let file = File::create(path)?; 28 | let mut writer = LineWriter::new(file); 29 | writer.write_all("vec![\n\n".as_bytes())?; 30 | writer.flush()?; 31 | Ok(writer) 32 | } 33 | 34 | pub fn write_bytes(text: &str, bytes: &[u8]) -> Result<(), Box> { 35 | WRITER.write().unwrap().write_all(bytes)?; 36 | WRITER.write().unwrap().flush()?; 37 | println!("cargo:warning=dioxus-class-macro::build::write_bytes(): [{}] {}", bytes.len(), text); 38 | Ok(()) 39 | } 40 | 41 | pub fn write_text(text: &str, lines: &str) -> Result<(), Box> { 42 | write_bytes(text, lines.as_bytes()) 43 | } -------------------------------------------------------------------------------- /crates/dioxus-class-macro/src/class.rs: -------------------------------------------------------------------------------- 1 | use fehler::throws; 2 | use quote::{quote, ToTokens}; 3 | use proc_macro2::TokenStream; 4 | use syn::parse::{Error, Parse, ParseStream}; 5 | use syn::Expr; 6 | use proc_macro2::Span; 7 | 8 | pub struct Dsl { 9 | pub span: Span, 10 | pub text: String, 11 | pub values: Vec, 12 | } 13 | 14 | impl Parse for Dsl { 15 | #[throws(Error)] 16 | fn parse(input: ParseStream) -> Self { 17 | let span = Span::call_site(); 18 | let text = match span.source_text() { 19 | Some(text) => text, 20 | None => input.to_string(), 21 | }; 22 | let mut values = vec![]; 23 | loop { 24 | if input.is_empty() { 25 | break; 26 | } 27 | let val = input.parse::()?; 28 | values.push(val); 29 | } 30 | Dsl { 31 | span, 32 | text, 33 | values, 34 | } 35 | } 36 | } 37 | 38 | impl ToTokens for Dsl { 39 | fn to_tokens(&self, tokens: &mut TokenStream) { 40 | let values_quote: Vec<_> = self.values.iter().map( 41 | |x| quote! { String::from(#x) } 42 | ).collect(); 43 | let code = quote! { 44 | Class::from(vec![ 45 | #(#values_quote),* 46 | ]) 47 | }; 48 | #[cfg(feature = "build-classes")] 49 | { 50 | // Span.source_file() is not stable yet 51 | let lines = format!("/* {:?}\n{}\n */\n{},\n\n", 52 | self.span, self.text, code); 53 | let _ = crate::build::write_text(&self.text, &lines); 54 | } 55 | tokens.extend(code); 56 | } 57 | } -------------------------------------------------------------------------------- /crates/dioxus-class-macro/src/lib.rs: -------------------------------------------------------------------------------- 1 | #![doc = include_str!("../README.md")] 2 | 3 | use proc_macro::TokenStream; 4 | use quote::ToTokens; 5 | use syn::parse_macro_input; 6 | 7 | #[cfg(feature = "build-classes")] 8 | mod build; 9 | 10 | mod class; 11 | 12 | /// The arguments are list of expressions, separated by space, all of them need to be compatible with 13 | /// String::from() 14 | /// 15 | /// The idea is to write in a very similar way of CSS, but can be compile time checked, also can provide 16 | /// code completion nicely. 17 | /// 18 | /// # Example 19 | /// ```rust 20 | /// class: class!(card card_compact w_64 h_64 bg_base_300 shadow_xl text_center hover(bg_base_200) hover(scale_105)), 21 | /// ``` 22 | #[proc_macro] 23 | pub fn class(input: TokenStream) -> TokenStream { 24 | parse_macro_input!(input as class::Dsl) 25 | .into_token_stream() 26 | .into() 27 | } 28 | -------------------------------------------------------------------------------- /crates/dioxus-class/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | ## [0.7.0] - 2024-04-09 11 | 12 | - Add build::check_classes to create empty file and adding vec ending 13 | 14 | ## [0.6.0] - 2024-04-01 15 | 16 | ### Fixed 17 | 18 | - treat last param in `constant!` as string 19 | 20 | ## [0.5.0] - 2024-03-28 21 | 22 | ### Added 23 | 24 | - update with Dioxus 0.5 25 | 26 | ### Fixed 27 | 28 | ### Removed 29 | 30 | - classes.rs 31 | - class! macro 32 | - style! macro 33 | 34 | ## [0.3.0] - 2023-03-03 35 | 36 | ### Removed 37 | 38 | - remove components, it's hard to get it right. 39 | 40 | ## [0.2.2] - 2023-02-27 41 | 42 | ### Fixed 43 | 44 | - cleanup 45 | 46 | ## [0.2.1] - 2023-02-27 47 | 48 | ### Added 49 | 50 | - add example (todomvc.rs from dioxus examples) 51 | 52 | ### Fixed 53 | 54 | - make class! to use Class::from(), to support more types of expr 55 | - bugfix with class! 56 | 57 | 58 | ## [0.2.0] - 2023-02-25 59 | 60 | ### Added 61 | 62 | - macros (constant!) for easier extension writing 63 | 64 | ## [0.1.x] 65 | 66 | ### Added 67 | 68 | - Class struct 69 | - build::generate to write files with defined classes, which can be used for css generation when needed (e.g. used for tailwindcss) 70 | - macros (class!, class!) for creating styles that includes classes 71 | -------------------------------------------------------------------------------- /crates/dioxus-class/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | version = "0.8.0" 3 | name = "dioxus-class" 4 | description = "Dioxus class" 5 | 6 | edition = { workspace = true } 7 | license = { workspace = true } 8 | homepage = { workspace = true } 9 | repository = { workspace = true } 10 | 11 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 12 | 13 | [features] 14 | build-classes = [ 15 | "dioxus-class-macro/build-classes", 16 | ] 17 | 18 | [dependencies] 19 | dioxus = { workspace = true } 20 | paste = { workspace = true } 21 | dioxus-class-internal = { workspace = true } 22 | dioxus-class-macro = { workspace = true } 23 | -------------------------------------------------------------------------------- /crates/dioxus-class/README.md: -------------------------------------------------------------------------------- 1 | # dioxus-class 2 | 3 | Most dioxus samples are using plain strings for classes, e.g. 4 | 5 | ```rust 6 | button { 7 | class: "inline-flex border-0 py-1 px-3 focus:outline-none hover:bg-gray-700", 8 | "Button" 9 | RightArrowIcon {} 10 | } 11 | ``` 12 | 13 | This is the common way in web development, it's very powerful, but not providing any checks, typos in the classes will be hard to notice. 14 | 15 | ## How it Works 16 | 17 | To support a certain CSS framework, Simple CSS values are defined as string constants, modifiers like `hover:` are defined as functions, then you can write the previous example as following: 18 | 19 | ```rust 20 | button { 21 | class: class!(inline_flex border_0 py_1 px_3 focus(outline_none) hover(bg_gray_700)), 22 | "Button" 23 | RightArrowIcon {} 24 | } 25 | ``` 26 | 27 | It looks very clean, and show the original values clearly, most importantly, the compiler will catch any typo now. 28 | 29 | 30 | ## How to Create CSS framework 31 | 32 | check [dioxus-tailwindcss](https://github.com/edger-dev/dioxus-class/tree/main/crates/dioxus-tailwindcss) for more details. 33 | 34 | ### Define class constant with macro 35 | 36 | To create constants for your custom css, or creating a crate for existing frameworks, constants are created for compile time check. 37 | 38 | Since css use `-` as separator, macros are provided to generate rust const for them by replacing `-` to `_` 39 | 40 | These macros are accessable in `dioxus_class::ext::*`; 41 | 42 | ```rust 43 | constant!(btn success); 44 | constant!(btn warning); 45 | ``` 46 | 47 | Will be expanded to: 48 | 49 | ```rust 50 | pub const btn_success: &'static str = "btn-success"; 51 | pub const btn_warning: &'static str = "btn-warning"; 52 | ``` 53 | 54 | ### Define sets of constants 55 | 56 | There are many similar value groups, which is not easy to define manually, simple macro rules can be created to make this easier. 57 | 58 | ```rust 59 | #[macro_export] 60 | macro_rules! colors { 61 | ( $( $prefix:ident )* ) => { 62 | constant!($( $prefix )* inherit); 63 | constant!($( $prefix )* current); 64 | constant!($( $prefix )* transparent); 65 | constant!($( $prefix )* black); 66 | constant!($( $prefix )* white); 67 | 68 | constant!($( $prefix )* slate 50); 69 | constant!($( $prefix )* slate 100); 70 | constant!($( $prefix )* slate 200); 71 | constant!($( $prefix )* slate 300); 72 | constant!($( $prefix )* slate 400); 73 | constant!($( $prefix )* slate 500); 74 | constant!($( $prefix )* slate 600); 75 | constant!($( $prefix )* slate 700); 76 | constant!($( $prefix )* slate 800); 77 | constant!($( $prefix )* slate 900); 78 | 79 | constant!($( $prefix )* gray 50); 80 | constant!($( $prefix )* gray 100); 81 | constant!($( $prefix )* gray 200); 82 | constant!($( $prefix )* gray 300); 83 | constant!($( $prefix )* gray 400); 84 | constant!($( $prefix )* gray 500); 85 | constant!($( $prefix )* gray 600); 86 | constant!($( $prefix )* gray 700); 87 | constant!($( $prefix )* gray 800); 88 | constant!($( $prefix )* gray 900); 89 | ... 90 | } 91 | } 92 | ``` 93 | 94 | ```rust 95 | // https://tailwindcss.com/docs/border-color 96 | colors!(border); 97 | colors!(border x); 98 | colors!(border y); 99 | colors!(border t); 100 | colors!(border r); 101 | colors!(border b); 102 | colors!(border l); 103 | ``` 104 | 105 | ## Build All Used CSS Classes 106 | 107 | Since tailwindcss need to get all used values, when using `class!`, the default build process is not working. 108 | 109 | Check [BUILD.md](https://github.com/edger-dev/dioxus-class/tree/main/BUILD.md) for how to handle this process. 110 | -------------------------------------------------------------------------------- /crates/dioxus-class/src/build.rs: -------------------------------------------------------------------------------- 1 | use crate::prelude::*; 2 | use std::fs; 3 | use std::fs::File; 4 | use std::io::LineWriter; 5 | use std::io::Write; 6 | use std::path::Path; 7 | 8 | /// write file, for generating classes files 9 | pub fn write_file + Clone>( 10 | path: P, 11 | content: &str, 12 | ) -> Result<(), Box> { 13 | let path_str = path.clone().as_ref().to_string_lossy().to_string(); 14 | let file = File::create(path)?; 15 | let mut writer = LineWriter::new(file); 16 | writer.write_all(content.as_bytes())?; 17 | println!( 18 | "cargo:warning=dioxus-class::build::write_file: [{}] {}", 19 | content.len(), path_str 20 | ); 21 | Ok(()) 22 | } 23 | 24 | /// write given classes to html format, which can be used by CSS utilities 25 | pub fn generate_classes + Clone>( 26 | path: P, 27 | classes: Vec, 28 | ) -> Result<(), Box> { 29 | let path_str = path.clone().as_ref().to_string_lossy().to_string(); 30 | let file = File::create(path)?; 31 | let mut writer = LineWriter::new(file); 32 | let mut class_count: usize = 0; 33 | let mut size: usize = 0; 34 | for class in classes { 35 | let str = class.to_class(); 36 | class_count += 1; 37 | size += str.len(); 38 | writer.write_all(format!("
{}
\n", str, class.to_string()).as_bytes())?; 39 | } 40 | println!( 41 | "cargo:warning=dioxus-class::build::generate_classes: {}-[{}] {}", 42 | class_count, size, path_str 43 | ); 44 | Ok(()) 45 | } 46 | 47 | pub fn check_vec_ending(content: &str) -> bool { 48 | for ch in content.chars().rev() { 49 | if ch == ']' { 50 | return true; 51 | } else if vec!['\n', '\r', ' ', '\t'].contains(&ch) { 52 | continue; 53 | } else { 54 | return false; 55 | } 56 | } 57 | false 58 | } 59 | 60 | pub fn check_classes + Clone>( 61 | path: P, 62 | ) -> Result<(), Box> { 63 | let content = if path.as_ref().exists() { 64 | let lines = fs::read_to_string(path.clone())?; 65 | if check_vec_ending(&lines) { 66 | return Ok(()) 67 | } 68 | println!("cargo:warning=dioxus-class::build::check_classes: append vec ending"); 69 | lines + "]\n" 70 | } else { 71 | println!("cargo:warning=dioxus-class::build::check_classes: create empty file"); 72 | 73 | "vec![]\n".to_owned() 74 | }; 75 | write_file(path, &content) 76 | } 77 | -------------------------------------------------------------------------------- /crates/dioxus-class/src/lib.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case)] 2 | 3 | #![doc = include_str!("../README.md")] 4 | 5 | pub use dioxus_class_internal; 6 | pub use dioxus_class_macro; 7 | 8 | pub use paste; 9 | 10 | pub mod macros; 11 | 12 | pub mod build; 13 | 14 | pub mod prelude { 15 | pub use dioxus_class_internal::Class; 16 | pub use dioxus_class_macro::class; 17 | } 18 | 19 | pub mod ext { 20 | pub use paste::paste; 21 | pub use crate::constant; 22 | pub use crate::constant_internal; 23 | } -------------------------------------------------------------------------------- /crates/dioxus-class/src/macros.rs: -------------------------------------------------------------------------------- 1 | #[macro_export] 2 | macro_rules! constant_internal { 3 | ( $( $part:ident )+ _ $next:ident $( $extra:ident )+ ) => { 4 | constant_internal!($( $part )* $next _ $( $extra )*); 5 | }; 6 | ( $( $part:ident )+ _ $last:ident ) => { 7 | paste!{ 8 | #[doc = concat!($( stringify!($part), "-", )* stringify!($last))] 9 | pub const [< $( $part _ )* $last >]: &'static str = concat!($( stringify!($part), "-", )* stringify!($last)); 10 | } 11 | }; 12 | ( $( $part:ident )+ _ $last:literal ) => { 13 | paste!{ 14 | #[doc = concat!($( stringify!($part), "-", )* $last)] 15 | pub const [< $( $part _ )* $last >]: &'static str = concat!($( stringify!($part), "-", )* $last); 16 | } 17 | }; 18 | } 19 | 20 | #[macro_export] 21 | macro_rules! constant { 22 | ( $last:ident ) => { 23 | #[doc = concat!(stringify!($last))] 24 | pub const $last: &'static str = concat!(stringify!($last)); 25 | }; 26 | ( $first:ident $( $extra:ident )+ ) => { 27 | constant_internal!($first _ $( $extra )*); 28 | }; 29 | ( $( $part:ident )+ $last:literal ) => { 30 | constant_internal!($( $part )* _ $last); 31 | }; 32 | } 33 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | ## [0.7.0] - 2024-04-09 11 | 12 | Update with dioxus-tailwindcss 0.7.0 13 | 14 | ## [0.6.0] - 2024-04-01 15 | 16 | ### Added 17 | 18 | - update with Daisyui 4.9.0 19 | 20 | ## [0.5.0] - 2024-03-28 21 | 22 | ### Added 23 | 24 | - update with Dioxus 0.5 25 | - add docstring 26 | 27 | ### Fixed 28 | 29 | ### Removed 30 | 31 | ### Removed 32 | 33 | - remove components, it's not useful in most cases. 34 | 35 | ## [0.2.2] - 2023-02-27 36 | 37 | ### Added 38 | 39 | - semantic colors macro and constants 40 | 41 | ## [0.2.1] - 2023-02-27 42 | 43 | Update dependencies 44 | 45 | ## [0.2.0] - 2023-02-25 46 | 47 | ### Changed 48 | 49 | - use constant! to create all the constants 50 | - components: Dropdown 51 | 52 | ## [0.1.x] 53 | 54 | ### Added 55 | 56 | - constants definition for daisyUI v2.50.2 57 | - components: Button, Menu, Navbar -------------------------------------------------------------------------------- /crates/dioxus-daisyui/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | version = "0.8.0" 3 | name = "dioxus-daisyui" 4 | description = "Dioxus daisyui" 5 | 6 | edition = { workspace = true } 7 | license = { workspace = true } 8 | homepage = { workspace = true } 9 | repository = { workspace = true } 10 | 11 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 12 | 13 | [features] 14 | build-classes = [ 15 | "dioxus-tailwindcss/build-classes", 16 | ] 17 | 18 | [dependencies] 19 | dioxus = { workspace = true } 20 | dioxus-tailwindcss = { workspace = true } 21 | lazy_static = { workspace = true } 22 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/README.md: -------------------------------------------------------------------------------- 1 | # dioxus-daisyUI 2 | 3 | - [Daisy UI](https://daisyui.com) 4 | - v4.9.0 5 | 6 | ## Documents for Updating 7 | 8 | | Code | Documentation | Notes | 9 | | ---- | ------------- | ----- | 10 | | actions.rs | [link](https://daisyui.com/components/button/) Actions | 11 | | display.rs | [link](https://daisyui.com/components/accordion/) Data display | 12 | | navigation.rs | [link](https://daisyui.com/components/breadcrumbs/) Navigation | use `active_ disabled_ focus_` instead of `active disabled focus`, the names been taken by tailwindcss as modifiers | 13 | | feedback.rs | [link](https://daisyui.com/components/alert/) Feedback | 14 | | input.rs | [link](https://daisyui.com/components/checkbox/) Data input | 15 | | layout.rs | [link](https://daisyui.com/components/artboard/) Layout | 16 | | mockup.rs | [link](https://daisyui.com/components/mockup-browser/) Mockup| 17 | 18 | ## Build All Used CSS Classes 19 | 20 | Since tailwindcss need to get all used values, when using `class!`, the default build process is not working. 21 | 22 | Check [BUILD.md](https://github.com/edger-dev/dioxus-class/tree/main/BUILD.md) for how to handle this process. 23 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/actions.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://daisyui.com/components/button/ 4 | constant!(btn); 5 | 6 | // Modifier 7 | constant!(btn neutral); 8 | constant!(btn primary); 9 | constant!(btn secondary); 10 | constant!(btn accent); 11 | constant!(btn info); 12 | constant!(btn success); 13 | constant!(btn warning); 14 | constant!(btn error); 15 | constant!(btn ghost); 16 | constant!(btn link); 17 | constant!(btn outline); 18 | constant!(btn active); 19 | constant!(btn disabled); 20 | 21 | constant!(glass); 22 | constant!(no animation); 23 | 24 | // Responsive 25 | constant!(btn xl); 26 | constant!(btn lg); 27 | constant!(btn md); 28 | constant!(btn sm); 29 | constant!(btn xs); 30 | constant!(btn wide); 31 | constant!(btn block); 32 | constant!(btn circle); 33 | constant!(btn square); 34 | 35 | // https://daisyui.com/components/dropdown/ 36 | constant!(dropdown); 37 | constant!(dropdown content); 38 | 39 | // Modifier 40 | constant!(dropdown end); 41 | constant!(dropdown top); 42 | constant!(dropdown bottom); 43 | constant!(dropdown left); 44 | constant!(dropdown right); 45 | constant!(dropdown hover); 46 | constant!(dropdown open); 47 | 48 | // https://daisyui.com/components/modal/ 49 | constant!(modal); 50 | constant!(modal box); 51 | constant!(modal action); 52 | constant!(modal backdrop); 53 | constant!(modal toggle); 54 | 55 | // Modifier 56 | constant!(modal open); 57 | 58 | // Responsive 59 | constant!(modal top); 60 | constant!(modal bottom); 61 | constant!(modal middle); 62 | 63 | // https://daisyui.com/components/swap/ 64 | constant!(swap); 65 | constant!(swap on); 66 | constant!(swap off); 67 | constant!(swap indeterminate); 68 | 69 | // Modifier 70 | constant!(swap active); 71 | constant!(swap rotate); 72 | constant!(swap flip); 73 | 74 | // https://daisyui.com/components/theme-controller/ 75 | constant!(theme controller); 76 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/colors.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://daisyui.com/docs/colors/ 4 | semantic_colors!(bg); 5 | semantic_colors!(to); 6 | semantic_colors!(via); 7 | semantic_colors!(from); 8 | semantic_colors!(text); 9 | semantic_colors!(ring); 10 | semantic_colors!(fill); 11 | semantic_colors!(caret); 12 | semantic_colors!(stroke); 13 | semantic_colors!(border); 14 | semantic_colors!(divide); 15 | semantic_colors!(accent); 16 | semantic_colors!(shadow); 17 | semantic_colors!(outline); 18 | semantic_colors!(decoration); 19 | semantic_colors!(placeholder); 20 | semantic_colors!(ring offest); 21 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/display.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://daisyui.com/components/accordion/ 4 | // use same style as the collapse component 5 | 6 | // https://daisyui.com/components/avatar/ 7 | constant!(avatar); 8 | constant!(avatar group); 9 | 10 | // Modifier 11 | constant!(online); 12 | constant!(offline); 13 | constant!(placeholder); 14 | 15 | // https://daisyui.com/components/badge/ 16 | constant!(badge); 17 | 18 | // Modifier 19 | constant!(badge neutral); 20 | constant!(badge primary); 21 | constant!(badge secondary); 22 | constant!(badge accent); 23 | constant!(badge ghost); 24 | constant!(badge info); 25 | constant!(badge success); 26 | constant!(badge warning); 27 | constant!(badge error); 28 | constant!(badge outline); 29 | 30 | // Responsive 31 | constant!(badge lg); 32 | constant!(badge md); 33 | constant!(badge sm); 34 | constant!(badge xs); 35 | 36 | // https://daisyui.com/components/card/ 37 | constant!(card); 38 | constant!(card title); 39 | constant!(card body); 40 | constant!(card actions); 41 | 42 | // Modifier 43 | constant!(card bordered); 44 | constant!(image full); 45 | 46 | // Responsive 47 | constant!(card normal); 48 | constant!(card compact); 49 | constant!(card side); 50 | 51 | // https://daisyui.com/components/carousel/ 52 | constant!(carousel); 53 | constant!(carousel item); 54 | 55 | // Modifier 56 | constant!(carousel start); 57 | constant!(carousel center); 58 | constant!(carousel end); 59 | constant!(carousel vertical); 60 | 61 | // https://daisyui.com/components/chat/ 62 | constant!(chat); 63 | 64 | constant!(chat image); 65 | constant!(chat header); 66 | constant!(chat footer); 67 | constant!(chat bubble); 68 | 69 | // Modifier 70 | constant!(chat start); 71 | constant!(chat end); 72 | 73 | constant!(chat bubble primary); 74 | constant!(chat bubble secondary); 75 | constant!(chat bubble accent); 76 | constant!(chat bubble info); 77 | constant!(chat bubble success); 78 | constant!(chat bubble warning); 79 | constant!(chat bubble error); 80 | 81 | // https://daisyui.com/components/collapse/ 82 | // constant!(collapse); 83 | constant!(collapse title); 84 | constant!(collapse content); 85 | 86 | // Modifier 87 | constant!(collapse arrow); 88 | constant!(collapse plus); 89 | constant!(collapse open); 90 | constant!(collapse close); 91 | 92 | // https://daisyui.com/components/countdown/ 93 | constant!(countdown); 94 | 95 | // https://daisyui.com/components/diff/ 96 | constant!(diff); 97 | constant!(diff item 1); 98 | constant!(diff item 2); 99 | constant!(diff resizer); 100 | 101 | 102 | // https://daisyui.com/components/kbd/ 103 | constant!(kbd); 104 | 105 | // Responsive 106 | constant!(kbd lg); 107 | constant!(kbd md); 108 | constant!(kbd sm); 109 | constant!(kbd xs); 110 | 111 | // https://daisyui.com/components/stat/ 112 | constant!(stats); 113 | constant!(stat); 114 | constant!(stat title); 115 | constant!(stat value); 116 | constant!(stat desc); 117 | constant!(stat figure); 118 | constant!(stat actions); 119 | 120 | // Modifier 121 | constant!(stats horizontal); 122 | constant!(stats vertical); 123 | 124 | // https://daisyui.com/components/table/ 125 | // constant!(table); 126 | 127 | // Modifier 128 | constant!(table zebra); 129 | constant!(table pin rows); 130 | constant!(table pin cols); 131 | 132 | // Responsive 133 | constant!(table xs); 134 | constant!(table sm); 135 | constant!(table md); 136 | constant!(table lg); 137 | 138 | // https://daisyui.com/components/timeline/ 139 | constant!(timeline); 140 | constant!(timeline start); 141 | constant!(timeline middle); 142 | constant!(timeline end); 143 | 144 | // Modifier 145 | constant!(timeline snap icon); 146 | constant!(timeline box); 147 | 148 | // Responsive 149 | constant!(timeline compact); 150 | constant!(timeline vertical); 151 | constant!(timeline horizontal); 152 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/feedback.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://daisyui.com/components/alert/ 4 | constant!(alert); 5 | 6 | // Modifier 7 | constant!(alert info); 8 | constant!(alert success); 9 | constant!(alert warning); 10 | constant!(alert error); 11 | 12 | // https://daisyui.com/components/loading/ 13 | constant!(loading); 14 | 15 | // Modifier 16 | constant!(loading spinner); 17 | constant!(loading dots); 18 | constant!(loading ring); 19 | constant!(loading ball); 20 | constant!(loading bars); 21 | constant!(loading infinity); 22 | 23 | // https://daisyui.com/components/progress/ 24 | constant!(progress); 25 | 26 | // Modifier 27 | constant!(progress primary); 28 | constant!(progress secondary); 29 | constant!(progress accent); 30 | constant!(progress info); 31 | constant!(progress success); 32 | constant!(progress warning); 33 | constant!(progress error); 34 | 35 | // https://daisyui.com/components/radial-progress/ 36 | constant!(radial progress); 37 | 38 | // https://daisyui.com/components/skeleton/ 39 | constant!(skeleton); 40 | 41 | // https://daisyui.com/components/toast/ 42 | constant!(toast); 43 | 44 | // Responsive 45 | constant!(toast start); 46 | constant!(toast center); 47 | constant!(toast end); 48 | constant!(toast top); 49 | constant!(toast middle); 50 | constant!(toast bottom); 51 | 52 | // https://daisyui.com/components/tooltip/ 53 | constant!(tooltip); 54 | constant!(tooltip open); 55 | 56 | // Modifier 57 | constant!(tooltip primary); 58 | constant!(tooltip secondary); 59 | constant!(tooltip accent); 60 | constant!(tooltip info); 61 | constant!(tooltip success); 62 | constant!(tooltip warning); 63 | constant!(tooltip error); 64 | 65 | // Responsive 66 | constant!(tooltip top); 67 | constant!(tooltip bottom); 68 | constant!(tooltip left); 69 | constant!(tooltip right); 70 | 71 | 72 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/input.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | constant!(form control); 4 | constant!(label); 5 | 6 | // https://daisyui.com/components/checkbox/ 7 | constant!(checkbox); 8 | 9 | // Modifier 10 | constant!(checkbox primary); 11 | constant!(checkbox secondary); 12 | constant!(checkbox accent); 13 | constant!(checkbox success); 14 | constant!(checkbox warning); 15 | constant!(checkbox info); 16 | constant!(checkbox error); 17 | 18 | // Responsive 19 | constant!(checkbox lg); 20 | constant!(checkbox md); 21 | constant!(checkbox sm); 22 | constant!(checkbox xs); 23 | 24 | // https://daisyui.com/components/file-input/ 25 | constant!(file input); 26 | 27 | // Modifier 28 | constant!(file input bordered); 29 | constant!(file input ghost); 30 | 31 | constant!(file input primary); 32 | constant!(file input secondary); 33 | constant!(file input accent); 34 | constant!(file input info); 35 | constant!(file input success); 36 | constant!(file input warning); 37 | constant!(file input error); 38 | 39 | // Responsive 40 | constant!(file input lg); 41 | constant!(file input md); 42 | constant!(file input sm); 43 | constant!(file input xs); 44 | 45 | // https://daisyui.com/components/radio/ 46 | constant!(radio); 47 | 48 | // Modifier 49 | constant!(radio primary); 50 | constant!(radio secondary); 51 | constant!(radio accent); 52 | constant!(radio success); 53 | constant!(radio warning); 54 | constant!(radio info); 55 | constant!(radio error); 56 | 57 | // Responsive 58 | constant!(radio lg); 59 | constant!(radio md); 60 | constant!(radio sm); 61 | constant!(radio xs); 62 | 63 | // https://daisyui.com/components/range/ 64 | constant!(range); 65 | 66 | // Modifier 67 | constant!(range primary); 68 | constant!(range secondary); 69 | constant!(range accent); 70 | constant!(range success); 71 | constant!(range warning); 72 | constant!(range info); 73 | constant!(range error); 74 | 75 | // Responsive 76 | constant!(range lg); 77 | constant!(range md); 78 | constant!(range sm); 79 | constant!(range xs); 80 | 81 | // https://daisyui.com/components/rating/ 82 | constant!(rating); 83 | 84 | // Modifier 85 | constant!(rating half); 86 | constant!(rating hidden); 87 | 88 | // Responsive 89 | constant!(rating lg); 90 | constant!(rating md); 91 | constant!(rating sm); 92 | constant!(rating xs); 93 | 94 | // https://daisyui.com/components/select/ 95 | constant!(select); 96 | 97 | // Modifier 98 | constant!(select bordered); 99 | constant!(select ghost); 100 | 101 | constant!(select primary); 102 | constant!(select secondary); 103 | constant!(select accent); 104 | constant!(select info); 105 | constant!(select success); 106 | constant!(select warning); 107 | constant!(select error); 108 | 109 | // Responsive 110 | constant!(select lg); 111 | constant!(select md); 112 | constant!(select sm); 113 | constant!(select xs); 114 | 115 | // https://daisyui.com/components/input/ 116 | constant!(input); 117 | 118 | // Modifier 119 | constant!(input bordered); 120 | constant!(input ghost); 121 | 122 | constant!(input primary); 123 | constant!(input secondary); 124 | constant!(input accent); 125 | constant!(input info); 126 | constant!(input success); 127 | constant!(input warning); 128 | constant!(input error); 129 | 130 | // Responsive 131 | constant!(input lg); 132 | constant!(input md); 133 | constant!(input sm); 134 | constant!(input xs); 135 | 136 | // https://daisyui.com/components/textarea/ 137 | constant!(textarea); 138 | 139 | // Modifier 140 | constant!(textarea bordered); 141 | constant!(textarea ghost); 142 | 143 | constant!(textarea primary); 144 | constant!(textarea secondary); 145 | constant!(textarea accent); 146 | constant!(textarea info); 147 | constant!(textarea success); 148 | constant!(textarea warning); 149 | constant!(textarea error); 150 | 151 | // Responsive 152 | constant!(textarea lg); 153 | constant!(textarea md); 154 | constant!(textarea sm); 155 | constant!(textarea xs); 156 | 157 | // https://daisyui.com/components/toggle/ 158 | constant!(toggle); 159 | 160 | // Modifier 161 | constant!(toggle primary); 162 | constant!(toggle secondary); 163 | constant!(toggle accent); 164 | constant!(toggle success); 165 | constant!(toggle warning); 166 | constant!(toggle info); 167 | constant!(toggle error); 168 | 169 | // Responsive 170 | constant!(toggle lg); 171 | constant!(toggle md); 172 | constant!(toggle sm); 173 | constant!(toggle xs); 174 | 175 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/layout.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://daisyui.com/components/artboard/ 4 | constant!(artboard); 5 | 6 | // Modifier 7 | constant!(artboard demo); 8 | 9 | constant!(phone 1); 10 | constant!(phone 2); 11 | constant!(phone 3); 12 | constant!(phone 4); 13 | constant!(phone 5); 14 | constant!(phone 6); 15 | 16 | constant!(artboard horizontal); 17 | 18 | // https://daisyui.com/components/divider/ 19 | constant!(divider); 20 | 21 | // Modifier 22 | constant!(divider neutral); 23 | constant!(divider primary); 24 | constant!(divider secondary); 25 | constant!(divider accent); 26 | constant!(divider success); 27 | constant!(divider warning); 28 | constant!(divider info); 29 | constant!(divider error); 30 | 31 | // Responsive 32 | constant!(divider vertical); 33 | constant!(divider horizontal); 34 | constant!(divider start); 35 | constant!(divider end); 36 | 37 | // https://daisyui.com/components/drawer/ 38 | constant!(drawer); 39 | constant!(drawer toggle); 40 | constant!(drawer content); 41 | constant!(drawer side); 42 | constant!(drawer overlay); 43 | 44 | // Modifier 45 | constant!(drawer end); 46 | 47 | // Responsive 48 | constant!(drawer open); 49 | 50 | // https://daisyui.com/components/footer/ 51 | constant!(footer); 52 | constant!(footer title); 53 | 54 | // Modifier 55 | constant!(footer center); 56 | 57 | // https://daisyui.com/components/hero/ 58 | constant!(hero); 59 | constant!(hero content); 60 | constant!(hero overlay); 61 | 62 | // https://daisyui.com/components/indicator/ 63 | constant!(indicator); 64 | constant!(indicator item); 65 | 66 | // Responsive 67 | constant!(indicator start); 68 | constant!(indicator center); 69 | constant!(indicator end); 70 | constant!(indicator top); 71 | constant!(indicator middle); 72 | constant!(indicator bottom); 73 | 74 | // https://daisyui.com/components/join/ 75 | constant!(join); 76 | constant!(join item); 77 | 78 | // Responsive 79 | constant!(join vertical); 80 | constant!(join horizontal); 81 | 82 | // https://daisyui.com/components/mask/ 83 | constant!(mask); 84 | 85 | // Modifier 86 | constant!(mask squrcle); 87 | constant!(mask heart); 88 | constant!(mask hexagon); 89 | constant!(mask hexagon 2); 90 | constant!(mask decagon); 91 | constant!(mask pentagon); 92 | constant!(mask diamond); 93 | constant!(mask square); 94 | constant!(mask circle); 95 | constant!(mask parallelogram); 96 | constant!(mask parallelogram 2); 97 | constant!(mask parallelogram 3); 98 | constant!(mask parallelogram 4); 99 | constant!(mask star); 100 | constant!(mask star 2); 101 | constant!(mask triangle); 102 | constant!(mask triangle 2); 103 | constant!(mask triangle 3); 104 | constant!(mask triangle 4); 105 | constant!(mask half 1); 106 | constant!(mask half 2); 107 | 108 | // https://daisyui.com/components/stack/ 109 | constant!(stack); 110 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/lib.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case, non_upper_case_globals)] 2 | 3 | #![doc = include_str!("../README.md")] 4 | 5 | pub use dioxus_tailwindcss; 6 | pub use dioxus_tailwindcss::dioxus_class; 7 | 8 | pub use dioxus_tailwindcss::build; 9 | 10 | pub mod macros; 11 | pub mod colors; 12 | 13 | pub mod actions; 14 | pub mod display; 15 | pub mod input; 16 | pub mod layout; 17 | 18 | pub mod navigation; 19 | pub mod feedback; 20 | pub mod mockup; 21 | 22 | pub mod prelude { 23 | pub use dioxus_tailwindcss::prelude::*; 24 | 25 | pub use crate::colors::*; 26 | 27 | pub use crate::actions::*; 28 | pub use crate::display::*; 29 | pub use crate::input::*; 30 | pub use crate::layout::*; 31 | pub use crate::navigation::*; 32 | pub use crate::feedback::*; 33 | pub use crate::mockup::*; 34 | } 35 | 36 | pub mod ext { 37 | pub use dioxus_tailwindcss::ext::*; 38 | 39 | pub use crate::semantic_colors; 40 | } -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/macros.rs: -------------------------------------------------------------------------------- 1 | #[macro_export] 2 | macro_rules! semantic_colors { 3 | ( $( $prefix:ident )* ) => { 4 | constant!($( $prefix )* primary); 5 | constant!($( $prefix )* primary focus); 6 | constant!($( $prefix )* primary content); 7 | 8 | constant!($( $prefix )* secondary); 9 | constant!($( $prefix )* secondary focus); 10 | constant!($( $prefix )* secondary content); 11 | 12 | constant!($( $prefix )* accent); 13 | constant!($( $prefix )* accent focus); 14 | constant!($( $prefix )* accent content); 15 | 16 | constant!($( $prefix )* neutral); 17 | constant!($( $prefix )* neutral focus); 18 | constant!($( $prefix )* neutral content); 19 | 20 | constant!($( $prefix )* base 100); 21 | constant!($( $prefix )* base 200); 22 | constant!($( $prefix )* base 300); 23 | constant!($( $prefix )* base content); 24 | 25 | constant!($( $prefix )* info); 26 | constant!($( $prefix )* info content); 27 | 28 | constant!($( $prefix )* success); 29 | constant!($( $prefix )* success content); 30 | 31 | constant!($( $prefix )* warning); 32 | constant!($( $prefix )* warning content); 33 | 34 | constant!($( $prefix )* error); 35 | constant!($( $prefix )* error content); 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/mockup.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://daisyui.com/components/mockup-browser/ 4 | constant!(mockup browser); 5 | constant!(mockup browser toolbar); 6 | 7 | // https://daisyui.com/components/mockup-code/ 8 | constant!(mockup code); 9 | 10 | // https://daisyui.com/components/mockup-phone/ 11 | constant!(mockup phone); 12 | 13 | // https://daisyui.com/components/mockup-window/ 14 | constant!(mockup window); 15 | -------------------------------------------------------------------------------- /crates/dioxus-daisyui/src/navigation.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | #[doc = "active"] 4 | pub const active_: &'static str = "active"; 5 | 6 | #[doc = "disabled"] 7 | pub const disabled_: &'static str = "disabled"; 8 | 9 | #[doc = "focus"] 10 | pub const focus_: &'static str = "focus"; 11 | 12 | // https://daisyui.com/components/breadcrumbs/ 13 | constant!(breadcrumbs); 14 | 15 | // https://daisyui.com/components/bottom_navigation/ 16 | constant!(btm nav); 17 | 18 | // Modifier 19 | // constant!(active); 20 | // constant!(disabled); 21 | 22 | // Responsive 23 | constant!(btm nav xs); 24 | constant!(btm nav sm); 25 | constant!(btm nav md); 26 | constant!(btm nav lg); 27 | 28 | // https://daisyui.com/components/link/ 29 | constant!(link); 30 | 31 | // Modifier 32 | constant!(link neutral); 33 | constant!(link primary); 34 | constant!(link secondary); 35 | constant!(link accent); 36 | constant!(link success); 37 | constant!(link info); 38 | constant!(link warning); 39 | constant!(link error); 40 | constant!(link hover); 41 | 42 | // https://daisyui.com/components/menu/ 43 | constant!(menu); 44 | constant!(menu title); 45 | constant!(menu dropdown toggle); 46 | constant!(menu dropdown); 47 | 48 | // Modifier 49 | // constant!(active); 50 | // constant!(disabled); 51 | // constant!(focus); 52 | constant!(menu dropdown show); 53 | 54 | // Responsive 55 | constant!(menu xs); 56 | constant!(menu sm); 57 | constant!(menu md); 58 | constant!(menu lg); 59 | constant!(menu vertical); 60 | constant!(menu horizontal); 61 | 62 | // https://daisyui.com/components/navbar/ 63 | constant!(navbar); 64 | constant!(navbar start); 65 | constant!(navbar center); 66 | constant!(navbar end); 67 | 68 | // https://daisyui.com/components/pagination/ 69 | // constant!(join); 70 | 71 | // https://daisyui.com/components/steps/ 72 | constant!(steps); 73 | constant!(step); 74 | 75 | // Modifier 76 | constant!(step primary); 77 | constant!(step secondary); 78 | constant!(step accent); 79 | constant!(step info); 80 | constant!(step success); 81 | constant!(step warning); 82 | constant!(step error); 83 | 84 | // Responsive 85 | constant!(step vertical); 86 | constant!(step horizontal); 87 | 88 | // https://daisyui.com/components/tab/ 89 | constant!(tabs); 90 | constant!(tab); 91 | constant!(tab content); 92 | 93 | // Modifier 94 | constant!(tab boxed); 95 | constant!(tab bordered); 96 | constant!(tab lifted); 97 | constant!(tab active); 98 | constant!(tab disabled); 99 | 100 | // Responsive 101 | constant!(tab xs); 102 | constant!(tab sm); 103 | constant!(tab md); 104 | constant!(tab lg); 105 | 106 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | ## [0.7.0] - 2024-04-09 11 | 12 | Update with dioxus-class 0.7.0 13 | 14 | ## [0.6.0] - 2024-04-01 15 | 16 | Update with tailwindcss 3.4.3 17 | 18 | ### Added 19 | 20 | - add dark_mode.rs 21 | - add build::npx_tailwindcss to run tailwindcss with npx 22 | 23 | ## [0.5.0] - 2024-03-28 24 | 25 | ### Added 26 | 27 | - add build::tailwindcss to run tailwindcss process 28 | - update with Dioxus 0.5 29 | - add docstring 30 | 31 | ### Fixed 32 | 33 | - `static_` was defined wrongly 34 | 35 | ## [0.3.0] - 2023-03-03 36 | 37 | Update dependencies 38 | 39 | ## [0.2.2] - 2023-02-27 40 | 41 | ### Fixed 42 | 43 | - cleanup 44 | 45 | ## [0.2.1] - 2023-02-27 46 | 47 | Update dependencies 48 | 49 | ### Added 50 | 51 | - more constants 52 | 53 | ## [0.2.0] - 2023-02-25 54 | 55 | ### Added 56 | 57 | - constants definition for tailwindcss v3.2.7 (to effects) 58 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | version = "0.8.0" 3 | name = "dioxus-tailwindcss" 4 | description = "Dioxus tailwindcss" 5 | 6 | edition = { workspace = true } 7 | license = { workspace = true } 8 | homepage = { workspace = true } 9 | repository = { workspace = true } 10 | 11 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 12 | 13 | [features] 14 | build-classes = [ 15 | "dioxus-class/build-classes", 16 | ] 17 | 18 | [dependencies] 19 | dioxus = { workspace = true } 20 | dioxus-class = { workspace = true } 21 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/README.md: -------------------------------------------------------------------------------- 1 | # dioxus-tailwindcss 2 | 3 | - [Tailwind CSS](https://tailwindcss.com) 4 | - v3.4.3 5 | 6 | ## Tricks 7 | 8 | Due to rust's rule on constant names, there are some difference from tailwindcss. 9 | 10 | | tailwindcss | dioxus-tailwindcss | 11 | | ----------- | ------------------ | 12 | | `static` | `static_` | 13 | | `2xl:` | `xxl()` and `_2xl()` | 14 | | fraction e.g. `-1/2` | `_1__2` | 15 | | `.5` | `_half` | 16 | 17 | ## Documents for Updating 18 | 19 | | Code | Documentation | Notes | 20 | | ---- | ------------- | ----- | 21 | | modifier.rs | [link](https://tailwindcss.com/docs/hover-focus-and-other-states) | check the #pseudo-class-reference part for complete list | 22 | | responsive.rs | [link](https://tailwindcss.com/docs/responsive-design) | 2xl is not a valid rust function name, define both `xxl` and `_2xl` for it | 23 | | dark_mode.rs | [link](https://tailwindcss.com/docs/dark-mode) | use `dark_` instead of `dark` | 24 | | layout.rs | [link](https://tailwindcss.com/docs/aspect-ratio) Layout | use `static_` instead of `static` | 25 | | flex.rs | [link](https://tailwindcss.com/docs/flex-basics) Flexbox & Grid | | 26 | | spacing.rs | [link](https://tailwindcss.com/docs/padding) Spacing | | 27 | 28 | | sizing.rs | [link](https://tailwindcss.com/docs/width) Sizing | | 29 | | typography.rs | [link](https://tailwindcss.com/docs/font-family) Typography | | 30 | | backgrounds.rs | [link](https://tailwindcss.com/docs/background-attachment) Backgrounds | | 31 | | borders.rs | [link](https://tailwindcss.com/docs/border-radius) Borders | | 32 | | effects.rs | [link](https://tailwindcss.com/docs/box-shadow) Effects | | 33 | | filters.rs | [link](https://tailwindcss.com/docs/blur) Filters | | 34 | | tables.rs | [link](https://tailwindcss.com/docs/border-collapse) Tables | | 35 | | tansitions.rs | [link](https://tailwindcss.com/docs/transition-property) Transitions & Animation | | 36 | | transforms.rs | [link](https://tailwindcss.com/docs/scale) Transforms | | 37 | | interactivity.rs | [link](https://tailwindcss.com/docs/accent-color) Interactivity | | 38 | | svg.rs | [link](https://tailwindcss.com/docs/fill) SVG | | 39 | | accessibility.rs | [link](https://tailwindcss.com/docs/screen-readers) Accessibility | | 40 | 41 | 42 | ## Build All Used CSS Classes 43 | 44 | Since tailwindcss need to get all used values, when using `class!`, the default build process is not working. 45 | 46 | Check [BUILD.md](https://github.com/edger-dev/dioxus-class/tree/main/BUILD.md) for how to handle this process. -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/accessibility.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/screen-readers 4 | constant!(sr only); 5 | constant!(not sr only); 6 | 7 | // https://tailwindcss.com/docs/forced-color-adjust 8 | constant!(forced color adjust auto); 9 | constant!(forced color adjust none); 10 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/backgrounds.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/background-attachment 4 | constant!(bg fixed); 5 | constant!(bg local); 6 | constant!(bg scroll); 7 | 8 | // https://tailwindcss.com/docs/background-clip 9 | constant!(bg clip border); 10 | constant!(bg clip padding); 11 | constant!(bg clip content); 12 | constant!(bg clip text); 13 | 14 | // https://tailwindcss.com/docs/background-color 15 | colors!(bg); 16 | 17 | // https://tailwindcss.com/docs/background-origin 18 | constant!(bg origin border); 19 | constant!(bg origin padding); 20 | constant!(bg origin content); 21 | 22 | // https://tailwindcss.com/docs/background-position 23 | constant!(bg bottom); 24 | constant!(bg center); 25 | constant!(bg left); 26 | constant!(bg left bottom); 27 | constant!(bg left top); 28 | constant!(bg right); 29 | constant!(bg right bottom); 30 | constant!(bg right top); 31 | constant!(bg top); 32 | 33 | // https://tailwindcss.com/docs/background-repeat 34 | constant!(bg repeat); 35 | constant!(bg no repeat); 36 | constant!(bg repeat x); 37 | constant!(bg repeat y); 38 | constant!(bg repeat round); 39 | constant!(bg repeat space); 40 | 41 | // https://tailwindcss.com/docs/background-size 42 | constant!(bg auto); 43 | constant!(bg cover); 44 | constant!(bg contain); 45 | 46 | // https://tailwindcss.com/docs/background-image 47 | constant!(bg none); 48 | constant!(bg gradient to t); 49 | constant!(bg gradient to tr); 50 | constant!(bg gradient to r); 51 | constant!(bg gradient to br); 52 | constant!(bg gradient to b); 53 | constant!(bg gradient to bl); 54 | constant!(bg gradient to l); 55 | constant!(bg gradient to tl); 56 | 57 | // https://tailwindcss.com/docs/gradient-color-stops 58 | colors!(from); 59 | percents!(from); 60 | colors!(via); 61 | percents!(via); 62 | colors!(to); 63 | percents!(to); 64 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/borders.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/border-radius 4 | border_radius!(rounded); 5 | border_radius!(rounded s); 6 | border_radius!(rounded e); 7 | border_radius!(rounded t); 8 | border_radius!(rounded r); 9 | border_radius!(rounded b); 10 | border_radius!(rounded l); 11 | border_radius!(rounded ss); 12 | border_radius!(rounded se); 13 | border_radius!(rounded ee); 14 | border_radius!(rounded es); 15 | border_radius!(rounded tl); 16 | border_radius!(rounded tr); 17 | border_radius!(rounded br); 18 | border_radius!(rounded bl); 19 | 20 | any!(rounded); 21 | 22 | // https://tailwindcss.com/docs/border-width 23 | border_width!(border); 24 | border_width!(border x); 25 | border_width!(border y); 26 | border_width!(border s); 27 | border_width!(border e); 28 | border_width!(border t); 29 | border_width!(border r); 30 | border_width!(border b); 31 | border_width!(border l); 32 | 33 | // https://tailwindcss.com/docs/border-color 34 | colors!(border); 35 | colors!(border x); 36 | colors!(border y); 37 | colors!(border s); 38 | colors!(border e); 39 | colors!(border t); 40 | colors!(border r); 41 | colors!(border b); 42 | colors!(border l); 43 | 44 | // https://tailwindcss.com/docs/border-style 45 | constant!(border solid); 46 | constant!(border dashed); 47 | constant!(border dotted); 48 | constant!(border double); 49 | constant!(border hidden); 50 | constant!(border none); 51 | 52 | // https://tailwindcss.com/docs/divide-width 53 | constant!(divide x); 54 | constant!(divide x 0); 55 | constant!(divide x 2); 56 | constant!(divide x 4); 57 | constant!(divide x 8); 58 | constant!(divide x reverse); 59 | 60 | constant!(divide y); 61 | constant!(divide y 0); 62 | constant!(divide y 2); 63 | constant!(divide y 4); 64 | constant!(divide y 8); 65 | constant!(divide y reverse); 66 | 67 | // https://tailwindcss.com/docs/divide-color 68 | colors!(divide); 69 | 70 | // https://tailwindcss.com/docs/divide-style 71 | constant!(divide solid); 72 | constant!(divide dashed); 73 | constant!(divide dotted); 74 | constant!(divide double); 75 | constant!(divide none); 76 | 77 | // https://tailwindcss.com/docs/outline-width 78 | constant!(outline 0); 79 | constant!(outline 1); 80 | constant!(outline 2); 81 | constant!(outline 4); 82 | constant!(outline 8); 83 | 84 | // https://tailwindcss.com/docs/outline-color 85 | colors!(outline); 86 | 87 | // https://tailwindcss.com/docs/outline-style 88 | constant!(outline none); 89 | constant!(outline); 90 | constant!(outline dashed); 91 | constant!(outline dotted); 92 | constant!(outline double); 93 | 94 | // https://tailwindcss.com/docs/outline-offset 95 | constant!(outline offset 0); 96 | constant!(outline offset 1); 97 | constant!(outline offset 2); 98 | constant!(outline offset 4); 99 | constant!(outline offset 8); 100 | 101 | any!(outline offset); 102 | 103 | // https://tailwindcss.com/docs/ring-width 104 | constant!(ring); 105 | constant!(ring 0); 106 | constant!(ring 1); 107 | constant!(ring 2); 108 | constant!(ring 4); 109 | constant!(ring 8); 110 | constant!(ring inset); 111 | 112 | // https://tailwindcss.com/docs/ring-color 113 | colors!(ring); 114 | 115 | // https://tailwindcss.com/docs/ring-offset-width 116 | constant!(ring offset 0); 117 | constant!(ring offset 1); 118 | constant!(ring offset 2); 119 | constant!(ring offset 4); 120 | constant!(ring offset 8); 121 | 122 | // https://tailwindcss.com/docs/ring-offset-color 123 | colors!(ring offset); 124 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/build.rs: -------------------------------------------------------------------------------- 1 | pub use dioxus_class::build::*; 2 | 3 | use std::path::Path; 4 | use std::process::Command; 5 | 6 | pub fn tailwindcss + Clone>( 7 | path: P, 8 | input: &str, 9 | output: &str 10 | ) -> Result<(), Box> { 11 | let mut cmd = Command::new("tailwindcss"); 12 | cmd.current_dir(path); 13 | let result = cmd 14 | .arg("-i").arg(input) 15 | .arg("-o").arg(output).output()?; 16 | if !result.status.success() { 17 | Err(format!("tailwindcss failed: {} {} -> {:?}", input, output, result).into()) 18 | } else { 19 | println!("cargo:warning=dioxus-tailwind::build::tailwindcss: {} {}", input, output); 20 | let stdout = String::from_utf8(result.stdout)?; 21 | for line in stdout.lines() { 22 | println!("cargo:warning= {:#?}", line); 23 | } 24 | Ok(()) 25 | } 26 | } 27 | 28 | pub fn npx_tailwindcss + Clone>( 29 | path: P, 30 | input: &str, 31 | output: &str 32 | ) -> Result<(), Box> { 33 | let mut cmd = Command::new("npx"); 34 | cmd.current_dir(path); 35 | let result = cmd 36 | .arg("tailwindcss") 37 | .arg("-i").arg(input) 38 | .arg("-o").arg(output).output()?; 39 | if !result.status.success() { 40 | Err(format!("tailwindcss failed: {} {} -> {:?}", input, output, result).into()) 41 | } else { 42 | println!("cargo:warning=dioxus-tailwind::build::npx_tailwindcss: {} {}", input, output); 43 | let stdout = String::from_utf8(result.stdout)?; 44 | for line in stdout.lines() { 45 | println!("cargo:warning= {:#?}", line); 46 | } 47 | Ok(()) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/dark_mode.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/dark-mode 4 | /// dark: 5 | pub fn dark(v: &str) -> String { 6 | "dark:".to_owned() + v 7 | } 8 | 9 | // Can not have both modifier and constant with same name, so adding an extra understore 10 | constant!(dark_); 11 | 12 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/effects.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/box-shadow 4 | constant!(shadow); 5 | constant!(shadow sm); 6 | constant!(shadow md); 7 | constant!(shadow lg); 8 | constant!(shadow xl); 9 | constant!(shadow "2xl"); 10 | constant!(shadow inner); 11 | constant!(shadow none); 12 | 13 | // https://tailwindcss.com/docs/box-shadow-color 14 | colors!(shadow); 15 | 16 | // https://tailwindcss.com/docs/opacity 17 | opacities!(opacity); 18 | 19 | // https://tailwindcss.com/docs/mix-blend-mode 20 | blend!(mix blend); 21 | constant!(mix blend plus darker); 22 | constant!(mix blend plus lighter); 23 | 24 | // https://tailwindcss.com/docs/background-blend-mode 25 | blend!(bg blend); 26 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/filters.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/blur 4 | constant!(blur none); 5 | constant!(blur); 6 | sm_to_2xl!(blur); 7 | constant!(blur "3xl"); 8 | 9 | any!(blur); 10 | 11 | // https://tailwindcss.com/docs/brightness 12 | constant!(brightness 0); 13 | constant!(brightness 50); 14 | constant!(brightness 75); 15 | constant!(brightness 90); 16 | constant!(brightness 95); 17 | constant!(brightness 100); 18 | constant!(brightness 105); 19 | constant!(brightness 110); 20 | constant!(brightness 125); 21 | constant!(brightness 150); 22 | constant!(brightness 200); 23 | 24 | any!(brightness); 25 | 26 | // https://tailwindcss.com/docs/contrast 27 | constant!(contrast 0); 28 | constant!(contrast 50); 29 | constant!(contrast 75); 30 | constant!(contrast 100); 31 | constant!(contrast 125); 32 | constant!(contrast 150); 33 | constant!(contrast 200); 34 | 35 | any!(contrast); 36 | 37 | // https://tailwindcss.com/docs/drop-shadow 38 | constant!(drop shadow); 39 | sm_to_2xl!(drop shadow); 40 | constant!(drop shadow none); 41 | 42 | any!(drop shadow); 43 | 44 | // https://tailwindcss.com/docs/grayscale 45 | constant!(grayscale); 46 | constant!(grayscale 0); 47 | 48 | any!(grayscale); 49 | 50 | // https://tailwindcss.com/docs/hue-rotate 51 | constant!(hue rotate 0); 52 | constant!(hue rotate 15); 53 | constant!(hue rotate 30); 54 | constant!(hue rotate 60); 55 | constant!(hue rotate 90); 56 | constant!(hue rotate 180); 57 | 58 | any!(hue rotate); 59 | 60 | // https://tailwindcss.com/docs/invert 61 | constant!(invert); 62 | constant!(invert 0); 63 | 64 | any!(invert); 65 | 66 | // https://tailwindcss.com/docs/saturate 67 | constant!(saturate); 68 | constant!(saturate 0); 69 | constant!(saturate 50); 70 | constant!(saturate 100); 71 | constant!(saturate 150); 72 | constant!(saturate 200); 73 | 74 | any!(saturate); 75 | 76 | // https://tailwindcss.com/docs/sepia 77 | constant!(sepia); 78 | constant!(sepia 0); 79 | 80 | any!(sepia); 81 | 82 | // https://tailwindcss.com/docs/backdrop-blur 83 | constant!(backdrop blur none); 84 | constant!(backdrop blur); 85 | sm_to_2xl!(backdrop blur); 86 | constant!(backdrop blur "3xl"); 87 | 88 | any!(backdrop blur); 89 | 90 | // https://tailwindcss.com/docs/backdrop-brightness 91 | constant!(backdrop brightness 0); 92 | constant!(backdrop brightness 50); 93 | constant!(backdrop brightness 75); 94 | constant!(backdrop brightness 90); 95 | constant!(backdrop brightness 95); 96 | constant!(backdrop brightness 100); 97 | constant!(backdrop brightness 105); 98 | constant!(backdrop brightness 110); 99 | constant!(backdrop brightness 125); 100 | constant!(backdrop brightness 150); 101 | constant!(backdrop brightness 200); 102 | 103 | any!(backdrop brightness); 104 | 105 | // https://tailwindcss.com/docs/backdrop-contrast 106 | constant!(backdrop contrast 0); 107 | constant!(backdrop contrast 50); 108 | constant!(backdrop contrast 75); 109 | constant!(backdrop contrast 100); 110 | constant!(backdrop contrast 125); 111 | constant!(backdrop contrast 150); 112 | constant!(backdrop contrast 200); 113 | 114 | any!(backdrop contrast); 115 | 116 | // https://tailwindcss.com/docs/backdrop-grayscale 117 | constant!(backdrop grayscale); 118 | constant!(backdrop grayscale 0); 119 | 120 | any!(backdrop grayscale); 121 | 122 | // https://tailwindcss.com/docs/backdrop-hue-rotate 123 | constant!(backdrop hue rotate 0); 124 | constant!(backdrop hue rotate 15); 125 | constant!(backdrop hue rotate 30); 126 | constant!(backdrop hue rotate 60); 127 | constant!(backdrop hue rotate 90); 128 | constant!(backdrop hue rotate 180); 129 | 130 | any!(backdrop hue rotate); 131 | 132 | // https://tailwindcss.com/docs/backdrop-invert 133 | constant!(backdrop invert); 134 | constant!(backdrop invert 0); 135 | 136 | any!(backdrop invert); 137 | 138 | // https://tailwindcss.com/docs/backdrop-opacity 139 | opacities!(backdrop opacity); 140 | 141 | // https://tailwindcss.com/docs/backdrop-saturate 142 | constant!(backdrop saturate 0); 143 | constant!(backdrop saturate 50); 144 | constant!(backdrop saturate 100); 145 | constant!(backdrop saturate 150); 146 | constant!(backdrop saturate 200); 147 | 148 | any!(backdrop saturate); 149 | 150 | // https://tailwindcss.com/docs/backdrop-sepia 151 | constant!(backdrop sepia); 152 | constant!(backdrop sepia 0); 153 | 154 | any!(backdrop sepia); 155 | 156 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/flex.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/flex-basis 4 | constant!(basis auto); 5 | size_0_to_96!(basis); 6 | fraction_2_to_6!(basis); 7 | fraction_12!(basis); 8 | constant!(basis full); 9 | 10 | // https://tailwindcss.com/docs/flex-direction 11 | constant!(flex row); 12 | constant!(flex row reverse); 13 | constant!(flex col); 14 | constant!(flex col reverse); 15 | 16 | // https://tailwindcss.com/docs/flex-wrap 17 | constant!(flex wrap); 18 | constant!(flex wrap reverse); 19 | constant!(flex nowrap); 20 | 21 | // https://tailwindcss.com/docs/flex 22 | constant!(flex 1); 23 | constant!(flex auto); 24 | constant!(flex initial); 25 | constant!(flex none); 26 | 27 | any!(flex); 28 | 29 | // https://tailwindcss.com/docs/flex-grow 30 | constant!(grow); 31 | constant!(grow 0); 32 | 33 | any!(grow); 34 | 35 | // https://tailwindcss.com/docs/flex-shrink 36 | constant!(shrink); 37 | constant!(shrink 0); 38 | 39 | any!(shrink); 40 | 41 | // https://tailwindcss.com/docs/order 42 | _1_to_12!(order); 43 | constant!(order first); 44 | constant!(order last); 45 | constant!(order none); 46 | 47 | any!(order); 48 | 49 | // https://tailwindcss.com/docs/grid-template-columns 50 | _1_to_12!(grid cols); 51 | constant!(grid cols none); 52 | constant!(grid cols subgrid); 53 | 54 | any!(grid cols); 55 | 56 | // https://tailwindcss.com/docs/grid-column 57 | constant!(col auto); 58 | 59 | _1_to_12!(col span); 60 | constant!(col span full); 61 | 62 | _1_to_13!(col start); 63 | constant!(col start auto); 64 | 65 | _1_to_13!(col end); 66 | constant!(col end auto); 67 | 68 | any!(col); 69 | any!(col start); 70 | any!(col end); 71 | 72 | // https://tailwindcss.com/docs/grid-template-rows 73 | _1_to_6!(grid rows); 74 | constant!(grid rows none); 75 | constant!(grid rows subgrid); 76 | 77 | any!(grid rows); 78 | 79 | // https://tailwindcss.com/docs/grid-row 80 | constant!(row auto); 81 | _1_to_12!(row span); 82 | constant!(row span full); 83 | 84 | _1_to_13!(row start); 85 | constant!(row start auto); 86 | 87 | _1_to_13!(row end); 88 | constant!(row end auto); 89 | 90 | any!(row); 91 | 92 | any!(row start); 93 | 94 | any!(row end); 95 | 96 | // https://tailwindcss.com/docs/grid-auto-flow 97 | constant!(grid flow row); 98 | constant!(grid flow col); 99 | constant!(grid flow dense); 100 | constant!(grid flow row dense); 101 | constant!(grid flow col dense); 102 | 103 | // https://tailwindcss.com/docs/grid-auto-columns 104 | constant!(auto cols auto); 105 | constant!(auto cols min); 106 | constant!(auto cols max); 107 | constant!(auto cols fr); 108 | 109 | any!(auto cols); 110 | 111 | // https://tailwindcss.com/docs/grid-auto-rows 112 | constant!(auto rows auto); 113 | constant!(auto rows min); 114 | constant!(auto rows max); 115 | constant!(auto rows fr); 116 | 117 | any!(auto rows); 118 | 119 | // https://tailwindcss.com/docs/gap 120 | size_0_to_96!(gap); 121 | size_0_to_96!(gap x); 122 | size_0_to_96!(gap y); 123 | 124 | // https://tailwindcss.com/docs/justify-content 125 | constant!(justify normal); 126 | constant!(justify start); 127 | constant!(justify end); 128 | constant!(justify center); 129 | constant!(justify between); 130 | constant!(justify around); 131 | constant!(justify evenly); 132 | constant!(justify stretch); 133 | 134 | // https://tailwindcss.com/docs/justify-items 135 | constant!(justify items start); 136 | constant!(justify items end); 137 | constant!(justify items center); 138 | constant!(justify items stretch); 139 | 140 | // https://tailwindcss.com/docs/justify-self 141 | constant!(justify self auto); 142 | constant!(justify self start); 143 | constant!(justify self end); 144 | constant!(justify self center); 145 | constant!(justify self stretch); 146 | 147 | // https://tailwindcss.com/docs/align-content 148 | constant!(content normal); 149 | constant!(content center); 150 | constant!(content start); 151 | constant!(content end); 152 | constant!(content between); 153 | constant!(content around); 154 | constant!(content evenly); 155 | constant!(content baseline); 156 | constant!(content stretch); 157 | 158 | // https://tailwindcss.com/docs/align-items 159 | constant!(items start); 160 | constant!(items end); 161 | constant!(items center); 162 | constant!(items baseline); 163 | constant!(items stretch); 164 | 165 | // https://tailwindcss.com/docs/align-self 166 | constant!(self auto); 167 | constant!(self start); 168 | constant!(self end); 169 | constant!(self center); 170 | constant!(self stretch); 171 | constant!(self baseline); 172 | 173 | // https://tailwindcss.com/docs/place-content 174 | constant!(place content center); 175 | constant!(place content start); 176 | constant!(place content end); 177 | constant!(place content between); 178 | constant!(place content around); 179 | constant!(place content evenly); 180 | constant!(place content baseline); 181 | constant!(place content stretch); 182 | 183 | // https://tailwindcss.com/docs/place-items 184 | constant!(place items start); 185 | constant!(place items end); 186 | constant!(place items center); 187 | constant!(place items baseline); 188 | constant!(place items stretch); 189 | 190 | // https://tailwindcss.com/docs/place-self 191 | constant!(place self auto); 192 | constant!(place self start); 193 | constant!(place self end); 194 | constant!(place self center); 195 | constant!(place self stretch); 196 | 197 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/interactivity.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/accent-color 4 | colors!(accent); 5 | constant!(accent auto); 6 | 7 | // https://tailwindcss.com/docs/appearance 8 | constant!(appearance none); 9 | constant!(appearance auto); 10 | 11 | // https://tailwindcss.com/docs/cursor 12 | constant!(cursor auto); 13 | constant!(cursor default); 14 | constant!(cursor pointer); 15 | constant!(cursor wait); 16 | constant!(cursor text); 17 | constant!(cursor move); 18 | constant!(cursor help); 19 | constant!(cursor not allowed); 20 | constant!(cursor none); 21 | constant!(cursor context menu); 22 | constant!(cursor progress); 23 | constant!(cursor cell); 24 | constant!(cursor crosshair); 25 | constant!(cursor vertical text); 26 | constant!(cursor alias); 27 | constant!(cursor copy); 28 | constant!(cursor no drop); 29 | constant!(cursor grab); 30 | constant!(cursor grabbing); 31 | constant!(cursor all scoll); 32 | constant!(cursor col resize); 33 | constant!(cursor row resize); 34 | constant!(cursor n resize); 35 | constant!(cursor e resize); 36 | constant!(cursor s resize); 37 | constant!(cursor w resize); 38 | constant!(cursor ne resize); 39 | constant!(cursor nw resize); 40 | constant!(cursor se resize); 41 | constant!(cursor sw resize); 42 | constant!(cursor ew resize); 43 | constant!(cursor ns resize); 44 | constant!(cursor nesw resize); 45 | constant!(cursor nwse resize); 46 | constant!(cursor zoom in); 47 | constant!(cursor zoom out); 48 | 49 | any!(cursor); 50 | 51 | // https://tailwindcss.com/docs/caret-color 52 | colors!(caret); 53 | 54 | // https://tailwindcss.com/docs/pointer-events 55 | constant!(pointer events none); 56 | constant!(pointer events auto); 57 | 58 | // https://tailwindcss.com/docs/resize 59 | constant!(resize none); 60 | constant!(resize x); 61 | constant!(resize y); 62 | constant!(resize); 63 | 64 | // https://tailwindcss.com/docs/scroll-behavior 65 | constant!(scroll auto); 66 | constant!(scroll smooth); 67 | 68 | // https://tailwindcss.com/docs/scroll-margin 69 | size_0_to_96!(scroll m); 70 | size_0_to_96!(scroll mx); 71 | size_0_to_96!(scroll my); 72 | size_0_to_96!(scroll ms); 73 | size_0_to_96!(scroll me); 74 | size_0_to_96!(scroll mt); 75 | size_0_to_96!(scroll mr); 76 | size_0_to_96!(scroll mb); 77 | size_0_to_96!(scroll ml); 78 | 79 | // https://tailwindcss.com/docs/scroll-padding 80 | size_0_to_96!(scroll p); 81 | size_0_to_96!(scroll px); 82 | size_0_to_96!(scroll py); 83 | size_0_to_96!(scroll ps); 84 | size_0_to_96!(scroll pe); 85 | size_0_to_96!(scroll pt); 86 | size_0_to_96!(scroll pr); 87 | size_0_to_96!(scroll pb); 88 | size_0_to_96!(scroll pl); 89 | 90 | // https://tailwindcss.com/docs/scroll-snap-align 91 | constant!(snap start); 92 | constant!(snap end); 93 | constant!(snap center); 94 | constant!(snap align none); 95 | 96 | // https://tailwindcss.com/docs/scroll-snap-stop 97 | constant!(snap normal); 98 | constant!(snap always); 99 | 100 | // https://tailwindcss.com/docs/scroll-snap-type 101 | constant!(snap none); 102 | constant!(snap x); 103 | constant!(snap y); 104 | constant!(snap both); 105 | constant!(snap mandatory); 106 | constant!(snap proximity); 107 | 108 | // https://tailwindcss.com/docs/touch-action 109 | constant!(touch auto); 110 | constant!(touch none); 111 | constant!(touch pan x); 112 | constant!(touch pan left); 113 | constant!(touch pan right); 114 | constant!(touch pan y); 115 | constant!(touch pan up); 116 | constant!(touch pan down); 117 | constant!(touch pinch zoom); 118 | constant!(touch manipulation); 119 | 120 | // https://tailwindcss.com/docs/user-select 121 | constant!(select none); 122 | constant!(select text); 123 | constant!(select all); 124 | constant!(select auto); 125 | 126 | // https://tailwindcss.com/docs/will-change 127 | constant!(will change auto); 128 | constant!(will change scroll); 129 | constant!(will change contents); 130 | constant!(will change transform); 131 | 132 | any!(will change); -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/layout.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/aspect-ratio 4 | constant!(aspect auto); 5 | constant!(aspect square); 6 | constant!(aspect video); 7 | 8 | 9 | // https://tailwindcss.com/docs/aspect-ratio#arbitrary-values 10 | /// aspect-[{}/{}] 11 | pub fn aspect(w: u16, h: u16) -> String { 12 | format!("aspect-[{}/{}]", w, h) 13 | } 14 | 15 | // https://tailwindcss.com/docs/container 16 | constant!(container); 17 | 18 | // https://tailwindcss.com/docs/columns 19 | _1_to_12!(columns); 20 | constant!(columns auto); 21 | _3xs_to_7xl!(columns); 22 | 23 | any!(columns); 24 | 25 | // https://tailwindcss.com/docs/break-after 26 | constant!(break after auto); 27 | constant!(break after avoid); 28 | constant!(break after all); 29 | constant!(break after avoid page); 30 | constant!(break after page); 31 | constant!(break after left); 32 | constant!(break after right); 33 | constant!(break after column); 34 | 35 | // https://tailwindcss.com/docs/break-before 36 | constant!(break before auto); 37 | constant!(break before avoid); 38 | constant!(break before all); 39 | constant!(break before avoid page); 40 | constant!(break before page); 41 | constant!(break before left); 42 | constant!(break before right); 43 | constant!(break before column); 44 | 45 | // https://tailwindcss.com/docs/break-inside 46 | constant!(break inside auto); 47 | constant!(break inside avoid); 48 | constant!(break inside avoid page); 49 | constant!(break inside avoid column); 50 | 51 | // https://tailwindcss.com/docs/box-decoration-break 52 | constant!(box decoration clone); 53 | constant!(box decoration slice); 54 | 55 | // https://tailwindcss.com/docs/box-sizing 56 | constant!(box border); 57 | constant!(box content); 58 | 59 | // https://tailwindcss.com/docs/display 60 | constant!(block); 61 | constant!(inline block); 62 | constant!(inline); 63 | constant!(flex); 64 | constant!(inline flex); 65 | 66 | constant!(table); 67 | constant!(inline table); 68 | constant!(table caption); 69 | constant!(table cell); 70 | constant!(table column); 71 | constant!(table column group); 72 | constant!(table footer group); 73 | constant!(table header group); 74 | constant!(table row group); 75 | constant!(table row); 76 | constant!(flow root); 77 | constant!(grid); 78 | constant!(inline grid); 79 | constant!(contents); 80 | constant!(list item); 81 | constant!(hidden); 82 | 83 | // https://tailwindcss.com/docs/float 84 | constant!(float start); 85 | constant!(float end); 86 | constant!(float right); 87 | constant!(float left); 88 | constant!(float none); 89 | 90 | // https://tailwindcss.com/docs/clear 91 | constant!(clear start); 92 | constant!(clear end); 93 | constant!(clear left); 94 | constant!(clear right); 95 | constant!(clear both); 96 | constant!(clear none); 97 | 98 | // https://tailwindcss.com/docs/isolation 99 | constant!(isolate); 100 | constant!(isolation auto); 101 | 102 | // https://tailwindcss.com/docs/object-fit 103 | constant!(object contain); 104 | constant!(object cover); 105 | constant!(object fill); 106 | constant!(object none); 107 | constant!(object scale down); 108 | 109 | // https://tailwindcss.com/docs/object-position 110 | constant!(object bottom); 111 | constant!(object center); 112 | constant!(object left); 113 | constant!(object left bottom); 114 | constant!(object left top); 115 | constant!(object right); 116 | constant!(object right bottom); 117 | constant!(object right top); 118 | constant!(object top); 119 | 120 | // https://tailwindcss.com/docs/overflow 121 | constant!(overflow auto); 122 | constant!(overflow hidden); 123 | constant!(overflow clip); 124 | constant!(overflow visible); 125 | constant!(overflow scroll); 126 | constant!(overflow x auto); 127 | constant!(overflow y auto); 128 | constant!(overflow x hidden); 129 | constant!(overflow y hidden); 130 | constant!(overflow x clip); 131 | constant!(overflow y clip); 132 | constant!(overflow x visible); 133 | constant!(overflow y visible); 134 | constant!(overflow x scroll); 135 | constant!(overflow y scroll); 136 | 137 | // https://tailwindcss.com/docs/overscroll-behavior 138 | constant!(overscroll auto); 139 | constant!(overscroll contain); 140 | constant!(overscroll none); 141 | constant!(overscroll y auto); 142 | constant!(overscroll y contain); 143 | constant!(overscroll y none); 144 | constant!(overscroll x auto); 145 | constant!(overscroll x contain); 146 | constant!(overscroll x none); 147 | 148 | // https://tailwindcss.com/docs/position 149 | #[doc = "static"] 150 | pub const static_: &'static str = "static"; 151 | constant!(fixed); 152 | constant!(absolute); 153 | constant!(relative); 154 | constant!(sticky); 155 | 156 | // https://tailwindcss.com/docs/top-right-bottom-left 157 | constant!(top auto); 158 | size_0_to_96!(top); 159 | fraction_2_to_4!(top); 160 | constant!(top full); 161 | 162 | constant!(bottom auto); 163 | size_0_to_96!(bottom); 164 | fraction_2_to_4!(bottom); 165 | constant!(bottom full); 166 | 167 | constant!(left auto); 168 | size_0_to_96!(left); 169 | fraction_2_to_4!(left); 170 | constant!(left full); 171 | 172 | constant!(right auto); 173 | size_0_to_96!(right); 174 | fraction_2_to_4!(right); 175 | constant!(right full); 176 | 177 | constant!(inset auto); 178 | size_0_to_96!(inset); 179 | fraction_2_to_4!(inset); 180 | constant!(inset full); 181 | 182 | constant!(inset x auto); 183 | size_0_to_96!(inset x); 184 | fraction_2_to_4!(inset x); 185 | constant!(inset x full); 186 | 187 | constant!(inset y auto); 188 | size_0_to_96!(inset y); 189 | fraction_2_to_4!(inset y); 190 | constant!(inset y full); 191 | 192 | // https://tailwindcss.com/docs/visibility 193 | constant!(visible); 194 | constant!(invisible); 195 | constant!(collapse); 196 | 197 | // https://tailwindcss.com/docs/z-index 198 | constant!(z 0); 199 | constant!(z 10); 200 | constant!(z 20); 201 | constant!(z 30); 202 | constant!(z 40); 203 | constant!(z 50); 204 | constant!(z auto); 205 | 206 | any!(z); 207 | 208 | minus!(z 10); 209 | minus!(z 20); 210 | minus!(z 30); 211 | minus!(z 40); 212 | minus!(z 50); -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/lib.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case, non_upper_case_globals)] 2 | 3 | #![doc = include_str!("../README.md")] 4 | 5 | pub use dioxus_class; 6 | 7 | pub mod macros; 8 | 9 | pub mod modifier; 10 | pub mod responsive; 11 | pub mod dark_mode; 12 | pub mod layout; 13 | pub mod flex; 14 | pub mod spacing; 15 | pub mod sizing; 16 | pub mod typography; 17 | pub mod backgrounds; 18 | pub mod borders; 19 | pub mod effects; 20 | pub mod filters; 21 | pub mod tables; 22 | pub mod transitions; 23 | pub mod transforms; 24 | pub mod interactivity; 25 | pub mod svg; 26 | pub mod accessibility; 27 | 28 | pub mod build; 29 | 30 | pub mod prelude { 31 | pub use dioxus_class::prelude::*; 32 | 33 | // macros 34 | pub use crate::colors; 35 | 36 | pub use crate::modifier::*; 37 | pub use crate::responsive::*; 38 | pub use crate::dark_mode::*; 39 | pub use crate::layout::*; 40 | pub use crate::flex::*; 41 | pub use crate::spacing::*; 42 | pub use crate::sizing::*; 43 | pub use crate::typography::*; 44 | pub use crate::backgrounds::*; 45 | pub use crate::borders::*; 46 | pub use crate::effects::*; 47 | pub use crate::filters::*; 48 | pub use crate::tables::*; 49 | pub use crate::transitions::*; 50 | pub use crate::transforms::*; 51 | pub use crate::interactivity::*; 52 | pub use crate::svg::*; 53 | pub use crate::accessibility::*; 54 | } 55 | 56 | pub mod ext { 57 | pub use dioxus_class::ext::*; 58 | 59 | pub use crate::special_ending_internal; 60 | pub use crate::special_ending; 61 | pub use crate::any; 62 | pub use crate::minus; 63 | pub use crate::colors; 64 | pub use crate::blend; 65 | pub use crate::_1_to_6; 66 | pub use crate::_1_to_12; 67 | pub use crate::_1_to_13; 68 | pub use crate::size_0_to_96; 69 | pub use crate::fraction_2_to_4; 70 | pub use crate::fraction_2_to_6; 71 | pub use crate::fraction_12; 72 | pub use crate::sm_to_2xl; 73 | pub use crate::xs_to_7xl; 74 | pub use crate::_3xs_to_7xl; 75 | pub use crate::opacities; 76 | pub use crate::scales; 77 | pub use crate::percents; 78 | pub use crate::border_radius; 79 | pub use crate::border_width; 80 | } -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/macros.rs: -------------------------------------------------------------------------------- 1 | pub use dioxus_class::ext::*; 2 | 3 | #[macro_export] 4 | macro_rules! special_ending_internal { 5 | ( $( $part:ident )+ _ $next:ident $( $extra:ident )+ ) => { 6 | constant_internal!($( $part )* $next _ $( $extra )*); 7 | }; 8 | ( $( $part:ident )+ _ $last_i:ident $last_v:ident ) => { 9 | paste!{ 10 | #[doc = concat!($( stringify!($part), "-", )* stringify!($last_v))] 11 | pub const [< $( $part _ )* $last_i >]: &'static str = concat!($( stringify!($part), "-", )* stringify!($last_v)); 12 | } 13 | }; 14 | ( $( $part:ident )+ _ $last_i:literal $last_v:literal ) => { 15 | paste!{ 16 | #[doc = concat!($( stringify!($part), "-", )* $last_v)] 17 | pub const [< $( $part _ )* $last_i >]: &'static str = concat!($( stringify!($part), "-", )* $last_v); 18 | } 19 | }; 20 | } 21 | 22 | #[macro_export] 23 | macro_rules! special_ending { 24 | ( $last_i:ident $last_v:ident ) => { 25 | #[doc = concat!(stringify!($last_v))] 26 | pub const $last_i: &'static str = concat!(stringify!($last_v)); 27 | }; 28 | ( $first:ident $( $extra:ident )+ ) => { 29 | special_ending_internal!($first _ $( $extra )*); 30 | }; 31 | ( $( $part:ident )+ $last_i:literal $last_v:literal ) => { 32 | special_ending_internal!($( $part )* _ $last_i $last_v); 33 | }; 34 | } 35 | 36 | 37 | #[macro_export] 38 | macro_rules! any { 39 | ( $( $prefix:ident )* ) => { 40 | paste!{ 41 | #[doc=concat!($( stringify!($prefix), "-", )* "[{}]")] 42 | pub fn [< $( $prefix _ )* any >](p: &str) -> String { 43 | format!(concat!($( stringify!($prefix), "-", )* "[{}]"), p) 44 | } 45 | } 46 | } 47 | } 48 | 49 | #[macro_export] 50 | macro_rules! minus { 51 | ( $( $part:ident )+ $last:literal ) => { 52 | paste!{ 53 | #[doc=concat!("-", $( stringify!($part), "-", )* stringify!($last))] 54 | pub const [< minus_ $( $part _ )* $last >]: &'static str = concat!("-", $( stringify!($part), "-", )* stringify!($last)); 55 | } 56 | } 57 | } 58 | 59 | #[macro_export] 60 | macro_rules! colors { 61 | ( $( $prefix:ident )* ) => { 62 | constant!($( $prefix )* inherit); 63 | constant!($( $prefix )* current); 64 | constant!($( $prefix )* transparent); 65 | constant!($( $prefix )* black); 66 | constant!($( $prefix )* white); 67 | 68 | constant!($( $prefix )* slate 50); 69 | constant!($( $prefix )* slate 100); 70 | constant!($( $prefix )* slate 200); 71 | constant!($( $prefix )* slate 300); 72 | constant!($( $prefix )* slate 400); 73 | constant!($( $prefix )* slate 500); 74 | constant!($( $prefix )* slate 600); 75 | constant!($( $prefix )* slate 700); 76 | constant!($( $prefix )* slate 800); 77 | constant!($( $prefix )* slate 900); 78 | 79 | constant!($( $prefix )* gray 50); 80 | constant!($( $prefix )* gray 100); 81 | constant!($( $prefix )* gray 200); 82 | constant!($( $prefix )* gray 300); 83 | constant!($( $prefix )* gray 400); 84 | constant!($( $prefix )* gray 500); 85 | constant!($( $prefix )* gray 600); 86 | constant!($( $prefix )* gray 700); 87 | constant!($( $prefix )* gray 800); 88 | constant!($( $prefix )* gray 900); 89 | 90 | constant!($( $prefix )* zinc 50); 91 | constant!($( $prefix )* zinc 100); 92 | constant!($( $prefix )* zinc 200); 93 | constant!($( $prefix )* zinc 300); 94 | constant!($( $prefix )* zinc 400); 95 | constant!($( $prefix )* zinc 500); 96 | constant!($( $prefix )* zinc 600); 97 | constant!($( $prefix )* zinc 700); 98 | constant!($( $prefix )* zinc 800); 99 | constant!($( $prefix )* zinc 900); 100 | 101 | constant!($( $prefix )* neutral 50); 102 | constant!($( $prefix )* neutral 100); 103 | constant!($( $prefix )* neutral 200); 104 | constant!($( $prefix )* neutral 300); 105 | constant!($( $prefix )* neutral 400); 106 | constant!($( $prefix )* neutral 500); 107 | constant!($( $prefix )* neutral 600); 108 | constant!($( $prefix )* neutral 700); 109 | constant!($( $prefix )* neutral 800); 110 | constant!($( $prefix )* neutral 900); 111 | 112 | constant!($( $prefix )* stone 50); 113 | constant!($( $prefix )* stone 100); 114 | constant!($( $prefix )* stone 200); 115 | constant!($( $prefix )* stone 300); 116 | constant!($( $prefix )* stone 400); 117 | constant!($( $prefix )* stone 500); 118 | constant!($( $prefix )* stone 600); 119 | constant!($( $prefix )* stone 700); 120 | constant!($( $prefix )* stone 800); 121 | constant!($( $prefix )* stone 900); 122 | 123 | constant!($( $prefix )* red 50); 124 | constant!($( $prefix )* red 100); 125 | constant!($( $prefix )* red 200); 126 | constant!($( $prefix )* red 300); 127 | constant!($( $prefix )* red 400); 128 | constant!($( $prefix )* red 500); 129 | constant!($( $prefix )* red 600); 130 | constant!($( $prefix )* red 700); 131 | constant!($( $prefix )* red 800); 132 | constant!($( $prefix )* red 900); 133 | 134 | constant!($( $prefix )* orange 50); 135 | constant!($( $prefix )* orange 100); 136 | constant!($( $prefix )* orange 200); 137 | constant!($( $prefix )* orange 300); 138 | constant!($( $prefix )* orange 400); 139 | constant!($( $prefix )* orange 500); 140 | constant!($( $prefix )* orange 600); 141 | constant!($( $prefix )* orange 700); 142 | constant!($( $prefix )* orange 800); 143 | constant!($( $prefix )* orange 900); 144 | 145 | constant!($( $prefix )* amber 50); 146 | constant!($( $prefix )* amber 100); 147 | constant!($( $prefix )* amber 200); 148 | constant!($( $prefix )* amber 300); 149 | constant!($( $prefix )* amber 400); 150 | constant!($( $prefix )* amber 500); 151 | constant!($( $prefix )* amber 600); 152 | constant!($( $prefix )* amber 700); 153 | constant!($( $prefix )* amber 800); 154 | constant!($( $prefix )* amber 900); 155 | 156 | constant!($( $prefix )* yellow 50); 157 | constant!($( $prefix )* yellow 100); 158 | constant!($( $prefix )* yellow 200); 159 | constant!($( $prefix )* yellow 300); 160 | constant!($( $prefix )* yellow 400); 161 | constant!($( $prefix )* yellow 500); 162 | constant!($( $prefix )* yellow 600); 163 | constant!($( $prefix )* yellow 700); 164 | constant!($( $prefix )* yellow 800); 165 | constant!($( $prefix )* yellow 900); 166 | 167 | constant!($( $prefix )* lime 50); 168 | constant!($( $prefix )* lime 100); 169 | constant!($( $prefix )* lime 200); 170 | constant!($( $prefix )* lime 300); 171 | constant!($( $prefix )* lime 400); 172 | constant!($( $prefix )* lime 500); 173 | constant!($( $prefix )* lime 600); 174 | constant!($( $prefix )* lime 700); 175 | constant!($( $prefix )* lime 800); 176 | constant!($( $prefix )* lime 900); 177 | 178 | constant!($( $prefix )* green 50); 179 | constant!($( $prefix )* green 100); 180 | constant!($( $prefix )* green 200); 181 | constant!($( $prefix )* green 300); 182 | constant!($( $prefix )* green 400); 183 | constant!($( $prefix )* green 500); 184 | constant!($( $prefix )* green 600); 185 | constant!($( $prefix )* green 700); 186 | constant!($( $prefix )* green 800); 187 | constant!($( $prefix )* green 900); 188 | 189 | constant!($( $prefix )* emerald 50); 190 | constant!($( $prefix )* emerald 100); 191 | constant!($( $prefix )* emerald 200); 192 | constant!($( $prefix )* emerald 300); 193 | constant!($( $prefix )* emerald 400); 194 | constant!($( $prefix )* emerald 500); 195 | constant!($( $prefix )* emerald 600); 196 | constant!($( $prefix )* emerald 700); 197 | constant!($( $prefix )* emerald 800); 198 | constant!($( $prefix )* emerald 900); 199 | 200 | constant!($( $prefix )* teal 50); 201 | constant!($( $prefix )* teal 100); 202 | constant!($( $prefix )* teal 200); 203 | constant!($( $prefix )* teal 300); 204 | constant!($( $prefix )* teal 400); 205 | constant!($( $prefix )* teal 500); 206 | constant!($( $prefix )* teal 600); 207 | constant!($( $prefix )* teal 700); 208 | constant!($( $prefix )* teal 800); 209 | constant!($( $prefix )* teal 900); 210 | 211 | constant!($( $prefix )* cyan 50); 212 | constant!($( $prefix )* cyan 100); 213 | constant!($( $prefix )* cyan 200); 214 | constant!($( $prefix )* cyan 300); 215 | constant!($( $prefix )* cyan 400); 216 | constant!($( $prefix )* cyan 500); 217 | constant!($( $prefix )* cyan 600); 218 | constant!($( $prefix )* cyan 700); 219 | constant!($( $prefix )* cyan 800); 220 | constant!($( $prefix )* cyan 900); 221 | 222 | constant!($( $prefix )* sky 50); 223 | constant!($( $prefix )* sky 100); 224 | constant!($( $prefix )* sky 200); 225 | constant!($( $prefix )* sky 300); 226 | constant!($( $prefix )* sky 400); 227 | constant!($( $prefix )* sky 500); 228 | constant!($( $prefix )* sky 600); 229 | constant!($( $prefix )* sky 700); 230 | constant!($( $prefix )* sky 800); 231 | constant!($( $prefix )* sky 900); 232 | 233 | constant!($( $prefix )* blue 50); 234 | constant!($( $prefix )* blue 100); 235 | constant!($( $prefix )* blue 200); 236 | constant!($( $prefix )* blue 300); 237 | constant!($( $prefix )* blue 400); 238 | constant!($( $prefix )* blue 500); 239 | constant!($( $prefix )* blue 600); 240 | constant!($( $prefix )* blue 700); 241 | constant!($( $prefix )* blue 800); 242 | constant!($( $prefix )* blue 900); 243 | 244 | constant!($( $prefix )* indigo 50); 245 | constant!($( $prefix )* indigo 100); 246 | constant!($( $prefix )* indigo 200); 247 | constant!($( $prefix )* indigo 300); 248 | constant!($( $prefix )* indigo 400); 249 | constant!($( $prefix )* indigo 500); 250 | constant!($( $prefix )* indigo 600); 251 | constant!($( $prefix )* indigo 700); 252 | constant!($( $prefix )* indigo 800); 253 | constant!($( $prefix )* indigo 900); 254 | 255 | constant!($( $prefix )* violet 50); 256 | constant!($( $prefix )* violet 100); 257 | constant!($( $prefix )* violet 200); 258 | constant!($( $prefix )* violet 300); 259 | constant!($( $prefix )* violet 400); 260 | constant!($( $prefix )* violet 500); 261 | constant!($( $prefix )* violet 600); 262 | constant!($( $prefix )* violet 700); 263 | constant!($( $prefix )* violet 800); 264 | constant!($( $prefix )* violet 900); 265 | 266 | constant!($( $prefix )* purple 50); 267 | constant!($( $prefix )* purple 100); 268 | constant!($( $prefix )* purple 200); 269 | constant!($( $prefix )* purple 300); 270 | constant!($( $prefix )* purple 400); 271 | constant!($( $prefix )* purple 500); 272 | constant!($( $prefix )* purple 600); 273 | constant!($( $prefix )* purple 700); 274 | constant!($( $prefix )* purple 800); 275 | constant!($( $prefix )* purple 900); 276 | 277 | constant!($( $prefix )* fuchsia 50); 278 | constant!($( $prefix )* fuchsia 100); 279 | constant!($( $prefix )* fuchsia 200); 280 | constant!($( $prefix )* fuchsia 300); 281 | constant!($( $prefix )* fuchsia 400); 282 | constant!($( $prefix )* fuchsia 500); 283 | constant!($( $prefix )* fuchsia 600); 284 | constant!($( $prefix )* fuchsia 700); 285 | constant!($( $prefix )* fuchsia 800); 286 | constant!($( $prefix )* fuchsia 900); 287 | 288 | constant!($( $prefix )* pink 50); 289 | constant!($( $prefix )* pink 100); 290 | constant!($( $prefix )* pink 200); 291 | constant!($( $prefix )* pink 300); 292 | constant!($( $prefix )* pink 400); 293 | constant!($( $prefix )* pink 500); 294 | constant!($( $prefix )* pink 600); 295 | constant!($( $prefix )* pink 700); 296 | constant!($( $prefix )* pink 800); 297 | constant!($( $prefix )* pink 900); 298 | 299 | constant!($( $prefix )* rose 50); 300 | constant!($( $prefix )* rose 100); 301 | constant!($( $prefix )* rose 200); 302 | constant!($( $prefix )* rose 300); 303 | constant!($( $prefix )* rose 400); 304 | constant!($( $prefix )* rose 500); 305 | constant!($( $prefix )* rose 600); 306 | constant!($( $prefix )* rose 700); 307 | constant!($( $prefix )* rose 800); 308 | constant!($( $prefix )* rose 900); 309 | 310 | crate::any!($( $prefix )*); 311 | } 312 | } 313 | 314 | #[macro_export] 315 | macro_rules! blend { 316 | ( $( $prefix:ident )* ) => { 317 | constant!($( $prefix )* normal); 318 | constant!($( $prefix )* multiply); 319 | constant!($( $prefix )* screen); 320 | constant!($( $prefix )* overlay); 321 | constant!($( $prefix )* darken); 322 | constant!($( $prefix )* lighten); 323 | constant!($( $prefix )* color dodge); 324 | constant!($( $prefix )* color burn); 325 | constant!($( $prefix )* hard light); 326 | constant!($( $prefix )* soft light); 327 | constant!($( $prefix )* difference); 328 | constant!($( $prefix )* exclusion); 329 | constant!($( $prefix )* hue); 330 | constant!($( $prefix )* saturation); 331 | constant!($( $prefix )* color); 332 | constant!($( $prefix )* luminosity); 333 | } 334 | } 335 | 336 | #[macro_export] 337 | macro_rules! _1_to_6 { 338 | ( $( $prefix:ident )* ) => { 339 | constant!($( $prefix )* 1); 340 | constant!($( $prefix )* 2); 341 | constant!($( $prefix )* 3); 342 | constant!($( $prefix )* 4); 343 | constant!($( $prefix )* 5); 344 | constant!($( $prefix )* 6); 345 | } 346 | } 347 | 348 | #[macro_export] 349 | macro_rules! _1_to_12 { 350 | ( $( $prefix:ident )* ) => { 351 | crate::_1_to_6!($( $prefix )* ); 352 | constant!($( $prefix )* 7); 353 | constant!($( $prefix )* 8); 354 | constant!($( $prefix )* 9); 355 | constant!($( $prefix )* 10); 356 | constant!($( $prefix )* 11); 357 | constant!($( $prefix )* 12); 358 | } 359 | } 360 | 361 | #[macro_export] 362 | macro_rules! _1_to_13 { 363 | ( $( $prefix:ident )* ) => { 364 | crate::_1_to_12!($( $prefix )* ); 365 | constant!($( $prefix )* 13); 366 | } 367 | } 368 | 369 | #[macro_export] 370 | macro_rules! size_0_to_96 { 371 | ( $( $prefix:ident )* ) => { 372 | constant!($( $prefix )* 0); 373 | constant!($( $prefix )* px); 374 | paste!{ 375 | #[doc = concat!($( stringify!($prefix), "-", )* "0.5")] 376 | pub const [< $( $prefix _ )* _half >]: &'static str = concat!($( stringify!($prefix), "-", )* "0.5"); 377 | #[doc = concat!($( stringify!($prefix), "-", )* "1.5")] 378 | pub const [< $( $prefix _ )* 1_half >]: &'static str = concat!($( stringify!($prefix), "-", )* "1.5"); 379 | #[doc = concat!($( stringify!($prefix), "-", )* "2.5")] 380 | pub const [< $( $prefix _ )* 2_half >]: &'static str = concat!($( stringify!($prefix), "-", )* "2.5"); 381 | #[doc = concat!($( stringify!($prefix), "-", )* "3.5")] 382 | pub const [< $( $prefix _ )* 3_half >]: &'static str = concat!($( stringify!($prefix), "-", )* "3.5"); 383 | } 384 | crate::_1_to_12!($( $prefix )* ); 385 | constant!($( $prefix )* 16); 386 | constant!($( $prefix )* 20); 387 | constant!($( $prefix )* 24); 388 | constant!($( $prefix )* 28); 389 | constant!($( $prefix )* 32); 390 | constant!($( $prefix )* 36); 391 | constant!($( $prefix )* 40); 392 | constant!($( $prefix )* 44); 393 | constant!($( $prefix )* 48); 394 | constant!($( $prefix )* 52); 395 | constant!($( $prefix )* 56); 396 | constant!($( $prefix )* 60); 397 | constant!($( $prefix )* 64); 398 | constant!($( $prefix )* 72); 399 | constant!($( $prefix )* 80); 400 | constant!($( $prefix )* 96); 401 | 402 | crate::any!($( $prefix )*); 403 | } 404 | } 405 | 406 | #[macro_export] 407 | macro_rules! fraction_2_to_4 { 408 | ( $( $prefix:ident )* ) => { 409 | paste!{ 410 | #[doc = concat!($( stringify!($prefix), "-", )* "1/2")] 411 | pub const [< $( $prefix _ )* 1__2 >]: &'static str = concat!($( stringify!($prefix), "-", )* "1/2"); 412 | #[doc = concat!($( stringify!($prefix), "-", )* "1/3")] 413 | pub const [< $( $prefix _ )* 1__3 >]: &'static str = concat!($( stringify!($prefix), "-", )* "1/3"); 414 | #[doc = concat!($( stringify!($prefix), "-", )* "2/3")] 415 | pub const [< $( $prefix _ )* 2__3 >]: &'static str = concat!($( stringify!($prefix), "-", )* "2/3"); 416 | #[doc = concat!($( stringify!($prefix), "-", )* "1/4")] 417 | pub const [< $( $prefix _ )* 1__4 >]: &'static str = concat!($( stringify!($prefix), "-", )* "1/4"); 418 | #[doc = concat!($( stringify!($prefix), "-", )* "2/4")] 419 | pub const [< $( $prefix _ )* 2__4 >]: &'static str = concat!($( stringify!($prefix), "-", )* "2/4"); 420 | #[doc = concat!($( stringify!($prefix), "-", )* "3/4")] 421 | pub const [< $( $prefix _ )* 3__4 >]: &'static str = concat!($( stringify!($prefix), "-", )* "3/4"); 422 | } 423 | } 424 | } 425 | 426 | #[macro_export] 427 | macro_rules! fraction_2_to_6 { 428 | ( $( $prefix:ident )* ) => { 429 | crate::fraction_2_to_4!($( $prefix )*); 430 | paste!{ 431 | #[doc = concat!($( stringify!($prefix), "-", )* "1/5")] 432 | pub const [< $( $prefix _ )* 1__5 >]: &'static str = concat!($( stringify!($prefix), "-", )* "1/5"); 433 | #[doc = concat!($( stringify!($prefix), "-", )* "2/5")] 434 | pub const [< $( $prefix _ )* 2__5 >]: &'static str = concat!($( stringify!($prefix), "-", )* "2/5"); 435 | #[doc = concat!($( stringify!($prefix), "-", )* "3/5")] 436 | pub const [< $( $prefix _ )* 3__5 >]: &'static str = concat!($( stringify!($prefix), "-", )* "3/5"); 437 | #[doc = concat!($( stringify!($prefix), "-", )* "4/5")] 438 | pub const [< $( $prefix _ )* 4__5 >]: &'static str = concat!($( stringify!($prefix), "-", )* "4/5"); 439 | #[doc = concat!($( stringify!($prefix), "-", )* "1/6")] 440 | pub const [< $( $prefix _ )* 1__6 >]: &'static str = concat!($( stringify!($prefix), "-", )* "1/6"); 441 | #[doc = concat!($( stringify!($prefix), "-", )* "2/6")] 442 | pub const [< $( $prefix _ )* 2__6 >]: &'static str = concat!($( stringify!($prefix), "-", )* "2/6"); 443 | #[doc = concat!($( stringify!($prefix), "-", )* "3/6")] 444 | pub const [< $( $prefix _ )* 3__6 >]: &'static str = concat!($( stringify!($prefix), "-", )* "3/6"); 445 | #[doc = concat!($( stringify!($prefix), "-", )* "4/6")] 446 | pub const [< $( $prefix _ )* 4__6 >]: &'static str = concat!($( stringify!($prefix), "-", )* "4/6"); 447 | #[doc = concat!($( stringify!($prefix), "-", )* "5/6")] 448 | pub const [< $( $prefix _ )* 5__6 >]: &'static str = concat!($( stringify!($prefix), "-", )* "5/6"); 449 | } 450 | } 451 | } 452 | 453 | #[macro_export] 454 | macro_rules! fraction_12 { 455 | ( $( $prefix:ident )* ) => { 456 | paste!{ 457 | #[doc = concat!($( stringify!($prefix), "-", )* "1/12")] 458 | pub const [< $( $prefix _ )* 1__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "1/12"); 459 | #[doc = concat!($( stringify!($prefix), "-", )* "2/12")] 460 | pub const [< $( $prefix _ )* 2__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "2/12"); 461 | #[doc = concat!($( stringify!($prefix), "-", )* "3/12")] 462 | pub const [< $( $prefix _ )* 3__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "3/12"); 463 | #[doc = concat!($( stringify!($prefix), "-", )* "4/12")] 464 | pub const [< $( $prefix _ )* 4__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "4/12"); 465 | #[doc = concat!($( stringify!($prefix), "-", )* "5/12")] 466 | pub const [< $( $prefix _ )* 5__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "5/12"); 467 | #[doc = concat!($( stringify!($prefix), "-", )* "6/12")] 468 | pub const [< $( $prefix _ )* 6__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "6/12"); 469 | #[doc = concat!($( stringify!($prefix), "-", )* "7/12")] 470 | pub const [< $( $prefix _ )* 7__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "7/12"); 471 | #[doc = concat!($( stringify!($prefix), "-", )* "8/12")] 472 | pub const [< $( $prefix _ )* 8__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "8/12"); 473 | #[doc = concat!($( stringify!($prefix), "-", )* "9/12")] 474 | pub const [< $( $prefix _ )* 9__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "9/12"); 475 | #[doc = concat!($( stringify!($prefix), "-", )* "10/12")] 476 | pub const [< $( $prefix _ )* 10__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "10/12"); 477 | #[doc = concat!($( stringify!($prefix), "-", )* "11/12")] 478 | pub const [< $( $prefix _ )* 11__12 >]: &'static str = concat!($( stringify!($prefix), "-", )* "11/12"); 479 | } 480 | } 481 | } 482 | 483 | #[macro_export] 484 | macro_rules! sm_to_2xl { 485 | ( $( $prefix:ident )* ) => { 486 | constant!($( $prefix )* sm); 487 | constant!($( $prefix )* md); 488 | constant!($( $prefix )* lg); 489 | constant!($( $prefix )* xl); 490 | constant!($( $prefix )* "2xl"); 491 | } 492 | } 493 | 494 | #[macro_export] 495 | macro_rules! xs_to_7xl { 496 | ( $( $prefix:ident )* ) => { 497 | constant!($( $prefix )* xs); 498 | crate::sm_to_2xl!($( $prefix )*); 499 | constant!($( $prefix )* "3xl"); 500 | constant!($( $prefix )* "4xl"); 501 | constant!($( $prefix )* "5xl"); 502 | constant!($( $prefix )* "6xl"); 503 | constant!($( $prefix )* "7xl"); 504 | } 505 | } 506 | 507 | #[macro_export] 508 | macro_rules! _3xs_to_7xl { 509 | ( $( $prefix:ident )* ) => { 510 | constant!($( $prefix )* "3xs"); 511 | constant!($( $prefix )* "2xs"); 512 | crate::xs_to_7xl!($( $prefix )*); 513 | } 514 | } 515 | 516 | #[macro_export] 517 | macro_rules! opacities { 518 | ( $( $prefix:ident )* ) => { 519 | constant!($( $prefix )* 0); 520 | constant!($( $prefix )* 5); 521 | constant!($( $prefix )* 10); 522 | constant!($( $prefix )* 15); 523 | constant!($( $prefix )* 20); 524 | constant!($( $prefix )* 25); 525 | constant!($( $prefix )* 30); 526 | constant!($( $prefix )* 35); 527 | constant!($( $prefix )* 40); 528 | constant!($( $prefix )* 45); 529 | constant!($( $prefix )* 50); 530 | constant!($( $prefix )* 55); 531 | constant!($( $prefix )* 60); 532 | constant!($( $prefix )* 65); 533 | constant!($( $prefix )* 70); 534 | constant!($( $prefix )* 75); 535 | constant!($( $prefix )* 80); 536 | constant!($( $prefix )* 85); 537 | constant!($( $prefix )* 90); 538 | constant!($( $prefix )* 95); 539 | constant!($( $prefix )* 100); 540 | 541 | crate::any!($( $prefix )*); 542 | } 543 | } 544 | 545 | #[macro_export] 546 | macro_rules! scales { 547 | ( $( $prefix:ident )* ) => { 548 | constant!($( $prefix )* 0); 549 | constant!($( $prefix )* 50); 550 | constant!($( $prefix )* 75); 551 | constant!($( $prefix )* 90); 552 | constant!($( $prefix )* 95); 553 | constant!($( $prefix )* 100); 554 | constant!($( $prefix )* 105); 555 | constant!($( $prefix )* 110); 556 | constant!($( $prefix )* 125); 557 | constant!($( $prefix )* 150); 558 | 559 | crate::any!($( $prefix )*); 560 | } 561 | } 562 | 563 | 564 | #[macro_export] 565 | macro_rules! percents { 566 | ( $( $prefix:ident )* ) => { 567 | special_ending!($( $prefix )* 0_pct "0%"); 568 | special_ending!($( $prefix )* 5_pct "5%"); 569 | special_ending!($( $prefix )* 10_pct "10%"); 570 | special_ending!($( $prefix )* 15_pct "15%"); 571 | special_ending!($( $prefix )* 20_pct "20%"); 572 | special_ending!($( $prefix )* 25_pct "25%"); 573 | special_ending!($( $prefix )* 30_pct "30%"); 574 | special_ending!($( $prefix )* 35_pct "35%"); 575 | special_ending!($( $prefix )* 40_pct "40%"); 576 | special_ending!($( $prefix )* 45_pct "45%"); 577 | special_ending!($( $prefix )* 50_pct "50%"); 578 | special_ending!($( $prefix )* 55_pct "55%"); 579 | special_ending!($( $prefix )* 60_pct "60%"); 580 | special_ending!($( $prefix )* 65_pct "65%"); 581 | special_ending!($( $prefix )* 70_pct "70%"); 582 | special_ending!($( $prefix )* 75_pct "75%"); 583 | special_ending!($( $prefix )* 80_pct "80%"); 584 | special_ending!($( $prefix )* 85_pct "85%"); 585 | special_ending!($( $prefix )* 90_pct "90%"); 586 | special_ending!($( $prefix )* 95_pct "95%"); 587 | special_ending!($( $prefix )* 100_pct "100%"); 588 | } 589 | } 590 | 591 | #[macro_export] 592 | macro_rules! border_radius { 593 | ( $( $prefix:ident )* ) => { 594 | constant!($( $prefix )*); 595 | constant!($( $prefix )* none); 596 | sm_to_2xl!($( $prefix )*); 597 | constant!($( $prefix )* "3xl"); 598 | constant!($( $prefix )* full); 599 | } 600 | } 601 | 602 | #[macro_export] 603 | macro_rules! border_width { 604 | ( $( $prefix:ident )* ) => { 605 | constant!($( $prefix )*); 606 | constant!($( $prefix )* 0); 607 | constant!($( $prefix )* 2); 608 | constant!($( $prefix )* 4); 609 | constant!($( $prefix )* 8); 610 | } 611 | } 612 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/modifier.rs: -------------------------------------------------------------------------------- 1 | // https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-class-reference 2 | 3 | /// hover: 4 | pub fn hover(v: &str) -> String { 5 | "hover:".to_owned() + v 6 | } 7 | 8 | /// focus: 9 | pub fn focus(v: &str) -> String { 10 | "focus:".to_owned() + v 11 | } 12 | 13 | /// focus-width: 14 | pub fn focus_within(v: &str) -> String { 15 | "focus-within:".to_owned() + v 16 | } 17 | 18 | /// focus-visible: 19 | pub fn focus_visible(v: &str) -> String { 20 | "focus-visible:".to_owned() + v 21 | } 22 | 23 | /// active: 24 | pub fn active(v: &str) -> String { 25 | "active:".to_owned() + v 26 | } 27 | 28 | /// visited: 29 | pub fn visited(v: &str) -> String { 30 | "visited:".to_owned() + v 31 | } 32 | 33 | /// target: 34 | pub fn target(v: &str) -> String { 35 | "target:".to_owned() + v 36 | } 37 | 38 | /// first: 39 | pub fn first(v: &str) -> String { 40 | "first:".to_owned() + v 41 | } 42 | 43 | /// last: 44 | pub fn last(v: &str) -> String { 45 | "last:".to_owned() + v 46 | } 47 | 48 | /// only: 49 | pub fn only(v: &str) -> String { 50 | "only:".to_owned() + v 51 | } 52 | 53 | /// odd: 54 | pub fn odd(v: &str) -> String { 55 | "odd:".to_owned() + v 56 | } 57 | 58 | /// even: 59 | pub fn even(v: &str) -> String { 60 | "even:".to_owned() + v 61 | } 62 | 63 | /// first-of-type: 64 | pub fn first_of_type(v: &str) -> String { 65 | "first-of-type:".to_owned() + v 66 | } 67 | 68 | /// last-of-type: 69 | pub fn last_of_type(v: &str) -> String { 70 | "last-of-type:".to_owned() + v 71 | } 72 | 73 | /// only-of-type: 74 | pub fn only_of_type(v: &str) -> String { 75 | "only-of-type:".to_owned() + v 76 | } 77 | 78 | /// empty: 79 | pub fn empty(v: &str) -> String { 80 | "empty:".to_owned() + v 81 | } 82 | 83 | /// disabled: 84 | pub fn disabled(v: &str) -> String { 85 | "disabled:".to_owned() + v 86 | } 87 | 88 | /// enabled: 89 | pub fn enabled(v: &str) -> String { 90 | "enabled:".to_owned() + v 91 | } 92 | 93 | /// checked: 94 | pub fn checked(v: &str) -> String { 95 | "checked:".to_owned() + v 96 | } 97 | 98 | /// indeterminate: 99 | pub fn indeterminate(v: &str) -> String { 100 | "indeterminate:".to_owned() + v 101 | } 102 | 103 | /// default: 104 | pub fn default(v: &str) -> String { 105 | "default:".to_owned() + v 106 | } 107 | 108 | /// required: 109 | pub fn required(v: &str) -> String { 110 | "required:".to_owned() + v 111 | } 112 | 113 | /// valid: 114 | pub fn valid(v: &str) -> String { 115 | "valid:".to_owned() + v 116 | } 117 | 118 | /// invalid: 119 | pub fn invalid(v: &str) -> String { 120 | "invalid:".to_owned() + v 121 | } 122 | 123 | /// in-range: 124 | pub fn in_range(v: &str) -> String { 125 | "in-range:".to_owned() + v 126 | } 127 | 128 | /// out-of-range: 129 | pub fn out_of_range(v: &str) -> String { 130 | "out-of-range:".to_owned() + v 131 | } 132 | 133 | /// placeholder-shown: 134 | pub fn placeholder_shown(v: &str) -> String { 135 | "placeholder-shown:".to_owned() + v 136 | } 137 | 138 | /// autofill: 139 | pub fn autofill(v: &str) -> String { 140 | "autofill:".to_owned() + v 141 | } 142 | 143 | /// read-only: 144 | pub fn read_only(v: &str) -> String { 145 | "read-only:".to_owned() + v 146 | } 147 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/responsive.rs: -------------------------------------------------------------------------------- 1 | // https://tailwindcss.com/docs/responsive-design 2 | 3 | /// sm: 4 | pub fn sm(v: &str) -> String { 5 | "sm:".to_owned() + v 6 | } 7 | 8 | /// md: 9 | pub fn md(v: &str) -> String { 10 | "md:".to_owned() + v 11 | } 12 | 13 | /// lg: 14 | pub fn lg(v: &str) -> String { 15 | "lg:".to_owned() + v 16 | } 17 | 18 | /// xl: 19 | pub fn xl(v: &str) -> String { 20 | "xl:".to_owned() + v 21 | } 22 | 23 | /// 2xl: 24 | pub fn _2xl(v: &str) -> String { 25 | "2xl:".to_owned() + v 26 | } 27 | 28 | /// 2xl: 29 | pub fn xxl(v: &str) -> String { 30 | "2xl:".to_owned() + v 31 | } 32 | 33 | /// max-sm: 34 | pub fn max_sm(v: &str) -> String { 35 | "max-sm:".to_owned() + v 36 | } 37 | 38 | /// max-md: 39 | pub fn max_md(v: &str) -> String { 40 | "max-md:".to_owned() + v 41 | } 42 | 43 | /// max-lg: 44 | pub fn max_lg(v: &str) -> String { 45 | "max-lg:".to_owned() + v 46 | } 47 | 48 | /// max-xl: 49 | pub fn max_xl(v: &str) -> String { 50 | "max-xl:".to_owned() + v 51 | } 52 | 53 | /// max-2xl: 54 | pub fn max_2xl(v: &str) -> String { 55 | "max-2xl:".to_owned() + v 56 | } 57 | 58 | /// max-2xl: 59 | pub fn max_xxl(v: &str) -> String { 60 | "max-2xl:".to_owned() + v 61 | } 62 | 63 | /// min-[{p}]: 64 | pub fn min_any(p: &str, v: &str) -> String { 65 | format!("min-[{}]:{}", p, v) 66 | } 67 | 68 | /// max-[{p}]: 69 | pub fn max_any(p: &str, v: &str) -> String { 70 | format!("max-[{}]:{}", p, v) 71 | } -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/sizing.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/width 4 | size_0_to_96!(w); 5 | fraction_2_to_6!(w); 6 | fraction_12!(w); 7 | constant!(w auto); 8 | constant!(w full); 9 | constant!(w screen); 10 | constant!(w svw); 11 | constant!(w lvw); 12 | constant!(w dvw); 13 | constant!(w min); 14 | constant!(w max); 15 | constant!(w fit); 16 | 17 | // https://tailwindcss.com/docs/min-width 18 | size_0_to_96!(min w); 19 | 20 | constant!(min w full); 21 | constant!(min w min); 22 | constant!(min w max); 23 | constant!(min w fit); 24 | 25 | // https://tailwindcss.com/docs/max-width 26 | size_0_to_96!(max w); 27 | constant!(max w none); 28 | xs_to_7xl!(max w); 29 | constant!(max w full); 30 | constant!(max w min); 31 | constant!(max w max); 32 | constant!(max w fix); 33 | constant!(max w prose); 34 | sm_to_2xl!(max w screen); 35 | 36 | // https://tailwindcss.com/docs/height 37 | size_0_to_96!(h); 38 | fraction_2_to_6!(h); 39 | constant!(h auto); 40 | constant!(h full); 41 | constant!(h screen); 42 | constant!(h svh); 43 | constant!(h lvh); 44 | constant!(h dvh); 45 | constant!(h min); 46 | constant!(h max); 47 | constant!(h fit); 48 | 49 | // https://tailwindcss.com/docs/min-height 50 | size_0_to_96!(min h); 51 | constant!(min h full); 52 | constant!(min h screen); 53 | constant!(min h svh); 54 | constant!(min h lvh); 55 | constant!(min h dvh); 56 | constant!(min h min); 57 | constant!(min h max); 58 | constant!(min h fit); 59 | 60 | 61 | // https://tailwindcss.com/docs/max-height 62 | size_0_to_96!(max h); 63 | constant!(max h none); 64 | constant!(max h full); 65 | constant!(max h screen); 66 | constant!(max h svh); 67 | constant!(max h lvh); 68 | constant!(max h dvh); 69 | constant!(max h min); 70 | constant!(max h max); 71 | constant!(max h fit); 72 | 73 | // https://tailwindcss.com/docs/size 74 | size_0_to_96!(size); 75 | fraction_2_to_6!(size); 76 | fraction_12!(size); 77 | constant!(size full); 78 | constant!(size min); 79 | constant!(size max); 80 | constant!(size fix); 81 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/spacing.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/padding 4 | size_0_to_96!(p); 5 | size_0_to_96!(px); 6 | size_0_to_96!(py); 7 | size_0_to_96!(ps); 8 | size_0_to_96!(pe); 9 | size_0_to_96!(pt); 10 | size_0_to_96!(pr); 11 | size_0_to_96!(pb); 12 | size_0_to_96!(pl); 13 | 14 | // https://tailwindcss.com/docs/margin 15 | size_0_to_96!(m); 16 | constant!(m auto); 17 | size_0_to_96!(mx); 18 | constant!(mx auto); 19 | size_0_to_96!(my); 20 | constant!(my auto); 21 | size_0_to_96!(ms); 22 | constant!(ms auto); 23 | size_0_to_96!(me); 24 | constant!(me auto); 25 | size_0_to_96!(mt); 26 | constant!(mt auto); 27 | size_0_to_96!(mr); 28 | constant!(mr auto); 29 | size_0_to_96!(mb); 30 | constant!(mb auto); 31 | size_0_to_96!(ml); 32 | constant!(ml auto); 33 | 34 | // https://tailwindcss.com/docs/space 35 | size_0_to_96!(space x); 36 | constant!(space x reverse); 37 | 38 | size_0_to_96!(space y); 39 | constant!(space y reverse); -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/svg.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/fill 4 | constant!(fill none); 5 | colors!(fill); 6 | 7 | // https://tailwindcss.com/docs/stroke 8 | constant!(stroke none); 9 | colors!(stroke); 10 | 11 | // https://tailwindcss.com/docs/stroke-width 12 | constant!(stroke 0); 13 | constant!(stroke 1); 14 | constant!(stroke 2); 15 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/tables.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/border-collapse 4 | constant!(border collapse); 5 | constant!(border separate); 6 | 7 | // https://tailwindcss.com/docs/border-spacing 8 | size_0_to_96!(border spacing); 9 | size_0_to_96!(border spacing x); 10 | size_0_to_96!(border spacing y); 11 | 12 | // https://tailwindcss.com/docs/table-layout 13 | constant!(table auto); 14 | constant!(table fixed); 15 | 16 | // https://tailwindcss.com/docs/caption-side 17 | constant!(caption top); 18 | constant!(caption bottom); 19 | -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/transforms.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/scale 4 | scales!(scale); 5 | scales!(scale x); 6 | scales!(scale y); 7 | 8 | // https://tailwindcss.com/docs/rotate 9 | constant!(rotate 0); 10 | constant!(rotate 1); 11 | constant!(rotate 2); 12 | constant!(rotate 3); 13 | constant!(rotate 6); 14 | constant!(rotate 12); 15 | constant!(rotate 45); 16 | constant!(rotate 90); 17 | constant!(rotate 180); 18 | 19 | any!(rotate); 20 | 21 | // https://tailwindcss.com/docs/translate 22 | size_0_to_96!(translate x); 23 | fraction_2_to_4!(translate x); 24 | constant!(translate x full); 25 | 26 | size_0_to_96!(translate y); 27 | fraction_2_to_4!(translate y); 28 | constant!(translate y full); 29 | 30 | // https://tailwindcss.com/docs/skew 31 | constant!(skew x 0); 32 | constant!(skew x 1); 33 | constant!(skew x 2); 34 | constant!(skew x 3); 35 | constant!(skew x 6); 36 | constant!(skew x 12); 37 | 38 | any!(skew x); 39 | 40 | constant!(skew y 0); 41 | constant!(skew y 1); 42 | constant!(skew y 2); 43 | constant!(skew y 3); 44 | constant!(skew y 6); 45 | constant!(skew y 12); 46 | 47 | any!(skew y); 48 | 49 | // https://tailwindcss.com/docs/transform-origin 50 | constant!(origin center); 51 | constant!(origin left); 52 | constant!(origin right); 53 | constant!(origin top); 54 | constant!(origin top left); 55 | constant!(origin top right); 56 | constant!(origin bottom); 57 | constant!(origin bottom left); 58 | constant!(origin bottom right); -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/transitions.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/transition-property 4 | constant!(transition none); 5 | constant!(transition all); 6 | constant!(transition); 7 | constant!(transition colors); 8 | constant!(transition opacity); 9 | constant!(transition shadow); 10 | constant!(transition transform); 11 | 12 | any!(transition); 13 | 14 | // https://tailwindcss.com/docs/transition-duration 15 | constant!(duration 0); 16 | constant!(duration 75); 17 | constant!(duration 100); 18 | constant!(duration 150); 19 | constant!(duration 200); 20 | constant!(duration 300); 21 | constant!(duration 500); 22 | constant!(duration 700); 23 | constant!(duration 1000); 24 | 25 | any!(duration); 26 | 27 | // https://tailwindcss.com/docs/transition-timing-function 28 | constant!(ease linear); 29 | constant!(ease in); 30 | constant!(ease out); 31 | constant!(ease in out); 32 | 33 | any!(ease); 34 | 35 | // https://tailwindcss.com/docs/transition-delay 36 | constant!(delay 0); 37 | constant!(delay 75); 38 | constant!(delay 100); 39 | constant!(delay 150); 40 | constant!(delay 200); 41 | constant!(delay 300); 42 | constant!(delay 500); 43 | constant!(delay 700); 44 | constant!(delay 1000); 45 | 46 | any!(delay); 47 | 48 | // https://tailwindcss.com/docs/animation 49 | constant!(animate none); 50 | constant!(animate spin); 51 | constant!(animate ping); 52 | constant!(animate pulse); 53 | constant!(animate bounce); 54 | 55 | /// motion-safe: 56 | pub fn motion_safe(v: &str) -> String { 57 | "motion-safe:".to_owned() + v 58 | } 59 | 60 | /// motion-reduce: 61 | pub fn motion_reduce(v: &str) -> String { 62 | "motion-reduce:".to_owned() + v 63 | } 64 | 65 | any!(animate); -------------------------------------------------------------------------------- /crates/dioxus-tailwindcss/src/typography.rs: -------------------------------------------------------------------------------- 1 | use crate::ext::*; 2 | 3 | // https://tailwindcss.com/docs/font-family 4 | constant!(font sans); 5 | constant!(font serif); 6 | constant!(font mono); 7 | 8 | any!(font); 9 | 10 | // https://tailwindcss.com/docs/font-size 11 | constant!(text xs); 12 | constant!(text sm); 13 | constant!(text base); 14 | constant!(text lg); 15 | constant!(text xl); 16 | constant!(text "2xl"); 17 | constant!(text "3xl"); 18 | constant!(text "4xl"); 19 | constant!(text "5xl"); 20 | constant!(text "6xl"); 21 | constant!(text "7xl"); 22 | constant!(text "8xl"); 23 | constant!(text "9xl"); 24 | 25 | // https://tailwindcss.com/docs/font-smoothing 26 | constant!(antialiased); 27 | constant!(subpixel antialiased); 28 | 29 | // https://tailwindcss.com/docs/font-style 30 | constant!(italic); 31 | constant!(not italic); 32 | 33 | // https://tailwindcss.com/docs/font-weight 34 | constant!(font thin); 35 | constant!(font extralight); 36 | constant!(font light); 37 | constant!(font normal); 38 | constant!(font medium); 39 | constant!(font semibold); 40 | constant!(font bold); 41 | constant!(font extrabold); 42 | constant!(font black); 43 | 44 | // https://tailwindcss.com/docs/font-variant-numeric 45 | constant!(normal nums); 46 | constant!(ordinal); 47 | constant!(slashed zero); 48 | constant!(lining nums); 49 | constant!(oldstyle nums); 50 | constant!(proportional nums); 51 | constant!(tabular nums); 52 | constant!(diagonal fractions); 53 | constant!(stacked fractions); 54 | 55 | // https://tailwindcss.com/docs/letter-spacing 56 | constant!(tracking tighter); 57 | constant!(tracking tight); 58 | constant!(tracking normal); 59 | constant!(tracking wide); 60 | constant!(tracking wider); 61 | constant!(tracking widest); 62 | 63 | any!(tracking); 64 | 65 | // https://tailwindcss.com/docs/line-clamp 66 | constant!(line clamp 1); 67 | constant!(line clamp 2); 68 | constant!(line clamp 3); 69 | constant!(line clamp 4); 70 | constant!(line clamp 5); 71 | constant!(line clamp 6); 72 | constant!(line clamp none); 73 | 74 | any!(line clamp); 75 | 76 | // https://tailwindcss.com/docs/line-height 77 | constant!(leading 3); 78 | constant!(leading 4); 79 | constant!(leading 5); 80 | constant!(leading 6); 81 | constant!(leading 7); 82 | constant!(leading 8); 83 | constant!(leading 9); 84 | constant!(leading 10); 85 | constant!(leading none); 86 | constant!(leading tight); 87 | constant!(leading snug); 88 | constant!(leading normal); 89 | constant!(leading relaxed); 90 | constant!(leading loose); 91 | 92 | any!(leading); 93 | 94 | // https://tailwindcss.com/docs/list-style-image 95 | constant!(list image none); 96 | 97 | // https://tailwindcss.com/docs/list-style-position 98 | constant!(list inside); 99 | constant!(list outside); 100 | 101 | // https://tailwindcss.com/docs/list-style-type 102 | constant!(list none); 103 | constant!(list disc); 104 | constant!(list decimal); 105 | 106 | any!(list); 107 | 108 | // https://tailwindcss.com/docs/text-align 109 | constant!(text left); 110 | constant!(text center); 111 | constant!(text right); 112 | constant!(text justify); 113 | constant!(text start); 114 | constant!(text end); 115 | 116 | // https://tailwindcss.com/docs/text-color 117 | colors!(text); 118 | 119 | /// {text}/{o} 120 | pub fn with_opacity(text: &str, o: u8) -> String { 121 | format!("{}/{}", text, o) 122 | } 123 | 124 | /// {text}/[{o}] 125 | pub fn with_opacity_scale(text: &str, o: f32) -> String { 126 | format!("{}/[{}]", text, o) 127 | } 128 | 129 | // https://tailwindcss.com/docs/text-decoration 130 | constant!(underline); 131 | constant!(overline); 132 | constant!(line through); 133 | constant!(no underline); 134 | 135 | // https://tailwindcss.com/docs/text-decoration-color 136 | colors!(decoration); 137 | 138 | // https://tailwindcss.com/docs/text-decoration-style 139 | constant!(decoration solid); 140 | constant!(decoration double); 141 | constant!(decoration dotted); 142 | constant!(decoration dashed); 143 | constant!(decoration wavy); 144 | 145 | // https://tailwindcss.com/docs/text-decoration-thickness 146 | constant!(decoration auto); 147 | constant!(decoration from font); 148 | constant!(decoration 0); 149 | constant!(decoration 1); 150 | constant!(decoration 2); 151 | constant!(decoration 4); 152 | constant!(decoration 8); 153 | 154 | // https://tailwindcss.com/docs/text-underline-offset 155 | constant!(underline offset auto); 156 | constant!(underline offset 0); 157 | constant!(underline offset 1); 158 | constant!(underline offset 2); 159 | constant!(underline offset 4); 160 | constant!(underline offset 8); 161 | 162 | any!(underline offset); 163 | 164 | // https://tailwindcss.com/docs/text-transform 165 | constant!(uppercase); 166 | constant!(lowercase); 167 | constant!(capitalize); 168 | constant!(normal case); 169 | 170 | // https://tailwindcss.com/docs/text-overflow 171 | constant!(truncate); 172 | constant!(text ellipsis); 173 | constant!(text clip); 174 | 175 | // https://tailwindcss.com/docs/text-wrap 176 | constant!(text wrap); 177 | constant!(text nowrap); 178 | constant!(text balance); 179 | constant!(text pretty); 180 | 181 | // https://tailwindcss.com/docs/text-indent 182 | size_0_to_96!(indent); 183 | 184 | // https://tailwindcss.com/docs/vertical-align 185 | constant!(align baseline); 186 | constant!(align top); 187 | constant!(align middle); 188 | constant!(align bottom); 189 | constant!(align text top); 190 | constant!(align text bottom); 191 | constant!(align sub); 192 | constant!(align super); 193 | 194 | any!(align); 195 | 196 | // https://tailwindcss.com/docs/whitespace 197 | constant!(whitespace normal); 198 | constant!(whitespace nowrap); 199 | constant!(whitespace pre); 200 | constant!(whitespace pre line); 201 | constant!(whitespace pre wrap); 202 | constant!(whitespace break spaces); 203 | 204 | // https://tailwindcss.com/docs/word-break 205 | constant!(break normal); 206 | constant!(break words); 207 | constant!(break all); 208 | constant!(break keep); 209 | 210 | // https://tailwindcss.com/docs/hyphens 211 | constant!(hyphens none); 212 | constant!(hyphens manual); 213 | constant!(hyphens auto); 214 | 215 | // https://tailwindcss.com/docs/content 216 | constant!(content none); 217 | 218 | any!(content); -------------------------------------------------------------------------------- /css.rs: -------------------------------------------------------------------------------- 1 | println!( 2 | "
", 3 | Class::from(vec![ 4 | String::from(card), 5 | String::from(card_compact), 6 | String::from(w_64), 7 | String::from(h_64), 8 | String::from(bg_base_300), 9 | String::from(shadow_xl), 10 | String::from(text_center), 11 | String::from(hover(bg_base_200)), 12 | String::from(hover(scale_105)) 13 | ]) 14 | ); 15 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 16 | println!("
"); 17 | println!( 18 | "
", 19 | Class::from(vec![String::from(text_8xl), String::from(py_10)]) 20 | ); 21 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 22 | println!("
"); 23 | println!( 24 | "
", 25 | Class::from(vec![ 26 | String::from(card_body), 27 | String::from(text_center), 28 | String::from(items_center) 29 | ]) 30 | ); 31 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 32 | println!("
"); 33 | println!( 34 | "
", 35 | Class::from(vec![ 36 | String::from(card_title), 37 | String::from(text_sm), 38 | String::from(text_base_content) 39 | ]) 40 | ); 41 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 42 | println!("
"); 43 | println!( 44 | "
", 45 | Class::from(vec![ 46 | String::from(flex), 47 | String::from(flex_row), 48 | String::from(flex_wrap), 49 | String::from(justify_center), 50 | String::from(gap_4), 51 | String::from(mx_2) 52 | ]) 53 | ); 54 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 55 | println!("
"); 56 | println!( 57 | "
", 58 | Class::from(vec![ 59 | String::from(w_80), 60 | String::from(h_12), 61 | String::from(text_2xl), 62 | String::from(m_4), 63 | String::from(px_2), 64 | String::from(input), 65 | String::from(input_primary), 66 | String::from(input_bordered) 67 | ]) 68 | ); 69 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 70 | println!("
"); 71 | println!( 72 | "
", 73 | Class::from(vec![ 74 | String::from(bottom_0), 75 | String::from(h_full), 76 | String::from(mt_20) 77 | ]) 78 | ); 79 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 80 | println!("
"); 81 | println!( 82 | "
", 83 | Class::from(vec![String::from(hidden)]) 84 | ); 85 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 86 | println!("
"); 87 | println!( 88 | "
", 89 | Class::from(vec![String::from(hidden)]) 90 | ); 91 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 92 | println!("
"); 93 | println!( 94 | "
", 95 | Class::from(vec![String::from(w_screen), String::from(h_screen)]) 96 | ); 97 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 98 | println!("
"); 99 | println!( 100 | "
", 101 | Class::from(vec![ 102 | String::from(fixed), 103 | String::from(top_0), 104 | String::from(w_full), 105 | String::from(z_10), 106 | String::from(bg_base_100), 107 | String::from(flex), 108 | String::from(justify_center) 109 | ]) 110 | ); 111 | println!("{}:{}", "crates/dioxus-css/src/css.rs", 39u32); 112 | println!("
"); 113 | -------------------------------------------------------------------------------- /demo/emoji-browser/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /demo/emoji-browser/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | publish = false 3 | version = "0.0.0" 4 | name = "emoji-browser" 5 | edition = "2021" 6 | 7 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 8 | 9 | [lib] 10 | doctest = false 11 | 12 | [features] 13 | 14 | default = [ 15 | "web", 16 | ] 17 | 18 | web = [ 19 | "dioxus/web", 20 | "dioxus/router", 21 | ] 22 | 23 | build-classes = [ 24 | "dioxus-daisyui/build-classes", 25 | ] 26 | 27 | [build-dependencies] 28 | dioxus-daisyui = { workspace = true } 29 | 30 | [dependencies] 31 | dioxus-daisyui = { workspace = true } 32 | 33 | dioxus = { workspace = true } 34 | 35 | lazy_static = { workspace = true } 36 | 37 | emojic = { path = "../../external/emojic", features = [ "alloc" ] } 38 | 39 | simsearch = { workspace = true } 40 | 41 | wasm-logger = "0.2.0" 42 | log = "0.4.22" 43 | dioxus-logger = "0.6.0" 44 | console_error_panic_hook = "0.1.7" 45 | -------------------------------------------------------------------------------- /demo/emoji-browser/Dioxus.toml: -------------------------------------------------------------------------------- 1 | [application] 2 | name = "dioxus-class-demo" 3 | default_platform = "web" 4 | out_dir = "dist" 5 | asset_dir = "assets" 6 | 7 | [web.app] 8 | title = "Emoji Browser" 9 | 10 | [web.watcher] 11 | watch_path = ["src", "assets"] 12 | reload_html = true 13 | 14 | index_on_404 = true 15 | 16 | # include `assets` in web platform 17 | [web.resource] 18 | 19 | # CSS style file 20 | style = ["assets/css/tailwind.css"] 21 | 22 | # Javascript code file 23 | script = [] 24 | 25 | [web.resource.dev] 26 | # serve: [dev-server] only 27 | 28 | # [application.tools] 29 | 30 | # use binaryen.wasm-opt for output Wasm file 31 | # binaryen just will trigger in `web` platform 32 | # binaryen = { wasm_opt = true } 33 | -------------------------------------------------------------------------------- /demo/emoji-browser/README.md: -------------------------------------------------------------------------------- 1 | ## Emoji Browser 2 | 3 | Open web app in new tab 4 | 5 | Search emoji by shortcode, built as demo project. 6 | -------------------------------------------------------------------------------- /demo/emoji-browser/build.rs: -------------------------------------------------------------------------------- 1 | use std::env; 2 | use std::path::Path; 3 | use dioxus_daisyui::build::*; 4 | 5 | fn main() -> Result<(), Box> { 6 | println!("cargo:rerun-if-changed=css/classes.rs"); 7 | let current_dir = env::current_dir()?; 8 | let css_dir = Path::new(¤t_dir).join("css"); 9 | let classes_path = Path::new(&css_dir).join("classes.rs"); 10 | check_classes(classes_path) 11 | } -------------------------------------------------------------------------------- /demo/emoji-browser/classes.rs: -------------------------------------------------------------------------------- 1 | vec![ 2 | 3 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(76551) } 4 | card card_compact w_64 h_64 bg_base_300 shadow_xl text_center hover (bg_base_200) hover (scale_105) 5 | */ 6 | Class :: from (vec ! [String :: from (card) , String :: from (card_compact) , String :: from (w_64) , String :: from (h_64) , String :: from (bg_base_300) , String :: from (shadow_xl) , String :: from (text_center) , String :: from (hover (bg_base_200)) , String :: from (hover (scale_105))]), 7 | 8 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(76556) } 9 | text_8xl py_10 10 | */ 11 | Class :: from (vec ! [String :: from (text_8xl) , String :: from (py_10)]), 12 | 13 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(76561) } 14 | card_body text_center items_center 15 | */ 16 | Class :: from (vec ! [String :: from (card_body) , String :: from (text_center) , String :: from (items_center)]), 17 | 18 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(76566) } 19 | card_title text_sm text_base_content 20 | */ 21 | Class :: from (vec ! [String :: from (card_title) , String :: from (text_sm) , String :: from (text_base_content)]), 22 | 23 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(111736) } 24 | card card_compact w_64 h_64 bg_base_300 shadow_xl text_center hover (bg_base_200) hover (scale_105) 25 | */ 26 | Class :: from (vec ! [String :: from (card) , String :: from (card_compact) , String :: from (w_64) , String :: from (h_64) , String :: from (bg_base_300) , String :: from (shadow_xl) , String :: from (text_center) , String :: from (hover (bg_base_200)) , String :: from (hover (scale_105))]), 27 | 28 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(111741) } 29 | text_8xl py_10 30 | */ 31 | Class :: from (vec ! [String :: from (text_8xl) , String :: from (py_10)]), 32 | 33 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(111746) } 34 | card_body text_center items_center 35 | */ 36 | Class :: from (vec ! [String :: from (card_body) , String :: from (text_center) , String :: from (items_center)]), 37 | 38 | /* SpanData { range: 435..440, anchor: SpanAnchor(FileId(4108), 7), ctx: SyntaxContextId(111751) } 39 | card_title text_sm text_base_content 40 | */ 41 | Class :: from (vec ! [String :: from (card_title) , String :: from (text_sm) , String :: from (text_base_content)]), 42 | 43 | -------------------------------------------------------------------------------- /demo/emoji-browser/css/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | 132 | gen/ 133 | -------------------------------------------------------------------------------- /demo/emoji-browser/css/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | publish = false 3 | version = "0.0.0" 4 | name = "emoji-browser-css" 5 | edition = "2021" 6 | 7 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 8 | 9 | [features] 10 | 11 | [build-dependencies] 12 | dioxus-daisyui = { workspace = true } 13 | 14 | [dependencies] -------------------------------------------------------------------------------- /demo/emoji-browser/css/build.rs: -------------------------------------------------------------------------------- 1 | use std::env; 2 | use std::path::Path; 3 | 4 | use dioxus_daisyui::build::*; 5 | use dioxus_daisyui::prelude::*; 6 | 7 | fn main() -> Result<(), Box> { 8 | println!("cargo:rerun-if-changed=classes.rs"); 9 | // let out_dir = env::var_os("OUT_DIR").unwrap(); 10 | let current_dir = env::current_dir()?; 11 | 12 | let classes_path = Path::new(¤t_dir).join("classes.html"); 13 | let classes = include!("classes.rs"); 14 | generate_classes(classes_path, classes)?; 15 | 16 | npx_tailwindcss(current_dir, "tailwind.input.css", "../assets/css/tailwind.css") 17 | } -------------------------------------------------------------------------------- /demo/emoji-browser/css/classes.html: -------------------------------------------------------------------------------- 1 |
card card-compact w-64 h-64 bg-base-300 shadow-xl text-center hover:bg-base-200 hover:scale-105
2 |
text-8xl py-10
3 |
card-body text-center items-center
4 |
card-title text-sm text-base-content
5 |
flex flex-row flex-wrap justify-center gap-4 mx-2
6 |
w-80 h-12 text-2xl m-4 px-2 input input-primary input-bordered
7 |
bottom-0 h-full mt-20
8 | 9 | 10 |
w-screen h-screen
11 |
fixed top-0 w-full z-10 bg-base-100 flex justify-center
12 | -------------------------------------------------------------------------------- /demo/emoji-browser/css/classes.rs: -------------------------------------------------------------------------------- 1 | vec![ 2 | 3 | /* #295 bytes(434..539) 4 | class!(card card_compact w_64 h_64 bg_base_300 shadow_xl text_center hover(bg_base_200) hover(scale_105)) 5 | */ 6 | Class :: 7 | from(vec! 8 | [String :: from(card), String :: from(card_compact), String :: from(w_64), 9 | String :: from(h_64), String :: from(bg_base_300), String :: from(shadow_xl), 10 | String :: from(text_center), String :: from(hover(bg_base_200)), String :: 11 | from(hover(scale_105))]), 12 | 13 | /* #299 bytes(582..604) 14 | class!(text_8xl py_10) 15 | */ 16 | Class :: from(vec! [String :: from(text_8xl), String :: from(py_10)]), 17 | 18 | /* #303 bytes(689..731) 19 | class!(card_body text_center items_center) 20 | */ 21 | Class :: 22 | from(vec! 23 | [String :: from(card_body), String :: from(text_center), String :: 24 | from(items_center)]), 25 | 26 | /* #307 bytes(782..826) 27 | class!(card_title text_sm text_base_content) 28 | */ 29 | Class :: 30 | from(vec! 31 | [String :: from(card_title), String :: from(text_sm), String :: 32 | from(text_base_content)]), 33 | 34 | /* #337 bytes(1067..1124) 35 | class!(flex flex_row flex_wrap justify_center gap_4 mx_2) 36 | */ 37 | Class :: 38 | from(vec! 39 | [String :: from(flex), String :: from(flex_row), String :: from(flex_wrap), 40 | String :: from(justify_center), String :: from(gap_4), String :: from(mx_2)]), 41 | 42 | /* #370 bytes(1376..1446) 43 | class!(w_80 h_12 text_2xl m_4 px_2 input input_primary input_bordered) 44 | */ 45 | Class :: 46 | from(vec! 47 | [String :: from(w_80), String :: from(h_12), String :: from(text_2xl), String 48 | :: from(m_4), String :: from(px_2), String :: from(input), String :: 49 | from(input_primary), String :: from(input_bordered)]), 50 | 51 | /* #377 bytes(2028..2057) 52 | class!(bottom_0 h_full mt_20) 53 | */ 54 | Class :: 55 | from(vec! 56 | [String :: from(bottom_0), String :: from(h_full), String :: from(mt_20)]), 57 | 58 | /* #381 bytes(2101..2115) 59 | class!(hidden) 60 | */ 61 | Class :: from(vec! [String :: from(hidden)]), 62 | 63 | /* #385 bytes(2186..2200) 64 | class!(hidden) 65 | */ 66 | Class :: from(vec! [String :: from(hidden)]), 67 | 68 | /* #468 bytes(2269..2294) 69 | class!(w_screen h_screen) 70 | */ 71 | Class :: from(vec! [String :: from(w_screen), String :: from(h_screen)]), 72 | 73 | /* #472 bytes(2337..2400) 74 | class!(fixed top_0 w_full z_10 bg_base_100 flex justify_center) 75 | */ 76 | Class :: 77 | from(vec! 78 | [String :: from(fixed), String :: from(top_0), String :: from(w_full), String 79 | :: from(z_10), String :: from(bg_base_100), String :: from(flex), String :: 80 | from(justify_center)]), 81 | 82 | ] 83 | -------------------------------------------------------------------------------- /demo/emoji-browser/css/justfile: -------------------------------------------------------------------------------- 1 | build: 2 | cargo build 3 | 4 | npm-install: 5 | npm install 6 | 7 | -------------------------------------------------------------------------------- /demo/emoji-browser/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "dependencies": { 11 | "daisyui": "^2.50.2" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /demo/emoji-browser/css/src/lib.rs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edger-dev/dioxus-class/aab2bf65bf2db5c2a6014b0059afd769fda8f171/demo/emoji-browser/css/src/lib.rs -------------------------------------------------------------------------------- /demo/emoji-browser/css/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "*.html", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [ 10 | require("daisyui") 11 | ], 12 | } 13 | -------------------------------------------------------------------------------- /demo/emoji-browser/css/tailwind.input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /demo/emoji-browser/justfile: -------------------------------------------------------------------------------- 1 | serve: 2 | dx serve 3 | 4 | release: 5 | dx build --release 6 | 7 | npm-install: 8 | cd css && npm install 9 | 10 | build-classes: 11 | DIOXUS_CLASS_BUILD_PATH="$PWD/css/classes.rs" cargo test --features "web build-classes" 12 | cargo build 13 | cd css && cargo build 14 | 15 | clear-buffer: 16 | echo -e -n "\\0033c" && tmux clear-history 17 | 18 | watch-classes: 19 | cargo watch -w src/ -s "just clear-buffer && cargo rustc --lib -- -Awarnings && just build-classes" 20 | -------------------------------------------------------------------------------- /demo/emoji-browser/src/app.rs: -------------------------------------------------------------------------------- 1 | #![allow(non_snake_case)] 2 | 3 | use dioxus::prelude::*; 4 | use lazy_static::lazy_static; 5 | use simsearch::SimSearch; 6 | 7 | use crate::components::emoji_card; 8 | use crate::pages::*; 9 | 10 | lazy_static! { 11 | pub static ref SEARCH: SimSearch = { 12 | let mut engine: SimSearch = SimSearch::new(); 13 | for emoji in all_emojis().iter() { 14 | engine.insert(emoji.clone(), emoji.alias); 15 | } 16 | engine 17 | }; 18 | } 19 | 20 | pub fn filter_emojis(input: &str) -> Vec { 21 | SEARCH.search(input) 22 | } 23 | 24 | pub fn all_emojis() -> Vec { 25 | let mut result = vec![]; 26 | for (alias, emoji) in emojic::alias::GEMOJI_MAP.iter() { 27 | result.push(emoji_card::Props { 28 | alias: alias, 29 | value: emoji.grapheme, 30 | }) 31 | } 32 | result 33 | } 34 | 35 | pub static EMOJIS: GlobalSignal> = Signal::global(|| all_emojis()); 36 | pub static FILTER: GlobalSignal = Signal::global(|| String::new()); 37 | 38 | #[derive(Routable, PartialEq, Debug, Clone)] 39 | pub enum Route { 40 | #[route("/")] 41 | Home {}, 42 | } 43 | 44 | pub fn App() -> Element { 45 | rsx!{ 46 | Router:: {} 47 | } 48 | } -------------------------------------------------------------------------------- /demo/emoji-browser/src/components/emoji_card.rs: -------------------------------------------------------------------------------- 1 | use dioxus::prelude::*; 2 | use dioxus_daisyui::prelude::*; 3 | 4 | #[derive(Props, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)] 5 | pub struct Props { 6 | pub alias: &'static str, 7 | pub value: &'static str, 8 | } 9 | 10 | #[component] 11 | pub fn view(alias: &'static str, value: &'static str) -> Element { 12 | rsx! { 13 | div { 14 | class: class!(card card_compact w_64 h_64 bg_base_300 shadow_xl text_center hover(bg_base_200) hover(scale_105)), 15 | div { 16 | class: class!(text_8xl py_10), 17 | "{value}", 18 | }, 19 | div { 20 | class: class!(card_body text_center items_center), 21 | div { 22 | class: class!(card_title text_sm text_base_content), 23 | "{alias}", 24 | } 25 | } 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /demo/emoji-browser/src/components/emoji_grid.rs: -------------------------------------------------------------------------------- 1 | use dioxus::prelude::*; 2 | use dioxus_daisyui::prelude::*; 3 | 4 | #[component] 5 | pub fn view(children: Element) -> Element { 6 | rsx! { 7 | div { 8 | class: class!(flex flex_row flex_wrap justify_center gap_4 mx_2), 9 | { children } 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /demo/emoji-browser/src/components/emoji_search.rs: -------------------------------------------------------------------------------- 1 | use dioxus::prelude::*; 2 | use dioxus_daisyui::prelude::*; 3 | 4 | use crate::app; 5 | 6 | #[component] 7 | pub fn view(value: &'static str) -> Element { 8 | rsx! { 9 | input { 10 | r#type: "text", 11 | class: class!(w_80 h_12 text_2xl m_4 px_2 input input_primary input_bordered), 12 | placeholder: "Type to search", 13 | oninput: move | evt | { 14 | *app::FILTER.write() = evt.value().clone(); 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /demo/emoji-browser/src/components/mod.rs: -------------------------------------------------------------------------------- 1 | pub mod emoji_card; 2 | pub mod emoji_grid; 3 | pub mod emoji_search; 4 | -------------------------------------------------------------------------------- /demo/emoji-browser/src/lib.rs: -------------------------------------------------------------------------------- 1 | pub mod components; 2 | pub mod pages; 3 | pub mod app; -------------------------------------------------------------------------------- /demo/emoji-browser/src/main.rs: -------------------------------------------------------------------------------- 1 | use dioxus::prelude::*; 2 | use emoji_browser::app::App; 3 | 4 | fn main() { 5 | #[cfg(target_arch = "wasm32")] 6 | console_error_panic_hook::set_once(); 7 | 8 | launch(App); 9 | } -------------------------------------------------------------------------------- /demo/emoji-browser/src/pages/home.rs: -------------------------------------------------------------------------------- 1 | use dioxus::prelude::*; 2 | 3 | use dioxus_daisyui::prelude::*; 4 | 5 | use crate::components::*; 6 | use crate::app; 7 | 8 | #[component] 9 | pub fn Home() -> Element { 10 | let all: &Vec = &app::EMOJIS(); 11 | let filter: &str = &app::FILTER(); 12 | let filtered = if filter.len() == 0 { 13 | Vec::new() 14 | } else { 15 | app::filter_emojis(filter) 16 | }; 17 | let shared_class = class!(bottom_0 h_full mt_20); 18 | let all_class = if filter.len() > 0 { class!(hidden) } else { Class::NONE }; 19 | let filter_class = if filter.len() == 0 { class!(hidden) } else { Class::NONE }; 20 | rsx! { 21 | div { 22 | class: class!(w_screen h_screen), 23 | div { 24 | class: class!(fixed top_0 w_full z_10 bg_base_100 flex justify_center), 25 | emoji_search::view { 26 | value: "", 27 | } 28 | } 29 | div { 30 | class: all_class + &shared_class, 31 | emoji_grid::view { 32 | for emoji in all { 33 | emoji_card::view { 34 | alias: emoji.alias, 35 | value: emoji.value, 36 | } 37 | } 38 | } 39 | } 40 | div { 41 | class: filter_class + &shared_class, 42 | emoji_grid::view { 43 | for emoji in filtered { 44 | emoji_card::view { 45 | alias: emoji.alias, 46 | value: emoji.value, 47 | } 48 | } 49 | } 50 | } 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /demo/emoji-browser/src/pages/mod.rs: -------------------------------------------------------------------------------- 1 | pub mod home; 2 | 3 | pub use home::Home; -------------------------------------------------------------------------------- /flake.lock: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": { 3 | "fenix": { 4 | "inputs": { 5 | "nixpkgs": [ 6 | "nixpkgs" 7 | ], 8 | "rust-analyzer-src": "rust-analyzer-src" 9 | }, 10 | "locked": { 11 | "lastModified": 1711779695, 12 | "narHash": "sha256-iGb6ptUaNBOCftKnNJiWT5z1ftngfNtwqJkD8Z9Vwfw=", 13 | "owner": "nix-community", 14 | "repo": "fenix", 15 | "rev": "aaeaf4574767a0f5ed1787e990139aefcf4db103", 16 | "type": "github" 17 | }, 18 | "original": { 19 | "owner": "nix-community", 20 | "repo": "fenix", 21 | "type": "github" 22 | } 23 | }, 24 | "flake-utils": { 25 | "inputs": { 26 | "systems": "systems" 27 | }, 28 | "locked": { 29 | "lastModified": 1710146030, 30 | "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=", 31 | "owner": "numtide", 32 | "repo": "flake-utils", 33 | "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a", 34 | "type": "github" 35 | }, 36 | "original": { 37 | "owner": "numtide", 38 | "repo": "flake-utils", 39 | "type": "github" 40 | } 41 | }, 42 | "nixpkgs": { 43 | "locked": { 44 | "lastModified": 1711715736, 45 | "narHash": "sha256-9slQ609YqT9bT/MNX9+5k5jltL9zgpn36DpFB7TkttM=", 46 | "owner": "NixOS", 47 | "repo": "nixpkgs", 48 | "rev": "807c549feabce7eddbf259dbdcec9e0600a0660d", 49 | "type": "github" 50 | }, 51 | "original": { 52 | "owner": "NixOS", 53 | "ref": "nixpkgs-unstable", 54 | "repo": "nixpkgs", 55 | "type": "github" 56 | } 57 | }, 58 | "root": { 59 | "inputs": { 60 | "fenix": "fenix", 61 | "flake-utils": "flake-utils", 62 | "nixpkgs": "nixpkgs" 63 | } 64 | }, 65 | "rust-analyzer-src": { 66 | "flake": false, 67 | "locked": { 68 | "lastModified": 1711731711, 69 | "narHash": "sha256-dyezzeSbWMpflma+E9USmvSxuLgGcNGcGw3cOnX36ko=", 70 | "owner": "rust-lang", 71 | "repo": "rust-analyzer", 72 | "rev": "f5a9250147f6569d8d89334dc9cca79c0322729f", 73 | "type": "github" 74 | }, 75 | "original": { 76 | "owner": "rust-lang", 77 | "ref": "nightly", 78 | "repo": "rust-analyzer", 79 | "type": "github" 80 | } 81 | }, 82 | "systems": { 83 | "locked": { 84 | "lastModified": 1681028828, 85 | "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=", 86 | "owner": "nix-systems", 87 | "repo": "default", 88 | "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e", 89 | "type": "github" 90 | }, 91 | "original": { 92 | "owner": "nix-systems", 93 | "repo": "default", 94 | "type": "github" 95 | } 96 | } 97 | }, 98 | "root": "root", 99 | "version": 7 100 | } 101 | -------------------------------------------------------------------------------- /flake.nix: -------------------------------------------------------------------------------- 1 | { 2 | description = "amateurguitar toolbox"; 3 | 4 | inputs = { 5 | nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable"; 6 | flake-utils.url = "github:numtide/flake-utils"; 7 | fenix = { 8 | url = "github:nix-community/fenix"; 9 | inputs.nixpkgs.follows = "nixpkgs"; 10 | }; 11 | }; 12 | 13 | outputs = { self, nixpkgs, flake-utils, fenix, ... }: 14 | flake-utils.lib.eachDefaultSystem (system: 15 | let 16 | overlays = [ fenix.overlays.default ]; 17 | pkgs = import nixpkgs { 18 | inherit system overlays; 19 | }; 20 | toolchain = fenix.packages.${system}.combine [ 21 | fenix.packages.${system}.stable.rustc 22 | fenix.packages.${system}.stable.cargo 23 | fenix.packages.${system}.targets.wasm32-unknown-unknown.stable.rust-std 24 | ]; 25 | in with pkgs; { 26 | devShell = mkShell { 27 | buildInputs = [ 28 | # rust toolchain 29 | toolchain 30 | # rust native lib 31 | pkg-config 32 | openssl 33 | # utility 34 | just 35 | simple-http-server 36 | # tailwindcss 37 | # node tools 38 | nodejs 39 | nodePackages.npm 40 | nodePackages.tailwindcss 41 | ]; 42 | shellHook = '' 43 | alias c=cargo 44 | ''; 45 | }; 46 | } 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /justfile: -------------------------------------------------------------------------------- 1 | build: 2 | cargo build 3 | 4 | publish-all: 5 | cd crates/dioxus-class-internal && cargo publish 6 | cd crates/dioxus-class-macro && cargo publish 7 | cd crates/dioxus-class && cargo publish 8 | cd crates/dioxus-tailwindcss && cargo publish 9 | cd crates/dioxus-daisyui && cargo publish 10 | 11 | build-doc: 12 | cargo doc --no-deps 13 | 14 | serve-doc: 15 | simple-http-server -p 8001 --index --nocache target/doc 16 | 17 | install-dioxus-cli: 18 | cargo install dioxus-cli 19 | 20 | 21 | --------------------------------------------------------------------------------