Skip to content

Commit 2dd81f5

Browse files
owjs3901owjs3901
committed
Impl styleVars
1 parent e7bb155 commit 2dd81f5

22 files changed

+461
-54
lines changed

‎.changeset/small-buckets-joke.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@devup-ui/wasm": patch
3+
"@devup-ui/react": patch
4+
---
5+
6+
Implement styleVars

‎bindings/devup-ui-wasm/src/lib.rs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,20 +201,20 @@ pub fn get_theme_interface(
201201
color_interface_name,
202202
color_keys
203203
.into_iter()
204-
.map(|key| format!("${}:null;", key))
204+
.map(|key| format!("${key}:null;"))
205205
.collect::<Vec<String>>()
206206
.join(""),
207207
typography_interface_name,
208208
typography_keys
209209
.into_iter()
210-
.map(|key| format!("{}:null;", key))
210+
.map(|key| format!("{key}:null;"))
211211
.collect::<Vec<String>>()
212212
.join(""),
213213
theme_interface_name,
214214
theme_keys
215215
.into_iter()
216216
// key to pascal
217-
.map(|key| format!("{}:null;", key))
217+
.map(|key| format!("{key}:null;"))
218218
.collect::<Vec<String>>()
219219
.join("")
220220
)

‎libs/css/src/lib.rs‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ static SELECTOR_ORDER_MAP: Lazy<HashMap<String, u8>> = Lazy::new(|| {
2121
.into_iter()
2222
.enumerate()
2323
{
24-
map.insert(format!("&:{}", selector), idx as u8);
24+
map.insert(format!("&:{selector}"), idx as u8);
2525
}
2626
map
2727
});
@@ -54,8 +54,8 @@ fn get_selector_order(selector: &str) -> u8 {
5454
let t = if selector.chars().filter(|c| c == &'&').count() == 1 {
5555
selector
5656
.split('&')
57-
.last()
58-
.map(|a| format!("&{}", a))
57+
.next_back()
58+
.map(|a| format!("&{a}"))
5959
.unwrap_or(selector.to_string())
6060
} else {
6161
selector.to_string()
@@ -129,7 +129,7 @@ impl Display for StyleSelector {
129129
"{}",
130130
match self {
131131
StyleSelector::Selector(value) => value.to_string(),
132-
StyleSelector::Media(value) => format!("@{}", value),
132+
StyleSelector::Media(value) => format!("@{value}"),
133133
}
134134
)
135135
}
@@ -138,11 +138,11 @@ impl Display for StyleSelector {
138138
pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> String {
139139
if let Some(selector) = selector {
140140
match selector {
141-
StyleSelector::Selector(value) => value.replace("&", &format!(".{}", class_name)),
142-
StyleSelector::Media(_) => format!(".{}", class_name),
141+
StyleSelector::Selector(value) => value.replace("&", &format!(".{class_name}")),
142+
StyleSelector::Media(_) => format!(".{class_name}"),
143143
}
144144
} else {
145-
format!(".{}", class_name)
145+
format!(".{class_name}")
146146
}
147147
}
148148

@@ -359,7 +359,7 @@ fn optimize_color(value: &str) -> String {
359359
}
360360
}
361361

362-
format!("#{}", ret)
362+
format!("#{ret}")
363363
}
364364

