Skip to content

Commit aa7f6c6

Browse files
davesnxdavesnx
committed
Fix other complex problems from admn
1 parent d317198 commit aa7f6c6

4 files changed

Lines changed: 366 additions & 0 deletions

File tree

‎packages/ppx/test/css-support/admin-support-regressions.t/input.re‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
module Alias = {
2+
module Shadow = {
3+
type t = CSS.Shadow.t;
4+
};
5+
};
6+
7+
module Color = {
8+
module Border = {
9+
let line = `rgba((0, 0, 0, `num(0.1)));
10+
let lineAlpha = `rgba((0, 0, 0, `num(0.05)));
11+
};
12+
};
13+
14+
module BoxShadow = {
15+
let deprecated__elevation1: array(Alias.Shadow.t) = [|
16+
CSS.Shadow.box(
17+
~x=`zero,
18+
~y=`zero,
19+
~blur=`zero,
20+
~spread=`px(1),
21+
`rgba((0, 0, 0, `num(0.03))),
22+
),
23+
CSS.Shadow.box(
24+
~x=`zero,
25+
~y=`px(1),
26+
~blur=`zero,
27+
~spread=`zero,
28+
`rgba((0, 0, 0, `num(0.06))),
29+
),
30+
|];
31+
32+
let deprecated__elevation3: array(Alias.Shadow.t) = [|
33+
CSS.Shadow.box(
34+
~x=`zero,
35+
~y=`zero,
36+
~blur=`zero,
37+
~spread=`px(1),
38+
`rgba((0, 0, 0, `num(0.08))),
39+
),
40+
CSS.Shadow.box(
41+
~x=`zero,
42+
~y=`px(3),
43+
~blur=`px(18),
44+
~spread=`zero,
45+
`rgba((0, 0, 0, `num(0.15))),
46+
),
47+
|];
48+
};
49+
50+
let topMenuHeight = `px(56);
51+
52+
let _borderTop = [%css {|border-top: 1px solid $(Color.Border.line)|}];
53+
let _borderBottom = [%css {|border-bottom: 1px solid $(Color.Border.lineAlpha)|}];
54+
let _borderLeft = [%css {|border-left: 1px solid $(Color.Border.lineAlpha)|}];
55+
56+
let _boxShadow1 = [%css {|box-shadow: $(BoxShadow.deprecated__elevation1)|}];
57+
let _boxShadow2 = [%css {|box-shadow: $(BoxShadow.deprecated__elevation3)|}];
58+
59+
let _heightPlus = [%css {|height: calc(100vh + $(topMenuHeight))|}];
60+
let _heightMinus = [%css {|height: calc(100vh - $(topMenuHeight))|}];

‎packages/ppx/test/css-support/admin-support-regressions.t/run.t‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
This test captures the admin-support monorepo regressions that belong to styled-ppx itself: border-side shorthands with interpolated colors, shadow-array interpolation, and `calc()` length interpolation.
2+
3+
$ cat > dune-project << EOF
4+
> (lang dune 3.10)
5+
> EOF
6+
7+
$ cat > dune << EOF
8+
> (executable
9+
> (name input)
10+
> (libraries styled-ppx.native)
11+
> (preprocess (pps styled-ppx)))
12+
> EOF
13+
14+
$ dune build
15+
16+
$ dune describe pp ./input.re | sed -n '/let _borderTop/,$p'
17+
let _borderTop = CSS.borderTop(`pxFloat(1.), `solid, Color.Border.line);
18+
let _borderBottom =
19+
CSS.borderBottom(`pxFloat(1.), `solid, Color.Border.lineAlpha);
20+
let _borderLeft =
21+
CSS.borderLeft(`pxFloat(1.), `solid, Color.Border.lineAlpha);
22+
23+
let _boxShadow1 = CSS.boxShadows(BoxShadow.deprecated__elevation1);
24+
let _boxShadow2 = CSS.boxShadows(BoxShadow.deprecated__elevation3);
25+
26+
let _heightPlus = CSS.height(`calc(`add((`vh(100.), topMenuHeight))));
27+
let _heightMinus = CSS.height(`calc(`sub((`vh(100.), topMenuHeight))));

‎packages/ppx/test/css-support/missing-semicolon-before-nested-block.t/input.re‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
let _case1 = [%cx
2+
{|
3+
background-color: red
4+
5+
&:nth-child(2n) {
6+
background-color: blue;
7+
}
8+
|}
9+
];
10+
11+
let _case2 = [%cx
12+
{|
13+
transition: max-height 400ms ease-in-out 0ms & > * {
14+
opacity: 0;
15+
transition-duration: 400ms;
16+
}
17+
|}
18+
];
19+
20+
let _case3 = [%cx
21+
{|
22+
margin-bottom: 24px @media (min-width: 1024px) {
23+
width: 50%;
24+
}
25+
|}
26+
];
27+
28+
let _case4 = [%cx
29+
{|
30+
transition: transform 200ms ease-in-out 0ms /* Need to use selectSelf. */
31+
&.contentAfterOpen {
32+
transform: translateY(16px);
33+
}
34+
|}
35+
];
36+
37+
let _case5 = [%cx
38+
{|
39+
border-bottom: 1px solid black
40+
41+
&:last-child {
42+
padding-bottom: 0;
43+
border-bottom-width: 0;
44+
}
45+
|}
46+
];
47+
48+
let _case6 = [%cx
49+
{|
50+
justify-content: space-between @media (min-width: 768px) {
51+
justify-content: center;
52+
}
53+
|}
54+
];
55+
56+
let _case7 = [%cx
57+
{|
58+
width: min-content @media (min-width: 1200px) {
59+
padding-top: 8px;
60+
}
61+
|}
62+
];
63+
64+
let _case8 = [%cx
65+
{|
66+
height: 100% & h4 {
67+
padding: 0;
68+
}
69+
|}
70+
];
71+
72+
let _case9 = [%cx
73+
{|
74+
transition: all 200ms ease 0ms &.sidebarClosed {
75+
min-width: 0;
76+
max-width: 0;
77+
opacity: 0;
78+
overflow: hidden;
79+
padding-left: 0;
80+
padding-right: 0;
81+
}
82+
|}
83+
];
84+
85+
let _case10 = [%cx
86+
{|
87+
color: red
88+
.child {
89+
color: blue;
90+
}
91+
|}
92+
];
93+
94+
let _case11 = [%cx
95+
{|
96+
color: red
97+
div {
98+
color: blue;
99+
}
100+
|}
101+
];
102+
103+
let _case12 = [%cx
104+
{|
105+
color: red
106+
#child {
107+
color: blue;
108+
}
109+
|}
110+
];
111+
112+
let _case13 = [%cx
113+
{|
114+
color: red
115+
svg path {
116+
fill: blue;
117+
}
118+
|}
119+
];

‎packages/ppx/test/css-support/missing-semicolon-before-nested-block.t/run.t‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
This test ensures declaration lists accept nested selectors and `@media` blocks even when the preceding declaration omits its trailing semicolon.
2+
3+
$ cat > dune-project << EOF
4+
> (lang dune 3.10)
5+
> EOF
6+
7+
$ cat > dune << EOF
8+
> (executable
9+
> (name input)
10+
> (libraries styled-ppx.native)
11+
> (preprocess (pps styled-ppx)))
12+
> EOF
13+
14+
$ dune build
15+
16+
$ dune describe pp ./input.re | sed -n '/let _case1/,$p'
17+
let _case1 =
18+
CSS.style([|
19+
CSS.label("_case1"),
20+
CSS.backgroundColor(CSS.red),
21+
CSS.selectorMany(
22+
[|{js|&:nth-child(2n)|js}|],
23+
[|CSS.backgroundColor(CSS.blue)|],
24+
),
25+
|]);
26+
27+
let _case2 =
28+
CSS.style([|
29+
CSS.label("_case2"),
30+
CSS.transitions([|
31+
CSS.Types.Transition.Value.make(
32+
~behavior=?None,
33+
~duration=?Some(`ms(400)),
34+
~delay=?Some(`ms(0)),
35+
~timingFunction=?Some(`easeInOut),
36+
~property=?
37+
Some(CSS.Types.TransitionProperty.make({js|max-height|js})),
38+
(),
39+
),
40+
|]),
41+
CSS.selectorMany(
42+
[|{js|& > *|js}|],
43+
[|CSS.opacity(0.), CSS.transitionDuration(`ms(400))|],
44+
),
45+
|]);
46+
47+
let _case3 =
48+
CSS.style([|
49+
CSS.label("_case3"),
50+
CSS.marginBottom(`pxFloat(24.)),
51+
CSS.media({js|(min-width: 1024px)|js}, [|CSS.width(`percent(50.))|]),
52+
|]);
53+
54+
let _case4 =
55+
CSS.style([|
56+
CSS.label("_case4"),
57+
CSS.transitions([|
58+
CSS.Types.Transition.Value.make(
59+
~behavior=?None,
60+
~duration=?Some(`ms(200)),
61+
~delay=?Some(`ms(0)),
62+
~timingFunction=?Some(`easeInOut),
63+
~property=?
64+
Some(CSS.Types.TransitionProperty.make({js|transform|js})),
65+
(),
66+
),
67+
|]),
68+
CSS.selectorMany(
69+
[|{js|&.contentAfterOpen|js}|],
70+
[|CSS.transform(CSS.translateY(`pxFloat(16.)))|],
71+
),
72+
|]);
73+
74+
let _case5 =
75+
CSS.style([|
76+
CSS.label("_case5"),
77+
CSS.borderBottom(`pxFloat(1.), `solid, CSS.black),
78+
CSS.selectorMany(
79+
[|{js|&:last-child|js}|],
80+
[|CSS.paddingBottom(`zero), CSS.borderBottomWidth(`zero)|],
81+
),
82+
|]);
83+
84+
let _case6 =
85+
CSS.style([|
86+
CSS.label("_case6"),
87+
CSS.justifyContent(`spaceBetween),
88+
CSS.media({js|(min-width: 768px)|js}, [|CSS.justifyContent(`center)|]),
89+
|]);
90+
91+
let _case7 =
92+
CSS.style([|
93+
CSS.label("_case7"),
94+
CSS.width(`minContent),
95+
CSS.media(
96+
{js|(min-width: 1200px)|js},
97+
[|CSS.paddingTop(`pxFloat(8.))|],
98+
),
99+
|]);
100+
101+
let _case8 =
102+
CSS.style([|
103+
CSS.label("_case8"),
104+
CSS.height(`percent(100.)),
105+
CSS.selectorMany([|{js|& h4|js}|], [|CSS.padding(`zero)|]),
106+
|]);
107+
108+
let _case9 =
109+
CSS.style([|
110+
CSS.label("_case9"),
111+
CSS.transitions([|
112+
CSS.Types.Transition.Value.make(
113+
~behavior=?None,
114+
~duration=?Some(`ms(200)),
115+
~delay=?Some(`ms(0)),
116+
~timingFunction=?Some(`ease),
117+
~property=?Some(CSS.Types.TransitionProperty.all),
118+
(),
119+
),
120+
|]),
121+
CSS.selectorMany(
122+
[|{js|&.sidebarClosed|js}|],
123+
[|
124+
CSS.minWidth(`zero),
125+
CSS.maxWidth(`zero),
126+
CSS.opacity(0.),
127+
CSS.overflow(`hidden),
128+
CSS.paddingLeft(`zero),
129+
CSS.paddingRight(`zero),
130+
|],
131+
),
132+
|]);
133+
134+
let _case10 =
135+
CSS.style([|
136+
CSS.label("_case10"),
137+
CSS.color(CSS.red),
138+
CSS.selectorMany([|{js|.child|js}|], [|CSS.color(CSS.blue)|]),
139+
|]);
140+
141+
let _case11 =
142+
CSS.style([|
143+
CSS.label("_case11"),
144+
CSS.color(CSS.red),
145+
CSS.selectorMany([|{js|div|js}|], [|CSS.color(CSS.blue)|]),
146+
|]);
147+
148+
let _case12 =
149+
CSS.style([|
150+
CSS.label("_case12"),
151+
CSS.color(CSS.red),
152+
CSS.selectorMany([|{js|#child|js}|], [|CSS.color(CSS.blue)|]),
153+
|]);
154+
155+
let _case13 =
156+
CSS.style([|
157+
CSS.label("_case13"),
158+
CSS.color(CSS.red),
159+
CSS.selectorMany([|{js|svg path|js}|], [|CSS.SVG.fill(CSS.blue)|]),
160+
|]);

0 commit comments

Comments
 (0)