diff --git a/packages/ppx/src/Css_to_runtime.re b/packages/ppx/src/Css_to_runtime.re index 1e4ab3d79..84be7133e 100644 --- a/packages/ppx/src/Css_to_runtime.re +++ b/packages/ppx/src/Css_to_runtime.re @@ -9,7 +9,7 @@ module CSS = { /* This is the public API of the CSS module */ let ident = (~loc, name) => {txt: Ldot(Lident("CSS"), name), loc} |> Builder.pexp_ident(~loc); - let selector = (~loc) => ident(~loc, "selector"); + let selectorMany = (~loc) => ident(~loc, "selectorMany"); let media = (~loc) => ident(~loc, "media"); let global = (~loc) => ident(~loc, "global"); let label = (~loc) => ident(~loc, "label"); @@ -166,12 +166,15 @@ and render_container_query = (~loc, at_rule: at_rule) => { | Error(error_expr) => error_expr | Ok(conditions) => let query = - String_interpolation.transform( - ~attrs, - ~delimiter, - ~loc=at_rule.loc, - "@container " ++ conditions, - ); + [ + String_interpolation.transform( + ~attrs, + ~delimiter, + ~loc=at_rule.loc, + "@container " ++ conditions, + ), + ] + |> Builder.pexp_array(~loc=at_rule.loc); let rules = switch (at_rule.block) { @@ -186,7 +189,7 @@ and render_container_query = (~loc, at_rule: at_rule) => { Helper.Exp.apply( ~loc=at_rule.loc, - CSS.selector(~loc=at_rule.loc), + CSS.selectorMany(~loc=at_rule.loc), [(Nolabel, query), (Nolabel, rules)], ); }; @@ -336,7 +339,11 @@ and render_selector = (~loc, selector: selector) => { ":" ++ name ++ "(" - ++ (render_selectors(~loc, payload) |> String.trim) + ++ ( + render_selectors(~loc, payload) + |> String.concat(", ") + |> String.trim + ) ++ ")"; } and render_pseudo_selector = @@ -389,8 +396,7 @@ and render_selector = (~loc, selector: selector) => { } and render_selectors = (~loc, selectors) => { selectors - |> List.map(((selector, _loc)) => render_selector(~loc, selector)) - |> String.concat(", "); + |> List.map(((selector, _loc)) => render_selector(~loc, selector)); } and render_style_rule = (~loc, rule: style_rule) => { let (prelude, prelude_loc) = rule.prelude; @@ -407,16 +413,19 @@ and render_style_rule = (~loc, rule: style_rule) => { let selector_name = prelude |> render_selectors(~loc=selector_location) - |> String.trim - |> String_interpolation.transform( - ~attrs, - ~delimiter, - ~loc=selector_location, - ); + |> List.map(String.trim) + |> List.map( + String_interpolation.transform( + ~attrs, + ~delimiter, + ~loc=selector_location, + ), + ) + |> Builder.pexp_array(~loc=selector_location); Helper.Exp.apply( ~loc=selector_location, - CSS.selector(~loc=selector_location), + CSS.selectorMany(~loc=selector_location), [(Nolabel, selector_name), (Nolabel, selector_expr)], ); }; diff --git a/packages/ppx/test/css-support/non-valid-property-location-error-nested.t/run.t b/packages/ppx/test/css-support/non-valid-property-location-error-nested.t/run.t index afaaf845b..fb7105dde 100644 --- a/packages/ppx/test/css-support/non-valid-property-location-error-nested.t/run.t +++ b/packages/ppx/test/css-support/non-valid-property-location-error-nested.t/run.t @@ -23,8 +23,8 @@ If this test fail means that the module is not in sync with the ppx CSS.style([| CSS.label("selectors"), CSS.color(CSS.white), - CSS.selector( - {js|&:hover|js}, + CSS.selectorMany( + [|{js|&:hover|js}|], [|[%ocaml.error "Unknown property 'colorx'"]|], ), |]); diff --git a/packages/ppx/test/css-support/non-valid-value-location-error-nested.t/run.t b/packages/ppx/test/css-support/non-valid-value-location-error-nested.t/run.t index 8adfb4a7b..ad2fddc41 100644 --- a/packages/ppx/test/css-support/non-valid-value-location-error-nested.t/run.t +++ b/packages/ppx/test/css-support/non-valid-value-location-error-nested.t/run.t @@ -23,8 +23,8 @@ If this test fail means that the module is not in sync with the ppx CSS.style([| CSS.label("selectors"), CSS.color(CSS.white), - CSS.selector( - {js|&:hover|js}, + CSS.selectorMany( + [|{js|&:hover|js}|], [|[%ocaml.error "Property 'color' has an invalid value: 'cositas'"]|], ), |]); diff --git a/packages/ppx/test/css-support/selector-interp-location-error.t/run.t b/packages/ppx/test/css-support/selector-interp-location-error.t/run.t index dea40eea3..6b65edc2f 100644 --- a/packages/ppx/test/css-support/selector-interp-location-error.t/run.t +++ b/packages/ppx/test/css-support/selector-interp-location-error.t/run.t @@ -21,7 +21,10 @@ If this test fail means that the module is not in sync with the ppx let _className = CSS.style([| CSS.label("_className"), - CSS.selector({js|.lolaso :nth-child(2n)|js}, [|CSS.color(CSS.red)|]), + CSS.selectorMany( + [|{js|.lolaso :nth-child(2n)|js}|], + [|CSS.color(CSS.red)|], + ), |]); let _className = [%ocaml.error "Parse error while reading token '2'"]; diff --git a/packages/ppx/test/css-support/selectors.t/run.t b/packages/ppx/test/css-support/selectors.t/run.t index 29b808c74..93aeac4e5 100644 --- a/packages/ppx/test/css-support/selectors.t/run.t +++ b/packages/ppx/test/css-support/selectors.t/run.t @@ -18,25 +18,27 @@ If this test fail means that the module is not in sync with the ppx CSS.style([| CSS.label("_chart"), CSS.userSelect(`none), - CSS.selector( - {js|.recharts-cartesian-grid-horizontal|js}, + CSS.selectorMany( + [|{js|.recharts-cartesian-grid-horizontal|js}|], [| - CSS.selector( - {js|line|js}, + CSS.selectorMany( + [|{js|line|js}|], [| - CSS.selector( - {js|:nth-last-child(1), :nth-last-child(2)|js}, + CSS.selectorMany( + [|{js|:nth-last-child(1)|js}, {js|:nth-last-child(2)|js}|], [|CSS.SVG.strokeOpacity(`num(0.))|], ), |], ), |], ), - CSS.selector( - {js|.recharts-scatter .recharts-scatter-symbol .recharts-symbols|js}, + CSS.selectorMany( + [| + {js|.recharts-scatter .recharts-scatter-symbol .recharts-symbols|js}, + |], [| CSS.opacity(0.8), - CSS.selector({js|:hover|js}, [|CSS.opacity(1.)|]), + CSS.selectorMany([|{js|:hover|js}|], [|CSS.opacity(1.)|]), |], ), |]); diff --git a/packages/ppx/test/native/At_rule_test.re b/packages/ppx/test/native/At_rule_test.re index 86a348f02..938dc5c4e 100644 --- a/packages/ppx/test/native/At_rule_test.re +++ b/packages/ppx/test/native/At_rule_test.re @@ -257,7 +257,7 @@ let container_query_tests = [ [%expr [%cx "@container (min-width: 150px) {}"]], [%expr CSS.style([| - CSS.selector({js|@container (min-width: 150px)|js}, [||]), + CSS.selectorMany([|{js|@container (min-width: 150px)|js}|], [||]), |]) ], ), @@ -266,7 +266,7 @@ let container_query_tests = [ [%expr [%cx "@container (max-width: 1000px) {}"]], [%expr CSS.style([| - CSS.selector({js|@container (max-width: 1000px)|js}, [||]), + CSS.selectorMany([|{js|@container (max-width: 1000px)|js}|], [||]), |]) ], ), @@ -275,7 +275,7 @@ let container_query_tests = [ [%expr [%cx "@container name (width >= 150px) {}"]], [%expr CSS.style([| - CSS.selector({js|@container name (width >= 150px)|js}, [||]), + CSS.selectorMany([|{js|@container name (width >= 150px)|js}|], [||]), |]) ], ), @@ -283,7 +283,9 @@ let container_query_tests = [ "(height >= 150px)", [%expr [%cx "@container (height >= 150px) {}"]], [%expr - CSS.style([|CSS.selector({js|@container (height >= 150px)|js}, [||])|]) + CSS.style([| + CSS.selectorMany([|{js|@container (height >= 150px)|js}|], [||]), + |]) ], ), ( @@ -291,7 +293,7 @@ let container_query_tests = [ [%expr [%cx "@container (inline-size >= 150px) {}"]], [%expr CSS.style([| - CSS.selector({js|@container (inline-size >= 150px)|js}, [||]), + CSS.selectorMany([|{js|@container (inline-size >= 150px)|js}|], [||]), |]) ], ), @@ -300,7 +302,7 @@ let container_query_tests = [ [%expr [%cx "@container (block-size >= 150px) {}"]], [%expr CSS.style([| - CSS.selector({js|@container (block-size >= 150px)|js}, [||]), + CSS.selectorMany([|{js|@container (block-size >= 150px)|js}|], [||]), |]) ], ), @@ -309,7 +311,7 @@ let container_query_tests = [ [%expr [%cx "@container (aspect-ratio: 1 / 1) {}"]], [%expr CSS.style([| - CSS.selector({js|@container (aspect-ratio: 1 / 1)|js}, [||]), + CSS.selectorMany([|{js|@container (aspect-ratio: 1 / 1)|js}|], [||]), |]) ], ), @@ -318,7 +320,7 @@ let container_query_tests = [ [%expr [%cx "@container (orientation: portrait) {}"]], [%expr CSS.style([| - CSS.selector({js|@container (orientation: portrait)|js}, [||]), + CSS.selectorMany([|{js|@container (orientation: portrait)|js}|], [||]), |]) ], ), @@ -327,8 +329,8 @@ let container_query_tests = [ [%expr [%cx "@container (width >= 150px) and (orientation: portrait) {}"]], [%expr CSS.style([| - CSS.selector( - {js|@container (width >= 150px) and (orientation: portrait)|js}, + CSS.selectorMany( + [|{js|@container (width >= 150px) and (orientation: portrait)|js}|], [||], ), |]) @@ -339,7 +341,7 @@ let container_query_tests = [ [%expr [%cx "@container name not (width < 150px) {}"]], [%expr CSS.style([| - CSS.selector({js|@container name not (width < 150px)|js}, [||]), + CSS.selectorMany([|{js|@container name not (width < 150px)|js}|], [||]), |]) ], ), @@ -348,8 +350,8 @@ let container_query_tests = [ [%expr [%cx "@container (width >= 150px) or (orientation: portrait) {}"]], [%expr CSS.style([| - CSS.selector( - {js|@container (width >= 150px) or (orientation: portrait)|js}, + CSS.selectorMany( + [|{js|@container (width >= 150px) or (orientation: portrait)|js}|], [||], ), |]) diff --git a/packages/ppx/test/native/Selector_test.re b/packages/ppx/test/native/Selector_test.re index 729313672..73c0d5195 100644 --- a/packages/ppx/test/native/Selector_test.re +++ b/packages/ppx/test/native/Selector_test.re @@ -8,98 +8,112 @@ let simple_tests = [ ":before { display: none; }", [%expr [%cx ":before { display: none; }"]], [%expr - CSS.style([|CSS.selector({js|:before|js}, [|CSS.display(`none)|])|]) + CSS.style([| + CSS.selectorMany([|{js|:before|js}|], [|CSS.display(`none)|]), + |]) ], ), ( ".a", [%expr [%cx ".a {}"]], - [%expr CSS.style([|CSS.selector({js|.a|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|.a|js}|], [||])|])], ), ( ".bar", [%expr [%cx ".bar {}"]], - [%expr CSS.style([|CSS.selector({js|.bar|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|.bar|js}|], [||])|])], ), ( "#bar", [%expr [%cx "#bar {}"]], - [%expr CSS.style([|CSS.selector({js|#bar|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|#bar|js}|], [||])|])], ), ( "div", [%expr [%cx "div {}"]], - [%expr CSS.style([|CSS.selector({js|div|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|div|js}|], [||])|])], ), ( "[id=baz]", [%expr [%cx {js|[id=baz] {}|js}]], - [%expr CSS.style([|CSS.selector({js|[id=baz]|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|[id=baz]|js}|], [||])|])], ), ( "[id=\"baz\"]", [%expr [%cx {js|[id="baz"] {}|js}]], - [%expr CSS.style([|CSS.selector({js|[id="baz"]|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|[id="baz"]|js}|], [||])|])], ), ( "[title=baz]", [%expr [%cx {js|[title=baz] {}|js}]], - [%expr CSS.style([|CSS.selector({js|[title=baz]|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|[title=baz]|js}|], [||])|])], ), ( "[title=\"baz\"]", [%expr [%cx {js|[title="baz"] {}|js}]], - [%expr CSS.style([|CSS.selector({js|[title="baz"]|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|[title="baz"]|js}|], [||])|])], ), ( "nth-child(even)", [%expr [%cx "&:nth-child(even) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(even)|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&:nth-child(even)|js}|], [||])|]) + ], ), ( "nth-child(odd)", [%expr [%cx "&:nth-child(odd) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(odd)|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|&:nth-child(odd)|js}|], [||])|])], ), ( "nth-child(3n+1)", [%expr [%cx "&:nth-child(3n+1) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(3n+1)|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&:nth-child(3n+1)|js}|], [||])|]) + ], ), ( ":nth-child(2n)", [%expr [%cx "&:nth-child(2n) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(2n)|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|&:nth-child(2n)|js}|], [||])|])], ), ( ":nth-child(n)", [%expr [%cx "&:nth-child(n) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(n)|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|&:nth-child(n)|js}|], [||])|])], ), ( ":nth-child(10n-1)", [%expr [%cx "&:nth-child(10n-1) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(10n-1)|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&:nth-child(10n-1)|js}|], [||])|]) + ], ), ( ":nth-child(-n+3)", [%expr [%cx "&:nth-child(-n+3) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(-n+3)|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&:nth-child(-n+3)|js}|], [||])|]) + ], ), ( ":nth-child( 10n -1 )", [%expr [%cx "&:nth-child(10n-1) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(10n-1)|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&:nth-child(10n-1)|js}|], [||])|]) + ], ), ( ".a, .b {}", [%expr [%cx ".a, .b {}"]], - [%expr CSS.style([|CSS.selector({js|.a, .b|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|.a|js}, {js|.b|js}|], [||])|])], ), ( ":nth-child(-n+2)", [%expr [%cx "&:nth-child(-n+2) {}"]], - [%expr CSS.style([|CSS.selector({js|&:nth-child(-n+2)|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&:nth-child(-n+2)|js}|], [||])|]) + ], ), ]; @@ -107,35 +121,39 @@ let compound_tests = [ ( "&.bar", [%expr [%cx {js|&.bar {}|js}]], - [%expr CSS.style([|CSS.selector({js|&.bar|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|&.bar|js}|], [||])|])], ), ( "&.bar,&.foo", [%expr [%cx {js|&.bar,&.foo {}|js}]], - [%expr CSS.style([|CSS.selector({js|&.bar, &.foo|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&.bar|js}, {js|&.foo|js}|], [||])|]) + ], ), ( "&.bar , &.foo", [%expr [%cx {js|&.bar , &.foo {}|js}]], - [%expr CSS.style([|CSS.selector({js|&.bar, &.foo|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|&.bar|js}, {js|&.foo|js}|], [||])|]) + ], ), ( "p:first-child", [%expr [%cx {js|p:first-child {}|js}]], - [%expr CSS.style([|CSS.selector({js|p:first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|p:first-child|js}|], [||])|])], ), ( ".p.p.p.p {}", [%expr [%cx {js|&.p.p.p.p {}|js}]], - [%expr CSS.style([|CSS.selector({js|&.p.p.p.p|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|&.p.p.p.p|js}|], [||])|])], ), ( "&.$(canvasWithTwoColumns):first-child", [%expr [%cx {js|&.$(canvasWithTwoColumns):first-child {}|js}]], [%expr CSS.style([| - CSS.selector( - {js|&.|js} ++ canvasWithTwoColumns ++ {js|:first-child|js}, + CSS.selectorMany( + [|{js|&.|js} ++ canvasWithTwoColumns ++ {js|:first-child|js}|], [||], ), |]) @@ -144,38 +162,42 @@ let compound_tests = [ ( "p#first-child", [%expr [%cx {js|& p#first-child {}|js}]], - [%expr CSS.style([|CSS.selector({js|& p#first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& p#first-child|js}|], [||])|])], ), ( "#first-child", [%expr [%cx {js|& #first-child {}|js}]], - [%expr CSS.style([|CSS.selector({js|& #first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& #first-child|js}|], [||])|])], ), ( ":active", [%expr [%cx "&:active {}"]], - [%expr CSS.style([|CSS.selector({js|&:active|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|&:active|js}|], [||])|])], ), ( ":hover", [%expr [%cx "&:hover {}"]], - [%expr CSS.style([|CSS.selector({js|&:hover|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|&:hover|js}|], [||])|])], ), ( "#first-child", [%expr [%cx {js|#first-child {}|js}]], - [%expr CSS.style([|CSS.selector({js|#first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|#first-child|js}|], [||])|])], ), ( "#first-child::before", [%expr [%cx {js|#first-child::before {}|js}]], - [%expr CSS.style([|CSS.selector({js|#first-child::before|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|#first-child::before|js}|], [||])|]) + ], ), ( "#first-child::before:hover", [%expr [%cx {js|#first-child::before:hover {}|js}]], [%expr - CSS.style([|CSS.selector({js|#first-child::before:hover|js}, [||])|]) + CSS.style([| + CSS.selectorMany([|{js|#first-child::before:hover|js}|], [||]), + |]) ], ), ]; @@ -184,132 +206,142 @@ let complex_tests = [ ( "&>a", [%expr [%cx "&>a { }"]], - [%expr CSS.style([|CSS.selector({js|& > a|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& > a|js}|], [||])|])], ), ( "& > a", [%expr [%cx "& > a {}"]], - [%expr CSS.style([|CSS.selector({js|& > a|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& > a|js}|], [||])|])], ), ( "& > a > b", [%expr [%cx "& > a > b {}"]], - [%expr CSS.style([|CSS.selector({js|& > a > b|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& > a > b|js}|], [||])|])], ), ( "& a b", [%expr [%cx "& a b {}"]], - [%expr CSS.style([|CSS.selector({js|& a b|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& a b|js}|], [||])|])], ), ( "& #first-child", [%expr [%cx {js|& #first-child {}|js}]], - [%expr CSS.style([|CSS.selector({js|& #first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& #first-child|js}|], [||])|])], ), ( "& .bar", [%expr [%cx {js|& .bar {}|js}]], - [%expr CSS.style([|CSS.selector({js|& .bar|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& .bar|js}|], [||])|])], ), ( "& div", [%expr [%cx {js|& div {}|js}]], - [%expr CSS.style([|CSS.selector({js|& div|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& div|js}|], [||])|])], ), ( "& :first-child", [%expr [%cx {js|& :first-child {}|js}]], - [%expr CSS.style([|CSS.selector({js|& :first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& :first-child|js}|], [||])|])], ), ( "& > div > div > div > div", [%expr [%cx "& > div > div > div > div { }"]], [%expr - CSS.style([|CSS.selector({js|& > div > div > div > div|js}, [||])|]) + CSS.style([| + CSS.selectorMany([|{js|& > div > div > div > div|js}|], [||]), + |]) ], ), ( "& div > .class", [%expr [%cx "& div > .class {}"]], - [%expr CSS.style([|CSS.selector({js|& div > .class|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& div > .class|js}|], [||])|])], ), /* #foo > .bar + div.k1.k2 [id='baz']:hello(2):not(:where(#yolo))::before */ ( "& + &", [%expr [%cx "& + & {}"]], - [%expr CSS.style([|CSS.selector({js|& + &|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& + &|js}|], [||])|])], ), ( "& span", [%expr [%cx "& span {}"]], - [%expr CSS.style([|CSS.selector({js|& span|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& span|js}|], [||])|])], ), ( "& span, & + &", [%expr [%cx "& span, & + & {}"]], - [%expr CSS.style([|CSS.selector({js|& span, & + &|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|& span|js}, {js|& + &|js}|], [||])|]) + ], ), ( "& p:not(.active)", [%expr [%cx "& p:not(.active) {}"]], - [%expr CSS.style([|CSS.selector({js|& p:not(.active)|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& p:not(.active)|js}|], [||])|])], ), ( "& #first-child", [%expr [%cx {js|& #first-child {}|js}]], - [%expr CSS.style([|CSS.selector({js|& #first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& #first-child|js}|], [||])|])], ), ( "& #first-child #second", [%expr [%cx {js|& #first-child #second {}|js}]], [%expr - CSS.style([|CSS.selector({js|& #first-child #second|js}, [||])|]) + CSS.style([|CSS.selectorMany([|{js|& #first-child #second|js}|], [||])|]) ], ), ( "& #first-child::before", [%expr [%cx {js|& #first-child::before {}|js}]], [%expr - CSS.style([|CSS.selector({js|& #first-child::before|js}, [||])|]) + CSS.style([|CSS.selectorMany([|{js|& #first-child::before|js}|], [||])|]) ], ), ( "& #first-child::before:hover", [%expr [%cx {js|& #first-child::before:hover {}|js}]], [%expr - CSS.style([|CSS.selector({js|& #first-child::before:hover|js}, [||])|]) + CSS.style([| + CSS.selectorMany([|{js|& #first-child::before:hover|js}|], [||]), + |]) ], ), ( ".foo:is(.bar, #baz)", [%expr [%cx ".foo:is(.bar, #baz) {}"]], - [%expr CSS.style([|CSS.selector({js|.foo:is(.bar, #baz)|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|.foo:is(.bar, #baz)|js}|], [||])|]) + ], ), ( "& input[type=\"password\"]", [%expr [%cx "& input[type=\"password\"]{} "]], [%expr - CSS.style([|CSS.selector({js|& input[type="password"]|js}, [||])|]) + CSS.style([| + CSS.selectorMany([|{js|& input[type="password"]|js}|], [||]), + |]) ], ), ( {|& div[id$="thumbnail"] { }|}, [%expr [%cx {|& div[id$="thumbnail"] {}|}]], [%expr - CSS.style([|CSS.selector({js|& div[id$="thumbnail"]|js}, [||])|]) + CSS.style([|CSS.selectorMany([|{js|& div[id$="thumbnail"]|js}|], [||])|]) ], ), ( "& button:hover", [%expr [%cx "& button:hover{} "]], - [%expr CSS.style([|CSS.selector({js|& button:hover|js}, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|{js|& button:hover|js}|], [||])|])], ), ( "& $(Variables.selector_query)", [%expr [%cx "& $(Variables.selector_query) {}"]], [%expr CSS.style([| - CSS.selector({js|& |js} ++ Variables.selector_query, [||]), + CSS.selectorMany([|{js|& |js} ++ Variables.selector_query|], [||]), |]) ], ), @@ -318,7 +350,7 @@ let complex_tests = [ [%expr [%cx "& .$(Variables.selector_query) {}"]], [%expr CSS.style([| - CSS.selector({js|& .|js} ++ Variables.selector_query, [||]), + CSS.selectorMany([|{js|& .|js} ++ Variables.selector_query|], [||]), |]) ], ), @@ -327,31 +359,35 @@ let complex_tests = [ [%expr [%cx "&.$(Variables.selector_query) {}"]], [%expr CSS.style([| - CSS.selector({js|&.|js} ++ Variables.selector_query, [||]), + CSS.selectorMany([|{js|&.|js} ++ Variables.selector_query|], [||]), |]) ], ), ( "& a[target=\"_blank\"]", [%expr [%cx {|& a[target="_blank"] {}|}]], - [%expr CSS.style([|CSS.selector({js|& a[target="_blank"]|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|& a[target="_blank"]|js}|], [||])|]) + ], ), ( "& a[target=\"_blank\"]", [%expr [%cx {|& a[ target = "_blank" ] {}|}]], - [%expr CSS.style([|CSS.selector({js|& a[target="_blank"]|js}, [||])|])], + [%expr + CSS.style([|CSS.selectorMany([|{js|& a[target="_blank"]|js}|], [||])|]) + ], ), ( "$(pseudo)", [%expr [%cx "$(pseudo) {}"]], - [%expr CSS.style([|CSS.selector(pseudo, [||])|])], + [%expr CSS.style([|CSS.selectorMany([|pseudo|], [||])|])], ), ( "div > $(Variables.element)", [%expr [%cx "& div > $(Variables.element) {}"]], [%expr CSS.style([| - CSS.selector({js|& div > |js} ++ Variables.element, [||]), + CSS.selectorMany([|{js|& div > |js} ++ Variables.element|], [||]), |]) ], ), @@ -359,14 +395,16 @@ let complex_tests = [ "*:not(:last-child)", [%expr [%cx "& > *:not(:last-child) {}"]], [%expr - CSS.style([|CSS.selector({js|& > *:not(:last-child)|js}, [||])|]) + CSS.style([|CSS.selectorMany([|{js|& > *:not(:last-child)|js}|], [||])|]) ], ), ( "&:has(.$(gap))", [%expr [%cx {| &:has(.$(gap)) {} |}]], [%expr - CSS.style([|CSS.selector({js|&:has(.|js} ++ gap ++ {js|)|js}, [||])|]) + CSS.style([| + CSS.selectorMany([|{js|&:has(.|js} ++ gap ++ {js|)|js}|], [||]), + |]) ], ), ( @@ -374,7 +412,7 @@ let complex_tests = [ [%expr [%cx {| &:has(+ .$(gap)) {} |}]], [%expr CSS.style([| - CSS.selector({js|&:has(+ .|js} ++ gap ++ {js|)|js}, [||]), + CSS.selectorMany([|{js|&:has(+ .|js} ++ gap ++ {js|)|js}|], [||]), |]) ], ), @@ -383,8 +421,8 @@ let complex_tests = [ [%expr [%cx {| :is(h1, $(gap), h3):has(+ :is(h2, h3, h4)) {} |}]], [%expr CSS.style([| - CSS.selector( - {js|:is(h1, |js} ++ gap ++ {js|, h3):has(+ :is(h2, h3, h4))|js}, + CSS.selectorMany( + [|{js|:is(h1, |js} ++ gap ++ {js|, h3):has(+ :is(h2, h3, h4))|js}|], [||], ), |]) @@ -396,12 +434,18 @@ let stylesheet_tests = [ ( "html, body", [%expr [%styled.global {js|html, body {}|js}]], - [%expr ignore(CSS.global([|CSS.selector({js|html, body|js}, [||])|]))], + [%expr + ignore( + CSS.global([|CSS.selectorMany([|{js|html|js}, {js|body|js}|], [||])|]), + ) + ], ), ( "html body", [%expr [%styled.global {js|html body {}|js}]], - [%expr ignore(CSS.global([|CSS.selector({js|html body|js}, [||])|]))], + [%expr + ignore(CSS.global([|CSS.selectorMany([|{js|html body|js}|], [||])|])) + ], ), ( "html, body, #root, .class", @@ -409,7 +453,10 @@ let stylesheet_tests = [ [%expr ignore( CSS.global([| - CSS.selector({js|html, body, #root, .class|js}, [||]), + CSS.selectorMany( + [|{js|html|js}, {js|body|js}, {js|#root|js}, {js|.class|js}|], + [||], + ), |]), ) ], @@ -417,13 +464,17 @@ let stylesheet_tests = [ ( "div > span", [%expr [%styled.global {js|div > span {}|js}]], - [%expr ignore(CSS.global([|CSS.selector({js|div > span|js}, [||])|]))], + [%expr + ignore(CSS.global([|CSS.selectorMany([|{js|div > span|js}|], [||])|])) + ], ), ( "html div > span", [%expr [%styled.global {js|html div > span {}|js}]], [%expr - ignore(CSS.global([|CSS.selector({js|html div > span|js}, [||])|])) + ignore( + CSS.global([|CSS.selectorMany([|{js|html div > span|js}|], [||])|]), + ) ], ), ( @@ -432,8 +483,8 @@ let stylesheet_tests = [ [%expr ignore( CSS.global([| - CSS.selector({js|html div > span|js}, [||]), - CSS.selector({js|html, body|js}, [||]), + CSS.selectorMany([|{js|html div > span|js}|], [||]), + CSS.selectorMany([|{js|html|js}, {js|body|js}|], [||]), |]), ) ], @@ -446,7 +497,10 @@ let nested_tests = [ [%expr [%cx ".a { .b {} }"]], [%expr CSS.style([| - CSS.selector({js|.a|js}, [|CSS.selector({js|.b|js}, [||])|]), + CSS.selectorMany( + [|{js|.a|js}|], + [|CSS.selectorMany([|{js|.b|js}|], [||])|], + ), |]) ], ), @@ -454,7 +508,10 @@ let nested_tests = [ ".a .b", [%expr [%cx "display: block; .a .b {}"]], [%expr - CSS.style([|CSS.display(`block), CSS.selector({js|.a .b|js}, [||])|]) + CSS.style([| + CSS.display(`block), + CSS.selectorMany([|{js|.a .b|js}|], [||]), + |]) ], ), ( @@ -463,7 +520,7 @@ let nested_tests = [ [%expr CSS.style([| CSS.display(`block), - CSS.selector({js|& .a .b|js}, [||]), + CSS.selectorMany([|{js|& .a .b|js}|], [||]), |]) ], ), @@ -472,9 +529,9 @@ let nested_tests = [ [%expr [%cx ".$(aaa) { .$(bbb) {} }"]], [%expr CSS.style([| - CSS.selector( - {js|.|js} ++ aaa, - [|CSS.selector({js|.|js} ++ bbb, [||])|], + CSS.selectorMany( + [|{js|.|js} ++ aaa|], + [|CSS.selectorMany([|{js|.|js} ++ bbb|], [||])|], ), |]) ], @@ -484,8 +541,8 @@ let nested_tests = [ [%expr [%cx "&.$(button_active):hover { top: 50px; }"]], [%expr CSS.style([| - CSS.selector( - {js|&.|js} ++ button_active ++ {js|:hover|js}, + CSS.selectorMany( + [|{js|&.|js} ++ button_active ++ {js|:hover|js}|], [|CSS.top(`pxFloat(50.))|], ), |]) @@ -496,8 +553,8 @@ let nested_tests = [ [%expr [%cx "&.$(button_active)::before { top: 50px; }"]], [%expr CSS.style([| - CSS.selector( - {js|&.|js} ++ button_active ++ {js|::before|js}, + CSS.selectorMany( + [|{js|&.|js} ++ button_active ++ {js|::before|js}|], [|CSS.top(`pxFloat(50.))|], ), |]) @@ -524,7 +581,10 @@ let comments_tests = [ ], [%expr CSS.style([| - CSS.selector({js|.a|js}, [|CSS.selector({js|.b|js}, [||])|]), + CSS.selectorMany( + [|{js|.a|js}|], + [|CSS.selectorMany([|{js|.b|js}|], [||])|], + ), |]) ], ), @@ -539,7 +599,10 @@ let comments_tests = [ ] ], [%expr - CSS.style([|CSS.display(`block), CSS.selector({js|.a .b|js}, [||])|]) + CSS.style([| + CSS.display(`block), + CSS.selectorMany([|{js|.a .b|js}|], [||]), + |]) ], ), ( @@ -548,7 +611,7 @@ let comments_tests = [ [%expr CSS.style([| CSS.display(`block), - CSS.selector({js|& .a .b|js}, [||]), + CSS.selectorMany([|{js|& .a .b|js}|], [||]), |]) ], ), @@ -565,9 +628,9 @@ let comments_tests = [ ], [%expr CSS.style([| - CSS.selector( - {js|.|js} ++ aaa, - [|CSS.selector({js|.|js} ++ bbb, [||])|], + CSS.selectorMany( + [|{js|.|js} ++ aaa|], + [|CSS.selectorMany([|{js|.|js} ++ bbb|], [||])|], ), |]) ], diff --git a/packages/ppx/test/snapshot/reason/reason-bs-config-missing-jsx.t/run.t b/packages/ppx/test/snapshot/reason/reason-bs-config-missing-jsx.t/run.t index 19a5f0687..e94b698c1 100644 --- a/packages/ppx/test/snapshot/reason/reason-bs-config-missing-jsx.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-bs-config-missing-jsx.t/run.t @@ -983,10 +983,7 @@ let make = (props: makeProps('var)) => { let className = styles(~var=varGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "var")); ignore(deleteProp(. newProps, "innerRef")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-array.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic-array.t/run.t index f0ad9b912..10e5c79e4 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-array.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-array.t/run.t @@ -975,10 +975,7 @@ let make = (props: makeProps('var)) => { let className = styles(~var=varGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "var")); ignore(deleteProp(. newProps, "innerRef")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/run.t index 281bb089e..a21c6ac9d 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/run.t @@ -973,10 +973,7 @@ let make = (props: makeProps('var)) => { let className = styles(~var=?varGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "var")); ignore(deleteProp(. newProps, "innerRef")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation.t/run.t index 4ac1cab0d..b05097a67 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation.t/run.t @@ -972,10 +972,7 @@ let make = (props: makeProps('var)) => { let className = styles(~var=varGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "var")); ignore(deleteProp(. newProps, "innerRef")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-sequence.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic-sequence.t/run.t index ffa426ce3..5111e645d 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-sequence.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-sequence.t/run.t @@ -968,10 +968,7 @@ let make = (props: makeProps('size)) => { let className = styles(~size=sizeGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "size")); ignore(deleteProp(. newProps, "innerRef")); @@ -1960,10 +1957,7 @@ let className = styles(~variant=variantGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "variant")); ignore(deleteProp(. newProps, "innerRef")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-with-array.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic-with-array.t/run.t index d34793100..d4d1cc2aa 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-with-array.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-with-array.t/run.t @@ -974,10 +974,7 @@ let className = styles(~color=colorGet(props), ~size=sizeGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "color")); ignore(deleteProp(. newProps, "size")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-with-ident.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic-with-ident.t/run.t index 791e1e259..586e3caf1 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-with-ident.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-with-ident.t/run.t @@ -967,10 +967,7 @@ let make = (props: makeProps('a)) => { let className = styles(~a=aGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "a")); ignore(deleteProp(. newProps, "innerRef")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-with-sequence-out-scope.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic-with-sequence-out-scope.t/run.t index 616072c78..0d8146ba2 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-with-sequence-out-scope.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-with-sequence-out-scope.t/run.t @@ -972,10 +972,7 @@ let make = (props: makeProps('color)) => { let className = styles(~color=colorGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "color")); ignore(deleteProp(. newProps, "innerRef")); diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic.t/run.t b/packages/ppx/test/snapshot/reason/reason-dynamic.t/run.t index 43ad8cffc..5ccf03d72 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic.t/run.t @@ -973,10 +973,7 @@ let className = styles(~id=idGet(props), ~var=varGet(props), ()) ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "id")); ignore(deleteProp(. newProps, "var")); diff --git a/packages/ppx/test/snapshot/reason/reason-keyframes.t/run.t b/packages/ppx/test/snapshot/reason/reason-keyframes.t/run.t index 88bee3ab0..f7950a81d 100644 --- a/packages/ppx/test/snapshot/reason/reason-keyframes.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-keyframes.t/run.t @@ -971,10 +971,7 @@ CSS.style([|CSS.label("FadeIn"), CSS.animationName(animation)|]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors-interpolation.t/run.t b/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors-interpolation.t/run.t index 37bc7f06f..1eb09100f 100644 --- a/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors-interpolation.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors-interpolation.t/run.t @@ -980,10 +980,7 @@ |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors.t/run.t b/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors.t/run.t index 30f96abaa..5590b1499 100644 --- a/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors.t/run.t @@ -969,18 +969,18 @@ {js|(min-width: 600px)|js}, [|CSS.backgroundColor(CSS.blue)|], ), - CSS.selector({js|&:hover|js}, [|CSS.backgroundColor(CSS.green)|]), - CSS.selector( - {js|& > p|js}, + CSS.selectorMany( + [|{js|&:hover|js}|], + [|CSS.backgroundColor(CSS.green)|], + ), + CSS.selectorMany( + [|{js|& > p|js}|], [|CSS.color(CSS.pink), CSS.fontSize(`pxFloat(24.))|], ), |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-media-queries-with-calc.t/run.t b/packages/ppx/test/snapshot/reason/reason-media-queries-with-calc.t/run.t index 222f21d29..97756d1ac 100644 --- a/packages/ppx/test/snapshot/reason/reason-media-queries-with-calc.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-media-queries-with-calc.t/run.t @@ -976,10 +976,7 @@ |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-static-array.t/run.t b/packages/ppx/test/snapshot/reason/reason-static-array.t/run.t index 8acc9b835..e308343e8 100644 --- a/packages/ppx/test/snapshot/reason/reason-static-array.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-static-array.t/run.t @@ -970,10 +970,7 @@ |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-static-doble-quotes-string.t/run.t b/packages/ppx/test/snapshot/reason/reason-static-doble-quotes-string.t/run.t index d8f2cf328..73c9ff2b0 100644 --- a/packages/ppx/test/snapshot/reason/reason-static-doble-quotes-string.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-static-doble-quotes-string.t/run.t @@ -970,10 +970,7 @@ |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/run.t b/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/run.t index efd8284a3..24342d1b5 100644 --- a/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/run.t @@ -979,10 +979,7 @@ |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-static-multi-line-string.t/run.t b/packages/ppx/test/snapshot/reason/reason-static-multi-line-string.t/run.t index b034e31ef..171745e77 100644 --- a/packages/ppx/test/snapshot/reason/reason-static-multi-line-string.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-static-multi-line-string.t/run.t @@ -970,10 +970,7 @@ |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-static-open-property.t/run.t b/packages/ppx/test/snapshot/reason/reason-static-open-property.t/run.t index b10e71cae..4d2d00201 100644 --- a/packages/ppx/test/snapshot/reason/reason-static-open-property.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-static-open-property.t/run.t @@ -966,10 +966,7 @@ CSS.style([|CSS.label("OneSingleProperty"), CSS.display(`block)|]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-static-self-closing-element.t/run.t b/packages/ppx/test/snapshot/reason/reason-static-self-closing-element.t/run.t index dab8107f2..12a31ca01 100644 --- a/packages/ppx/test/snapshot/reason/reason-static-self-closing-element.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-static-self-closing-element.t/run.t @@ -965,10 +965,7 @@ let styles = CSS.style([|CSS.label("SelfClosingElement")|]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); - let stylesObject = { - "className": className, - "ref": innerRefGet(props), - }; + let stylesObject = {"className": className, "ref": innerRefGet(props)}; let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject); ignore(deleteProp(. newProps, "innerRef")); let asTag = as_Get(props); diff --git a/packages/ppx/test/snapshot/reason/reason-styled-global.t/run.t b/packages/ppx/test/snapshot/reason/reason-styled-global.t/run.t index cb88e7053..28f6b55c4 100644 --- a/packages/ppx/test/snapshot/reason/reason-styled-global.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-styled-global.t/run.t @@ -3,54 +3,57 @@ $ refmt --parse ml --print re output.ml ignore( CSS.global([| - CSS.selector( - {js|html|js}, + CSS.selectorMany( + [|{js|html|js}|], [| CSS.lineHeight(`abs(1.15)), CSS.unsafe({js|textSizeAdjust|js}, {js|100%|js}), |], ), - CSS.selector({js|body|js}, [|CSS.margin(`zero)|]), - CSS.selector({js|main|js}, [|CSS.display(`block)|]), - CSS.selector( - {js|h1|js}, + CSS.selectorMany([|{js|body|js}|], [|CSS.margin(`zero)|]), + CSS.selectorMany([|{js|main|js}|], [|CSS.display(`block)|]), + CSS.selectorMany( + [|{js|h1|js}|], [|CSS.fontSize(`em(2.)), CSS.margin2(~v=`em(0.67), ~h=`zero)|], ), - CSS.selector( - {js|hr|js}, + CSS.selectorMany( + [|{js|hr|js}|], [| CSS.boxSizing(`contentBox), CSS.height(`zero), CSS.overflow(`visible), |], ), - CSS.selector( - {js|pre|js}, + CSS.selectorMany( + [|{js|pre|js}|], [| CSS.fontFamilies([|"monospace", "monospace"|]), CSS.fontSize(`em(1.)), |], ), - CSS.selector({js|a|js}, [|CSS.backgroundColor(`transparent)|]), - CSS.selector( - {js|abbr[title]|js}, + CSS.selectorMany([|{js|a|js}|], [|CSS.backgroundColor(`transparent)|]), + CSS.selectorMany( + [|{js|abbr[title]|js}|], [| CSS.unsafe({js|borderBottom|js}, {js|none|js}), CSS.textDecoration(`underline), CSS.unsafe({js|textDecoration|js}, {js|underline dotted|js}), |], ), - CSS.selector({js|b, strong|js}, [|CSS.fontWeight(`bolder)|]), - CSS.selector( - {js|code, kbd, samp|js}, + CSS.selectorMany( + [|{js|b|js}, {js|strong|js}|], + [|CSS.fontWeight(`bolder)|], + ), + CSS.selectorMany( + [|{js|code|js}, {js|kbd|js}, {js|samp|js}|], [| CSS.fontFamilies([|"monospace", "monospace"|]), CSS.fontSize(`em(1.)), |], ), - CSS.selector({js|small|js}, [|CSS.fontSize(`percent(80.))|]), - CSS.selector( - {js|sub, sup|js}, + CSS.selectorMany([|{js|small|js}|], [|CSS.fontSize(`percent(80.))|]), + CSS.selectorMany( + [|{js|sub|js}, {js|sup|js}|], [| CSS.fontSize(`percent(75.)), CSS.lineHeight(`zero), @@ -58,11 +61,17 @@ CSS.verticalAlign(`baseline), |], ), - CSS.selector({js|sub|js}, [|CSS.bottom(`em(-0.25))|]), - CSS.selector({js|sup|js}, [|CSS.top(`em(-0.5))|]), - CSS.selector({js|img|js}, [|CSS.borderStyle(`none)|]), - CSS.selector( - {js|button, input, optgroup, select, textarea|js}, + CSS.selectorMany([|{js|sub|js}|], [|CSS.bottom(`em(-0.25))|]), + CSS.selectorMany([|{js|sup|js}|], [|CSS.top(`em(-0.5))|]), + CSS.selectorMany([|{js|img|js}|], [|CSS.borderStyle(`none)|]), + CSS.selectorMany( + [| + {js|button|js}, + {js|input|js}, + {js|optgroup|js}, + {js|select|js}, + {js|textarea|js}, + |], [| CSS.unsafe({js|fontFamily|js}, {js|inherit|js}), CSS.fontSize(`percent(100.)), @@ -70,26 +79,47 @@ CSS.margin(`zero), |], ), - CSS.selector({js|button, input|js}, [|CSS.overflow(`visible)|]), - CSS.selector({js|button, select|js}, [|CSS.textTransform(`none)|]), - CSS.selector( - {js|button, [type="button"], [type="reset"], [type="submit"]|js}, + CSS.selectorMany( + [|{js|button|js}, {js|input|js}|], + [|CSS.overflow(`visible)|], + ), + CSS.selectorMany( + [|{js|button|js}, {js|select|js}|], + [|CSS.textTransform(`none)|], + ), + CSS.selectorMany( + [| + {js|button|js}, + {js|[type="button"]|js}, + {js|[type="reset"]|js}, + {js|[type="submit"]|js}, + |], [|CSS.unsafe({js|WebkitAppearance|js}, {js|button|js})|], ), - CSS.selector( - {js|button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner|js}, + CSS.selectorMany( + [| + {js|button::-moz-focus-inner|js}, + {js|[type="button"]::-moz-focus-inner|js}, + {js|[type="reset"]::-moz-focus-inner|js}, + {js|[type="submit"]::-moz-focus-inner|js}, + |], [|CSS.borderStyle(`none), CSS.padding(`zero)|], ), - CSS.selector( - {js|button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring|js}, + CSS.selectorMany( + [| + {js|button:-moz-focusring|js}, + {js|[type="button"]:-moz-focusring|js}, + {js|[type="reset"]:-moz-focusring|js}, + {js|[type="submit"]:-moz-focusring|js}, + |], [|CSS.unsafe({js|outline|js}, {js|1px dotted ButtonText|js})|], ), - CSS.selector( - {js|fieldset|js}, + CSS.selectorMany( + [|{js|fieldset|js}|], [|CSS.padding3(~top=`em(0.35), ~h=`em(0.75), ~bottom=`em(0.625))|], ), - CSS.selector( - {js|legend|js}, + CSS.selectorMany( + [|{js|legend|js}|], [| CSS.boxSizing(`borderBox), CSS.unsafe({js|color|js}, {js|inherit|js}), @@ -99,40 +129,46 @@ CSS.whiteSpace(`normal), |], ), - CSS.selector({js|progress|js}, [|CSS.verticalAlign(`baseline)|]), - CSS.selector({js|textarea|js}, [|CSS.overflow(`auto)|]), - CSS.selector( - {js|[type="checkbox"], [type="radio"]|js}, + CSS.selectorMany( + [|{js|progress|js}|], + [|CSS.verticalAlign(`baseline)|], + ), + CSS.selectorMany([|{js|textarea|js}|], [|CSS.overflow(`auto)|]), + CSS.selectorMany( + [|{js|[type="checkbox"]|js}, {js|[type="radio"]|js}|], [|CSS.boxSizing(`borderBox), CSS.padding(`zero)|], ), - CSS.selector( - {js|[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button|js}, + CSS.selectorMany( + [| + {js|[type="number"]::-webkit-inner-spin-button|js}, + {js|[type="number"]::-webkit-outer-spin-button|js}, + |], [|CSS.height(`auto)|], ), - CSS.selector( - {js|[type="search"]|js}, + CSS.selectorMany( + [|{js|[type="search"]|js}|], [| CSS.unsafe({js|WebkitAppearance|js}, {js|textfield|js}), CSS.outlineOffset(`pxFloat(-2.)), |], ), - CSS.selector( - {js|[type="search"]::-webkit-search-decoration|js}, + CSS.selectorMany( + [|{js|[type="search"]::-webkit-search-decoration|js}|], [|CSS.unsafe({js|WebkitAppearance|js}, {js|none|js})|], ), - CSS.selector( - {js|::-webkit-file-upload-button|js}, + CSS.selectorMany( + [|{js|::-webkit-file-upload-button|js}|], [| CSS.unsafe({js|WebkitAppearance|js}, {js|button|js}), CSS.unsafe({js|font|js}, {js|inherit|js}), |], ), - CSS.selector({js|details|js}, [|CSS.display(`block)|]), - CSS.selector({js|summary|js}, [|CSS.display(`listItem)|]), - CSS.selector({js|template|js}, [|CSS.display(`none)|]), - CSS.selector({js|[hidden]|js}, [|CSS.display(`none)|]), - CSS.selector( - {js|:root|js}, + CSS.selectorMany([|{js|details|js}|], [|CSS.display(`block)|]), + CSS.selectorMany([|{js|summary|js}|], [|CSS.display(`listItem)|]), + CSS.selectorMany([|{js|template|js}|], [|CSS.display(`none)|]), + CSS.selectorMany([|{js|[hidden]|js}|], [|CSS.display(`none)|]), + CSS.selectorMany( + [|{js|:root|js}|], [|CSS.unsafe({js|--shiki-color-text|js}, {js|oklch(37.53% 0 0)|js})|], ), |]), diff --git a/packages/runtime/melange/Emotion_bindings.ml b/packages/runtime/melange/Emotion_bindings.ml index 94fe0e7d9..c14231c15 100644 --- a/packages/runtime/melange/Emotion_bindings.ml +++ b/packages/runtime/melange/Emotion_bindings.ml @@ -69,5 +69,5 @@ let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust |] |> Kloth.Array.filter_map ~f:(fun i -> i) in - global [| Rule.Selector ("@font-face", fontFace) |]; + global [| Rule.Selector ([| "@font-face" |], fontFace) |]; fontFamily diff --git a/packages/runtime/melange/Rule.ml b/packages/runtime/melange/Rule.ml index 836a73d67..34870a558 100644 --- a/packages/runtime/melange/Rule.ml +++ b/packages/runtime/melange/Rule.ml @@ -1,10 +1,11 @@ type rule = | Declaration of string * string - | Selector of string * rule array + | Selector of string array * rule array let declaration (property, value) = Declaration (property, value) -let selector selector rules = Selector (selector, rules) -let media query rules = Selector ({|@media |} ^ query, rules) +let selector selector rules = Selector ([| selector |], rules) +let selectorMany selector_list rules = Selector (selector_list, rules) +let media query rules = Selector ([| {|@media |} ^ query |], rules) let important v = match v with @@ -16,7 +17,10 @@ let rec ruleToDict (dict : Js.Json.t Js.Dict.t) (rule : rule) : let _ = match rule with | Declaration (name, value) -> Js.Dict.set dict name (Js.Json.string value) - | Selector (name, ruleset) -> Js.Dict.set dict name (toJson ruleset) + | Selector (name, ruleset) -> + Js.Dict.set dict + (Kloth.Array.map_and_join ~sep:", " ~f:(fun v -> v) name) + (toJson ruleset) in dict diff --git a/packages/runtime/native/CSS.ml b/packages/runtime/native/CSS.ml index 3866a8138..74560b6c8 100644 --- a/packages/runtime/native/CSS.ml +++ b/packages/runtime/native/CSS.ml @@ -93,6 +93,10 @@ let replace_ampersand ~by str = in replace_ampersand' str by +let pp_selectors = + Format.( + pp_print_array ~pp_sep:(fun out () -> fprintf out ", ") pp_print_string) + let rec rule_to_debug nesting accumulator rule = let next_rule = match rule with @@ -100,10 +104,10 @@ let rec rule_to_debug nesting accumulator rule = Printf.sprintf "Declaration (\"%s\", \"%s\")" property value | Rule.Selector (selector, rules) -> if nesting = 0 then - Printf.sprintf "Selector (\"%s\", [%s])" selector + Format.asprintf "Selector (\"%a\", [%s])" pp_selectors selector (to_debug (nesting + 1) rules) else - Printf.sprintf "Selector (\"%s\", [%s\n%s])" selector + Format.asprintf "Selector (\"%a\", [%s\n%s])" pp_selectors selector (to_debug (nesting + 1) rules) (String.make (nesting + 1) ' ') in @@ -143,12 +147,14 @@ let join_media left right = left ^ " and " ^ remove_media_from_selector right let rules_do_not_contain_media rules = Array.exists - ~f:(function Rule.Selector (s, _) when contains_at s -> false | _ -> true) + ~f:(function + | Rule.Selector (s, _) when contains_at s.(0) -> false | _ -> true) rules let rules_contain_media rules = Array.exists - ~f:(function Rule.Selector (s, _) when contains_at s -> true | _ -> false) + ~f:(function + | Rule.Selector (s, _) when contains_at s.(0) -> true | _ -> false) rules (* media selectors should be at the top. .a { @media () {} } @@ -168,7 +174,7 @@ let rec move_media_at_top (rule_list : rule array) : rule array = } *) | Rule.Selector (current_selector, rules) - when contains_at current_selector && rules_contain_media rules -> + when contains_at current_selector.(0) && rules_contain_media rules -> let new_rules = swap current_selector rules in Array.append acc new_rules (* current_selector isn't a media query, but it's a selecotr. It may contain media-queries inside the rules: Example: @@ -186,7 +192,7 @@ let rec move_media_at_top (rule_list : rule array) : rule array = let declarations, selectors = split_by_kind rules in let media_selectors, non_media_selectors = Array.partition selectors ~f:(function - | Rule.Selector (s, _) when contains_at s -> true + | Rule.Selector (s, _) when contains_at s.(0) -> true | _ -> false) in let new_media_rules = @@ -194,7 +200,7 @@ let rec move_media_at_top (rule_list : rule array) : rule array = ~f:(fun media_rules -> match media_rules with | Rule.Selector (nested_media_selector, nested_media_rule_list) - when contains_at nested_media_selector -> + when contains_at nested_media_selector.(0) -> [| Rule.Selector ( nested_media_selector, @@ -231,7 +237,7 @@ and swap at_media_selector media_rules = [| Rule.Selector (at_media_selector, media_declarations); Rule.Selector - ( join_media at_media_selector nested_media_selector, + ( [| join_media at_media_selector.(0) nested_media_selector.(0) |], nested_media_rule_list ); |] | _ -> [||]) @@ -246,13 +252,12 @@ let split_multiple_selectors rule_list = Array.fold_left ~f:(fun acc rule -> match rule with - | Rule.Selector (selector, rules) when contains_a_coma selector -> - let selector_list = String.split_on_char ',' selector in + | Rule.Selector (selectors, rules) when Array.length selectors > 1 -> let new_rules = (* for each selector, we apply the same rules *) - List.map - (fun selector -> Rule.Selector (String.trim selector, rules)) - selector_list + selectors + |> Array.to_list + |> List.map (fun selector -> Rule.Selector ([| selector |], rules)) in List.append acc new_rules | rule -> List.append acc [ rule ]) @@ -267,29 +272,29 @@ let resolve_selectors rules = Array.partition_map rules ~f:(function (* in case of being at @media, don't do anything to it *) | Rule.Selector (current_selector, selector_rules) - when starts_with_at current_selector -> + when starts_with_at current_selector.(0) -> Right [| Rule.Selector (current_selector, selector_rules) |] | Rule.Selector (current_selector, selector_rules) -> (* we derive the new prefix based on the current_selector and the previous "prefix" (aka the prefix added by the parent selector) *) let new_prefix = match prefix with - | None -> current_selector + | None -> current_selector.(0) | Some prefix -> - if contains_ampersand current_selector then + if contains_ampersand current_selector.(0) then (* reemplazar el ampersand del current_selector, con el padre *) - replace_ampersand ~by:prefix current_selector - else if starts_with_double_dot current_selector then - prefix ^ current_selector + replace_ampersand ~by:prefix current_selector.(0) + else if starts_with_double_dot current_selector.(0) then + prefix ^ current_selector.(0) (* This case is the same as the "else", but I keep it for reference *) - else if starts_with_dot current_selector then - prefix ^ " " ^ current_selector - else prefix ^ " " ^ current_selector + else if starts_with_dot current_selector.(0) then + prefix ^ " " ^ current_selector.(0) + else prefix ^ " " ^ current_selector.(0) in let selector_rules = split_multiple_selectors selector_rules in let selectors, rest_of_declarations = unnest_selectors ~prefix:(Some new_prefix) selector_rules in - let new_selector = Rule.Selector (new_prefix, selectors) in + let new_selector = Rule.Selector ([| new_prefix |], selectors) in Right (Array.append [| new_selector |] rest_of_declarations) | _ as rule -> Left rule) |> fun (selectors, declarations) -> selectors, Array.flatten declarations @@ -339,13 +344,13 @@ let rec render_rules ~buffer className rules = (* Renders all selectors with the hash given *) and render_selectors ~buffer hash (selector, rules) = - if contains_at selector then ( - Buffer.add_string buffer selector; + if contains_at selector.(0) then ( + Buffer.add_string buffer selector.(0); Buffer.add_string buffer " { "; render_rules ~buffer hash rules; Buffer.add_string buffer " }") else ( - Buffer.add_string buffer (resolve_ampersand hash selector); + Buffer.add_string buffer (resolve_ampersand hash selector.(0)); Buffer.add_string buffer " { "; render_declarations ~buffer rules; Buffer.add_string buffer " }") @@ -363,7 +368,7 @@ let rules_to_string rules = Buffer.add_string buffer value; Buffer.add_char buffer ';' | Rule.Selector (selector, rules) -> - Buffer.add_string buffer selector; + Buffer.add_string buffer selector.(0); Buffer.add_char buffer '{'; go rules; Buffer.add_char buffer '}') @@ -505,5 +510,5 @@ let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust |] |> Kloth.Array.filter_map ~f:(fun i -> i) in - global [| Rule.Selector ("@font-face", fontFace) |]; + global [| Rule.Selector ([|"@font-face"|], fontFace) |]; fontFamily diff --git a/packages/runtime/native/Rule.ml b/packages/runtime/native/Rule.ml index 7561d701f..985eb4f63 100644 --- a/packages/runtime/native/Rule.ml +++ b/packages/runtime/native/Rule.ml @@ -1,6 +1,6 @@ type rule = | Declaration of string * string - | Selector of string * rule array + | Selector of string array * rule array let explode s = let rec exp i l = if i < 0 then l else exp (i - 1) (s.[i] :: l) in @@ -18,8 +18,9 @@ let camelCaseToKebabCase str = let declaration (property, value) = Declaration (camelCaseToKebabCase property, value) -let selector selector rules = Selector (selector, rules) -let media query rules = Selector ({|@media |} ^ query, rules) +let selector selector rules = Selector ([|selector|], rules) +let selectorMany selector_list rules = Selector (selector_list, rules) +let media query rules = Selector ([| {|@media |} ^ query |], rules) let important v = match v with diff --git a/packages/runtime/rescript/Emotion_bindings.ml b/packages/runtime/rescript/Emotion_bindings.ml index eeceb3cc0..8a3e6ff95 100644 --- a/packages/runtime/rescript/Emotion_bindings.ml +++ b/packages/runtime/rescript/Emotion_bindings.ml @@ -68,5 +68,5 @@ let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust |] |> Kloth.Array.filter_map ~f:(fun i -> i) in - global [| Rule.Selector ("@font-face", fontFace) |]; + global [| Rule.Selector ([|"@font-face"|], fontFace) |]; fontFamily diff --git a/packages/runtime/test/test_styles.ml b/packages/runtime/test/test_styles.ml index d6a61a220..b632510ab 100644 --- a/packages/runtime/test/test_styles.ml +++ b/packages/runtime/test/test_styles.ml @@ -129,7 +129,8 @@ let simple_selector = let classname = CSS.style [| - CSS.margin @@ CSS.px 10; CSS.selector "a" [| CSS.margin @@ CSS.px 60 |]; + CSS.margin @@ CSS.px 10; + CSS.selectorMany [| "a" |] [| CSS.margin @@ CSS.px 60 |]; |] in let css = get_string_style_rules () in @@ -143,8 +144,10 @@ let selector_nested = CSS.style [| CSS.margin @@ CSS.px 10; - CSS.selector "a" - [| CSS.display `block; CSS.selector "div" [| CSS.display `none |] |]; + CSS.selectorMany [| "a" |] + [| + CSS.display `block; CSS.selectorMany [| "div" |] [| CSS.display `none |]; + |]; |] in let css = get_string_style_rules () in @@ -160,10 +163,10 @@ let selector_nested_with_ampersand = CSS.style [| CSS.margin @@ CSS.px 10; - CSS.selector "& > a" + CSS.selectorMany [| "& > a" |] [| CSS.margin @@ CSS.px 11; - CSS.selector "& > div" [| CSS.margin @@ CSS.px 12 |]; + CSS.selectorMany [| "& > div" |] [| CSS.margin @@ CSS.px 12 |]; |]; |] in @@ -180,19 +183,19 @@ let selector_nested_x10 = CSS.style [| CSS.display `flex; - CSS.selector "a" + CSS.selectorMany [| "a" |] [| CSS.display `block; - CSS.selector "div" + CSS.selectorMany [| "div" |] [| CSS.display `none; - CSS.selector "span" + CSS.selectorMany [| "span" |] [| CSS.display `none; - CSS.selector "hr" + CSS.selectorMany [| "hr" |] [| CSS.display `none; - CSS.selector "code" [| CSS.display `none |]; + CSS.selectorMany [| "code" |] [| CSS.display `none |]; |]; |]; |]; @@ -212,7 +215,8 @@ let selector_ampersand_with_space = let classname = CSS.style [| - CSS.fontSize (`px 42); CSS.selector "& .div" [| CSS.fontSize (`px 24) |]; + CSS.fontSize (`px 42); + CSS.selectorMany [| "& .div" |] [| CSS.fontSize (`px 24) |]; |] in let css = get_string_style_rules () in @@ -298,7 +302,8 @@ let selector_ampersand_with_no_space = let classname = CSS.style [| - CSS.fontSize (`px 42); CSS.selector "&.div" [| CSS.fontSize (`px 24) |]; + CSS.fontSize (`px 42); + CSS.selectorMany [| "&.div" |] [| CSS.fontSize (`px 24) |]; |] in let css = get_string_style_rules () in @@ -312,7 +317,7 @@ let selector_ampersand_at_the_middle = CSS.style [| CSS.fontSize (`px 42); - CSS.selector "& div &" [| CSS.fontSize (`px 24) |]; + CSS.selectorMany [| "& div &" |] [| CSS.fontSize (`px 24) |]; |] in let css = get_string_style_rules () in @@ -371,7 +376,7 @@ let selector_params = CSS.style [| CSS.maxWidth (`px 800); - CSS.selector {js|:first-child|js} [| CSS.width (`px 300) |]; + CSS.selectorMany [| {js|:first-child|js} |] [| CSS.width (`px 300) |]; |] in let css = get_string_style_rules () in @@ -404,7 +409,7 @@ let keyframe = let global = test "global" @@ fun () -> - CSS.global [| CSS.selector "html" [| CSS.lineHeight (`abs 1.15) |] |]; + CSS.global [| CSS.selectorMany [| "html" |] [| CSS.lineHeight (`abs 1.15) |] |]; let css = get_string_style_rules () in assert_string css (Printf.sprintf "html{line-height:1.15;}") @@ -436,9 +441,9 @@ let hover_selector = let rules = [| CSS.color `currentColor; - CSS.selector ":hover" [| CSS.color `transparent |]; - CSS.selector "&:hover" [| CSS.color `transparent |]; - CSS.selector " :hover" [| CSS.color `transparent |]; + CSS.selectorMany [| ":hover" |] [| CSS.color `transparent |]; + CSS.selectorMany [| "&:hover" |] [| CSS.color `transparent |]; + CSS.selectorMany [| " :hover" |] [| CSS.color `transparent |]; |] in let classname = CSS.style rules in @@ -474,6 +479,74 @@ let multiple_pseudo = translateX(-50%%); }" classname classname classname) +let functional_pseudo = + test "functional_pseudo" @@ fun () -> + let classname = + [%cx + {| + .foo, .bar { + :is(ol, ul, menu:unsupported) :is(ol, ul) { + color: green; + } + + :is(ol, ul) :is(ol, ul) ol { + list-style-type: lower-greek; + color: chocolate; + } + + p:not(.irrelevant) { + font-weight: bold; + } + + p > :not(strong, b.important) { + color: darkmagenta; + } + + :where(ol, ul, menu:unsupported) :where(ol, ul) { + color: green; + } + + :where(ol, ul) :where(ol, ul) ol { + list-style-type: lower-greek; + color: chocolate; + } + + :is(h1, h2, h3):has(+ :is(h2, h3, h4)) { + margin: 0 0 0.25rem 0; + } + + body:has(video, audio), body:has(video):has(audio) { + color: red; + } + } + |}] + in + let css = get_string_style_rules () in + assert_string css + (Printf.sprintf + ".%s .foo:is(ol, ul, menu:unsupported):is(ol, ul) { color: #008000; } \ + .%s .foo:is(ol, ul) :is(ol, ul) ol { list-style-type: lower-greek; \ + color: #D2691E; } .%s .foo p:not(.irrelevant) { font-weight: 700; } \ + .%s .foo p > :not(strong, b.important) { color: #8B008B; } .%s \ + .foo:where(ol, ul, menu:unsupported) :where(ol, ul) { color: #008000; \ + } .%s .foo:where(ol, ul) :where(ol, ul) ol { list-style-type: \ + lower-greek; color: #D2691E; } .%s .foo:is(h1, h2, h3):has(+ :is(h2, \ + h3, h4)) { margin: 0 0 0.25rem 0; } .%s .foo body:has(video, audio) { \ + color: #FF0000; } .%s .foo body:has(video):has(audio) { color: \ + #FF0000; } .%s .bar:is(ol, ul, menu:unsupported):is(ol, ul) { color: \ + #008000; } .%s .bar:is(ol, ul) :is(ol, ul) ol { list-style-type: \ + lower-greek; color: #D2691E; } .%s .bar p:not(.irrelevant) { \ + font-weight: 700; } .%s .bar p > :not(strong, b.important) { color: \ + #8B008B; } .%s .bar:where(ol, ul, menu:unsupported) :where(ol, ul) { \ + color: #008000; } .%s .bar:where(ol, ul) :where(ol, ul) ol { \ + list-style-type: lower-greek; color: #D2691E; } .%s .bar:is(h1, h2, \ + h3):has(+ :is(h2, h3, h4)) { margin: 0 0 0.25rem 0; } .%s .bar \ + body:has(video, audio) { color: #FF0000; } .%s .bar \ + body:has(video):has(audio) { color: #FF0000; }" + classname classname classname classname classname classname classname + classname classname classname classname classname classname classname + classname classname classname classname) + let nested_selectors = test "nested_selectors" @@ fun () -> let button_active = [%cx "position: relative;"] in @@ -615,8 +688,8 @@ let selector_with_interp_and_pseudo = let rules = [| CSS.cursor `pointer; - CSS.selector - ({js|&.|js} ^ button_active ^ {js|::before|js}) + CSS.selectorMany + [| {js|&.|js} ^ button_active ^ {js|::before|js} |] [| CSS.top (`pxFloat 50.) |]; |] in @@ -648,7 +721,7 @@ let selector_with_empty_interp = let style_tag = test "style_tag" @@ fun () -> - CSS.global [| CSS.selector "html" [| CSS.lineHeight (`abs 1.15) |] |]; + CSS.global [| CSS.selectorMany [| "html" |] [| CSS.lineHeight (`abs 1.15) |] |]; let animationName = CSS.keyframes [| @@ -767,8 +840,8 @@ let selector_with_classname_and_mq = let rules = [| CSS.display `block; - CSS.selector - (".lola ." ^ nested_classname) + CSS.selectorMany + [| ".lola ." ^ nested_classname |] [| CSS.media "(min-width: 768px)" [| CSS.height `auto |] |]; |] in @@ -787,7 +860,8 @@ let mq_with_selectors = CSS.display `block; CSS.media "(min-width: 768px)" [| - CSS.height `auto; CSS.selector ".lola" [| CSS.color `transparent |]; + CSS.height `auto; + CSS.selectorMany [| ".lola" |] [| CSS.color `transparent |]; |]; |] in @@ -1052,8 +1126,8 @@ let global_with_selector = let ampersand_everywhere_global = test "ampersand_everywhere_global" @@ fun () -> - [%global - {| + [%global + {| .foo { &[data-foo=bar] .lola { font-size: 2px; @@ -1074,9 +1148,10 @@ let ampersand_everywhere_global = |}]; let css = get_string_style_rules () in assert_string css - ".foo{}.foo[data-foo=bar] .lola{font-size:2px;}.foo .lola .foo::placeholder{font-size:3px;}\ - .lola .foo:not(a){font-size:4px;}.foo .lola{font-size:5px;}\ - .lola .foo .foo:focus .foo .foo .lola{font-size:6px;}" + ".foo{}.foo[data-foo=bar] .lola{font-size:2px;}.foo .lola \ + .foo::placeholder{font-size:3px;}.lola .foo:not(a){font-size:4px;}.foo \ + .lola{font-size:5px;}.lola .foo .foo:focus .foo .foo \ + .lola{font-size:6px;}" let tests = ( "CSS", @@ -1114,6 +1189,7 @@ let tests = nested_selectors; nested_selectors_2; multiple_pseudo; + functional_pseudo; selector_with_interp_and_pseudo; pseudo_selectors; pseudo_selectors_2;