365365
pub fn optimize_value(value: &str) -> String {
@@ -377,13 +377,13 @@ pub fn optimize_value(value: &str) -> String {
377377
}
378378
// remove ; from dynamic value
379379
for str_symbol in ["", "`", "\"", "'"] {
380-
if ret.ends_with(&format!(";{}", str_symbol)) {
380+
if ret.ends_with(&format!(";{str_symbol}")) {
381381
ret = format!(
382382
"{}{}",
383383
ret[..ret.len() - str_symbol.len() - 1].trim_end_matches(';'),
384384
str_symbol
385385
);
386-
} else if ret.ends_with(&format!(";{})", str_symbol)) {
386+
} else if ret.ends_with(&format!(";{str_symbol})")) {
387387
ret = format!(
388388
"{}{})",
389389
ret[..ret.len() - str_symbol.len() - 2].trim_end_matches(';'),
@@ -427,7 +427,7 @@ pub fn sheet_to_classname(
427427
style_order.unwrap_or(255)
428428
);
429429
let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
430-
map.get(&key).map(|v| format!("d{}", v)).unwrap_or_else(|| {
430+
map.get(&key).map(|v| format!("d{v}")).unwrap_or_else(|| {
431431
let len = map.len();
432432
map.insert(key, len as i32);
433433
format!("d{}", map.len() - 1)
@@ -442,7 +442,7 @@ pub fn css_to_classname(css: &str) -> String {
442442
format!("css-{}", hasher.finish())
443443
} else {
444444
let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
445-
map.get(css).map(|v| format!("d{}", v)).unwrap_or_else(|| {
445+
map.get(css).map(|v| format!("d{v}")).unwrap_or_else(|| {
446446
let len = map.len();
447447
map.insert(css.to_string(), len as i32);
448448
format!("d{}", map.len() - 1)
@@ -469,7 +469,7 @@ pub fn sheet_to_variable_name(property: &str, level: u8, selector: Option<&str>)
469469
let key = format!("{}-{}-{}", property, level, selector.unwrap_or("").trim());
470470
let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
471471
map.get(&key)
472-
.map(|v| format!("--d{}", v))
472+
.map(|v| format!("--d{v}"))
473473
.unwrap_or_else(|| {
474474
let len = map.len();
475475
map.insert(key, len as i32);

‎libs/extractor/src/extract_style/mod.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ impl ExtractStyleValue {
220220
ExtractStyleValue::Dynamic(style) => style.extract(),
221221
ExtractStyleValue::Css(css) => css.extract(),
222222
ExtractStyleValue::Typography(typo) => {
223-
StyleProperty::ClassName(format!("typo-{}", typo))
223+
StyleProperty::ClassName(format!("typo-{typo}"))
224224
}
225225
}
226226
}

‎libs/extractor/src/lib.rs‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3084,4 +3084,180 @@ export {
30843084
.unwrap()
30853085
));
30863086
}
3087+
3088+
#[test]
3089+
#[serial]
3090+
fn style_variables() {
3091+
reset_class_map();
3092+
assert_debug_snapshot!(ToBTreeSet::from(
3093+
extract(
3094+
"test.jsx",
3095+
r#"import {Box} from '@devup-ui/core'
3096+
<Box styleVars={{
3097+
c: "red"
3098+
}} />
3099+
"#,
3100+
ExtractOption {
3101+
package: "@devup-ui/core".to_string(),
3102+
css_file: None
3103+
}
3104+
)
3105+
.unwrap()
3106+
));
3107+
3108+
reset_class_map();
3109+
assert_debug_snapshot!(ToBTreeSet::from(
3110+
extract(
3111+
"test.jsx",
3112+
r#"import {Box} from '@devup-ui/core'
3113+
<Box styleVars={{
3114+
"--d": "red"
3115+
}} />
3116+
"#,
3117+
ExtractOption {
3118+
package: "@devup-ui/core".to_string(),
3119+
css_file: None
3120+
}
3121+
)
3122+
.unwrap()
3123+
));
3124+
3125+
reset_class_map();
3126+
assert_debug_snapshot!(ToBTreeSet::from(
3127+
extract(
3128+
"test.jsx",
3129+
r#"import {Box} from '@devup-ui/core'
3130+
<Box styleVars={{
3131+
"--d": "red",
3132+
"e": "blue"
3133+
}} />
3134+
"#,
3135+
ExtractOption {
3136+
package: "@devup-ui/core".to_string(),
3137+
css_file: None
3138+
}
3139+
)
3140+
.unwrap()
3141+
));
3142+
3143+
reset_class_map();
3144+
assert_debug_snapshot!(ToBTreeSet::from(
3145+
extract(
3146+
"test.jsx",
3147+
r#"import {Box} from '@devup-ui/core'
3148+
<Box styleVars={{
3149+
variable
3150+
}} />
3151+
"#,
3152+
ExtractOption {
3153+
package: "@devup-ui/core".to_string(),
3154+
css_file: None
3155+
}
3156+
)
3157+
.unwrap()
3158+
));
3159+
3160+
reset_class_map();
3161+
assert_debug_snapshot!(ToBTreeSet::from(
3162+
extract(
3163+
"test.jsx",
3164+
r#"import {Box} from '@devup-ui/core'
3165+
<Box styleVars={{
3166+
variable: true ? "red" : "blue"
3167+
}} />
3168+
"#,
3169+
ExtractOption {
3170+
package: "@devup-ui/core".to_string(),
3171+
css_file: None
3172+
}
3173+
)
3174+
.unwrap()
3175+
));
3176+
3177+
reset_class_map();
3178+
assert_debug_snapshot!(ToBTreeSet::from(
3179+
extract(
3180+
"test.jsx",
3181+
r#"import {Box} from '@devup-ui/core'
3182+
<Box style={{ "--d": "red" }} styleVars={{
3183+
variable: true ? "red" : "blue"
3184+
}} />
3185+
"#,
3186+
ExtractOption {
3187+
package: "@devup-ui/core".to_string(),
3188+
css_file: None
3189+
}
3190+
)
3191+
.unwrap()
3192+
));
3193+
3194+
reset_class_map();
3195+
assert_debug_snapshot!(ToBTreeSet::from(
3196+
extract(
3197+
"test.jsx",
3198+
r#"import {Box} from '@devup-ui/core'
3199+
<Box bg={color} style={{ "--d": "red" }} styleVars={{
3200+
variable: true ? "red" : "blue"
3201+
}} />
3202+
"#,
3203+
ExtractOption {
3204+
package: "@devup-ui/core".to_string(),
3205+
css_file: None
3206+
}
3207+
)
3208+
.unwrap()
3209+
));
3210+
3211+
reset_class_map();
3212+
assert_debug_snapshot!(ToBTreeSet::from(
3213+
extract(
3214+
"test.jsx",
3215+
r#"import {Box} from '@devup-ui/core'
3216+
<Box styleVars={{
3217+
["hello"]: "red"
3218+
}} />
3219+
"#,
3220+
ExtractOption {
3221+
package: "@devup-ui/core".to_string(),
3222+
css_file: None
3223+
}
3224+
)
3225+
.unwrap()
3226+
));
3227+
3228+
reset_class_map();
3229+
assert_debug_snapshot!(ToBTreeSet::from(
3230+
extract(
3231+
"test.jsx",
3232+
r#"import {Box} from '@devup-ui/core'
3233+
<Box styleVars={{
3234+
[true]: "red",
3235+
[1]: "blue",
3236+
[variable]: "green",
3237+
[2+2]: "yellow"
3238+
}} />
3239+
"#,
3240+
ExtractOption {
3241+
package: "@devup-ui/core".to_string(),
3242+
css_file: None
3243+
}
3244+
)
3245+
.unwrap()
3246+
));
3247+
3248+
reset_class_map();
3249+
assert_debug_snapshot!(ToBTreeSet::from(
3250+
extract(
3251+
"test.jsx",
3252+
r#"import {Box} from '@devup-ui/core'
3253+
<Box styleVars={styleVars} />
3254+
"#,
3255+
ExtractOption {
3256+
package: "@devup-ui/core".to_string(),
3257+
css_file: None
3258+
}
3259+
)
3260+
.unwrap()
3261+
));
3262+
}
30873263
}

0 commit comments

Comments
 (0)