Fix korean value issue

.changepacks/changepack_log_aZkr01n8w9JggF7hpTEkr.json

@@ -0,0 +1,5 @@
+{
+  "changes": { "bindings/devup-ui-wasm/package.json": "Patch" },
+  "note": "Fix korean css issue",
+  "date": "2025-12-22T04:14:13.781847800Z"
+}

apps/next/src/app/page.tsx

@@ -1,69 +1,69 @@
-'use client'
-
-import { Box, css, styled, Text } from '@devup-ui/react'
-import { useState } from 'react'
-import { Lib } from 'vite-lib-example'
-const color = 'yellow'
-
-const StyledFooter = styled.footer<{ type: '1' | '2' }>`
-  background-color: ${color};
-  color: ${(props) => (props.type === '1' ? 'red' : 'white')};
-`
-
-export default function HomePage() {
-  const [color, setColor] = useState('yellow')
-  const [enabled, setEnabled] = useState(false)
-
-  return (
-    <div>
-      <StyledFooter type="2">IMPLEMENTATION~</StyledFooter>
-      <p
-        style={{
-          backgroundColor: 'blue',
-        }}
-      >
-        Track & field champions:
-      </p>
-      <Box
-        _hover={{
-          bg: 'yellow',
-          cursor: 'cell',
-        }}
-        as="section"
-        bg="$text"
-        color={color}
-        cursor="pointer"
-        data-testid="box"
-        fontSize={32}
-        position="relative"
-        py="28px"
-      >
-        <Box>hello</Box>
-        <Lib />
-        <Box>hello</Box>
-      </Box>
-      <Text
-        className={css`
-          background: red;
-          color: blue;
-        `}
-        typography="bold"
-      >
-        text typo
-      </Text>
-      <Text color="$text">text</Text>
-      <Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
-        hello
-      </Box>
-      <Box fontSize={[12, 32]}>hello</Box>
-      <button
-        onClick={() => {
-          setColor('blue')
-          setEnabled((prev) => !prev)
-        }}
-      >
-        Change
-      </button>
-    </div>
-  )
-}
+'use client'
+
+import { Box, css, styled, Text } from '@devup-ui/react'
+import { useState } from 'react'
+import { Lib } from 'vite-lib-example'
+const color = 'yellow'
+
+const StyledFooter = styled.footer<{ type: '1' | '2' }>`
+  background-color: ${color};
+  color: ${(props) => (props.type === '1' ? 'red' : 'white')};
+`
+
+export default function HomePage() {
+  const [color, setColor] = useState('yellow')
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <div>
+      <StyledFooter type="2">IMPLEMENTATION~</StyledFooter>
+      <p
+        style={{
+          backgroundColor: 'blue',
+        }}
+      >
+        Track & field champions:
+      </p>
+      <Box
+        _hover={{
+          bg: 'yellow',
+          cursor: 'cell',
+        }}
+        as="section"
+        bg="$text"
+        color={color}
+        cursor="pointer"
+        data-testid="box"
+        fontSize={32}
+        position="relative"
+        py="28px"
+      >
+        <Box>hello</Box>
+        <Lib />
+        <Box>hello</Box>
+      </Box>
+      <Text
+        className={css`
+          background: red;
+          color: blue;
+        `}
+        typography="bold"
+      >
+        text typo
+      </Text>
+      <Text color="$text">text</Text>
+      <Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
+        hello
+      </Box>
+      <Box fontSize={[12, 32]}>hello</Box>
+      <button
+        onClick={() => {
+          setColor('blue')
+          setEnabled((prev) => !prev)
+        }}
+      >
+        Change
+      </button>
+    </div>
+  )
+}

libs/css/src/optimize_value.rs

@@ -54,18 +54,20 @@ pub fn optimize_value(value: &str) -> String {
                 let index = tmp.find(f).unwrap() + f.len();
                 let mut zero_idx = vec![];
                 let mut depth = 0;
-                for i in index..tmp.len() {
-                    if tmp[i..i + 1].eq("(") {
+                let chars: Vec<char> = tmp.chars().collect();
+                let byte_indices: Vec<usize> = tmp.char_indices().map(|(i, _)| i).collect();
+
+                for (char_idx, &ch) in chars.iter().enumerate().skip(index) {
+                    if ch == '(' {
                         depth += 1;
-                    } else if tmp[i..i + 1].eq(")") {
+                    } else if ch == ')' {
                         depth -= 1;
-                    } else if tmp[i..i + 1].eq("0")
-                        && !tmp[i - 1..i].chars().next().unwrap().is_ascii_digit()
-                        && (tmp.len() == i + 1
-                            || !tmp[i + 1..i + 2].chars().next().unwrap().is_ascii_digit())
+                    } else if ch == '0'
+                        && (char_idx == 0 || !chars[char_idx - 1].is_ascii_digit())
+                        && (char_idx + 1 >= chars.len() || !chars[char_idx + 1].is_ascii_digit())
                         && depth == 0
                     {
-                        zero_idx.push(i);
+                        zero_idx.push(byte_indices[char_idx]);
                     }
                 }
                 for i in zero_idx.iter().rev() {
@@ -93,10 +95,10 @@ pub fn optimize_value(value: &str) -> String {
 
     if ret.contains("(") || ret.contains(")") {
         let mut depth = 0;
-        for i in 0..ret.len() {
-            if ret[i..i + 1].eq("(") {
+        for ch in ret.chars() {
+            if ch == '(' {
                 depth += 1;
-            } else if ret[i..i + 1].eq(")") {
+            } else if ch == ')' {
                 depth -= 1;
             }
         }

libs/extractor/src/lib.rs

@@ -8204,4 +8204,33 @@ keyframes({
             .unwrap()
         ));
     }
+
+    #[test]
+    #[serial]
+    fn test_mask_properties_with_korean() {
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r###"import {Box} from '@devup-ui/core'
+        <Box
+          aspectRatio="5.49"
+          bg="#752E2E"
+          h="22px"
+          maskImage="url('/icons/BI-타이틀.svg')"
+          maskRepeat="no-repeat"
+          maskSize="contain"
+          w="121px"
+        />
+        "###,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+    }
 }

libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap

@@ -0,0 +1,72 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr###\"import {Box} from '@devup-ui/core'\n        <Box\n          aspectRatio=\"5.49\"\n          bg=\"#752E2E\"\n          h=\"22px\"\n          maskImage=\"url('/icons/BI-타이틀.svg')\"\n          maskRepeat=\"no-repeat\"\n          maskSize=\"contain\"\n          w=\"121px\"\n        />\n        \"###,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "aspect-ratio",
+                value: "5.49",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "#752E2E",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "22px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "mask-image",
+                value: "url('/icons/BI-타이틀.svg')",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "mask-repeat",
+                value: "no-repeat",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "mask-size",
+                value: "contain",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "121px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f g\" />;\n",
+}