Skip to content

Commit 4bc1344

Browse files
owjs3901owjs3901
authored
Merge pull request #519 from dev-five-git/korean-css-issue
Fix korean value issue
2 parents dccd7d6 + a2a99e4 commit 4bc1344

File tree

5 files changed

+188
-80
lines changed

5 files changed

+188
-80
lines changed

‎.changepacks/changepack_log_aZkr01n8w9JggF7hpTEkr.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"changes": { "bindings/devup-ui-wasm/package.json": "Patch" },
3+
"note": "Fix korean css issue",
4+
"date": "2025-12-22T04:14:13.781847800Z"
5+
}

‎apps/next/src/app/page.tsx‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,69 @@
1-
'use client'
2-
3-
import { Box, css, styled, Text } from '@devup-ui/react'
4-
import { useState } from 'react'
5-
import { Lib } from 'vite-lib-example'
6-
const color = 'yellow'
7-
8-
const StyledFooter = styled.footer<{ type: '1' | '2' }>`
9-
background-color: ${color};
10-
color: ${(props) => (props.type === '1' ? 'red' : 'white')};
11-
`
12-
13-
export default function HomePage() {
14-
const [color, setColor] = useState('yellow')
15-
const [enabled, setEnabled] = useState(false)
16-
17-
return (
18-
<div>
19-
<StyledFooter type="2">IMPLEMENTATION~</StyledFooter>
20-
<p
21-
style={{
22-
backgroundColor: 'blue',
23-
}}
24-
>
25-
Track & field champions:
26-
</p>
27-
<Box
28-
_hover={{
29-
bg: 'yellow',
30-
cursor: 'cell',
31-
}}
32-
as="section"
33-
bg="$text"
34-
color={color}
35-
cursor="pointer"
36-
data-testid="box"
37-
fontSize={32}
38-
position="relative"
39-
py="28px"
40-
>
41-
<Box>hello</Box>
42-
<Lib />
43-
<Box>hello</Box>
44-
</Box>
45-
<Text
46-
className={css`
47-
background: red;
48-
color: blue;
49-
`}
50-
typography="bold"
51-
>
52-
text typo
53-
</Text>
54-
<Text color="$text">text</Text>
55-
<Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
56-
hello
57-
</Box>
58-
<Box fontSize={[12, 32]}>hello</Box>
59-
<button
60-
onClick={() => {
61-
setColor('blue')
62-
setEnabled((prev) => !prev)
63-
}}
64-
>
65-
Change
66-
</button>
67-
</div>
68-
)
69-
}
1+
'use client'
2+
3+
import { Box, css, styled, Text } from '@devup-ui/react'
4+
import { useState } from 'react'
5+
import { Lib } from 'vite-lib-example'
6+
const color = 'yellow'
7+
8+
const StyledFooter = styled.footer<{ type: '1' | '2' }>`
9+
background-color: ${color};
10+
color: ${(props) => (props.type === '1' ? 'red' : 'white')};
11+
`
12+
13+
export default function HomePage() {
14+
const [color, setColor] = useState('yellow')
15+
const [enabled, setEnabled] = useState(false)
16+
17+
return (
18+
<div>
19+
<StyledFooter type="2">IMPLEMENTATION~</StyledFooter>
20+
<p
21+
style={{
22+
backgroundColor: 'blue',
23+
}}
24+
>
25+
Track & field champions:
26+
</p>
27+
<Box
28+
_hover={{
29+
bg: 'yellow',
30+
cursor: 'cell',
31+
}}
32+
as="section"
33+
bg="$text"
34+
color={color}
35+
cursor="pointer"
36+
data-testid="box"
37+
fontSize={32}
38+
position="relative"
39+
py="28px"
40+
>
41+
<Box>hello</Box>
42+
<Lib />
43+
<Box>hello</Box>
44+
</Box>
45+
<Text
46+
className={css`
47+
background: red;
48+
color: blue;
49+
`}
50+
typography="bold"
51+
>
52+
text typo
53+
</Text>
54+
<Text color="$text">text</Text>
55+
<Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
56+
hello
57+
</Box>
58+
<Box fontSize={[12, 32]}>hello</Box>
59+
<button
60+
onClick={() => {
61+
setColor('blue')
62+
setEnabled((prev) => !prev)
63+
}}
64+
>
65+
Change
66+
</button>
67+
</div>
68+
)
69+
}

