Fix shadow issue

Author: owjs3901

Cargo.lock

@@ -9,6 +9,7 @@ pub mod optimize_value;
 pub mod rm_css_comment;
 mod selector_separator;
 pub mod style_selector;
+pub mod theme_tokens;
 pub mod utils;
 
 use std::collections::BTreeMap;

libs/css/src/lib.rs

@@ -0,0 +1,55 @@
+use std::collections::BTreeMap;
+use std::sync::{LazyLock, RwLock};
+
+#[derive(Default, Debug)]
+struct ThemeTokenRegistry {
+    length: BTreeMap<String, Vec<u8>>,
+    shadow: BTreeMap<String, Vec<u8>>,
+}
+
+static TOKEN_REGISTRY: LazyLock<RwLock<ThemeTokenRegistry>> =
+    LazyLock::new(|| RwLock::new(ThemeTokenRegistry::default()));
+
+pub fn set_theme_token_levels(
+    length: BTreeMap<String, Vec<u8>>,
+    shadow: BTreeMap<String, Vec<u8>>,
+) {
+    if let Ok(mut registry) = TOKEN_REGISTRY.write() {
+        registry.length = length;
+        registry.shadow = shadow;
+    }
+}
+
+/// Look up a `$token` in the length and shadow registries.
+/// Returns the responsive breakpoint levels if the token is defined
+/// with more than one level, regardless of which CSS property it's used on.
+pub fn get_responsive_theme_token(value: &str) -> Option<Vec<u8>> {
+    let token = value.strip_prefix('$')?;
+    let registry = TOKEN_REGISTRY.read().ok()?;
+
+    registry
+        .length
+        .get(token)
+        .or_else(|| registry.shadow.get(token))
+        .filter(|levels| levels.len() > 1)
+        .cloned()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_get_responsive_theme_token() {
+        let mut length = BTreeMap::new();
+        length.insert("containerX".to_string(), vec![0, 2]);
+        let mut shadow = BTreeMap::new();
+        shadow.insert("card".to_string(), vec![0, 3]);
+        set_theme_token_levels(length, shadow);
+
+        assert_eq!(get_responsive_theme_token("$containerX"), Some(vec![0, 2]));
+        assert_eq!(get_responsive_theme_token("$card"), Some(vec![0, 3]));
+        assert_eq!(get_responsive_theme_token("$unknown"), None);
+        assert_eq!(get_responsive_theme_token("noprefix"), None);
+    }
+}

libs/css/src/theme_tokens.rs

@@ -1,3 +1,5 @@
+use std::fmt::{Debug, Formatter};
+
 use css::{
     optimize_multi_css_value::{check_multi_css_optimize, optimize_mutli_css_value},
     optimize_value::optimize_value,
@@ -12,7 +14,14 @@ use crate::{
     utils::{convert_value, gcd},
 };
 
-#[derive(Debug, PartialEq, Clone, Eq, Hash, Ord, PartialOrd)]
+#[derive(Debug, PartialEq, Clone, Copy, Eq, Hash, Ord, PartialOrd, Default)]
+pub enum ThemeTokenResolution {
+    #[default]
+    CssVariable,
+    FirstValue,
+}
+
+#[derive(PartialEq, Clone, Eq, Hash, Ord, PartialOrd)]
 pub struct ExtractStaticStyle {
     /// property
     pub property: String,
@@ -26,6 +35,21 @@ pub struct ExtractStaticStyle {
     pub style_order: Option<u8>,
     /// CSS layer name (from vanilla-extract layer())
     pub layer: Option<String>,
+    /// How theme tokens should be resolved when converting to CSS.
+    pub theme_token_resolution: ThemeTokenResolution,
+}
+
+impl Debug for ExtractStaticStyle {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("ExtractStaticStyle")
+            .field("property", &self.property)
+            .field("value", &self.value)
+            .field("level", &self.level)
+            .field("selector", &self.selector)
+            .field("style_order", &self.style_order)
+            .field("layer", &self.layer)
+            .finish()
+    }
 }
 
 impl ExtractStaticStyle {
@@ -55,6 +79,7 @@ impl ExtractStaticStyle {
             selector: selector.map(optimize_selector),
             style_order: None,
             layer: None,
+            theme_token_resolution: ThemeTokenResolution::CssVariable,
         }
     }
 
@@ -88,9 +113,15 @@ impl ExtractStaticStyle {
             selector,
             style_order: Some(0),
             layer: None,
+            theme_token_resolution: ThemeTokenResolution::CssVariable,
         }
     }
 
+    pub fn with_theme_token_resolution(mut self, resolution: ThemeTokenResolution) -> Self {
+        self.theme_token_resolution = resolution;
+        self
+    }
+
     /// Get the layer name
     pub fn layer(&self) -> Option<&str> {
         self.layer.as_deref()
@@ -115,6 +146,10 @@ impl ExtractStaticStyle {
     pub fn style_order(&self) -> Option<u8> {
         self.style_order
     }
+
+    pub fn theme_token_resolution(&self) -> ThemeTokenResolution {
+        self.theme_token_resolution
+    }
 }
 
 impl ExtractStyleProperty for ExtractStaticStyle {

libs/extractor/src/extract_style/extract_static_style.rs

@@ -4,7 +4,7 @@ pub(super) mod extract_dynamic_style;
 pub(super) mod extract_font_face;
 pub(super) mod extract_import;
 pub(super) mod extract_keyframes;
-pub(super) mod extract_static_style;
+pub mod extract_static_style;
 pub mod extract_style_value;
 pub mod style_property;
 

libs/extractor/src/extract_style/mod.rs

@@ -8,7 +8,8 @@ use crate::{
         extract_style_value::ExtractStyleValue,
     },
     extractor::{
-        GlobalExtractResult, extract_style_from_expression::extract_style_from_expression,
+        GlobalExtractResult,
+        extract_style_from_expression::{LiteralHandling, extract_style_from_expression},
     },
     utils::{get_string_by_literal_expression, get_string_by_property_key},
 };
@@ -166,6 +167,7 @@ pub fn extract_global_style_from_expression<'a>(
                                     },
                                     file.to_string(),
                                 )),
+                                LiteralHandling::ExpandResponsiveThemeToken,
                             );
 
                             // Filter out @layer property from styles and set layer on remaining styles

libs/extractor/src/extractor/extract_global_style_from_expression.rs

@@ -3,7 +3,7 @@ use crate::{
     extract_style::{extract_keyframes::ExtractKeyframes, extract_style_value::ExtractStyleValue},
     extractor::{
         ExtractResult, KeyframesExtractResult,
-        extract_style_from_expression::extract_style_from_expression,
+        extract_style_from_expression::{LiteralHandling, extract_style_from_expression},
     },
     utils::get_string_by_property_key,
 };
@@ -23,8 +23,14 @@ pub fn extract_keyframes_from_expression<'a>(
             if let ObjectPropertyKind::ObjectProperty(o) = p
                 && let Some(name) = get_string_by_property_key(&o.key)
             {
-                let ExtractResult { styles, .. } =
-                    extract_style_from_expression(ast_builder, None, &mut o.value, 0, &None);
+                let ExtractResult { styles, .. } = extract_style_from_expression(
+                    ast_builder,
+                    None,
+                    &mut o.value,
+                    0,
+                    &None,
+                    LiteralHandling::ExpandResponsiveThemeToken,
+                );
 
                 let mut styles = styles
                     .into_iter()