Skip to content

Commit e376e35

Browse files
committed
Merge branch 'main' of https://github.com/dev-five-git/devup-ui into feat-components
2 parents c9c963c + 7d1cbbb commit e376e35

File tree

50 files changed

+1032
-281
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1032
-281
lines changed

bindings/devup-ui-wasm/CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# @devup-ui/wasm
22

3+
## 1.0.6
4+
5+
### Patch Changes
6+
7+
- 4e4bcf1: Apply optimize_value to dynamic value, remove semicolon on optimize_value
8+
- 2dd81f5: Implement styleVars
9+
310
## 1.0.5
411

512
### Patch Changes

bindings/devup-ui-wasm/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"react",
1818
"wasm"
1919
],
20-
"version": "1.0.5",
20+
"version": "1.0.6",
2121
"scripts": {
2222
"build": "wasm-pack build --target nodejs --out-dir ./pkg --out-name index && node script.js",
2323
"test": "wasm-pack test --node"

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: 43 additions & 11 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 {
@@ -375,6 +375,22 @@ pub fn optimize_value(value: &str) -> String {
375375
if ret.contains("0") {
376376
ret = ZERO_RE.replace_all(&ret, "${1}0").to_string();
377377
}
378+
// remove ; from dynamic value
379+
for str_symbol in ["", "`", "\"", "'"] {
380+
if ret.ends_with(&format!(";{str_symbol}")) {
381+
ret = format!(
382+
"{}{}",
383+
ret[..ret.len() - str_symbol.len() - 1].trim_end_matches(';'),
384+
str_symbol
385+
);
386+
} else if ret.ends_with(&format!(";{str_symbol})")) {
387+
ret = format!(
388+
"{}{})",
389+
ret[..ret.len() - str_symbol.len() - 2].trim_end_matches(';'),
390+
str_symbol
391+
);
392+
}
393+
}
378394
ret
379395
}
380396

@@ -411,7 +427,7 @@ pub fn sheet_to_classname(
411427
style_order.unwrap_or(255)
412428
);
413429
let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
414-
map.get(&key).map(|v| format!("d{}", v)).unwrap_or_else(|| {
430+
map.get(&key).map(|v| format!("d{v}")).unwrap_or_else(|| {
415431
let len = map.len();
416432
map.insert(key, len as i32);
417433
format!("d{}", map.len() - 1)
@@ -426,7 +442,7 @@ pub fn css_to_classname(css: &str) -> String {
426442
format!("css-{}", hasher.finish())
427443
} else {
428444
let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
429-
map.get(css).map(|v| format!("d{}", v)).unwrap_or_else(|| {
445+
map.get(css).map(|v| format!("d{v}")).unwrap_or_else(|| {
430446
let len = map.len();
431447
map.insert(css.to_string(), len as i32);
432448
format!("d{}", map.len() - 1)
@@ -453,7 +469,7 @@ pub fn sheet_to_variable_name(property: &str, level: u8, selector: Option<&str>)
453469
let key = format!("{}-{}-{}", property, level, selector.unwrap_or("").trim());
454470
let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
455471
map.get(&key)
456-
.map(|v| format!("--d{}", v))
472+
.map(|v| format!("--d{v}"))
457473
.unwrap_or_else(|| {
458474
let len = map.len();
459475
map.insert(key, len as i32);
@@ -534,12 +550,24 @@ mod tests {
534550
assert_eq!(optimize_value("-0vw -0vw"), "0 0");
535551
assert_eq!(optimize_value("scale(0px)"), "scale(0)");
536552
assert_eq!(optimize_value("scale(-0px)"), "scale(0)");
553+
assert_eq!(optimize_value("scale(-0px);"), "scale(0)");
554+
assert_eq!(optimize_value("red;"), "red");
537555
assert_eq!(optimize_value("translate(0px)"), "translate(0)");
538556
assert_eq!(optimize_value("translate(-0px,0px)"), "translate(0,0)");
539557
assert_eq!(optimize_value("translate(-0px, 0px)"), "translate(0,0)");
540558
assert_eq!(optimize_value("translate(0px, 0px)"), "translate(0,0)");
541559
assert_eq!(optimize_value("translate(0px, 0px)"), "translate(0,0)");
542560
assert_eq!(optimize_value("translate(10px, 0px)"), "translate(10px,0)");
561+
assert_eq!(optimize_value("\"red\""), "\"red\"");
562+
assert_eq!(optimize_value("'red'"), "'red'");
563+
assert_eq!(optimize_value("`red`"), "`red`");
564+
assert_eq!(optimize_value("\"red;\""), "\"red\"");
565+
assert_eq!(optimize_value("'red;'"), "'red'");
566+
assert_eq!(optimize_value("`red;`"), "`red`");
567+
assert_eq!(optimize_value("(\"red;\")"), "(\"red\")");
568+
assert_eq!(optimize_value("(`red;`)"), "(`red`)");
569+
assert_eq!(optimize_value("('red;')"), "('red')");
570+
assert_eq!(optimize_value("('red') + 'blue;'"), "('red') + 'blue'");
543571
assert_eq!(
544572
optimize_value("translateX(0px) translateY(0px)"),
545573
"translateX(0) translateY(0)"
@@ -578,6 +606,10 @@ mod tests {
578606
sheet_to_classname("background", 0, Some("red"), None, None),
579607
sheet_to_classname(" background ", 0, Some(" red "), None, None),
580608
);
609+
assert_eq!(
610+
sheet_to_classname("background", 0, Some("red"), None, None),
611+
sheet_to_classname(" background ", 0, Some("red;"), None, None),
612+
);
581613
assert_eq!(
582614
sheet_to_classname("background", 0, Some("rgba(255, 0, 0, 0.5)"), None, None),
583615
sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None, None),

libs/extractor/src/extract_style/mod.rs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ impl ExtractDynamicStyle {
158158
Self {
159159
property: short_to_long(property),
160160
level,
161-
identifier: identifier.to_string(),
161+
identifier: optimize_value(identifier),
162162
selector,
163163
style_order: None,
164164
}
@@ -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/gen_class_name.rs

Lines changed: 1 addition & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ use crate::{ExtractStyleProp, StyleProperty};
22
use oxc_allocator::CloneIn;
33
use oxc_ast::AstBuilder;
44
use oxc_ast::ast::{
5-
Expression, JSXAttribute, JSXAttributeValue, JSXExpression, ObjectPropertyKind, PropertyKey,
5+
Expression, ObjectPropertyKind, PropertyKey,
66
PropertyKind, TemplateElement, TemplateElementValue,
77
};
88
use oxc_span::SPAN;
@@ -214,52 +214,3 @@ pub fn merge_expression_for_class_name<'a>(
214214
)))
215215
}
216216
}
217-
218-
pub fn apply_class_name_attribute<'a>(
219-
ast_builder: &AstBuilder<'a>,
220-
class_prop: &mut JSXAttribute<'a>,
221-
expression: Expression<'a>,
222-
) {
223-
if let Some(ref value) = class_prop.value {
224-
if let Some(ret) = match value {
225-
JSXAttributeValue::StringLiteral(str) => merge_expression_for_class_name(
226-
ast_builder,
227-
vec![
228-
Expression::StringLiteral(str.clone_in(ast_builder.allocator)),
229-
expression,
230-
],
231-
),
232-
JSXAttributeValue::ExpressionContainer(container) => match container.expression {
233-
JSXExpression::EmptyExpression(_) => Some(expression),
234-
_ => merge_expression_for_class_name(
235-
ast_builder,
236-
vec![
237-
container
238-
.expression
239-
.clone_in(ast_builder.allocator)
240-
.into_expression(),
241-
expression,
242-
],
243-
),
244-
},
245-
_ => None,
246-
} {
247-
class_prop.value = match ret {
248-
Expression::StringLiteral(literal) => Some(JSXAttributeValue::StringLiteral(
249-
literal.clone_in(ast_builder.allocator),
250-
)),
251-
_ => Some(JSXAttributeValue::ExpressionContainer(
252-
ast_builder.alloc_jsx_expression_container(SPAN, JSXExpression::from(ret)),
253-
)),
254-
}
255-
}
256-
} else {
257-
class_prop.value = Some(if let Expression::StringLiteral(literal) = expression {
258-
JSXAttributeValue::StringLiteral(literal.clone_in(ast_builder.allocator))
259-
} else {
260-
JSXAttributeValue::ExpressionContainer(
261-
ast_builder.alloc_jsx_expression_container(SPAN, JSXExpression::from(expression)),
262-
)
263-
});
264-
};
265-
}

libs/extractor/src/gen_style.rs

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
use crate::{ExtractStyleProp, StyleProperty};
22
use oxc_allocator::CloneIn;
33
use oxc_ast::AstBuilder;
4-
use oxc_ast::ast::{
5-
Expression, JSXAttribute, JSXAttributeValue, JSXExpression, ObjectExpression,
6-
ObjectPropertyKind, PropertyKey, PropertyKind,
7-
};
4+
use oxc_ast::ast::{Expression, ObjectPropertyKind, PropertyKey, PropertyKind};
85
use oxc_span::SPAN;
96
use std::collections::BTreeMap;
107
pub fn gen_styles<'a>(
118
ast_builder: &AstBuilder<'a>,
129
style_props: &[ExtractStyleProp<'a>],
13-
) -> Option<ObjectExpression<'a>> {
10+
) -> Option<Expression<'a>> {
1411
if style_props.is_empty() {
1512
return None;
1613
}
@@ -22,9 +19,11 @@ pub fn gen_styles<'a>(
2219
if properties.is_empty() {
2320
return None;
2421
}
25-
Some(ast_builder.object_expression(
26-
SPAN,
27-
oxc_allocator::Vec::from_iter_in(properties, ast_builder.allocator),
22+
Some(Expression::ObjectExpression(
23+
ast_builder.alloc_object_expression(
24+
SPAN,
25+
oxc_allocator::Vec::from_iter_in(properties, ast_builder.allocator),
26+
),
2827
))
2928
}
3029
fn gen_style<'a>(
@@ -345,39 +344,3 @@ fn gen_style<'a>(
345344
properties.reverse();
346345
properties
347346
}
348-
349-
pub fn apply_style_attribute<'a>(
350-
ast_builder: &AstBuilder<'a>,
351-
style_prop: &mut JSXAttribute<'a>,
352-
// must be an object expression
353-
mut expression: ObjectExpression<'a>,
354-
) {
355-
if let Some(ref mut value) = style_prop.value {
356-
if let JSXAttributeValue::ExpressionContainer(container) = value {
357-
if let Some(spread_property) = match &container.expression {
358-
JSXExpression::ObjectExpression(obj) => Some(Expression::ObjectExpression(
359-
obj.clone_in(ast_builder.allocator),
360-
)),
361-
JSXExpression::Identifier(ident) => Some(Expression::Identifier(
362-
ident.clone_in(ast_builder.allocator),
363-
)),
364-
_ => None,
365-
} {
366-
expression.properties.insert(
367-
0,
368-
ObjectPropertyKind::SpreadProperty(
369-
ast_builder.alloc_spread_element(SPAN, spread_property),
370-
),
371-
);
372-
}
373-
container.expression = JSXExpression::ObjectExpression(ast_builder.alloc(expression));
374-
}
375-
} else {
376-
style_prop.value = Some(JSXAttributeValue::ExpressionContainer(
377-
ast_builder.alloc_jsx_expression_container(
378-
SPAN,
379-
JSXExpression::ObjectExpression(ast_builder.alloc(expression)),
380-
),
381-
));
382-
};
383-
}

0 commit comments

Comments
 (0)