‎libs/css/src/optimize_value.rs‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,18 +54,20 @@ pub fn optimize_value(value: &str) -> String {
5454
let index = tmp.find(f).unwrap() + f.len();
5555
let mut zero_idx = vec![];
5656
let mut depth = 0;
57-
for i in index..tmp.len() {
58-
if tmp[i..i + 1].eq("(") {
57+
let chars: Vec<char> = tmp.chars().collect();
58+
let byte_indices: Vec<usize> = tmp.char_indices().map(|(i, _)| i).collect();
59+
60+
for (char_idx, &ch) in chars.iter().enumerate().skip(index) {
61+
if ch == '(' {
5962
depth += 1;
60-
} else if tmp[i..i + 1].eq(")") {
63+
} else if ch == ')' {
6164
depth -= 1;
62-
} else if tmp[i..i + 1].eq("0")
63-
&& !tmp[i - 1..i].chars().next().unwrap().is_ascii_digit()
64-
&& (tmp.len() == i + 1
65-
|| !tmp[i + 1..i + 2].chars().next().unwrap().is_ascii_digit())
65+
} else if ch == '0'
66+
&& (char_idx == 0 || !chars[char_idx - 1].is_ascii_digit())
67+
&& (char_idx + 1 >= chars.len() || !chars[char_idx + 1].is_ascii_digit())
6668
&& depth == 0
6769
{
68-
zero_idx.push(i);
70+
zero_idx.push(byte_indices[char_idx]);
6971
}
7072
}
7173
for i in zero_idx.iter().rev() {
@@ -93,10 +95,10 @@ pub fn optimize_value(value: &str) -> String {
9395

9496
if ret.contains("(") || ret.contains(")") {
9597
let mut depth = 0;
96-
for i in 0..ret.len() {
97-
if ret[i..i + 1].eq("(") {
98+
for ch in ret.chars() {
99+
if ch == '(' {
98100
depth += 1;
99-
} else if ret[i..i + 1].eq(")") {
101+
} else if ch == ')' {
100102
depth -= 1;
101103
}
102104
}

‎libs/extractor/src/lib.rs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8204,4 +8204,33 @@ keyframes({
82048204
.unwrap()
82058205
));
82068206
}
8207+
8208+
#[test]
8209+
#[serial]
8210+
fn test_mask_properties_with_korean() {
8211+
reset_class_map();
8212+
assert_debug_snapshot!(ToBTreeSet::from(
8213+
extract(
8214+
"test.tsx",
8215+
r###"import {Box} from '@devup-ui/core'
8216+
<Box
8217+
aspectRatio="5.49"
8218+
bg="#752E2E"
8219+
h="22px"
8220+
maskImage="url('/icons/BI-타이틀.svg')"
8221+
maskRepeat="no-repeat"
8222+
maskSize="contain"
8223+
w="121px"
8224+
/>
8225+
"###,
8226+
ExtractOption {
8227+
package: "@devup-ui/core".to_string(),
8228+
css_dir: "@devup-ui/core".to_string(),
8229+
single_css: true,
8230+
import_main_css: false
8231+
}
8232+
)
8233+
.unwrap()
8234+
));
8235+
}
82078236
}

‎libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
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())"
4+
---
5+
ToBTreeSet {
6+
styles: {
7+
Static(
8+
ExtractStaticStyle {
9+
property: "aspect-ratio",
10+
value: "5.49",
11+
level: 0,
12+
selector: None,
13+
style_order: None,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "background",
19+
value: "#752E2E",
20+
level: 0,
21+
selector: None,
22+
style_order: None,
23+
},
24+
),
25+
Static(
26+
ExtractStaticStyle {
27+
property: "height",
28+
value: "22px",
29+
level: 0,
30+
selector: None,
31+
style_order: None,
32+
},
33+
),
34+
Static(
35+
ExtractStaticStyle {
36+
property: "mask-image",
37+
value: "url('/icons/BI-타이틀.svg')",
38+
level: 0,
39+
selector: None,
40+
style_order: None,
41+
},
42+
),
43+
Static(
44+
ExtractStaticStyle {
45+
property: "mask-repeat",
46+
value: "no-repeat",
47+
level: 0,
48+
selector: None,
49+
style_order: None,
50+
},
51+
),
52+
Static(
53+
ExtractStaticStyle {
54+
property: "mask-size",
55+
value: "contain",
56+
level: 0,
57+
selector: None,
58+
style_order: None,
59+
},
60+
),
61+
Static(
62+
ExtractStaticStyle {
63+
property: "width",
64+
value: "121px",
65+
level: 0,
66+
selector: None,
67+
style_order: None,
68+
},
69+
),
70+
},
71+
code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f g\" />;\n",
72+
}

0 commit comments

Comments
 (0)