Skip to content

Commit 546d41e

Browse files
committed
Implement responsive
ignore special props
1 parent 707987a commit 546d41e

File tree

51 files changed

+2071
-1166
lines changed

Some content is hidden

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

51 files changed

+2071
-1166
lines changed

Cargo.lock

Lines changed: 643 additions & 41 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Cargo.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
[workspace]
22
resolver = "2"
3-
members = ["libs/extractor", "bindings/devup-ui-wasm", "libs/sheet"]
3+
members = ["libs/extractor", "bindings/devup-ui-wasm", "libs/sheet", "libs/css"]

apps/next/src/app/page.tsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,26 @@ export default function HomePage() {
99

1010
return (
1111
<div>
12-
<Box bg="red" color={color} cursor="pointer" fontSize={32}>
12+
<a />
13+
<Box
14+
_hover={{
15+
bg: 'red',
16+
}}
17+
as="span"
18+
bg="blue"
19+
color={color}
20+
cursor="pointer"
21+
data-testid="box"
22+
fontSize={32}
23+
position="relative"
24+
py="28px"
25+
>
1326
hello
1427
</Box>
15-
<Box color={enabled ? 'red' : 'blue'} fontSize={32}>
28+
<Box color={enabled ? 'green' : 'blue'} fontSize={[32]} pr="20px">
1629
hello
1730
</Box>
31+
<Box fontSize={[12, 32]}>hello</Box>
1832
<button
1933
onClick={() => {
2034
setColor('blue')

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ impl Output {
2929
#[wasm_bindgen(getter)]
3030
pub fn css(&self) -> Option<String> {
3131
let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
32-
let mut collected = vec![];
32+
let mut collected = false;
3333
for style in self.styles.iter() {
3434
let (cls, variable) = match style.extract() {
3535
StyleProperty::ClassName(cls) => (cls, None),
@@ -42,32 +42,32 @@ impl Output {
4242
match style {
4343
ExtractStyleValue::Static(st) => {
4444
if let Some(css) =
45-
sheet.add_property(cls, st.property.clone(), st.value.clone())
45+
sheet.add_property(cls, st.property.clone(), st.level, st.value.clone())
4646
{
47-
collected.push(css);
47+
collected = true;
4848
}
4949
}
5050
ExtractStyleValue::Dynamic(dy) => {
5151
if let Some(css) = sheet.add_property(
5252
cls,
5353
dy.property.clone(),
54+
dy.level,
5455
format!("var({})", variable.unwrap()),
5556
) {
56-
collected.push(css);
57+
collected = true;
5758
}
5859
}
5960
ExtractStyleValue::Css(cs) => {
6061
if let Some(css) = sheet.add_css(cls, cs.css.clone()) {
61-
collected.push(css);
62+
collected = true;
6263
}
6364
}
6465
}
6566
}
66-
if collected.is_empty() {
67+
if !collected {
6768
return None;
6869
}
69-
collected.push("".to_string());
70-
Some(collected.join("\n"))
70+
Some(sheet.create_css(vec![0, 480, 768, 992, 1280]))
7171
}
7272
}
7373

libs/css/Cargo.toml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
[package]
2-
name = "sheet"
2+
name = "css"
33
version = "0.1.0"
44
edition = "2021"
55

6+
[dependencies]
7+
once_cell = "1.20.2"

libs/css/src/lib.rs

Lines changed: 105 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,106 @@
1-
pub enum Color {
2-
Bg = "background",
3-
BgColor = "background-color",
4-
Color = "color",
1+
use once_cell::sync::Lazy;
2+
use std::collections::HashMap;
3+
use std::hash::{DefaultHasher, Hasher};
4+
use std::sync::Mutex;
5+
6+
#[derive(Clone)]
7+
pub enum PropertyType {
8+
Single(String),
9+
Multi(Vec<String>),
10+
}
11+
12+
impl From<&str> for PropertyType {
13+
fn from(value: &str) -> Self {
14+
PropertyType::Single(value.to_string())
15+
}
16+
}
17+
18+
impl From<String> for PropertyType {
19+
fn from(value: String) -> Self {
20+
PropertyType::Single(value)
21+
}
22+
}
23+
24+
impl From<[&str; 2]> for PropertyType {
25+
fn from(value: [&str; 2]) -> Self {
26+
PropertyType::Multi(value.iter().map(|v| v.to_string()).collect())
27+
}
28+
}
29+
30+
static GLOBAL_STYLE_PROPERTY: Lazy<Mutex<HashMap<&str, PropertyType>>> = Lazy::new(|| {
31+
Mutex::new({
32+
let mut map = HashMap::new();
33+
34+
for (key, value) in [
35+
("bg", "background"),
36+
("bgColor", "background-color"),
37+
("color", "color"),
38+
("m", "margin"),
39+
("mt", "margin-top"),
40+
("mr", "margin-right"),
41+
("mb", "margin-bottom"),
42+
("ml", "margin-left"),
43+
("p", "padding"),
44+
("pt", "padding-top"),
45+
("pr", "padding-right"),
46+
("pb", "padding-bottom"),
47+
("pl", "padding-left"),
48+
("w", "width"),
49+
("h", "height"),
50+
("minW", "min-width"),
51+
("minH", "min-height"),
52+
("maxW", "max-width"),
53+
("maxH", "max-height"),
54+
] {
55+
map.insert(key, value.into());
56+
}
57+
58+
for (key, value) in [
59+
("mx", ["margin-left", "margin-right"]),
60+
("my", ["margin-top", "margin-bottom"]),
61+
("px", ["padding-left", "padding-right"]),
62+
("py", ["padding-top", "padding-bottom"]),
63+
] {
64+
map.insert(key, value.into());
65+
}
66+
map
67+
})
68+
});
69+
fn to_kebab_case(value: &str) -> String {
70+
value
71+
.chars()
72+
.enumerate()
73+
.map(|(i, c)| {
74+
if c.is_uppercase() {
75+
if i == 0 {
76+
c.to_ascii_lowercase().to_string()
77+
} else {
78+
format!("-{}", c.to_ascii_lowercase())
79+
}
80+
} else {
81+
c.to_string()
82+
}
83+
})
84+
.collect()
85+
}
86+
87+
pub fn convert_property(property: &str) -> PropertyType {
88+
GLOBAL_STYLE_PROPERTY
89+
.lock()
90+
.unwrap()
91+
.get(property)
92+
.cloned()
93+
.unwrap_or_else(|| to_kebab_case(property).into())
94+
}
95+
96+
pub fn sheet_to_classname(property: &str, level: u8, value: Option<&str>) -> String {
97+
let mut hasher = DefaultHasher::new();
98+
hasher.write(format!("{}-{}-{}", property, level, value.unwrap_or("")).as_bytes());
99+
format!("d{}", hasher.finish())
100+
}
101+
102+
pub fn sheet_to_variable_name(property: &str, level: u8) -> String {
103+
let mut hasher = DefaultHasher::new();
104+
hasher.write(format!("{}-{}", property, level).as_bytes());
105+
format!("--d{}", hasher.finish())
5106
}

libs/extractor/Cargo.toml

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ version = "0.1.0"
44
edition = "2021"
55

66
[dependencies]
7-
oxc_parser = "0.44.0"
8-
oxc_syntax = "0.44.0"
9-
oxc_span = "0.44.0"
10-
oxc_allocator = "0.44.0"
11-
oxc_ast = "0.44.0"
12-
oxc_codegen = "0.44.0"
7+
oxc_parser = "0.45.0"
8+
oxc_syntax = "0.45.0"
9+
oxc_span = "0.45.0"
10+
oxc_allocator = "0.45.0"
11+
oxc_ast = "0.45.0"
12+
oxc_codegen = "0.45.0"
13+
css = { path = "../css" }
1314

15+
[dev-dependencies]
16+
insta = "1.42.0"
17+
cargo-insta = "1.42.0"

libs/extractor/src/component.rs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,23 @@ pub enum ExportVariableKind {
1414
Css,
1515
}
1616

17+
impl ExportVariableKind {
18+
/// Convert the kind to a tag
19+
pub fn to_tag(&self) -> String {
20+
match self {
21+
ExportVariableKind::Center
22+
| ExportVariableKind::VStack
23+
| ExportVariableKind::Flex
24+
| ExportVariableKind::Box => "div",
25+
ExportVariableKind::Text => "span",
26+
ExportVariableKind::Button => "button",
27+
ExportVariableKind::Input => "input",
28+
ExportVariableKind::Css => unreachable!(),
29+
}
30+
.to_string()
31+
}
32+
}
33+
1734
impl ExportVariableKind {
1835
pub fn extract(&self) -> Vec<ExtractStyleValue> {
1936
match self {

0 commit comments

Comments
 (0)