~eanyanwu/toph

7457570f9f6a6c7f10d9605b853883cdd90c55e3 — Eze 3 months ago 312e936
Fixed the variable cascade in the stack component

Turns out the use of custom variables works out after all. You just
need to be careful if you are using those variables in rulesets for
child selectors
4 files changed, 20 insertions(+), 41 deletions(-)

M components.html
M src/component.rs
M src/lib.rs
M src/node.rs
M components.html => components.html +3 -21
@@ 7,7 7,7 @@ button {
}</style><style>.card { padding: 1rem; border: 5px solid black; }</style><style>.t-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-cluster-gap-4145495461);
  gap: var(--t-cluster-gap);
  justify-content: flex-start;
  align-items: center;
}


@@ 22,29 22,11 @@ button {
}

.t-stack>*+* {
  margin-block-start: var(--t-stack-space-2737476295);
  margin-block-start: var(--t-stack-space);
}

.t-stack:only-child {
  block-size: 100%;
}

</style><style>.t-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.t-stack>* {
  margin-block: 0;
}

.t-stack>*+* {
  margin-block-start: var(--t-stack-space-3138295301);
}

.t-stack:only-child {
  block-size: 100%;
}

</style></head><body><div class="t-cluster" style="--t-cluster-gap-4145495461: 1.096875rem;"><div class="card"><div class="t-stack" style="--t-stack-space-2737476295: 1.096875rem;"><button>Hello</button><button>World</button></div></div><div class="card"><div class="t-stack" style="--t-stack-space-3138295301: 1.096875rem;"><button>Goodbye</button><button>World</button></div></div></div></body></html>
\ No newline at end of file
</style></head><body><div class="t-cluster" style="--t-cluster-gap: 1.096875rem;"><div class="card"><div class="t-stack"><button style="--t-stack-space: 1.096875rem;">Hello</button><button style="--t-stack-space: 1.096875rem;">World</button></div></div><div class="card"><div class="t-stack"><button style="--t-stack-space: 1.096875rem;">Goodbye</button><button style="--t-stack-space: 1.096875rem;">World</button></div></div></div></body></html>
\ No newline at end of file

M src/component.rs => src/component.rs +12 -5
@@ 10,7 10,7 @@ impl From<u8> for ModularSpacing {
        if value == 0 {
            return ModularSpacing(String::new());
        }
        ModularSpacing(format!("{}rem", 0.325 * 1.5f64.powi(value as i32)))
        ModularSpacing(format!("{}rem", 0.325 * 1.5f32.powi(value as i32)))
    }
}



@@ 68,10 68,14 @@ where
    I: IntoIterator<Item = E>,
    E: Into<Node>,
{
    let gap = &gap.into().0;
    let children = child
        .into_iter()
        .map(|c| c.into().var("t-stack-space", gap));

    div_.with(attr![class = "t-stack"])
        .set(child)
        .set(children)
        .stylesheet(include_str!("css/stack.css"))
        .var("t-stack-space", &gap.into().0)
}

/// A container with children that are evenly spaced out horizontally


@@ 245,11 249,14 @@ where
    I: IntoIterator<Item = E>,
    E: Into<Node>,
{
    let threshold = &threshold.into().0;
    let children = child
        .into_iter()
        .map(|c| c.into().var("t-switcher-threshold", threshold));
    div_.with(attr![class = "t-switcher"])
        .set(child)
        .set(children)
        .stylesheet(include_str!("css/switcher.css"))
        .var("t-switcher-gap", &gap.into().0)
        .var("t-switcher-threshold", &threshold.into().0)
}

/// A responsive Grid.

M src/lib.rs => src/lib.rs +2 -4
@@ 120,8 120,6 @@
//!
//! // Set snippets using string literals
//! // Parameterize with css custom variables & `var()`
//! # use fastrand;
//! # fastrand::seed(1);
//! let css = "p { font-size: var(--font-size); }";
//! let mut html = html_.set([
//!     head_,


@@ 132,10 130,10 @@
//!   r#"<html>
//!   <head>
//!     <style>
//!       p { font-size: var(--font-size-3791187243); }
//!       p { font-size: var(--font-size); }
//!     </style>
//!   </head>
//!   <p style="--font-size-3791187243: 1rem;">
//!   <p style="--font-size: 1rem;">
//!   </p>
//! </html>
//!"#);

M src/node.rs => src/node.rs +3 -11
@@ 201,12 201,7 @@ impl Node {
    ///
    /// # Example
    ///
    /// Variable names are suffixed with a random number to prevent descendant nested elements from
    /// overriding ancestor values
    ///
    /// ```
    /// # use fastrand;
    /// # fastrand::seed(1);
    /// use toph::{tag::*, Node};
    ///
    /// let css = "div { color: var(--text-color); border: 1px solid var(--div-color); }";


@@ 228,16 223,13 @@ impl Node {
    /// r#"<html>
    ///   <head>
    ///     <style>
    ///       div { color: var(--text-color-3791187243); border: 1px solid var(--div-color-479898943); }
    ///     </style>
    ///     <style>
    ///       div { color: var(--text-color-787217118); border: 1px solid var(--div-color-4275851145); }
    ///       div { color: var(--text-color); border: 1px solid var(--div-color); }
    ///     </style>
    ///   </head>
    ///   <body>
    ///     <div style="--div-color-479898943: black;--text-color-3791187243: white;">
    ///     <div style="--div-color: black;--text-color: white;">
    ///     </div>
    ///     <div style="--div-color-4275851145: pink;--text-color-787217118: brown;">
    ///     <div style="--div-color: pink;--text-color: brown;">
    ///     </div>
    ///   </body>
    /// </html>