Bevy 0.14

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tomt_bevycss"
-version = "0.7.0"
+version = "0.8.0"
 edition = "2021"
 authors = ["TheBeardedQuack", "Tome of Many Things"]
 categories = ["game-development", "gui", "web-programming"]
@@ -20,20 +20,21 @@ pseudo_class = ["monitor_changes"]
 pseudo_prop = ["pseudo_class"]
 
 [dependencies]
-bevy = { version = "0.13.2", default-features = false, features = [
+bevy = { version = "0.14.0", default-features = false, features = [
     "bevy_ui",
     "bevy_asset",
     "bevy_text",
     "bevy_render",
 ] }
 smallvec = { version = "1.13.2", features = ["serde", "union", "const_generics"] }
 cssparser = "0.34.0"
+thiserror = "1.0.63"
 
 [dev-dependencies]
-bevy_editor_pls = "0.8.1"
+bevy_editor_pls = "0.9.0"
 
 [target.'cfg(not(target_arch = "wasm32"))'.dev-dependencies]
-bevy = { version = "0.13.2", features = [
+bevy = { version = "0.14.0", features = [
     "bevy_ui",
     "bevy_asset",
     "bevy_text",
@@ -45,10 +46,6 @@ bevy = { version = "0.13.2", features = [
 name = "simple_ui"
 path = "examples/simple_ui.rs"
 
-[[example]]
-name = "hot_reload"
-path = "examples/hot_reload.rs"
-
 [[example]]
 name = "stress_test"
 path = "examples/stress_test.rs"

README.md

@@ -138,6 +138,21 @@ This crate marks the first public release from both Tome of Many Things.
         </ul></li>
     </ul></td>
 </tr>
+<tr>
+    <td>0.8.0</td>
+    <td><ul>
+        <li>Features<ul>
+            <li>Support for `border-radius` and `border-color` properties</li>
+            <li>Renamed `border` to `border-width`</li>
+            <li>Hot reload no longer requires `BevyCssPlugin::with_hot_reload()`. It is now automatically active when the Bevy feature `file_watcher` is enabled.</li>
+        </ul></li>
+        <li>Dependencies<ul>
+            <li>bevy - Updated to 0.14.0</li>
+            <li>bevy_editor_pls - Updated to 0.9.0</li>
+            <li>thiserror - Added (1.0.63)</li>
+        </ul></li>
+    </ul></td>
+</tr>
 </table>
 
 ### Future Goals
@@ -216,16 +231,16 @@ See [Custom Properties][27] (docs/custom-properties.md) for more information.
 
 
 # Bevy support table
-| bevy  | tomt_bevycss |
-|:-----:|:------------:|
-|  0.8  |     0.1      |
-|  0.9  |     0.2      |
-| 0.10  |     0.3      |
-| 0.10  |    0.4.x     |
-| 0.11  |    0.5.x     |
-| 0.12  |    0.6.x     |
-| 0.13  |    0.7.x     |
-
+| bevy | tomt_bevycss |
+|:----:|:------------:|
+| 0.8  |     0.1      |
+| 0.9  |     0.2      |
+| 0.10 |     0.3      |
+| 0.10 |    0.4.x     |
+| 0.11 |    0.5.x     |
+| 0.12 |    0.6.x     |
+| 0.13 |    0.7.x     |
+| 0.14 |    0.8.x     |
 
 # Contributing
 

assets/sheets/alpha.css

@@ -1,3 +1,12 @@
-background-color {
-    alpha: 0.4;
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: #0018ff;
+    alpha: 0.15;
+}
+
+.logo {
+    width: 200px;
+    height: 200px;
+    alpha: 0.5;
 }

assets/sheets/dark_theme.css

@@ -4,7 +4,7 @@
 
 #left-border {
     margin: 0px;
-    border: 0px;
+    border-width: 0px;
     padding: 5px;
     background-color: #353535;
 }

assets/sheets/example.css

@@ -36,7 +36,7 @@ button text {
 .active.hovered {
     margin: 2px 5px 4% 3px;
     padding: 10px;
-    border: 2px;
+    border-width: 2px;
 }
 
 .active .not_hovered {

assets/sheets/light_theme.css

@@ -4,7 +4,7 @@
 
 #left-border {
     margin: 0px;
-    border: 0px;
+    border-width: 0px;
     padding: 5px;
     background-color: #dddddd;
 }

assets/sheets/menu.css

@@ -1,7 +1,7 @@
 text {
     color: black;
     font-size: 16.0;
-    font: "fonts/FiraSans-Bold.ttf"
+    font: "fonts/FiraSans-Bold.ttf";
 }
 
 .main-menu {
@@ -18,6 +18,14 @@ text {
     background-color: grey;
     size: 300px, 50px;
     margin: 10px;
+    border-width: 2.5px;
+    border-radius: 10px;
+    border-color: grey;
+    padding: 0px 10px 0px 10px;
+}
+
+.main-menu button:hover {
+    border-color: cyan;
 }
 
 button:hover text {

assets/sheets/simple_ui.css

@@ -4,7 +4,7 @@
 
 #left-border {
     margin: 0px 0px 0px 50px;
-    border: 0px;
+    border-width: 0px;
     padding: 5px;
     background-color: #000000;
 }

assets/sheets/test.css

@@ -4,7 +4,7 @@
 
 #left-border {
     margin: 0px 0px 0px 50px;
-    border: 0px;
+    border-width: 0px;
     padding: 5px;
     background-color: gray;
 }
@@ -25,4 +25,4 @@
 
 .container .blue-bg {
     background-color: #ff00FF10;
-} 
+}

docs/css-support.md

@@ -83,7 +83,7 @@ Note that these are properties which are provived by TOMT_BevyCSS but you can al
 ### [`Style`][5] Properties
 
 |     Property      |                                            Values                                             | Description                                                                                                                  |
-| :---------------: | :-------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------|
+|:-----------------:| :-------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------|
 |     `display`     |                                       `flex` \| `none`                                        | Applies the  `display`         property on [`display`][20]         field of all sections on matched [`Style`][5] components. |
 |  `position-type`  |                                   `absolute` \| `relative`                                    | Applies the  `position-type`   property on [`position_type`][21]   field of all sections on matched [`Style`][5] components. |
 |    `direction`    |                        `inherit` \| `left-to-right` \| `right-to-left`                        | Applies the  `direction`       property on [`direction`][22]       field of all sections on matched [`Style`][5] components. |
@@ -124,10 +124,11 @@ Note that these are properties which are provived by TOMT_BevyCSS but you can al
 
 ### Component Properties
 
-|      Property      |           Values                             |             Description                                                   |
-| :----------------: | :------------------------------------------: | :------------------------------------------------------------------------ |
-| `background-color` | [`named-colors`][103] \| [`hex_colors`][104] | Applies the property on [`BackgroundColor`][1] of all matched components. |
-
+|      Property      |                                Values                                | Description                                                               |
+|:------------------:|:--------------------------------------------------------------------:|:--------------------------------------------------------------------------|
+| `background-color` |             [`named-colors`][103] \| [`hex_colors`][104]             | Applies the property on [`BackgroundColor`][1] of all matched components. |
+|  `border-radius`   |                         <`area-short-hand`>                          | Applies the property on [`BorderRadius`][9] of all matched components.    |
+|   `border-color`   |             [`named-colors`][103] \| [`hex_colors`][104]             | Applies the property on [`BorderColor`][10] of all matched components.    |
 
 [1]: https://docs.rs/bevy/latest/bevy/prelude/struct.BackgroundColor.html
 [2]: https://docs.rs/bevy/latest/bevy/text/struct.Text.html
@@ -137,6 +138,8 @@ Note that these are properties which are provived by TOMT_BevyCSS but you can al
 [6]: https://docs.rs/bevy/latest/bevy/prelude/struct.UiImage.html
 [7]: https://docs.rs/bevy/latest/bevy/prelude/enum.Interaction.html
 [8]: https://docs.rs/bevy/latest/bevy/core/struct.Name.html
+[9]: https://docs.rs/bevy/latest/bevy/prelude/struct.BorderRadius.html
+[10]: https://docs.rs/bevy/latest/bevy/prelude/struct.BorderColor.html
 
 [20]: https://docs.rs/bevy/latest/bevy/prelude/struct.Style.html#structfield.display
 [21]: https://docs.rs/bevy/latest/bevy/prelude/struct.Style.html#structfield.position_type

docs/custom-components.md

@@ -18,7 +18,7 @@ struct FancyColor;
 fn some_main() {
     let mut app = App::new();
 
-    app.add_plugins(DefaultPlugins).add_plugin(BevyCssPlugin::default());
+    app.add_plugins(DefaultPlugins).add_plugin(BevyCssPlugin);
 
     // Register your own custom selector:
     // fancy-pants {

docs/custom-properties.md

@@ -19,9 +19,14 @@ impl Property for AlphaProperty {
     // This is the cached value to be used when applying the property value.
     // It is evaluated only on the first time and futures runs are cached for performance reasons.
     type Cache = f32;
+
     // Which components the property needs when applying the cached value.
     // It is the same as using bevy_ecs Query<C, F>.
-    type Components = &'static mut BackgroundColor;
+    type Components = (
+        Option<&'static mut BackgroundColor>,
+        Option<&'static mut UiImage>,
+    );
+
     // If this property can be set only when there is another property, it's possible to filter here.
     // It's not recommended to use only With<> and Without<>.
     type Filters = ();
@@ -43,11 +48,15 @@ impl Property for AlphaProperty {
     // This function will be called for every entity matched on every rule selector.
     fn apply<'w>(
         cache: &Self::Cache,
-        mut components: QueryItem<Self::Components>,
+        (bg, img): QueryItem<Self::Components>,
         _asset_server: &AssetServer,
         _commands: &mut Commands,
     ) {
-        components.0.set_a(*cache);
+        if let Some(mut img) = img {
+            img.color.set_alpha(*cache);
+        } else if let Some(mut bg) = bg {
+            bg.0.set_alpha(*cache);
+        }
     }
 }
 ```

docs/hot-reload.md

@@ -0,0 +1,8 @@
+# Hot Reload
+TOMT_bevycss supports hot reloading of CSS files. Enable the `file_watcher` feature in Bevy.
+
+```toml
+bevy = { version = "0.14", features = ["default", "file_watcher"] }
+```
+
+Once this feature is enabled, any changes made to a CSS file will be applied immediately, without needing to restart your game.

examples/alpha.rs

@@ -4,12 +4,13 @@ use bevy::{
 };
 use tomt_bevycss::prelude::*;
 
+// Whenever a StyleSheet is loaded, it'll be applied automatically
 fn main(
     // no args
 ) {
     let mut app = App::new();
     app.add_plugins(DefaultPlugins)
-        .add_plugins(BevyCssPlugin::default())
+        .add_plugins(BevyCssPlugin)
         .add_systems(Startup, setup);
 
     app.register_property::<AlphaProperty>();
@@ -46,7 +47,11 @@ fn setup(
                 },
                 image: asset_server.load("branding/bevy_logo_dark_big.png").into(),
                 ..default()
-            });
+            })
+            .insert(Class::new("logo"));
+
+            // box
+            parent.spawn(NodeBundle::default()).insert(Class::new("box"));
         });
 }
 
@@ -61,7 +66,10 @@ for AlphaProperty
     type Cache = f32;
 
     // Which components we need when applying the cache. It is the same as using bevy ecs Query.
-    type Components = &'static mut BackgroundColor;
+    type Components = (
+        Option<&'static mut BackgroundColor>,
+        Option<&'static mut UiImage>,
+    );
 
     // If this property can be set only when there is another property, we may filter there.
     // It's not recommended to use only With<> and Without<>.
@@ -87,10 +95,14 @@ for AlphaProperty
 
     fn apply<'w>(
         cache: &Self::Cache,
-        mut components: QueryItem<Self::Components>,
+        (bg, img): QueryItem<Self::Components>,
         _asset_server: &AssetServer,
         _commands: &mut Commands,
     ) {
-        components.0.set_a(*cache);
+        if let Some(mut img) = img {
+            img.color.set_alpha(*cache);
+        } else if let Some(mut bg) = bg {
+            bg.0.set_alpha(*cache);
+        }
     }
 }