Support variable on typography

Author: owjs3901

.changepacks/changepack_log_qcHsL3xvZLwwNPSMXNdfv.json

@@ -0,0 +1 @@
+{"changes":{"bindings/devup-ui-wasm/package.json":"Patch"},"note":"Support variable on typography","date":"2026-04-07T04:23:57.883285900Z"}

Cargo.lock

@@ -4,15 +4,15 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-oxc_parser = "0.123.0"
-oxc_syntax = "0.123.0"
-oxc_span = "0.123.0"
-oxc_allocator = "0.123.0"
-oxc_ast = "0.123.0"
-oxc_ast_visit = "0.123.0"
-oxc_codegen = "0.123.0"
-oxc_transformer = "0.123.0"
-oxc_semantic = "0.123.0"
+oxc_parser = "0.124.0"
+oxc_syntax = "0.124.0"
+oxc_span = "0.124.0"
+oxc_allocator = "0.124.0"
+oxc_ast = "0.124.0"
+oxc_ast_visit = "0.124.0"
+oxc_codegen = "0.124.0"
+oxc_transformer = "0.124.0"
+oxc_semantic = "0.124.0"
 css = { path = "../css" }
 phf = "0.13"
 strum = "0.28.0"

libs/extractor/Cargo.toml

@@ -675,26 +675,33 @@ impl Theme {
         for ty in self.typography.iter() {
             for (idx, t) in ty.1.0.iter().enumerate() {
                 if let Some(t) = t {
+                    let resolve = |v: &str| -> String {
+                        if let Some(token) = v.strip_prefix('$') {
+                            format!("var(--{})", token)
+                        } else {
+                            optimize_value(v)
+                        }
+                    };
                     let css_content = [
                         t.font_family
                             .as_ref()
-                            .map(|v| format!("font-family:{}", optimize_value(v)))
+                            .map(|v| format!("font-family:{}", resolve(v)))
                             .unwrap_or_default(),
                         t.font_size
                             .as_ref()
-                            .map(|v| format!("font-size:{}", optimize_value(v)))
+                            .map(|v| format!("font-size:{}", resolve(v)))
                             .unwrap_or_default(),
                         t.font_weight
                             .as_ref()
-                            .map(|v| format!("font-weight:{}", optimize_value(v)))
+                            .map(|v| format!("font-weight:{}", resolve(v)))
                             .unwrap_or_default(),
                         t.line_height
                             .as_ref()
-                            .map(|v| format!("line-height:{}", optimize_value(v)))
+                            .map(|v| format!("line-height:{}", resolve(v)))
                             .unwrap_or_default(),
                         t.letter_spacing
                             .as_ref()
-                            .map(|v| format!("letter-spacing:{}", optimize_value(v)))
+                            .map(|v| format!("letter-spacing:{}", resolve(v)))
                             .unwrap_or_default(),
                     ]
                     .iter()
@@ -1380,6 +1387,71 @@ mod tests {
         assert!(err.contains("cannot start with an array"));
     }
 
+    #[test]
+    fn test_typography_variable_reference() {
+        let theme: Theme = serde_json::from_str(
+            r##"{
+                "typography": {
+                    "body": {
+                        "fontSize": "$text",
+                        "lineHeight": "$leading",
+                        "fontWeight": 400
+                    }
+                }
+            }"##,
+        )
+        .unwrap();
+
+        let css = theme.to_css();
+        assert!(
+            css.contains("font-size:var(--text)"),
+            "Expected font-size:var(--text), got: {}",
+            css
+        );
+        assert!(
+            css.contains("line-height:var(--leading)"),
+            "Expected line-height:var(--leading), got: {}",
+            css
+        );
+        assert!(css.contains("font-weight:400"));
+    }
+
+    #[test]
+    fn test_typography_variable_reference_responsive() {
+        let theme: Theme = serde_json::from_str(
+            r##"{
+                "typography": {
+                    "heading": [
+                        {
+                            "fontSize": "$textSm",
+                            "fontWeight": 700
+                        },
+                        null,
+                        null,
+                        null,
+                        {
+                            "fontSize": "$textLg",
+                            "fontWeight": 700
+                        }
+                    ]
+                }
+            }"##,
+        )
+        .unwrap();
+
+        let css = theme.to_css();
+        assert!(
+            css.contains("font-size:var(--textSm)"),
+            "Expected font-size:var(--textSm), got: {}",
+            css
+        );
+        assert!(
+            css.contains("font-size:var(--textLg)"),
+            "Expected font-size:var(--textLg), got: {}",
+            css
+        );
+    }
+
     #[test]
     fn test_mixed_typography_formats() {
         // Test that both formats can coexist in the same theme