Fix gen selector logic

Author: owjs3901

.changeset/swift-pandas-bathe.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix gen classname logic with selector

libs/css/src/lib.rs

@@ -93,15 +93,29 @@ pub fn convert_property(property: &str) -> PropertyType {
         .unwrap_or_else(|| to_kebab_case(property).into())
 }
 
-pub fn sheet_to_classname(property: &str, level: u8, value: Option<&str>) -> String {
+pub fn sheet_to_classname(
+    property: &str,
+    level: u8,
+    value: Option<&str>,
+    selector: Option<&str>,
+) -> String {
     let mut hasher = DefaultHasher::new();
-    hasher.write(format!("{}-{}-{}", property, level, value.unwrap_or("")).as_bytes());
+    hasher.write(
+        format!(
+            "{}-{}-{}-{}",
+            property,
+            level,
+            value.unwrap_or(""),
+            selector.unwrap_or("")
+        )
+        .as_bytes(),
+    );
     format!("d{}", hasher.finish())
 }
 
-pub fn sheet_to_variable_name(property: &str, level: u8) -> String {
+pub fn sheet_to_variable_name(property: &str, level: u8, selector: Option<&str>) -> String {
     let mut hasher = DefaultHasher::new();
-    hasher.write(format!("{}-{}", property, level).as_bytes());
+    hasher.write(format!("{}-{}-{}", property, level, selector.unwrap_or("")).as_bytes());
     format!("--d{}", hasher.finish())
 }
 
@@ -112,21 +126,26 @@ mod tests {
     #[test]
     fn test_sheet_to_variable_name() {
         let mut hasher = DefaultHasher::new();
-        hasher.write(format!("{}-{}", "color", 0).as_bytes());
+        hasher.write(format!("{}-{}-{}", "color", 0, "").as_bytes());
         assert_eq!(
-            sheet_to_variable_name("color", 0),
+            sheet_to_variable_name("color", 0, None),
             format!("--d{}", hasher.finish())
         );
     }
 
     #[test]
     fn test_sheet_to_classname() {
         let mut hasher = DefaultHasher::new();
-        hasher.write(format!("{}-{}-{}", "color", 0, "red").as_bytes());
+        hasher.write(format!("{}-{}-{}-{}", "color", 0, "red", "").as_bytes());
         assert_eq!(
-            sheet_to_classname("color", 0, Some("red")),
+            sheet_to_classname("color", 0, Some("red"), None),
             format!("d{}", hasher.finish())
         );
+
+        assert_ne!(
+            sheet_to_classname("color", 0, Some("red"), None),
+            sheet_to_classname("color", 0, Some("red"), Some(":hover")),
+        );
     }
 
     #[test]

libs/extractor/src/lib.rs

@@ -91,6 +91,11 @@ impl ExtractStyleProperty for ExtractStaticStyle {
             self.property.as_str(),
             self.level,
             Some(convert_value(self.value.as_str()).as_str()),
+            if let Some(selector) = &self.selector {
+                Some(selector.as_str())
+            } else {
+                None
+            },
         ))
     }
 }
@@ -125,8 +130,25 @@ pub struct ExtractDynamicStyle {
 impl ExtractStyleProperty for ExtractDynamicStyle {
     fn extract(&self) -> StyleProperty {
         StyleProperty::Variable {
-            class_name: sheet_to_classname(self.property.as_str(), self.level, None),
-            variable_name: sheet_to_variable_name(self.property.as_str(), self.level),
+            class_name: sheet_to_classname(
+                self.property.as_str(),
+                self.level,
+                None,
+                if let Some(selector) = &self.selector {
+                    Some(selector.as_str())
+                } else {
+                    None
+                },
+            ),
+            variable_name: sheet_to_variable_name(
+                self.property.as_str(),
+                self.level,
+                if let Some(selector) = &self.selector {
+                    Some(selector.as_str())
+                } else {
+                    None
+                },
+            ),
             identifier: self.identifier.clone(),
         }
     }

libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap

@@ -37,5 +37,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { VStack as C } from \"@devup-ui/core\";\n<div className={`d1317701749553269676 d6446653468614263203 d13564892828075531325 d7164797882338261018 ${\"a\" + \"b\"}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { VStack as C } from \"@devup-ui/core\";\n<div className={`d6722557538442813266 d3848450220363244900 d14330397360050164060 d5274499629582391758 ${\"a\" + \"b\"}`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap

@@ -37,5 +37,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d169756389412877303 d14370488508125317966 d13045603108234987884 d16442223933220481321\" style={{\n\t\"--d13910714689067654253\": someStyleVar1,\n\t\"--d15617356007119957826\": someStyleVar,\n\t\"--d12438662493683969042\": someStyleVar2\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d950431837697362493 d3948398971488474326 d5985969837765369532 d15316134123632971425\" style={{\n\t\"--d14370488508125317966\": someStyleVar1,\n\t\"--d169756389412877303\": someStyleVar,\n\t\"--d13045603108234987884\": someStyleVar2\n}} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap

@@ -21,5 +21,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d13763791968754421226\" style={{ \"--d15632935115870867517\": a === b ? c : d }} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d1419212369670126212\" style={{ \"--d13763791968754421226\": a === b ? c : d }} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap

@@ -21,5 +21,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className={a === b ? \"d6186180367078841290\" : \"d13763791968754421226\"} style={{ \"--d15632935115870867517\": d }} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className={a === b ? \"d14718123859853665643\" : \"d1419212369670126212\"} style={{ \"--d13763791968754421226\": d }} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap

@@ -21,5 +21,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className={a === b ? \"d6186180367078841290\" : \"d1044305882111332400\"} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className={a === b ? \"d14718123859853665643\" : \"d15680784530335274378\"} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap

@@ -29,5 +29,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d169756389412877303 d14370488508125317966 d13045603108234987884\" style={{\n\t\"--d13910714689067654253\": someStyleVar1,\n\t\"--d15617356007119957826\": someStyleVar,\n\t\"--d12438662493683969042\": someStyleVar2\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d950431837697362493 d3948398971488474326 d5985969837765369532\" style={{\n\t\"--d14370488508125317966\": someStyleVar1,\n\t\"--d169756389412877303\": someStyleVar,\n\t\"--d13045603108234987884\": someStyleVar2\n}} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap

@@ -21,5 +21,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d169756389412877303 d13763791968754421226\" style={{\n\t\"--d15617356007119957826\": someStyleVar,\n\t\"--d15632935115870867517\": someStyleVar2\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d950431837697362493 d1419212369670126212\" style={{\n\t\"--d169756389412877303\": someStyleVar,\n\t\"--d13763791968754421226\": someStyleVar2\n}} />;\n",
 }