Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Handle var() globally #504

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Handle var() globally #504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/css-property-parser/lib/Parser.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ and cf_mixing_image = [%value.rec "[ <extended-percentage> ]? && <image>"]
and class_selector = [%value.rec "'.' <ident-token>"]
and clip_source = [%value.rec "<url>"]
and color = [%value.rec
"<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | 'currentColor' | <deprecated-system-color> | <interpolation> | <var()> | <color-mix()>"
"<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | 'currentColor' | <deprecated-system-color> | <interpolation> | <color-mix()>"
]
and color_stop = [%value.rec "<color-stop-length> | <color-stop-angle>"]
and color_stop_angle = [%value.rec "[ <extended-angle> ]{1,2}"]
Expand Down
53 changes: 39 additions & 14 deletions packages/ppx/src/Property_to_runtime.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1034,11 +1034,6 @@ let render_function_hsla = (~loc, (hue, saturation, lightness, alpha)) => {
};
};

let render_var = (~loc, string) => {
let string = render_string(~loc, string);
[%expr `var([%e string])];
};

let rec render_color = (~loc, value) =>
switch ((value: Types.color)) {
| `Interpolation(v) => render_variable(~loc, v)
Expand All @@ -1049,7 +1044,6 @@ let rec render_color = (~loc, value) =>
render_function_color_mix(~loc, color_mix)
| `Function_rgb(rgb) => render_function_rgb(~loc, rgb)
| `Function_rgba(rgba) => render_function_rgba(~loc, rgba)
| `Function_var(v) => render_var(~loc, v)
| `Function_hsl(`Hsl_0(hsl)) => render_function_hsl(~loc, hsl)
| `Function_hsla(`Hsla_0(hsla)) => render_function_hsla(~loc, hsla)
/* Function_hsl(a) with `Hsl(a)_1 aren't supported */
Expand Down Expand Up @@ -5370,6 +5364,33 @@ let render_to_expr = (~loc, property, value, important) => {
};
};

let render_css_variable = (~loc, property, value) => {
let.ok tokens =
Styled_ppx_css_parser.Lexer.tokenize(property ++ ": " ++ value ++ ";")
|> Result.map_error(_ =>
failwith("property and value should already be valid")
);

let varExist =
List.exists(
((token, _, _)) => {
switch ((token: Styled_ppx_css_parser.Parser.token)) {
| FUNCTION("var") => true
| _ => false
}
},
tokens,
);

if (varExist) {
let property = property |> to_camel_case |> render_string(~loc);
let value = value |> render_string(~loc);
Ok([[%expr CSS.unsafe([%e property], [%e value])]]);
} else {
Error("CSS variable does not exist");
};
};

let render = (~loc: Location.t, property, value, important) =>
if (isVariableDeclaration(property)) {
Ok([render_variable_declaration(~loc, property, value)]);
Expand All @@ -5378,17 +5399,21 @@ let render = (~loc: Location.t, property, value, important) =>
Property_parser.check_property(~name=property, value)
|> Result.map_error((`Unknown_value) => `Property_not_found);

switch (render_css_global_values(~loc, property, value)) {
switch (render_css_variable(~loc, property, value)) {
| Ok(value) => Ok(value)
| Error(_) =>
switch (render_to_expr(~loc, property, value, important)) {
switch (render_css_global_values(~loc, property, value)) {
| Ok(value) => Ok(value)
| exception (Invalid_value(v)) =>
Error(`Invalid_value(value ++ ". " ++ v))
| Error(_)
| exception Unsupported_feature =>
let.ok () = is_valid_string ? Ok() : Error(`Invalid_value(value));
Ok([render_when_unsupported_features(~loc, property, value)]);
| Error(_) =>
switch (render_to_expr(~loc, property, value, important)) {
| Ok(value) => Ok(value)
| exception (Invalid_value(v)) =>
Error(`Invalid_value(value ++ ". " ++ v))
| Error(_)
| exception Unsupported_feature =>
let.ok () = is_valid_string ? Ok() : Error(`Invalid_value(value));
Ok([render_when_unsupported_features(~loc, property, value)]);
}
}
};
};
4 changes: 2 additions & 2 deletions packages/ppx/test/css-support/random.t/run.t
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ If this test fail means that the module is not in sync with the ppx
CSS.unsafe({js|breakInside|js}, {js|avoid|js});
CSS.unsafe({js|caretColor|js}, {js|#e15a46|js});
CSS.unsafe({js|color|js}, {js|inherit|js});
CSS.color(`var({js|--color-link|js}));
CSS.unsafe({js|color|js}, {js|var(--color-link)|js});
CSS.columnWidth(`pxFloat(125.));
CSS.columnWidth(`auto);

Expand Down Expand Up @@ -150,6 +150,6 @@ If this test fail means that the module is not in sync with the ppx

CSS.style([|CSS.aspectRatio(`ratio((16, 9)))|]);

CSS.color(`var({js|--color-link|js}));
CSS.unsafe({js|color|js}, {js|var(--color-link)|js});

$ dune build
9 changes: 7 additions & 2 deletions packages/ppx/test/native/Static_test.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -787,7 +787,12 @@ let properties_static_css_tests = [
(
[%css "color: var(--main-c)"],
[%expr [%css "color: var(--main-c)"]],
[%expr CSS.color(`var({js|--main-c|js}))],
[%expr CSS.unsafe({js|color|js}, {js|var(--main-c)|js})],
),
(
[%css "transition-property: var(--a) random 10px var(--b)"],
[%expr [%css "transition-property: var(--a) random 10px var(--b)"]],
[%expr CSS.unsafe({js|transitionProperty|js}, {js|var(--a) random 10px var(--b)|js})],
),
(
[%css "box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2)"],
Expand Down Expand Up @@ -1249,7 +1254,7 @@ let properties_static_css_tests = [
(
[%css {|color: var(--color-link);|}],
[%expr [%css {|color: var(--color-link);|}]],
[%expr CSS.color(`var({js|--color-link|js}))],
[%expr CSS.unsafe({js|color|js}, {js|var(--color-link)|js})],
),
// unsupported
/*
Expand Down
Loading