Fix classname order issue

Author: owjs3901

.changeset/tame-berries-jam.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix classname order issue

apps/vite/src/App.tsx

@@ -1,6 +1,8 @@
 import { Box, Text } from '@devup-ui/react'
 import { Lib } from 'vite-lib-example'
 
+import { Button } from './Button'
+
 export default function App() {
   return (
     <div>
@@ -18,6 +20,9 @@ export default function App() {
       <Text color="#777"></Text>
       <Text color="#777"></Text>
       <Text typography="header">typo</Text>
+      <Button size="s" variant="primary">
+        hello
+      </Button>
     </div>
   )
 }

apps/vite/src/Button.tsx

@@ -0,0 +1,49 @@
+import { Button as DevupButton } from '@devup-ui/react'
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'primary' | 'default'
+  colors?: {
+    primary?: string
+    error?: string
+  }
+  isError?: boolean
+  size?: 's' | 'm'
+}
+
+/**
+ * Button
+ * ## Design Token
+ * ### Color
+ * - inputDisabledBackground
+ * - inputDisabled
+ * - inputBackground
+ * - primaryHover
+ * - text
+ * - border
+ *
+ * @constructor
+ */
+export function Button({
+  variant = 'default',
+  className = '',
+  type = 'button',
+  colors,
+  isError = false,
+  children,
+  size = 'm',
+  ...props
+}: ButtonProps): React.ReactElement {
+  const isPrimary = variant === 'primary'
+
+  return (
+    <DevupButton
+      _hover={{
+        borderColor: true ? 'blue' : ``,
+      }}
+      bg="red"
+      className={className}
+    >
+      {children}
+    </DevupButton>
+  )
+}

libs/extractor/src/lib.rs

@@ -570,6 +570,40 @@ mod tests {
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className={variable} />
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} 
+      _hover={{
+        borderColor: true ? 'blue' : ``,
+      }}
+ className={variable} />
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
     }
 
     #[test]

libs/extractor/src/prop_modify_utils.rs

@@ -205,40 +205,98 @@ fn merge_string_expressions<'a>(
         return None;
     }
     if expressions.len() == 1 {
-        return Some(expressions[0].clone_in(ast_builder.allocator));
+        return Some(expressions.first().unwrap().clone_in(ast_builder.allocator));
     }
 
-    let mut string_literals = vec![];
+    let mut string_literals: std::vec::Vec<String> = vec![];
     let mut other_expressions = vec![];
     for ex in expressions {
+        string_literals.push("".to_string());
         if let Expression::StringLiteral(literal) = ex {
-            string_literals.push(literal.value.trim());
+            if !string_literals.is_empty() {
+                string_literals
+                    .last_mut()
+                    .unwrap()
+                    .push_str(&format!(" {}", literal.value.trim()));
+            } else {
+                string_literals.push(literal.value.trim().to_string());
+            }
+        } else if let Expression::TemplateLiteral(template) = ex {
+            if !string_literals.is_empty() {
+                string_literals.last_mut().unwrap().push_str(&format!(
+                    " {}",
+                    template
+                        .quasis
+                        .iter()
+                        .map(|q| q.value.raw.trim())
+                        .filter(|q| !q.is_empty())
+                        .collect::<Vec<_>>()
+                        .join(" ")
+                ));
+            } else {
+                string_literals.push(
+                    template
+                        .quasis
+                        .iter()
+                        .map(|q| q.value.raw.as_str())
+                        .collect::<Vec<_>>()
+                        .join(" "),
+                );
+            }
+            other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
         } else {
-            other_expressions.push(ex);
+            other_expressions.push(ex.clone_in(ast_builder.allocator));
         }
     }
     if other_expressions.is_empty() {
-        return Some(Expression::StringLiteral(ast_builder.alloc_string_literal(
-            SPAN,
-            ast_builder.atom(&string_literals.join(" ")),
-            None,
-        )));
+        return Some(Expression::StringLiteral(
+            ast_builder.alloc_string_literal(
+                SPAN,
+                ast_builder.atom(
+                    &string_literals
+                        .iter()
+                        .map(|s| s.trim())
+                        .filter(|s| !s.is_empty())
+                        .collect::<Vec<_>>()
+                        .join(" "),
+                ),
+                None,
+            ),
+        ));
     }
+    let literals = oxc_allocator::Vec::from_iter_in(
+        string_literals.iter().enumerate().map(|(idx, s)| {
+            ast_builder.template_element(
+                SPAN,
+                TemplateElementValue {
+                    raw: ast_builder.atom(&{
+                        let trimmed = s.trim();
+                        if trimmed.is_empty() {
+                            "".to_string()
+                        } else if idx > 0 && idx == string_literals.len() - 1 {
+                            if string_literals.len() == other_expressions.len() {
+                                format!(" {} ", trimmed)
+                            } else {
+                                format!(" {}", trimmed)
+                            }
+                        } else if idx == string_literals.len() - 1 {
+                            trimmed.to_string()
+                        } else {
+                            format!("{} ", trimmed)
+                        }
+                    }),
+                    cooked: None,
+                },
+                false,
+            )
+        }),
+        ast_builder.allocator,
+    );
 
     Some(Expression::TemplateLiteral(
         ast_builder.alloc_template_literal(
             SPAN,
-            oxc_allocator::Vec::from_iter_in(
-                [ast_builder.template_element(
-                    SPAN,
-                    TemplateElementValue {
-                        raw: ast_builder.atom(&format!("{} ", string_literals.join(" "))),
-                        cooked: None,
-                    },
-                    false,
-                )],
-                ast_builder.allocator,
-            ),
+            literals,
             oxc_allocator::Vec::from_iter_in(
                 other_expressions
                     .into_iter()

libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap

@@ -45,5 +45,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 d1 d2 d3 ${\"a\" + \"b\"}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\"} d0 d1 d2 d3`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component2.snap.new

@@ -0,0 +1,45 @@
+---
+source: libs/extractor/src/lib.rs
+assertion_line: 613
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} \n      _hover={{\n        borderColor: true ? 'blue' : ``,\n      }}\n className={variable} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "borderColor",
+                value: "",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "borderColor",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable} d0 ${true ? \"d1\" : \"d2\"}`} />;\n",
+}

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap

@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 d1 ${\"a\" + \"b\"}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\"} d0 d1`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap

@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`d0 d1 ${styles.logo}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`${styles.logo} d0 d1`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap

@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={variable} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable} d0 d1`} />;\n",
+}