From d4ac3e9d16da386fe579383fccb9bd43f76a1aa8 Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 15:22:42 +0200 Subject: [PATCH 1/8] Fix makefile --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index 3f199fcb..0842ec87 100644 --- a/Makefile +++ b/Makefile @@ -130,7 +130,7 @@ test: build done .PHONY: test-e2e -test-e2e: test-e2e-rescript-v9 test-e2e-rescript-v10 ## Run E2E tests +test-e2e: build test-e2e-rescript-v9 test-e2e-rescript-v10 ## Run E2E tests # Demo From e03dac97f03495ac9c9269e4a472fcfd32da5ddf Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 15:23:01 +0200 Subject: [PATCH 2/8] Allow interpolation in align --- packages/css-property-parser/lib/Parser.re | 4 ++-- packages/ppx/src/Property_to_runtime.re | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index a0a1af9c..11b320c2 100644 --- a/packages/css-property-parser/lib/Parser.re +++ b/packages/css-property-parser/lib/Parser.re @@ -806,10 +806,10 @@ and property_align_content = [%value.rec "'normal' | | | [ ]? " ] and property_align_items = [%value.rec - "'normal' | 'stretch' | | [ ]? " + "'normal' | 'stretch' | | [ ]? | " ] and property_align_self = [%value.rec - "'auto' | 'normal' | 'stretch' | | [ ]? " + "'auto' | 'normal' | 'stretch' | | [ ]? | " ] and property_alignment_baseline = [%value.rec "'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical'" diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 1553a414..c2252fb5 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -3603,6 +3603,7 @@ let align_items = [%expr `safe([%e render_self_position(~loc, position)])] | `Static(Some(`Unsafe), position) => [%expr `unsafe([%e render_self_position(~loc, position)])] + | `Interpolation(v) => render_variable(~loc, v) } }, ); @@ -3623,6 +3624,7 @@ let align_self = [%expr `safe([%e render_self_position(~loc, position)])] | `Static(Some(`Unsafe), position) => [%expr `unsafe([%e render_self_position(~loc, position)])] + | `Interpolation(v) => render_variable(~loc, v) } }, ); From 843967e27d9e17720f0bb61e4e95d145710c4287 Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 15:23:23 +0200 Subject: [PATCH 3/8] Fix unbound Fun in rescript --- packages/runtime/melange/Emotion.ml | 2 +- packages/runtime/native/Emotion.ml | 2 +- packages/runtime/rescript/Emotion.ml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/runtime/melange/Emotion.ml b/packages/runtime/melange/Emotion.ml index d7440f50..fa367f72 100644 --- a/packages/runtime/melange/Emotion.ml +++ b/packages/runtime/melange/Emotion.ml @@ -64,7 +64,7 @@ let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust () Kloth.Array.map_and_join ~sep:{js|, |js} ~f:Css_types.FontFace.toString src )); |] - |> Kloth.Array.filter_map ~f:Fun.id + |> Kloth.Array.filter_map ~f:(fun i -> i) in global [| Rule.Selector ("@font-face", fontFace) |]; fontFamily diff --git a/packages/runtime/native/Emotion.ml b/packages/runtime/native/Emotion.ml index 191cbc69..4d6edded 100644 --- a/packages/runtime/native/Emotion.ml +++ b/packages/runtime/native/Emotion.ml @@ -486,7 +486,7 @@ let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust () Kloth.Array.map_and_join ~sep:{js|, |js} ~f:Css_types.FontFace.toString src )); |] - |> Array.filter_map ~f:Fun.id + |> Kloth.Array.filter_map ~f:(fun i -> i) in global [| Rule.Selector ("@font-face", fontFace) |]; fontFamily diff --git a/packages/runtime/rescript/Emotion.ml b/packages/runtime/rescript/Emotion.ml index 26e2859b..df7ce537 100644 --- a/packages/runtime/rescript/Emotion.ml +++ b/packages/runtime/rescript/Emotion.ml @@ -63,7 +63,7 @@ let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust () Kloth.Array.map_and_join ~sep:{js|, |js} ~f:Css_types.FontFace.toString src )); |] - |> Kloth.Array.filter_map ~f:Fun.id + |> Kloth.Array.filter_map ~f:(fun i -> i) in global [| Rule.Selector ("@font-face", fontFace) |]; fontFamily From 931263e7d69e8e539f3d797484d32fb188e9e226 Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 15:23:34 +0200 Subject: [PATCH 4/8] Improve docs for interpolation --- .../site/pages/reference/interpolation.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/website/site/pages/reference/interpolation.mdx b/packages/website/site/pages/reference/interpolation.mdx index 422386c0..cd1f1a5a 100644 --- a/packages/website/site/pages/reference/interpolation.mdx +++ b/packages/website/site/pages/reference/interpolation.mdx @@ -160,7 +160,7 @@ In this case, to interpolate the background's value like: `background: $(variabl ## What if a property isn't supported First, if you have the time, please [open an issue](https://github.com/davesnx/styled-ppx/issues/new). Most properties are trivial to add support for. -If time isn't your best friend then there's a workaround for unsupported properties. +If time isn't your best friend then there's a workaround. There is no way to add unsafe behaviour to CSS definitions. We prefer to keep improving the overall safety of styled-ppx via requests/issues rather than allowing a method for unsafe functionality - doing so would negate the whole purpose of **styled-ppx**. @@ -168,31 +168,31 @@ The workaround is to use the [Array API](./array) to generate `%cx{:rescript}` ` ```rescript let block: Css.Rule.t = %css("display: block") -let randomProperty = CssJs.unsafe("aspect-ratio", "21 / 9"); +let randomProperty = CssJs.unsafe("-webkit-invented-property", "10px"); let picture = %cx([block, randomProperty]); ``` ```reason let block: Css.Rule.t = [%css "display: block"]; -let randomProperty = CssJs.unsafe("aspect-ratio", "21 / 9"); +let randomProperty = CssJs.unsafe("-webkit-invented-property", "10px"); let picture = [%cx [|block, randomProperty|]]; ``` ```rescript -let randomProperty = CssJs.unsafe("aspect-ratio", "21 / 9"); +let randomProperty = CssJs.unsafe("-webkit-invented-property", "10px"); let picture = %styled.div([randomProperty]); ``` ```reason -let randomProperty = CssJs.unsafe("aspect-ratio", "21 / 9"); +let randomProperty = CssJs.unsafe("-webkit-invented-property", "10px"); let picture = [%styled.div [|randomProperty|]]; ``` -Here the lack of safety will rely on your usage of `CssJs.unsafe{:rescript}` `CssJs.unsafe{:reason}`. +Here the safety will rely on your usage of `CssJs.unsafe{:rescript}` `CssJs.unsafe{:reason}` correctly. For a general overview of the list take a look at [support for CSS](https://styled-ppx.vercel.app/css-support). ## Not valid interpolation -Interpolation in ppxes is a little limited, which makes a few "use-cases" not possible, for example: abstract a function or a variable reference. +Interpolation in a ppx is a little limited, which makes a few "use-cases" not possible, for example: abstract a function or a variable reference. ```rescript // 🔴 Can't pass a function @@ -214,4 +214,4 @@ module X = %styled.div(value) /* 🔴 Can't pass a variable reference*/ let value = "display: block"; module X = [%styled.div value]; -``` \ No newline at end of file +``` From 3a35947f9c99844262390a758e1c12cceca01012 Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 15:41:52 +0200 Subject: [PATCH 5/8] Make unsafe be camelCase --- packages/ppx/src/Property_to_runtime.re | 39 +++++++++---------- .../backgrounds-and-borders-module.t/run.t | 10 ++--- .../cascading-and-inheritance.t/run.t | 4 +- .../ppx/test/css-support/fonts-module.t/run.t | 10 ++--- packages/ppx/test/css-support/random.t/run.t | 6 +-- 5 files changed, 34 insertions(+), 35 deletions(-) diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index c2252fb5..f2588b22 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -157,6 +157,18 @@ let render_percentage = (~loc, number) => [%expr `percent([%e render_float(~loc, number)]) ]; +let to_camel_case = txt => + ( + switch (String.split_on_char('-', txt)) { + | [first, ...remaining] => [ + first, + ...List.map(String.capitalize_ascii, remaining), + ] + | [] => [] + } + ) + |> String.concat(""); + let render_css_global_values = (~loc, name, value) => { let.ok value = Css_property_parser.Parser.parse( @@ -166,19 +178,18 @@ let render_css_global_values = (~loc, name, value) => { let value = switch (value) { - | `Inherit => "inherit" - | `Initial => "initial" - | `Unset => "unset" - | `Revert => "revert" - | `RevertLayer => "revert-layer" + | `Inherit => [%expr {js|inherit|js}] + | `Initial => [%expr {js|initial|js}] + | `Unset => [%expr {js|unset|js}] + | `Revert => [%expr {js|revert|js}] + | `RevertLayer => [%expr {js|revert-layer|js}] }; - /* bs-css doesn't have those */ Ok([ [%expr CssJs.unsafe( - [%e render_string(~loc, name)], - [%e render_string(~loc, value)], + [%e name |> to_camel_case |> render_string(~loc)], + [%e value], ) ], ]); @@ -4750,18 +4761,6 @@ let properties = [ ]; let render_when_unsupported_features = (~loc, property, value) => { - let to_camel_case = txt => - ( - switch (String.split_on_char('-', txt)) { - | [first, ...remaining] => [ - first, - ...List.map(String.capitalize_ascii, remaining), - ] - | [] => [] - } - ) - |> String.concat(""); - /* Transform property name to camelCase since we bind to emotion with the Object API */ let propertyName = property |> to_camel_case |> render_string(~loc); let unsafeInterpolation = diff --git a/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t b/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t index 9068e566..afedb7fe 100644 --- a/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t +++ b/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t @@ -684,11 +684,11 @@ If this test fail means that the module is not in sync with the ppx CssJs.unsafe({js|objectPosition|js}, {js|bottom 10px right 20px|js}); CssJs.unsafe({js|objectPosition|js}, {js|right 3em bottom 10px|js}); CssJs.unsafe({js|objectPosition|js}, {js|top 0 right 10px|js}); - CssJs.unsafe({js|object-position|js}, {js|inherit|js}); - CssJs.unsafe({js|object-position|js}, {js|initial|js}); - CssJs.unsafe({js|object-position|js}, {js|revert|js}); - CssJs.unsafe({js|object-position|js}, {js|revert-layer|js}); - CssJs.unsafe({js|object-position|js}, {js|unset|js}); + CssJs.unsafe({js|objectPosition|js}, {js|inherit|js}); + CssJs.unsafe({js|objectPosition|js}, {js|initial|js}); + CssJs.unsafe({js|objectPosition|js}, {js|revert|js}); + CssJs.unsafe({js|objectPosition|js}, {js|revert-layer|js}); + CssJs.unsafe({js|objectPosition|js}, {js|unset|js}); let _loadingKeyframes = CssJs.keyframes([| (0, [|CssJs.backgroundPosition2(`zero, `zero)|]), diff --git a/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t b/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t index accc1561..7ef7baa8 100644 --- a/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t +++ b/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t @@ -34,6 +34,6 @@ If this test fail means that the module is not in sync with the ppx } ]; CssJs.unsafe({js|color|js}, {js|unset|js}); - CssJs.unsafe({js|font-weight|js}, {js|unset|js}); - CssJs.unsafe({js|background-image|js}, {js|unset|js}); + CssJs.unsafe({js|fontWeight|js}, {js|unset|js}); + CssJs.unsafe({js|backgroundImage|js}, {js|unset|js}); CssJs.unsafe({js|width|js}, {js|unset|js}); diff --git a/packages/ppx/test/css-support/fonts-module.t/run.t b/packages/ppx/test/css-support/fonts-module.t/run.t index 075030c1..30ae50f4 100644 --- a/packages/ppx/test/css-support/fonts-module.t/run.t +++ b/packages/ppx/test/css-support/fonts-module.t/run.t @@ -32,13 +32,13 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.fontFamilies([|`custom({js|Inter Semi Bold|js})|]); + CssJs.fontFamilies([|{js|Inter Semi Bold|js}|]); CssJs.fontFamilies(fonts: array(CssJs.Types.FontFamilyName.t)); - CssJs.fontFamilies([|`custom({js|Inter|js})|]); + CssJs.fontFamilies([|{js|Inter|js}|]); CssJs.fontFamilies(font: array(CssJs.Types.FontFamilyName.t)); - CssJs.fontFamilies([|`custom({js|Inter|js}), `custom({js|Sans|js})|]); - CssJs.fontFamilies([|`custom({js|Inter|js}), font|]); - CssJs.fontFamilies([|`custom({js|Gill Sans Extrabold|js}), `sansSerif|]); + CssJs.fontFamilies([|{js|Inter|js}, {js|Sans|js}|]); + CssJs.fontFamilies([|{js|Inter|js}, font|]); + CssJs.fontFamilies([|{js|Gill Sans Extrabold|js}, "sans-serif"|]); CssJs.fontSynthesisWeight(`none); CssJs.fontSynthesisStyle(`auto); CssJs.fontSynthesisSmallCaps(`none); diff --git a/packages/ppx/test/css-support/random.t/run.t b/packages/ppx/test/css-support/random.t/run.t index 5835df90..888a6aa7 100644 --- a/packages/ppx/test/css-support/random.t/run.t +++ b/packages/ppx/test/css-support/random.t/run.t @@ -105,8 +105,8 @@ If this test fail means that the module is not in sync with the ppx (CssJs.SVG.fill(c): CssJs.rule); CssJs.SVG.fill(`currentColor); CssJs.gap(`pxFloat(4.)); - CssJs.unsafe({js|grid-column|js}, {js|unset|js}); - CssJs.unsafe({js|grid-row|js}, {js|unset|js}); + CssJs.unsafe({js|gridColumn|js}, {js|unset|js}); + CssJs.unsafe({js|gridRow|js}, {js|unset|js}); CssJs.gridTemplateColumns([|`maxContent, `maxContent|]); CssJs.gridTemplateColumns([| `minmax((`pxFloat(10.), `auto)), @@ -122,7 +122,7 @@ If this test fail means that the module is not in sync with the ppx CssJs.gridTemplateColumns([|`repeat((`num(3), [|`auto|]))|]); CssJs.unsafe({js|height|js}, {js|fit-content|js}); CssJs.justifyItems(`start); - CssJs.unsafe({js|justify-self|js}, {js|unset|js}); + CssJs.unsafe({js|justifySelf|js}, {js|unset|js}); CssJs.unsafe({js|left|js}, {js|unset|js}); let maskedImageUrl = `url("https://www.example.com/eye-uncrossed.svg"); (CssJs.maskImage(maskedImageUrl): CssJs.rule); From 840f4818ffa11094a3c537825f73c604ee702359 Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 15:44:05 +0200 Subject: [PATCH 6/8] Push changes for 0.58.1 --- CHANGES.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 032e504c..b8f70fec 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,6 +2,9 @@ ## 0.58.1 - [BREAKING] FontFamilyName.t is now a string (@davesnx) +- [FIX] Make unsafe calls from "Cascading" be camelCase to avoid emotion's warning #488 (@davesnx) +- [FIX] Keep classname when ampersand is at the end of the selector (@davesnx) +- [FIX] Fix fontFace in both melange and native (@davesnx) ## 0.58.0 - [FEATURE] Initial @container support #476 (@zakybilfagih) From fd653729a7e3797f0df8b6533dcb2b2d6599cbcc Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 17:42:19 +0200 Subject: [PATCH 7/8] Push all properties --- packages/css-property-parser/lib/Parser.re | 50 +- packages/ppx/src/Property_to_runtime.re | 852 ++++++++++++++++----- 2 files changed, 724 insertions(+), 178 deletions(-) diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index 11b320c2..c7d98be7 100644 --- a/packages/css-property-parser/lib/Parser.re +++ b/packages/css-property-parser/lib/Parser.re @@ -1002,6 +1002,9 @@ and property_clip_path = [%value.rec ] and property_clip_rule = [%value.rec "'nonzero' | 'evenodd'"] and property_color = [%value.rec ""] +and property_color_interpolation_filters = [%value.rec "'auto' | 'sRGB'"] +and property_color_interpolation = [%value.rec "'auto' | 'sRGB'"] + and property_color_adjust = [%value.rec "'economy' | 'exact'"] and property_column_count = [%value.rec " | 'auto'"] and property_column_fill = [%value.rec "'auto' | 'balance' | 'balance-all'"] @@ -1023,6 +1026,7 @@ and property_contain = [%value.rec and property_content = [%value.rec "'normal' | 'none' | [ | ] [ '/' ]?" ] +and property_content_visibility = [%value.rec "'visible' | 'hidden' | 'collapse'"] and property_counter_increment = [%value.rec "[ [ ]? ]+ | 'none'" ] @@ -1172,6 +1176,12 @@ and property_height = [%value.rec "'auto' | | | 'min-content' | 'max-content' | 'fit-content' | fit-content( | )" ] and property_hyphens = [%value.rec "'none' | 'manual' | 'auto'"] +and property_hyphenate_character = [%value.rec "'auto' | '-'"] +and property_hyphenate_limit_chars = [%value.rec "'auto' | "] +and property_hyphenate_limit_lines = [%value.rec "'no-limit' | "] +and property_hyphenate_limit_zone = [%value.rec + " | " +] and property_image_orientation = [%value.rec "'from-image' | | [ ]? 'flip'" ] @@ -1207,6 +1217,21 @@ and property_justify_self = [%value.rec "'auto' | 'normal' | 'stretch' | | [ ]? [ | 'left' | 'right' ]" ] and property_kerning = [%value.rec "'auto' | "] +and property_layout_grid = [%value.rec + "'auto' | | && [ ]?" +] +and property_layout_grid_char = [%value.rec + "'auto' | | " +] +and property_layout_grid_line = [%value.rec + "'auto' | | " +] +and property_layout_grid_mode = [%value.rec + "'auto' | | " +] +and property_layout_grid_type = [%value.rec + "'auto' | | " +] and property_left = [%value.rec " | | 'auto'" ] @@ -1553,6 +1578,14 @@ and property_scrollbar_color = [%value.rec and property_scrollbar_width = [%value.rec "'auto' | 'thin' | 'none' | " ] +and property_scrollbar_3dlight_color = [%value.rec ""] +and property_scrollbar_arrow_color = [%value.rec ""] +and property_scrollbar_base_color = [%value.rec ""] +and property_scrollbar_darkshadow_color = [%value.rec ""] +and property_scrollbar_face_color = [%value.rec ""] +and property_scrollbar_highlight_color = [%value.rec ""] +and property_scrollbar_shadow_color = [%value.rec ""] +and property_scrollbar_track_color = [%value.rec ""] and property_shape_image_threshold = [%value.rec ""] and property_shape_margin = [%value.rec " | " @@ -1580,6 +1613,8 @@ and property_stroke_opacity = [%value.rec ""] and property_stroke_width = [%value.rec ""] and property_tab_size = [%value.rec " | "] and property_table_layout = [%value.rec "'auto' | 'fixed'"] +and property_text_autospace = [%value.rec "'none' | 'ideograph-alpha' | 'ideograph-numeric' | 'ideograph-parenthesis' | 'ideograph-space'"] +and property_text_blink = [%value.rec "'none' | 'blink' | 'blink-anywhere'"] and property_text_align = [%value.rec "'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent' | 'justify-all'" ] @@ -1596,6 +1631,9 @@ and property_text_combine_upright = [%value.rec and property_text_decoration = [%value.rec "[ <'text-decoration-line'>] [<'text-decoration-style'>]? [<'text-decoration-color'>]?" ] +and property_text_justify_trim = [%value.rec "'none' | 'all' | 'auto'"] +and property_text_kashida = [%value.rec "'none' | 'horizontal' | 'vertical' | 'both'"] +and property_text_kashida_space = [%value.rec "'normal' | 'pre' | 'post'"] and property_text_decoration_color = [%value.rec ""] /* Spec doesn't contain spelling-error and grammar-error: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line but this list used to have them | 'spelling-error' | 'grammar-error'. Leaving this comment here for reference */ /* and this definition has changed from the origianl, it might be a bug on the spec or our Generator, @@ -1606,8 +1644,10 @@ and property_text_decoration_line = [%value.rec and property_text_decoration_skip = [%value.rec "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'" ] +and property_text_decoration_skip_self = [%value.rec "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'"] and property_text_decoration_skip_ink = [%value.rec "'auto' | 'all' | 'none'"] and property_text_decoration_skip_box = [%value.rec "'none' | 'all'"] +and property_text_decoration_skip_spaces = [%value.rec "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'"] and property_text_decoration_skip_inset = [%value.rec "'none' | 'auto'"] and property_text_decoration_style = [%value.rec @@ -1685,7 +1725,7 @@ and property_unicode_bidi = [%value.rec ] and property_unicode_range = [%value.rec "[ ]#"] and property_user_select = [%value.rec - "'auto' | 'text' | 'none' | 'contain' | 'all'" + "'auto' | 'text' | 'none' | 'contain' | 'all' | " ] and property_vertical_align = [%value.rec "'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom' | | " @@ -1737,9 +1777,15 @@ and property_z_index = [%value.rec "'auto' | | "] and property_zoom = [%value.rec "'normal' | 'reset' | | " ] -and property_container = [%value.rec "<'container-name'> [ '/' <'container-type'> ]?"] +and property_container = [%value.rec + "<'container-name'> [ '/' <'container-type'> ]?" +] and property_container_name = [%value.rec "+ | 'none'"] and property_container_type = [%value.rec "'normal' | 'size' | 'inline-size'"] +and property_nav_down = [%value.rec "'auto' | | "] +and property_nav_left = [%value.rec "'auto' | | "] +and property_nav_right = [%value.rec "'auto' | | "] +and property_nav_up = [%value.rec "'auto' | | "] and pseudo_class_selector = [%value.rec "':' | ':' ')'" ] diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index f2588b22..44a7e98a 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -2,17 +2,6 @@ open Ppxlib; module Builder = Ppxlib.Ast_builder.Default; -module Option = { - include Option; - - let mapWithDefault = (f, default, opt) => { - switch (opt) { - | Some(x) => f(x) - | None => default - }; - }; -}; - module Standard = Css_property_parser.Standard; module Property_parser = Css_property_parser.Parser; module Types = Property_parser.Types; @@ -146,6 +135,7 @@ let render_string = (~loc, s) => { | _ => Builder.pexp_constant(~loc, Pconst_string(s, loc, Some("js"))) }; }; + let render_integer = (~loc, integer) => { Builder.pexp_constant(~loc, Pconst_integer(Int.to_string(integer), None)); }; @@ -567,42 +557,49 @@ let width = (~loc) => [%expr CssJs.width], render_size, ); + let height = monomorphic( Property_parser.property_height, (~loc) => [%expr CssJs.height], render_size, ); + let min_width = monomorphic( Property_parser.property_min_width, (~loc) => [%expr CssJs.minWidth], render_min_size, ); + let min_height = monomorphic( Property_parser.property_min_height, (~loc) => [%expr CssJs.minHeight], render_min_size, ); + let max_width = monomorphic( Property_parser.property_max_width, (~loc) => [%expr CssJs.maxWidth], render_max_width, ); + let max_height = monomorphic( Property_parser.property_max_height, (~loc) => [%expr CssJs.maxHeight], render_size, ); + let box_sizing = monomorphic( Property_parser.property_box_sizing, (~loc) => [%expr CssJs.boxSizing], variant_to_expression, ); + let column_width = monomorphic( Property_parser.property_column_width, @@ -633,18 +630,21 @@ let margin_top = (~loc) => [%expr CssJs.marginTop], render_margin, ); + let margin_right = monomorphic( Property_parser.property_margin_right, (~loc) => [%expr CssJs.marginRight], render_margin, ); + let margin_bottom = monomorphic( Property_parser.property_margin_bottom, (~loc) => [%expr CssJs.marginBottom], render_margin, ); + let margin_left = monomorphic( Property_parser.property_margin_left, @@ -688,18 +688,21 @@ let padding_top = (~loc) => [%expr CssJs.paddingTop], render_padding, ); + let padding_right = monomorphic( Property_parser.property_padding_right, (~loc) => [%expr CssJs.paddingRight], render_padding, ); + let padding_bottom = monomorphic( Property_parser.property_padding_bottom, (~loc) => [%expr CssJs.paddingBottom], render_padding, ); + let padding_left = monomorphic( Property_parser.property_padding_left, @@ -1165,6 +1168,7 @@ let color = (~loc) => [%expr CssJs.color], render_color, ); + let opacity = monomorphic( Property_parser.property_opacity, @@ -1262,8 +1266,10 @@ let pointer_events = } }, ); + let image_resolution = unsupportedProperty(Property_parser.property_image_resolution); + let image_orientation = unsupportedProperty(Property_parser.property_image_orientation); @@ -1350,30 +1356,6 @@ let render_color_stop_angle = (~loc, value: Types.color_stop_angle) => { }; }; -let _render_linear_color_stop = (~loc, value: Types.linear_color_stop) => { - switch (value) { - | (color, Some(length_percentage)) => - let length = render_length_percentage(~loc, length_percentage); - let color = render_color(~loc, color); - [%expr ([%e color], Some([%e length]))]; - | (color, None) => - let color = render_color(~loc, color); - [%expr ([%e color], None)]; - }; -}; - -/* let render_linear_color_stop = (~loc, value: Types.linear_color_stop) => { - switch (value) { - | (color, None) => - let color = render_color(~loc, color); - [%expr ([%e color], None)]; - | (color, Some(length_percentage)) => - let color = render_color(~loc, color); - let length = render_length_percentage(~loc, length_percentage); - [%expr ([%e color], Some([%e length]))]; - }; - }; */ - let render_angular_color_stop = (~loc, value: Types.angular_color_stop) => { switch (value) { | (color, None) => @@ -1386,7 +1368,6 @@ let render_angular_color_stop = (~loc, value: Types.angular_color_stop) => { }; }; -/* and color_stop_list = [%value.rec "[ ',' ]# ',' "] */ let render_color_stop_list = (~loc, value: Types.color_stop_list) => { value |> List.map(stop => @@ -1551,7 +1532,6 @@ let render_function_radial_gradient = }; }; -/* | #repeatingRadialGradient(array<(Length.t, [< Color.t | Var.t] as 'colorOrVar)>) */ let render_function_repeating_radial_gradient = (~loc, value: Types.function_repeating_radial_gradient) => { switch (value) { @@ -1561,7 +1541,6 @@ let render_function_repeating_radial_gradient = }; }; -/* | #conicGradient(Angle.t, array<(Length.t, [< Color.t | Var.t] as 'colorOrVar)>) */ let render_function_conic_gradient = (~loc, value: Types.function_conic_gradient) => { switch (value) { @@ -1657,6 +1636,7 @@ let background_repeat = | [`Xor(_) as v] => render_repeat_style(~loc, v) | _ => raise(Unsupported_feature), ); + let background_attachment = monomorphic( Property_parser.property_background_attachment, @@ -1711,6 +1691,7 @@ let background_position = let background_position_x = unsupportedProperty(Property_parser.property_background_position_x); + let background_position_y = unsupportedProperty(Property_parser.property_background_position_y); @@ -1725,6 +1706,7 @@ let background_clip = | [`Text] => variant_to_expression(~loc, `Text) | _ => raise(Unsupported_feature), ); + let background_origin = monomorphic( Property_parser.property_background_origin, @@ -1892,14 +1874,17 @@ let border_right_style = variants(Property_parser.property_border_right_style, (~loc) => [%expr CssJs.borderRightStyle] ); + let border_bottom_style = variants(Property_parser.property_border_bottom_style, (~loc) => [%expr CssJs.borderBottomStyle] ); + let border_left_style = variants(Property_parser.property_border_left_style, (~loc) => [%expr CssJs.borderLeftStyle] ); + let border_style = monomorphic( Property_parser.property_border_style, @@ -1921,24 +1906,28 @@ let border_top_width = (~loc) => [%expr CssJs.borderTopWidth], render_line_width, ); + let border_right_width = monomorphic( Property_parser.property_border_right_width, (~loc) => [%expr CssJs.borderRightWidth], render_line_width, ); + let border_bottom_width = monomorphic( Property_parser.property_border_bottom_width, (~loc) => [%expr CssJs.borderBottomWidth], render_line_width, ); + let border_left_width = monomorphic( Property_parser.property_border_left_width, (~loc) => [%expr CssJs.borderLeftWidth], render_line_width, ); + let border_width = monomorphic( Property_parser.property_border_width, @@ -2042,18 +2031,21 @@ let outline_color = (~loc) => [%expr CssJs.outlineColor], render_color, ); + let outline_offset = monomorphic( Property_parser.property_outline_offset, (~loc) => [%expr CssJs.outlineOffset], render_extended_length, ); + let outline_style = monomorphic( Property_parser.property_outline_style, (~loc) => [%expr CssJs.outlineStyle], render_outline_style_interp, ); + let outline_width = monomorphic( Property_parser.property_outline_width, @@ -2098,11 +2090,13 @@ let border_right = Property_parser.property_border, render_border(~direction=Right), ); + let border_bottom = polymorphic( Property_parser.property_border, render_border(~direction=Bottom), ); + let border_left = polymorphic( Property_parser.property_border, @@ -2121,24 +2115,28 @@ let border_top_left_radius = (~loc) => [%expr CssJs.borderTopLeftRadius], render_border_radius_value, ); + let border_top_right_radius = monomorphic( Property_parser.property_border_top_right_radius, (~loc) => [%expr CssJs.borderTopRightRadius], render_border_radius_value, ); + let border_bottom_right_radius = monomorphic( Property_parser.property_border_bottom_right_radius, (~loc) => [%expr CssJs.borderBottomRightRadius], render_border_radius_value, ); + let border_bottom_left_radius = monomorphic( Property_parser.property_border_bottom_left_radius, (~loc) => [%expr CssJs.borderBottomLeftRadius], render_border_radius_value, ); + let border_radius = monomorphic( Property_parser.property_border_radius, @@ -2160,12 +2158,16 @@ let border_image_source = let border_image_slice = unsupportedProperty(Property_parser.property_border_image_slice); + let border_image_width = unsupportedProperty(Property_parser.property_border_image_width); + let border_image_outset = unsupportedProperty(Property_parser.property_border_image_outset); + let border_image_repeat = unsupportedProperty(Property_parser.property_border_image_repeat); + let border_image = unsupportedProperty(Property_parser.property_border_image); let box_shadow = @@ -2265,6 +2267,7 @@ let text_overflow = | _ => raise(Unsupported_feature), ); // let block_ellipsis = unsupportedProperty(Property_parser.property_block_ellipsis); + let max_lines = unsupportedProperty(Property_parser.property_max_lines); // let continue = unsupportedProperty(Property_parser.property_continue); @@ -2273,6 +2276,7 @@ let text_transform = variants(Property_parser.property_text_transform, (~loc) => [%expr CssJs.textTransform] ); + let white_space = variants(Property_parser.property_white_space, (~loc) => [%expr CssJs.whiteSpace] @@ -2299,6 +2303,7 @@ let word_break = variants(Property_parser.property_word_break, (~loc) => [%expr CssJs.wordBreak] ); + let render_line_height = (~loc) => fun | `Extended_length(ext) => render_extended_length(~loc, ext) @@ -2312,38 +2317,47 @@ let line_height = (~loc) => [%expr CssJs.lineHeight], render_line_height, ); + let line_height_step = monomorphic( Property_parser.property_line_height_step, (~loc) => [%expr CssJs.lineHeightStep], render_extended_length, ); + let hyphens = variants(Property_parser.property_hyphens, (~loc) => [%expr CssJs.hyphens]); + let overflow_wrap = variants(Property_parser.property_overflow_wrap, (~loc) => [%expr CssJs.overflowWrap] ); + let word_wrap = variants(Property_parser.property_word_wrap, (~loc) => [%expr CssJs.wordWrap] ); + let text_align = variants(Property_parser.property_text_align, (~loc) => [%expr CssJs.textAlign] ); + let text_align_all = variants(Property_parser.property_text_align_all, (~loc) => [%expr CssJs.textAlignAll] ); + let text_align_last = variants(Property_parser.property_text_align_last, (~loc) => [%expr CssJs.textAlignLast] ); + let text_justify = variants(Property_parser.property_text_justify, (~loc) => [%expr CssJs.textJustify] ); + let word_spacing = monomorphic( Property_parser.property_word_spacing, @@ -2354,6 +2368,7 @@ let word_spacing = | `Extended_length(l) => render_extended_length(~loc, l) | `Extended_percentage(p) => render_extended_percentage(~loc, p), ); + let letter_spacing = monomorphic( Property_parser.property_word_spacing, @@ -2364,6 +2379,7 @@ let letter_spacing = | `Extended_length(l) => render_extended_length(~loc, l) | `Extended_percentage(p) => render_extended_percentage(~loc, p), ); + let text_indent = monomorphic( Property_parser.property_text_indent, @@ -2495,43 +2511,56 @@ let font_size = let font_size_adjust = unsupportedProperty(Property_parser.property_font_size_adjust); + let font = unsupportedProperty(Property_parser.property_font); + let font_synthesis_weight = variants(Property_parser.property_font_synthesis_weight, (~loc) => [%expr CssJs.fontSynthesisWeight] ); + let font_synthesis_style = variants(Property_parser.property_font_synthesis_style, (~loc) => [%expr CssJs.fontSynthesisStyle] ); + let font_synthesis_small_caps = variants(Property_parser.property_font_synthesis_small_caps, (~loc) => [%expr CssJs.fontSynthesisSmallCaps] ); + let font_synthesis_position = variants(Property_parser.property_font_synthesis_position, (~loc) => [%expr CssJs.fontSynthesisPosition] ); + let font_synthesis = unsupportedProperty(Property_parser.property_font_synthesis); + let font_kerning = variants(Property_parser.property_font_kerning, (~loc) => [%expr CssJs.fontKerning] ); + let font_variant_ligatures = unsupportedProperty(Property_parser.property_font_variant_ligatures); + let font_variant_position = variants(Property_parser.property_font_variant_position, (~loc) => [%expr CssJs.fontVariantPosition] ); + let font_variant_caps = variants(Property_parser.property_font_variant_caps, (~loc) => [%expr CssJs.fontVariantCaps] ); + let font_variant_numeric = unsupportedProperty(Property_parser.property_font_variant_numeric); + let font_variant_alternates = unsupportedProperty(Property_parser.property_font_variant_alternates); + let font_variant_east_asian = unsupportedProperty(Property_parser.property_font_variant_east_asian); @@ -2543,15 +2572,20 @@ let font_variant = | `Small_caps => [[%expr CssJs.fontVariant(`smallCaps)]] | _ => raise(Unsupported_feature) ); + let font_feature_settings = unsupportedProperty(Property_parser.property_font_feature_settings); + let font_optical_sizing = variants(Property_parser.property_font_optical_sizing, (~loc) => [%expr CssJs.fontOpticalSizing] ); + let font_variation_settings = unsupportedProperty(Property_parser.property_font_variation_settings); -// let font_palette = unsupportedProperty(Property_parser.property_font_palette); + +let font_palette = unsupportedProperty(Property_parser.property_font_palette); + let font_variant_emoji = variants(Property_parser.property_font_variant_emoji, (~loc) => [%expr CssJs.fontVariantEmoji] @@ -2599,6 +2633,7 @@ let text_decoration_color = (~loc) => [%expr CssJs.textDecorationColor], render_color, ); + let render_text_decoration_thickness = (~loc) => fun | `Auto => variant_to_expression(~loc, `Auto) @@ -2613,18 +2648,6 @@ let text_decoration_thickness = render_text_decoration_thickness, ); -/* let render_text_decoration_with_thickness = (~loc, (line, style, color, thickness)) => { - let _line = line |> Option.map(render_text_decoration_line(~loc)); - let _style = style |> Option.map(render_text_decoration_style(~loc)); - let _color = color |> Option.map(render_color(~loc)); - let _thickness = thickness |> Option.map(render_text_decoration_thickness(~loc)); - // let properties = [line, style, color, thickness]; - // let properties = List.filter((_, v) => v != [], properties); - // let properties = List.map((_, v) => v, properties); - // let properties = List.flatten(properties); - // properties; - }; */ - let text_decoration = monomorphic( Property_parser.property_text_decoration, @@ -2640,22 +2663,29 @@ let text_decoration = let text_underline_position = unsupportedProperty(Property_parser.property_text_underline_position); + let text_underline_offset = unsupportedProperty(Property_parser.property_text_underline_offset); + let text_decoration_skip = unsupportedProperty(Property_parser.property_text_decoration_skip); -// let text_decoration_skip_self = -// unsupportedProperty(Property_parser.property_text_decoration_skip_self); + +let text_decoration_skip_self = + unsupportedProperty(Property_parser.property_text_decoration_skip_self); + let text_decoration_skip_box = variants(Property_parser.property_text_decoration_skip_box, (~loc) => [%expr CssJs.textDecorationSkipBox] ); + let text_decoration_skip_inset = variants(Property_parser.property_text_decoration_skip_inset, (~loc) => [%expr CssJs.textDecorationSkipInset] ); -// let text_decoration_skip_spaces = -// unsupportedProperty(Property_parser.property_text_decoration_skip_spaces); + +let text_decoration_skip_spaces = + unsupportedProperty(Property_parser.property_text_decoration_skip_spaces); + let text_decoration_skip_ink = variants(Property_parser.property_text_decoration_skip_ink, (~loc) => [%expr CssJs.textDecorationSkipInk] @@ -2772,10 +2802,8 @@ let render_text_shadow = (~loc, shadow) => { Nolabel, Some( color - |> Option.mapWithDefault( - render_color_interp(~loc), - [%expr `Color(`CurrentColor)], - ), + |> Option.map(render_color_interp(~loc)) + |> Option.value(~default=[%expr `Color(`CurrentColor)]), ), ), ] @@ -2941,22 +2969,27 @@ let transform_origin = ] | `Static(_, Some(_)) => raise(Unsupported_feature) ); + let transform_box = variants(Property_parser.property_transform_box, (~loc) => [%expr CssJs.transformBox] ); + let translate = unsupportedValue(Property_parser.property_translate, (~loc) => [%expr CssJs.translate] ); + let rotate = unsupportedValue(Property_parser.property_rotate, (~loc) => [%expr CssJs.rotate] ); + let scale = unsupportedValue(Property_parser.property_scale, (~loc) => [%expr CssJs.scale] ); + let transform_style = monomorphic( Property_parser.property_transform_style, @@ -2966,6 +2999,7 @@ let transform_style = | `Flat => variant_to_expression(~loc, `Flat) | `Preserve_3d => variant_to_expression(~loc, `Preserve_3d), ); + let perspective = unsupportedProperty(Property_parser.property_perspective); let perspective_origin = @@ -3022,6 +3056,7 @@ let transition_duration = | [one] => render_extended_time(~loc, one) | _ => raise(Unsupported_feature), ); + let widows = monomorphic( Property_parser.property_widows, @@ -3086,6 +3121,7 @@ let transition_timing_function = | [t] => render_timing(~loc, t) | _ => raise(Unsupported_feature), ); + let transition_delay = monomorphic( Property_parser.property_transition_delay, @@ -3370,6 +3406,7 @@ let flex_direction = variants(Property_parser.property_flex_direction, (~loc) => [%expr CssJs.flexDirection] ); + let flex_wrap = variants(Property_parser.property_flex_wrap, (~loc) => [%expr CssJs.flexWrap] @@ -3402,6 +3439,7 @@ let order = (~loc) => [%expr CssJs.order], render_integer, ); + let render_float_interp = (~loc, value) => { switch (value) { | `Number(n) => [%expr [%e render_float(~loc, n)]] @@ -3415,6 +3453,7 @@ let flex_grow = (~loc) => [%expr CssJs.flexGrow], render_float_interp, ); + let flex_shrink = monomorphic( Property_parser.property_flex_shrink, @@ -3897,28 +3936,35 @@ let grid_template_rows = | `Static((), Some(subgrid)) => render_subgrid(~loc, subgrid) }, ); + let grid_template_areas = unsupportedValue(Property_parser.property_grid_template_areas, (~loc) => [%expr CssJs.gridTemplateAreas] ); + let grid_template = unsupportedProperty(Property_parser.property_grid_template); + let grid_auto_columns = unsupportedValue(Property_parser.property_grid_auto_columns, (~loc) => [%expr CssJs.gridAutoColumns] ); + let grid_auto_rows = unsupportedValue(Property_parser.property_grid_auto_rows, (~loc) => [%expr CssJs.gridAutoRows] ); + let grid_auto_flow = unsupportedValue(Property_parser.property_grid_auto_flow, (~loc) => [%expr CssJs.gridAutoFlow] ); + let grid = unsupportedValue(Property_parser.property_grid, (~loc) => [%expr CssJs.grid] ); + let grid_row_start = unsupportedValue(Property_parser.property_grid_row_start, (~loc) => [%expr CssJs.gridRowStart] @@ -3948,22 +3994,27 @@ let grid_column_start = unsupportedValue(Property_parser.property_grid_column_start, (~loc) => [%expr CssJs.gridColumnStart] ); + let grid_row_end = unsupportedValue(Property_parser.property_grid_row_end, (~loc) => [%expr CssJs.gridRowEnd] ); + let grid_column_end = unsupportedValue(Property_parser.property_grid_column_end, (~loc) => [%expr CssJs.gridColumnEnd] ); + let grid_row = unsupportedValue(Property_parser.property_grid_row, (~loc) => [%expr CssJs.gridRow] ); + let grid_column = unsupportedValue(Property_parser.property_grid_column, (~loc) => [%expr CssJs.gridColumn] ); + let grid_area = unsupportedValue(Property_parser.property_grid_area, (~loc) => [%expr CssJs.gridArea] @@ -4104,15 +4155,6 @@ let display = render_display, ); -/* let render_mask_source = (~loc) => fun - | `Interpolation(v) => render_variable(v) - | `Cross_fade() - | `Element() - | `Image() - | `Image_set() - | `Paint() => raise(Unsupported_feature) - ; */ - let render_mask_image = (~loc) => fun | `None => [%expr `none] @@ -4161,7 +4203,7 @@ let render_alpha_value = (~loc, value: Types.alpha_value) => { }; }; -let strokeOpacity = +let stroke_opacity = monomorphic( Property_parser.property_stroke_opacity, (~loc) => [%expr CssJs.SVG.strokeOpacity], @@ -4194,31 +4236,47 @@ let found = ({ast_of_string, string_to_expr, _}) => { }; let caret_color = unsupportedProperty(Property_parser.property_caret_color); + let clear = unsupportedProperty(Property_parser.property_clear); + let clip = unsupportedProperty(Property_parser.property_clip); + let clip_path = unsupportedProperty(Property_parser.property_clip_path); + let column_count = unsupportedProperty(Property_parser.property_column_count); + let column_fill = unsupportedProperty(Property_parser.property_column_fill); + let column_gap = monomorphic( Property_parser.property_column_gap, (~loc) => [%expr CssJs.columnGap], (~loc) => render_gap(~loc), ); + let column_rule = unsupportedProperty(Property_parser.property_column_rule); + let column_rule_color = unsupportedProperty(Property_parser.property_column_rule_color); + let column_rule_style = unsupportedProperty(Property_parser.property_column_rule_style); + let column_rule_width = unsupportedProperty(Property_parser.property_column_rule_width); + let column_span = unsupportedProperty(Property_parser.property_column_span); + let columns = unsupportedProperty(Property_parser.property_columns); + let counter_increment = unsupportedProperty(Property_parser.property_counter_increment); + let counter_reset = unsupportedProperty(Property_parser.property_counter_reset); +let counter_set = unsupportedProperty(Property_parser.property_counter_set); + let render_cursor = (~loc, value) => switch (value) { | `Interpolation(variable) => render_variable(~loc, variable) @@ -4275,6 +4333,7 @@ let cursor = (~loc) => [%expr CssJs.cursor], render_cursor, ); + let direction = unsupportedProperty(Property_parser.property_direction); let render_drop_shadow = (~loc, value: Types.function_drop_shadow) => { @@ -4364,25 +4423,18 @@ let backdrop_filter = ); let float = unsupportedProperty(Property_parser.property_float); + let font_language_override = unsupportedProperty(Property_parser.property_font_language_override); -/* let hyphenate_character = - unsupportedProperty(Property_parser.property_hyphenate_character); */ -/* let hyphenate_limit_chars = - unsupportedProperty(Property_parser.property_hyphenate_limit_chars); */ -/* let hyphenate_limit_lines = - unsupportedProperty(Property_parser.property_hyphenate_limit_lines); */ -/* let hyphenate_limit_zone = - unsupportedProperty(Property_parser.property_hyphenate_limit_zone); */ + let ime_mode = unsupportedProperty(Property_parser.property_ime_mode); + let isolation = unsupportedProperty(Property_parser.property_isolation); -/* let layout_grid = unsupportedProperty(Property_parser.property_layout_grid); */ -/* let layout_grid_char = unsupportedProperty(Property_parser.property_layout_grid_char); */ -/* let layout_grid_line = unsupportedProperty(Property_parser.property_layout_grid_line); */ -/* let layout_grid_mode = unsupportedProperty(Property_parser.property_layout_grid_mode); */ -/* let layout_grid_type = unsupportedProperty(Property_parser.property_layout_grid_type); */ + let line_clamp = unsupportedProperty(Property_parser.property_line_clamp); + let list_style = unsupportedProperty(Property_parser.property_list_style); + let list_style_image = monomorphic( Property_parser.property_list_style_image, @@ -4397,16 +4449,17 @@ let list_style_image = let list_style_position = unsupportedProperty(Property_parser.property_list_style_position); + let list_style_type = unsupportedProperty(Property_parser.property_list_style_type); + let mix_blend_mode = unsupportedProperty(Property_parser.property_mix_blend_mode); -/* let nav_down = unsupportedProperty(Property_parser.property_nav_down); */ -/* let nav_left = unsupportedProperty(Property_parser.property_nav_left); */ -/* let nav_right = unsupportedProperty(Property_parser.property_nav_right); */ -/* let nav_up = unsupportedProperty(Property_parser.property_nav_up); */ + let position = unsupportedProperty(Property_parser.property_position); + let resize = unsupportedProperty(Property_parser.property_resize); + let row_gap = monomorphic( Property_parser.property_row_gap, @@ -4414,43 +4467,405 @@ let row_gap = (~loc) => render_gap(~loc), ); -/* let scrollbar_3dlight_color = - unsupportedProperty(Property_parser.property_scrollbar_3dlight_color); */ -/* let scrollbar_arrow_color = - unsupportedProperty(Property_parser.property_scrollbar_arrow_color); */ -/* let scrollbar_base_color = - unsupportedProperty(Property_parser.property_scrollbar_base_color); */ +let scrollbar_3dlight_color = + unsupportedProperty(Property_parser.property_scrollbar_3dlight_color); + +let scrollbar_arrow_color = + unsupportedProperty(Property_parser.property_scrollbar_arrow_color); + +let scrollbar_base_color = + unsupportedProperty(Property_parser.property_scrollbar_base_color); + let scrollbar_color = unsupportedProperty(Property_parser.property_scrollbar_color); -/* let scrollbar_darkshadow_color = */ -/* unsupportedProperty(Property_parser.property_scrollbar_darkshadow_color); */ -/* let scrollbar_face_color = */ -/* unsupportedProperty(Property_parser.property_scrollbar_face_color); */ -/* let scrollbar_highlight_color = */ -/* unsupportedProperty(Property_parser.property_scrollbar_highlight_color); */ -/* let scrollbar_shadow_color = */ -/* unsupportedProperty(Property_parser.property_scrollbar_shadow_color); */ -/* let scrollbar_track_color = */ -/* unsupportedProperty(Property_parser.property_scrollbar_track_color); */ -/* let scrollbar_width = unsupportedProperty(Property_parser.property_scrollbar_width); */ -/* let strokeDasharray = unsupportedProperty(Property_parser.property_strokeDasharray); */ -/* let strokeLinecap = unsupportedProperty(Property_parser.property_strokeLinecap); */ -/* let strokeLinejoin = unsupportedProperty(Property_parser.property_strokeLinejoin); */ -/* let strokeMiterlimit = unsupportedProperty(Property_parser.property_strokeMiterlimit); */ -/* let strokeWidth = unsupportedProperty(Property_parser.property_strokeWidth); */ -/* let text_autospace = unsupportedProperty(Property_parser.property_text_autospace); */ -/* let text_blink = unsupportedProperty(Property_parser.property_text_blink); */ + +let scrollbar_darkshadow_color = + unsupportedProperty(Property_parser.property_scrollbar_darkshadow_color); + +let scrollbar_face_color = + unsupportedProperty(Property_parser.property_scrollbar_face_color); + +let scrollbar_highlight_color = + unsupportedProperty(Property_parser.property_scrollbar_highlight_color); + +let scrollbar_shadow_color = + unsupportedProperty(Property_parser.property_scrollbar_shadow_color); + +let scrollbar_track_color = + unsupportedProperty(Property_parser.property_scrollbar_track_color); + +let scrollbar_width = + unsupportedProperty(Property_parser.property_scrollbar_width); + +let stroke_dasharray = + unsupportedProperty(Property_parser.property_stroke_dasharray); + +let stroke_linecap = + unsupportedProperty(Property_parser.property_stroke_linecap); + +let stroke_linejoin = + unsupportedProperty(Property_parser.property_stroke_linejoin); + +let stroke_miterlimit = + unsupportedProperty(Property_parser.property_stroke_miterlimit); + +let stroke_width = unsupportedProperty(Property_parser.property_stroke_width); + let text_combine_upright = unsupportedProperty(Property_parser.property_text_combine_upright); -/* let text_justify_trim = - unsupportedProperty(Property_parser.property_text_justify_trim); */ -/* let text_kashida = unsupportedProperty(Property_parser.property_text_kashida); */ -/* let text_kashida_space = - unsupportedProperty(Property_parser.property_text_kashida_space); */ + +let all = unsupportedProperty(Property_parser.property_all); + +let appearance = unsupportedProperty(Property_parser.property_appearance); + +let background_blend_mode = + unsupportedProperty(Property_parser.property_background_blend_mode); + +let baseline_shift = + unsupportedProperty(Property_parser.property_baseline_shift); + +let block_size = unsupportedProperty(Property_parser.property_block_size); + +let border_block_color = + unsupportedProperty(Property_parser.property_border_block_color); + +let border_block_end_color = + unsupportedProperty(Property_parser.property_border_block_end_color); + +let border_block_end_style = + unsupportedProperty(Property_parser.property_border_block_end_style); + +let border_block_end_width = + unsupportedProperty(Property_parser.property_border_block_end_width); + +let border_block_end = + unsupportedProperty(Property_parser.property_border_block_end); + +let border_block_start_color = + unsupportedProperty(Property_parser.property_border_block_start_color); + +let border_block_start_style = + unsupportedProperty(Property_parser.property_border_block_start_style); + +let border_block_start_width = + unsupportedProperty(Property_parser.property_border_block_start_width); + +let border_block_start = + unsupportedProperty(Property_parser.property_border_block_start); + +let border_block_style = + unsupportedProperty(Property_parser.property_border_block_style); + +let border_block_width = + unsupportedProperty(Property_parser.property_border_block_width); + +let border_block = unsupportedProperty(Property_parser.property_border_block); + +let border_collapse = + unsupportedProperty(Property_parser.property_border_collapse); + +let border_end_end_radius = + unsupportedProperty(Property_parser.property_border_end_end_radius); + +let border_end_start_radius = + unsupportedProperty(Property_parser.property_border_end_start_radius); + +let border_inline_color = + unsupportedProperty(Property_parser.property_border_inline_color); + +let border_inline_end_color = + unsupportedProperty(Property_parser.property_border_inline_end_color); + +let border_inline_end_style = + unsupportedProperty(Property_parser.property_border_inline_end_style); + +let border_inline_end_width = + unsupportedProperty(Property_parser.property_border_inline_end_width); + +let border_inline_end = + unsupportedProperty(Property_parser.property_border_inline_end); + +let border_inline_start_color = + unsupportedProperty(Property_parser.property_border_inline_start_color); + +let border_inline_start_style = + unsupportedProperty(Property_parser.property_border_inline_start_style); + +let border_inline_start_width = + unsupportedProperty(Property_parser.property_border_inline_start_width); + +let border_inline_start = + unsupportedProperty(Property_parser.property_border_inline_start); + +let border_inline_style = + unsupportedProperty(Property_parser.property_border_inline_style); + +let border_inline_width = + unsupportedProperty(Property_parser.property_border_inline_width); + +let border_inline = + unsupportedProperty(Property_parser.property_border_inline); + +let border_spacing = + unsupportedProperty(Property_parser.property_border_spacing); + +let border_start_end_radius = + unsupportedProperty(Property_parser.property_border_start_end_radius); + +let border_start_start_radius = + unsupportedProperty(Property_parser.property_border_start_start_radius); + +let box_decoration_break = + unsupportedProperty(Property_parser.property_box_decoration_break); + +let break_after = unsupportedProperty(Property_parser.property_break_after); + +let break_before = unsupportedProperty(Property_parser.property_break_before); + +let break_inside = unsupportedProperty(Property_parser.property_break_inside); + +let caption_side = unsupportedProperty(Property_parser.property_caption_side); + +let clip_rule = unsupportedProperty(Property_parser.property_clip_rule); + +let color_adjust = unsupportedProperty(Property_parser.property_color_adjust); + +let color_interpolation_filters = + unsupportedProperty(Property_parser.property_color_interpolation_filters); + +let color_interpolation = + unsupportedProperty(Property_parser.property_color_interpolation); + +let color_scheme = unsupportedProperty(Property_parser.property_color_scheme); + +let contain = unsupportedProperty(Property_parser.property_contain); + +let content_visibility = + unsupportedProperty(Property_parser.property_content_visibility); + +let content = unsupportedProperty(Property_parser.property_content); + +let empty_cells = unsupportedProperty(Property_parser.property_empty_cells); + +let fill_opacity = unsupportedProperty(Property_parser.property_fill_opacity); + +let fill_rule = unsupportedProperty(Property_parser.property_fill_rule); + +let hyphenate_character = + unsupportedProperty(Property_parser.property_hyphenate_character); + +let hyphenate_limit_chars = + unsupportedProperty(Property_parser.property_hyphenate_limit_chars); + +let hyphenate_limit_lines = + unsupportedProperty(Property_parser.property_hyphenate_limit_lines); + +let hyphenate_limit_zone = + unsupportedProperty(Property_parser.property_hyphenate_limit_zone); + +let initial_letter_align = + unsupportedProperty(Property_parser.property_initial_letter_align); + +let initial_letter = + unsupportedProperty(Property_parser.property_initial_letter); + +let inline_size = unsupportedProperty(Property_parser.property_inline_size); + +let inset_block_end = + unsupportedProperty(Property_parser.property_inset_block_end); + +let inset_block_start = + unsupportedProperty(Property_parser.property_inset_block_start); + +let inset_block = unsupportedProperty(Property_parser.property_inset_block); + +let inset_inline_end = + unsupportedProperty(Property_parser.property_inset_inline_end); + +let inset_inline_start = + unsupportedProperty(Property_parser.property_inset_inline_start); + +let inset_inline = unsupportedProperty(Property_parser.property_inset_inline); + +let inset = unsupportedProperty(Property_parser.property_inset); + +let layout_grid_char = + unsupportedProperty(Property_parser.property_layout_grid_char); + +let layout_grid_line = + unsupportedProperty(Property_parser.property_layout_grid_line); + +let layout_grid_mode = + unsupportedProperty(Property_parser.property_layout_grid_mode); + +let layout_grid_type = + unsupportedProperty(Property_parser.property_layout_grid_type); + +let layout_grid = unsupportedProperty(Property_parser.property_layout_grid); + +let mask_border_mode = + unsupportedProperty(Property_parser.property_mask_border_mode); + +let mask_border_outset = + unsupportedProperty(Property_parser.property_mask_border_outset); + +let mask_border_repeat = + unsupportedProperty(Property_parser.property_mask_border_repeat); + +let mask_border_slice = + unsupportedProperty(Property_parser.property_mask_border_slice); + +let mask_border_source = + unsupportedProperty(Property_parser.property_mask_border_source); + +let mask_border_width = + unsupportedProperty(Property_parser.property_mask_border_width); + +let mask_clip = unsupportedProperty(Property_parser.property_mask_clip); + +let mask_composite = + unsupportedProperty(Property_parser.property_mask_composite); + +let mask_mode = unsupportedProperty(Property_parser.property_mask_mode); + +let mask_origin = unsupportedProperty(Property_parser.property_mask_origin); + +let mask_position = + unsupportedProperty(Property_parser.property_mask_position); + +let mask_repeat = unsupportedProperty(Property_parser.property_mask_repeat); + +let mask_size = unsupportedProperty(Property_parser.property_mask_size); + +let mask_type = unsupportedProperty(Property_parser.property_mask_type); + +let max_block_size = + unsupportedProperty(Property_parser.property_max_block_size); + +let max_inline_size = + unsupportedProperty(Property_parser.property_max_inline_size); + +let min_block_size = + unsupportedProperty(Property_parser.property_min_block_size); + +let min_inline_size = + unsupportedProperty(Property_parser.property_min_inline_size); + +let nav_down = unsupportedProperty(Property_parser.property_nav_down); + +let nav_left = unsupportedProperty(Property_parser.property_nav_left); + +let nav_right = unsupportedProperty(Property_parser.property_nav_right); + +let nav_up = unsupportedProperty(Property_parser.property_nav_up); + +let offset_anchor = + unsupportedProperty(Property_parser.property_offset_anchor); + +let offset_distance = + unsupportedProperty(Property_parser.property_offset_distance); + +let offset_path = unsupportedProperty(Property_parser.property_offset_path); + +let offset_position = + unsupportedProperty(Property_parser.property_offset_position); + +let offset_rotate = + unsupportedProperty(Property_parser.property_offset_rotate); + +let offset = unsupportedProperty(Property_parser.property_offset); + +let orphans = unsupportedProperty(Property_parser.property_orphans); + +let overflow_anchor = + unsupportedProperty(Property_parser.property_overflow_anchor); + +let overflow_clip_box = + unsupportedProperty(Property_parser.property_overflow_clip_box); + +let padding_block_end = + unsupportedProperty(Property_parser.property_padding_block_end); + +let padding_block_start = + unsupportedProperty(Property_parser.property_padding_block_start); + +let padding_block = + unsupportedProperty(Property_parser.property_padding_block); + +let padding_inline_end = + unsupportedProperty(Property_parser.property_padding_inline_end); + +let padding_inline_start = + unsupportedProperty(Property_parser.property_padding_inline_start); + +let padding_inline = + unsupportedProperty(Property_parser.property_padding_inline); + +let page_break_after = + unsupportedProperty(Property_parser.property_page_break_after); + +let page_break_before = + unsupportedProperty(Property_parser.property_page_break_before); + +let page_break_inside = + unsupportedProperty(Property_parser.property_page_break_inside); + +let table_layout = unsupportedProperty(Property_parser.property_table_layout); + +/* let render_animatable_feature = (~loc) => + fun + | `Scroll_position => [%expr `scrollPosition] + | `Contents => [%expr `contents] + | `Custom_ident(v) => render_string(~loc, v); */ + +let will_change = + monomorphic( + Property_parser.property_will_change, + (~loc) => [%expr CssJs.willChange], + (~loc, value: Types.property_will_change) => { + switch (value) { + | `Auto => [%expr `auto] + | _ => + raise( + Unsupported_feature + ) + } + }, + ); + +let writing_mode = unsupportedProperty(Property_parser.property_writing_mode); + let text_orientation = unsupportedProperty(Property_parser.property_text_orientation); + let touch_action = unsupportedProperty(Property_parser.property_touch_action); -let user_select = unsupportedProperty(Property_parser.property_user_select); + +let user_select = + monomorphic( + Property_parser.property_user_select, + (~loc) => [%expr CssJs.userSelect], + (~loc) => + fun + | `Auto => [%expr `auto] + | `Text => [%expr `text] + | `Contain => [%expr `contain] + | `All => [%expr `all] + | `None => [%expr `none] + | `Interpolation(v) => render_variable(~loc, v), + ); + +let zoom = + monomorphic( + Property_parser.property_zoom, + (~loc) => [%expr CssJs.zoom], + (~loc) => + fun + | `Number(number) => [%expr `num([%e render_float(~loc, number)])] + | `Extended_percentage(v) => render_extended_percentage(~loc, v) + | `Reset => [%expr `reset] + | `Normal => [%expr `normal], + ); + let visibility = monomorphic( Property_parser.property_visibility, @@ -4467,6 +4882,7 @@ let properties = [ ("align-content", found(align_content)), ("align-items", found(align_items)), ("align-self", found(align_self)), + ("all", found(all)), ("animation-delay", found(animation_delay)), ("animation-direction", found(animation_direction)), ("animation-duration", found(animation_duration)), @@ -4476,44 +4892,76 @@ let properties = [ ("animation-play-state", found(animation_play_state)), ("animation-timing-function", found(animation_timing_function)), ("animation", found(animation)), + ("appearance", found(appearance)), ("aspect-ratio", found(aspect_ratio)), - ("backface-visibility", found(backface_visibility)), ("backdrop-filter", found(backdrop_filter)), + ("backface-visibility", found(backface_visibility)), ("background-attachment", found(background_attachment)), - ("background-clip", found(background_clip)), + ("background-blend-mode", found(background_blend_mode)), ("background-clip", found(background_clip)), ("background-color", found(background_color)), ("background-image", found(background_image)), ("background-origin", found(background_origin)), - ("background-position", found(background_position)), ("background-position-x", found(background_position_x)), ("background-position-y", found(background_position_y)), + ("background-position", found(background_position)), ("background-repeat", found(background_repeat)), ("background-size", found(background_size)), ("background", found(background)), + ("baseline-shift", found(baseline_shift)), + ("block-size", found(block_size)), + ("border-block-color", found(border_block_color)), + ("border-block-end-color", found(border_block_end_color)), + ("border-block-end-style", found(border_block_end_style)), + ("border-block-end-width", found(border_block_end_width)), + ("border-block-end", found(border_block_end)), + ("border-block-start-color", found(border_block_start_color)), + ("border-block-start-style", found(border_block_start_style)), + ("border-block-start-width", found(border_block_start_width)), + ("border-block-start", found(border_block_start)), + ("border-block-style", found(border_block_style)), + ("border-block-width", found(border_block_width)), + ("border-block", found(border_block)), ("border-bottom-color", found(border_bottom_color)), ("border-bottom-left-radius", found(border_bottom_left_radius)), ("border-bottom-right-radius", found(border_bottom_right_radius)), ("border-bottom-style", found(border_bottom_style)), ("border-bottom-width", found(border_bottom_width)), ("border-bottom", found(border_bottom)), + ("border-collapse", found(border_collapse)), ("border-color", found(border_color)), + ("border-end-end-radius", found(border_end_end_radius)), + ("border-end-start-radius", found(border_end_start_radius)), ("border-image-outset", found(border_image_outset)), ("border-image-repeat", found(border_image_repeat)), ("border-image-slice", found(border_image_slice)), ("border-image-source", found(border_image_source)), ("border-image-width", found(border_image_width)), ("border-image", found(border_image)), + ("border-inline-color", found(border_inline_color)), + ("border-inline-end-color", found(border_inline_end_color)), + ("border-inline-end-style", found(border_inline_end_style)), + ("border-inline-end-width", found(border_inline_end_width)), + ("border-inline-end", found(border_inline_end)), + ("border-inline-start-color", found(border_inline_start_color)), + ("border-inline-start-style", found(border_inline_start_style)), + ("border-inline-start-width", found(border_inline_start_width)), + ("border-inline-start", found(border_inline_start)), + ("border-inline-style", found(border_inline_style)), + ("border-inline-width", found(border_inline_width)), + ("border-inline", found(border_inline)), ("border-left-color", found(border_left_color)), ("border-left-style", found(border_left_style)), ("border-left-width", found(border_left_width)), ("border-left", found(border_left)), ("border-radius", found(border_radius)), - ("border-radius", found(border_radius)), ("border-right-color", found(border_right_color)), ("border-right-style", found(border_right_style)), ("border-right-width", found(border_right_width)), ("border-right", found(border_right)), + ("border-spacing", found(border_spacing)), + ("border-start-end-radius", found(border_start_end_radius)), + ("border-start-start-radius", found(border_start_start_radius)), ("border-style", found(border_style)), ("border-top-color", found(border_top_color)), ("border-top-left-radius", found(border_top_left_radius)), @@ -4524,12 +4972,22 @@ let properties = [ ("border-width", found(border_width)), ("border", found(border)), ("bottom", found(bottom)), + ("box-decoration-break", found(box_decoration_break)), ("box-shadow", found(box_shadow)), ("box-sizing", found(box_sizing)), + ("break-after", found(break_after)), + ("break-before", found(break_before)), + ("break-inside", found(break_inside)), + ("caption-side", found(caption_side)), ("caret-color", found(caret_color)), ("clear", found(clear)), ("clip-path", found(clip_path)), + ("clip-rule", found(clip_rule)), ("clip", found(clip)), + ("color-adjust", found(color_adjust)), + ("color-interpolation-filters", found(color_interpolation_filters)), + ("color-interpolation", found(color_interpolation)), + ("color-scheme", found(color_scheme)), ("color", found(color)), ("column-count", found(column_count)), ("column-fill", found(column_fill)), @@ -4541,20 +4999,27 @@ let properties = [ ("column-span", found(column_span)), ("column-width", found(column_width)), ("columns", found(columns)), + ("contain", found(contain)), + ("content-visibility", found(content_visibility)), + ("content", found(content)), ("counter-increment", found(counter_increment)), ("counter-reset", found(counter_reset)), + ("counter-set", found(counter_set)), ("cursor", found(cursor)), ("direction", found(direction)), ("display", found(display)), + ("empty-cells", found(empty_cells)), + ("fill-opacity", found(fill_opacity)), + ("fill-rule", found(fill_rule)), ("fill", found(fill)), ("filter", found(filter)), + ("flex", found(flex)), ("flex-basis", found(flex_basis)), ("flex-direction", found(flex_direction)), ("flex-flow", found(flex_flow)), ("flex-grow", found(flex_grow)), ("flex-shrink", found(flex_shrink)), ("flex-wrap", found(flex_wrap)), - ("flex", found(flex)), ("float", found(float)), ("font-family", found(font_family)), ("font-feature-settings", found(font_feature_settings)), @@ -4563,19 +5028,21 @@ let properties = [ ("font-optical-sizing", found(font_optical_sizing)), ("font-size-adjust", found(font_size_adjust)), ("font-size", found(font_size)), + ("font-palette", found(font_palette)), ("font-stretch", found(font_stretch)), ("font-style", found(font_style)), - ("font-synthesis", found(font_synthesis)), - ("font-synthesis-weight", found(font_synthesis_weight)), - ("font-synthesis-style", found(font_synthesis_style)), - ("font-synthesis-small-caps", found(font_synthesis_small_caps)), ("font-synthesis-position", found(font_synthesis_position)), + ("font-synthesis-small-caps", found(font_synthesis_small_caps)), + ("font-synthesis-style", found(font_synthesis_style)), + ("font-synthesis-weight", found(font_synthesis_weight)), + ("font-synthesis", found(font_synthesis)), ("font-variant-alternates", found(font_variant_alternates)), ("font-variant-caps", found(font_variant_caps)), ("font-variant-east-asian", found(font_variant_east_asian)), ("font-variant-ligatures", found(font_variant_ligatures)), ("font-variant-numeric", found(font_variant_numeric)), ("font-variant-position", found(font_variant_position)), + ("font-variant-emoji", found(font_variant_emoji)), ("font-variant", found(font_variant)), ("font-variation-settings", found(font_variation_settings)), ("font-weight", found(font_weight)), @@ -4601,24 +5068,34 @@ let properties = [ ("grid", found(grid)), ("hanging-punctuation", found(hanging_punctuation)), ("height", found(height)), - /* ("hyphenate-character", found(hyphenate_character)), */ - /* ("hyphenate-limit-chars", found(hyphenate_limit_chars)), */ - /* ("hyphenate-limit-lines", found(hyphenate_limit_lines)), */ - /* ("hyphenate-limit-zone", found(hyphenate_limit_zone)), */ + ("hyphenate-character", found(hyphenate_character)), + ("hyphenate-limit-chars", found(hyphenate_limit_chars)), + ("hyphenate-limit-lines", found(hyphenate_limit_lines)), + ("hyphenate-limit-zone", found(hyphenate_limit_zone)), ("hyphens", found(hyphens)), ("image-orientation", found(image_orientation)), ("image-rendering", found(image_rendering)), ("image-resolution", found(image_resolution)), ("ime-mode", found(ime_mode)), + ("initial-letter-align", found(initial_letter_align)), + ("initial-letter", found(initial_letter)), + ("inline-size", found(inline_size)), + ("inset-block-end", found(inset_block_end)), + ("inset-block-start", found(inset_block_start)), + ("inset-block", found(inset_block)), + ("inset-inline-end", found(inset_inline_end)), + ("inset-inline-start", found(inset_inline_start)), + ("inset-inline", found(inset_inline)), + ("inset", found(inset)), ("isolation", found(isolation)), ("justify-content", found(justify_content)), ("justify-items", found(justify_items)), ("justify-self", found(justify_self)), - /* ("layout-grid-char", found(layout_grid_char)), */ - /* ("layout-grid-line", found(layout_grid_line)), */ - /* ("layout-grid-mode", found(layout_grid_mode)), */ - /* ("layout-grid-type", found(layout_grid_type)), */ - /* ("layout-grid", found(layout_grid)), */ + ("layout-grid-char", found(layout_grid_char)), + ("layout-grid-line", found(layout_grid_line)), + ("layout-grid-mode", found(layout_grid_mode)), + ("layout-grid-type", found(layout_grid_type)), + ("layout-grid", found(layout_grid)), ("left", found(left)), ("letter-spacing", found(letter_spacing)), ("line-break", found(line_break)), @@ -4634,40 +5111,73 @@ let properties = [ ("margin-right", found(margin_right)), ("margin-top", found(margin_top)), ("margin", found(margin)), + ("mask-border-mode", found(mask_border_mode)), + ("mask-border-outset", found(mask_border_outset)), + ("mask-border-repeat", found(mask_border_repeat)), + ("mask-border-slice", found(mask_border_slice)), + ("mask-border-source", found(mask_border_source)), + ("mask-border-width", found(mask_border_width)), + ("mask-clip", found(mask_clip)), + ("mask-composite", found(mask_composite)), ("mask-image", found(mask_image)), - ("mask-image", found(mask_image)), + ("mask-mode", found(mask_mode)), + ("mask-origin", found(mask_origin)), + ("mask-position", found(mask_position)), + ("mask-repeat", found(mask_repeat)), + ("mask-size", found(mask_size)), + ("mask-type", found(mask_type)), + ("max-block-size", found(max_block_size)), ("max-height", found(max_height)), + ("max-inline-size", found(max_inline_size)), ("max-lines", found(max_lines)), ("max-width", found(max_width)), + ("min-block-size", found(min_block_size)), ("min-height", found(min_height)), + ("min-inline-size", found(min_inline_size)), ("min-width", found(min_width)), ("mix-blend-mode", found(mix_blend_mode)), - /* ("nav-down", found(nav_down)), */ - /* ("nav-left", found(nav_left)), */ - /* ("nav-right", found(nav_right)), */ - /* ("nav-up", found(nav_up)), */ + ("nav-down", found(nav_down)), + ("nav-left", found(nav_left)), + ("nav-right", found(nav_right)), + ("nav-up", found(nav_up)), ("object-fit", found(object_fit)), ("object-position", found(object_position)), + ("offset-anchor", found(offset_anchor)), + ("offset-distance", found(offset_distance)), + ("offset-path", found(offset_path)), + ("offset-position", found(offset_position)), + ("offset-rotate", found(offset_rotate)), + ("offset", found(offset)), ("opacity", found(opacity)), ("order", found(order)), - ("order", found(order)), + ("orphans", found(orphans)), + ("outline", found(outline)), ("outline-color", found(outline_color)), ("outline-offset", found(outline_offset)), ("outline-style", found(outline_style)), ("outline-width", found(outline_width)), - ("outline", found(outline)), - ("overflow-inline", found(overflow_inline)), + ("overflow-anchor", found(overflow_anchor)), ("overflow-block", found(overflow_block)), + ("overflow-clip-box", found(overflow_clip_box)), + ("overflow-inline", found(overflow_inline)), ("overflow-wrap", found(overflow_wrap)), ("overflow-x", found(overflow_x)), - ("overflow-x", found(overflow_x)), ("overflow-y", found(overflow_y)), ("overflow", found(overflow)), + ("padding-block-end", found(padding_block_end)), + ("padding-block-start", found(padding_block_start)), + ("padding-block", found(padding_block)), ("padding-bottom", found(padding_bottom)), + ("padding-inline-end", found(padding_inline_end)), + ("padding-inline-start", found(padding_inline_start)), + ("padding-inline", found(padding_inline)), ("padding-left", found(padding_left)), ("padding-right", found(padding_right)), ("padding-top", found(padding_top)), ("padding", found(padding)), + ("page-break-after", found(page_break_after)), + ("page-break-before", found(page_break_before)), + ("page-break-inside", found(page_break_inside)), ("perspective-origin", found(perspective_origin)), ("perspective", found(perspective)), ("pointer-events", found(pointer_events)), @@ -4677,31 +5187,28 @@ let properties = [ ("rotate", found(rotate)), ("row-gap", found(row_gap)), ("scale", found(scale)), - /* ("scrollbar-3dlight-color", found(scrollbar_3dlight_color)), */ - /* ("scrollbar-arrow-color", found(scrollbar_arrow_color)), */ - /* ("scrollbar-base-color", found(scrollbar_base_color)), */ + ("scrollbar-3dlight-color", found(scrollbar_3dlight_color)), + ("scrollbar-arrow-color", found(scrollbar_arrow_color)), + ("scrollbar-base-color", found(scrollbar_base_color)), ("scrollbar-color", found(scrollbar_color)), - /* ("scrollbar-darkshadow-color", found(scrollbar_darkshadow_color)), */ - /* ("scrollbar-face-color", found(scrollbar_face_color)), */ - /* ("scrollbar-highlight-color", found(scrollbar_highlight_color)), */ - /* ("scrollbar-shadow-color", found(scrollbar_shadow_color)), */ - /* ("scrollbar-track-color", found(scrollbar_track_color)), */ - /* ("scrollbar-width", found(scrollbar_width)), */ - /* ("stop-color", found(stopColor)), */ - /* ("stop-opacity", found(stopOpacity)), */ - /* ("stroke-dasharray", found(strokeDasharray)), */ - /* ("stroke-linecap", found(strokeLinecap)), */ - /* ("stroke-linejoin", found(strokeLinejoin)), */ - /* ("stroke-miterlimit", found(strokeMiterlimit)), */ - /* ("stroke-width", found(strokeWidth)), */ + ("scrollbar-darkshadow-color", found(scrollbar_darkshadow_color)), + ("scrollbar-face-color", found(scrollbar_face_color)), + ("scrollbar-highlight-color", found(scrollbar_highlight_color)), + ("scrollbar-shadow-color", found(scrollbar_shadow_color)), + ("scrollbar-track-color", found(scrollbar_track_color)), + ("scrollbar-width", found(scrollbar_width)), + ("stroke-opacity", found(stroke_opacity)), + ("stroke-width", found(stroke_width)), + ("stroke-dasharray", found(stroke_dasharray)), + ("stroke-linecap", found(stroke_linecap)), + ("stroke-linejoin", found(stroke_linejoin)), + ("stroke-miterlimit", found(stroke_miterlimit)), ("stroke", found(stroke)), - ("stroke-opacity", found(strokeOpacity)), ("tab-size", found(tab_size)), + ("table-layout", found(table_layout)), ("text-align-last", found(text_align_last)), ("text-align", found(text_align)), ("text-align-all", found(text_align_all)), - /* ("text-autospace", found(text_autospace)), */ - /* ("text-blink", found(text_blink)), */ ("text-combine-upright", found(text_combine_upright)), ("text-decoration-color", found(text_decoration_color)), ("text-decoration-line", found(text_decoration_line)), @@ -4710,16 +5217,16 @@ let properties = [ ("text-decoration-style", found(text_decoration_style)), ("text-decoration-thickness", found(text_decoration_thickness)), ("text-decoration", found(text_decoration)), + ("text-decoration-skip-box", found(text_decoration_skip_box)), + ("text-decoration-skip-inset", found(text_decoration_skip_inset)), + ("text-decoration-skip-self", found(text_decoration_skip_self)), + ("text-decoration-skip-spaces", found(text_decoration_skip_spaces)), ("text-emphasis-color", found(text_emphasis_color)), ("text-emphasis-position", found(text_emphasis_position)), ("text-emphasis-style", found(text_emphasis_style)), ("text-emphasis", found(text_emphasis)), ("text-indent", found(text_indent)), - ("text-indent", found(text_indent)), - /* ("text-justify-trim", found(text_justify_trim)), */ ("text-justify", found(text_justify)), - /* ("text-kashida-space", found(text_kashida_space)), */ - /* ("text-kashida", found(text_kashida)), */ ("text-orientation", found(text_orientation)), ("text-overflow", found(text_overflow)), ("text-shadow", found(text_shadow)), @@ -4741,23 +5248,16 @@ let properties = [ ("user-select", found(user_select)), ("vertical-align", found(vertical_align)), ("visibility", found(visibility)), + ("will-change", found(will_change)), ("white-space", found(white_space)), ("widows", found(widows)), ("width", found(width)), ("word-break", found(word_break)), ("word-spacing", found(word_spacing)), ("word-wrap", found(word_wrap)), + ("writing-mode", found(writing_mode)), ("z-index", found(z_index)), - // ("block-ellipsis", found(block_ellipsis)), - // ("continue", found(continue)), - // ("font-palette", found(font_palette)), - ("font-variant-emoji", found(font_variant_emoji)), - // ("overflow-clip-margin", found(overflow_clip_margin)), - ("text-decoration-skip-box", found(text_decoration_skip_box)), - ("text-decoration-skip-inset", found(text_decoration_skip_inset)), - // ("text-decoration-skip-self", found(text_decoration_skip_self)), - // ("text-decoration-skip-spaces", found(text_decoration_skip_spaces)), - // ("text-emphasis-skip", found(text_emphasis_skip)), + ("zoom", found(zoom)), ]; let render_when_unsupported_features = (~loc, property, value) => { From 39731321cec356cdce9568fff3a551e00811a330 Mon Sep 17 00:00:00 2001 From: David Sancho Moreno Date: Tue, 9 Jul 2024 20:22:03 +0200 Subject: [PATCH 8/8] Rename CssJs to CSS --- e2e/melange/debug.re | 2 +- e2e/melange/src/native/ui.re | 4 +- e2e/melange/src/ui/ui.re | 4 +- e2e/rescript-v10-JSX4/src/content_test.res | 18 +- e2e/rescript-v10-JSX4/src/cx_support_test.res | 4 +- e2e/rescript-v10-JSX4/src/index.res | 18 +- e2e/rescript-v9-JSX3/src/content_test.res | 18 +- e2e/rescript-v9-JSX3/src/cx_support_test.res | 14 +- packages/css-property-parser/lib/Parser.re | 20 +- packages/ppx/src/Css_to_runtime.re | 18 +- packages/ppx/src/Property_to_runtime.re | 907 +++++++++--------- packages/ppx/src/Property_to_string.re | 2 +- packages/ppx/src/ppx.re | 2 +- .../ppx/test/css-support/animations.t/run.t | 68 +- .../backgrounds-and-borders-module.t/run.t | 710 +++++++------- .../basic-user-interface-module.t/run.t | 124 +-- .../css-support/box-alignment-module.t/run.t | 340 +++---- .../css-support/box-sizing-module.t/run.t | 54 +- .../cascading-and-inheritance.t/run.t | 8 +- .../color-adjustments-module.t/run.t | 36 +- .../ppx/test/css-support/color-module.t/run.t | 230 ++--- .../compositingand-blending.t/run.t | 70 +- .../css-support/containment-module.t/run.t | 52 +- packages/ppx/test/css-support/content.t/run.t | 8 +- .../test/css-support/display-module.t/run.t | 6 +- .../test/css-support/easing-functions.t/run.t | 8 +- .../css-support/empty-declarations.t/run.t | 18 +- .../filter-effects-module.t/input.re | 2 +- .../css-support/filter-effects-module.t/run.t | 62 +- packages/ppx/test/css-support/flex.t/run.t | 24 +- .../flexible-box-layout-module.t/run.t | 100 +- .../ppx/test/css-support/fonts-module.t/run.t | 240 +++-- .../css-support/fragmentation-module.t/run.t | 66 +- .../css-support/grid-layout-module.t/run.t | 202 ++-- .../interpolation-location-error.t/run.t | 3 +- .../ppx/test/css-support/lists-module.t/run.t | 140 +-- .../logical-propertiesand-values.t/run.t | 172 ++-- .../test/css-support/masking-module.t/run.t | 246 ++--- .../css-support/motion-path-module.t/run.t | 100 +- .../multi-column-layout-module.t/run.t | 46 +- .../run.t | 8 +- .../non-valid-property-location-error.t/run.t | 4 +- .../run.t | 8 +- .../non-valid-value-location-error.t/run.t | 12 +- .../test/css-support/overflow-module.t/run.t | 48 +- .../overscroll-behavior-module.t/run.t | 48 +- .../test/css-support/pointer-events.t/run.t | 30 +- .../positioned-layout-module.t/run.t | 2 +- .../ppx/test/css-support/random.t/input.re | 6 +- packages/ppx/test/css-support/random.t/run.t | 176 ++-- .../css-support/ruby-layout-module.t/run.t | 10 +- .../css-support/scroll-snap-module.t/run.t | 156 +-- .../css-support/scrollbars-module.t/run.t | 16 +- .../selector-interp-location-error.t/run.t | 9 +- .../ppx/test/css-support/selectors.t/run.t | 20 +- packages/ppx/test/css-support/svg.t/run.t | 20 +- .../test/css-support/text-decoration.t/run.t | 148 +-- .../ppx/test/css-support/text-module.t/run.t | 124 +-- .../css-support/transforms-module.t/run.t | 144 +-- .../test/css-support/transitions.t/input.re | 4 +- .../ppx/test/css-support/transitions.t/run.t | 162 ++-- .../values-and-units-module.t/input.re | 36 +- .../values-and-units-module.t/run.t | 36 +- .../test/css-support/vertical-align.t/run.t | 16 +- .../css-support/will-change-module.t/run.t | 8 +- .../test/css-support/writing-modes.t/run.t | 38 +- packages/ppx/test/native/At_rule_test.re | 161 ++-- .../ppx/test/native/Interpolation_test.re | 68 +- packages/ppx/test/native/Selector_test.re | 254 +++-- packages/ppx/test/native/Static_test.re | 480 +++++---- packages/ppx/test/native/Whitespace_test.re | 8 +- .../reason-bs-config-missing-jsx.t/run.t | 10 +- .../reason/reason-classname-cx.t/run.t | 18 +- .../reason/reason-dynamic-array.t/run.t | 10 +- .../input.re | 2 +- .../run.t | 10 +- .../reason-dynamic-interpolation.t/run.t | 8 +- .../reason/reason-dynamic-sequence.t/run.t | 10 +- .../reason/reason-dynamic-with-array.t/run.t | 12 +- .../reason/reason-dynamic-with-ident.t/run.t | 2 +- .../run.t | 6 +- .../snapshot/reason/reason-dynamic.t/run.t | 10 +- .../snapshot/reason/reason-keyframes.t/run.t | 12 +- .../run.t | 12 +- .../run.t | 16 +- .../reason-media-queries-with-calc.t/run.t | 12 +- .../input.re | 2 +- .../run.t | 10 +- .../reason/reason-native-dynamic.t/run.t | 10 +- .../run.t | 8 +- .../reason/reason-static-array.t/run.t | 8 +- .../reason-static-doble-quotes-string.t/run.t | 8 +- .../reason-static-interpolation.t/input.re | 6 +- .../reason-static-interpolation.t/run.t | 18 +- .../reason-static-multi-line-string.t/run.t | 8 +- .../reason-static-open-property.t/run.t | 6 +- .../run.t | 2 +- .../reason/reason-styled-global.t/run.t | 146 +-- .../run.t | 8 +- .../run.t | 2 +- .../input.res | 2 +- .../rescript-static-interpolation.t/input.res | 6 +- .../snapshot/rescript/rescript-static.t/run.t | 2 +- packages/runtime/melange/{CssJs.ml => CSS.ml} | 2 +- .../{Emotion.ml => Emotion_bindings.ml} | 0 .../runtime/native/{Emotion.ml => CSS.ml} | 9 + packages/runtime/native/CssJs.ml | 9 - packages/runtime/rescript/CssJs.ml | 9 - .../{Emotion.ml => Emotion_bindings.ml} | 0 packages/runtime/rescript/dune | 6 +- packages/runtime/test/test_autoprefixer.ml | 14 +- packages/runtime/test/test_styles.ml | 200 ++-- packages/website/site/pages/about.mdx | 2 +- .../site/pages/getting-started/melange.mdx | 4 +- .../site/pages/getting-started/native.mdx | 24 +- .../site/pages/getting-started/rescript.mdx | 6 +- .../website/site/pages/reference/_meta.json | 2 +- .../website/site/pages/reference/array.mdx | 2 +- .../pages/reference/dynamic-components.mdx | 6 +- .../site/pages/reference/interpolation.mdx | 16 +- .../website/site/pages/reference/runtime.mdx | 2 +- 121 files changed, 3511 insertions(+), 3630 deletions(-) rename packages/runtime/melange/{CssJs.ml => CSS.ml} (85%) rename packages/runtime/melange/{Emotion.ml => Emotion_bindings.ml} (100%) rename packages/runtime/native/{Emotion.ml => CSS.ml} (99%) delete mode 100644 packages/runtime/native/CssJs.ml delete mode 100644 packages/runtime/rescript/CssJs.ml rename packages/runtime/rescript/{Emotion.ml => Emotion_bindings.ml} (100%) diff --git a/e2e/melange/debug.re b/e2e/melange/debug.re index 53af10ed..18b549ca 100644 --- a/e2e/melange/debug.re +++ b/e2e/melange/debug.re @@ -6,4 +6,4 @@ print_endline("Rendered app:"); print_endline(Ui_native.Ui.getStaticMarkup()); print_endline("\nStyle tag:"); -print_endline(ReactDOM.renderToStaticMarkup()); +print_endline(ReactDOM.renderToStaticMarkup()); diff --git a/e2e/melange/src/native/ui.re b/e2e/melange/src/native/ui.re index 11d57f4e..a18cb290 100644 --- a/e2e/melange/src/native/ui.re +++ b/e2e/melange/src/native/ui.re @@ -15,7 +15,7 @@ let stack = [%cx "display: flex; flex-direction: column"]; let stackGap = gap => [%cx "gap: $(gap)"]; module Cositas = [%styled.div - (~lola=CssJs.px(0)) => {| + (~lola=CSS.px(0)) => {| display: flex; flex-direction: column; gap: $(lola); @@ -95,7 +95,7 @@ module App = {

{React.string("Card content")}

- +
{React.string("code everywhere!")}
{React.string("Red text")}
diff --git a/e2e/melange/src/ui/ui.re b/e2e/melange/src/ui/ui.re index a7892805..31d12921 100644 --- a/e2e/melange/src/ui/ui.re +++ b/e2e/melange/src/ui/ui.re @@ -16,7 +16,7 @@ let stack = [%cx "display: flex; flex-direction: column"]; let stackGap = gap => [%cx "gap: $(gap)"]; module Cositas = [%styled.div - (~lola=CssJs.px(0)) => {| + (~lola=CSS.px(0)) => {| display: flex; flex-direction: column; gap: $(lola); @@ -95,7 +95,7 @@ module App = {

{React.string("Card content")}

- +
{React.string("code everywhere!")}
{React.string("Red text")}
diff --git a/e2e/rescript-v10-JSX4/src/content_test.res b/e2e/rescript-v10-JSX4/src/content_test.res index 61277000..130952f7 100644 --- a/e2e/rescript-v10-JSX4/src/content_test.res +++ b/e2e/rescript-v10-JSX4/src/content_test.res @@ -1,7 +1,7 @@ open Vitest -module Content = CssJs.Types.Content -module FontFamily = CssJs.Types.FontFamilyName +module Content = CSS.Types.Content +module FontFamily = CSS.Types.FontFamilyName let testData = [ (Content.toString(#text("")), "''"), @@ -23,13 +23,13 @@ describe("content as string", () => { }) let testData = list{ - (%css("content: ''"), CssJs.contentRule(#text("''"))), - (%css("content: '\"'"), CssJs.contentRule(#text(`'"'`))), - (%css(`content: '\"'`), CssJs.contentRule(#text("'\"'"))), - (%css("content: ' '"), CssJs.contentRule(#text("' '"))), - (%css("content: 'single'"), CssJs.contentRule(#text("'single'"))), - (%css(`font-family: "Lola"`), CssJs.fontFamily("Lola")), - (%css(`font-family: "Lola del rio"`), CssJs.fontFamily("Lola del rio")), + (%css("content: ''"), CSS.contentRule(#text("''"))), + (%css("content: '\"'"), CSS.contentRule(#text(`'"'`))), + (%css(`content: '\"'`), CSS.contentRule(#text("'\"'"))), + (%css("content: ' '"), CSS.contentRule(#text("' '"))), + (%css("content: 'single'"), CSS.contentRule(#text("'single'"))), + (%css(`font-family: "Lola"`), CSS.fontFamily("Lola")), + (%css(`font-family: "Lola del rio"`), CSS.fontFamily("Lola del rio")), } describe("content to rule", () => { diff --git a/e2e/rescript-v10-JSX4/src/cx_support_test.res b/e2e/rescript-v10-JSX4/src/cx_support_test.res index 3a19117f..3cd11248 100644 --- a/e2e/rescript-v10-JSX4/src/cx_support_test.res +++ b/e2e/rescript-v10-JSX4/src/cx_support_test.res @@ -1,10 +1,10 @@ open Vitest let testData = list{ - (%cx("opacity: 0.9"), CssJs.style([CssJs.opacity(0.9)])), + (%cx("opacity: 0.9"), CSS.style([CSS.opacity(0.9)])), ( %cx("@media (min-width: 30em) { color: brown; }"), - CssJs.style([CssJs.media("(min-width: 30em)", [CssJs.color(CssJs.brown)])]), + CSS.style([CSS.media("(min-width: 30em)", [CSS.color(CSS.brown)])]), ), } diff --git a/e2e/rescript-v10-JSX4/src/index.res b/e2e/rescript-v10-JSX4/src/index.res index e53f0b3a..8b391959 100644 --- a/e2e/rescript-v10-JSX4/src/index.res +++ b/e2e/rescript-v10-JSX4/src/index.res @@ -89,9 +89,9 @@ module Component = %styled.div(` let stilos = %cx("box-shadow: inset 10px 10px 0 0 #ff0000, 10px 10px 0 0 #ff0000") -let styles = CssJs.style([ - CssJs.label("ComponentName"), - CssJs.display(#block), +let styles = CSS.style([ + CSS.label("ComponentName"), + CSS.display(#block), %css("flex-direction: row"), ]) @@ -118,12 +118,12 @@ module Button = %styled.button( let fonts = ["Inter"] -let title = CssJs.style([ - CssJs.label("title"), +let title = CSS.style([ + CSS.label("title"), %css("font-family: $(fonts)"), - CssJs.fontSize(#px(24)), - CssJs.fontWeight(#bold), - CssJs.color(#hex("333")), + CSS.fontSize(#px(24)), + CSS.fontWeight(#bold), + CSS.color(#hex("333")), ]) module App = { @@ -138,7 +138,7 @@ module App = {
  • {React.string("emotion/css")}
    • - {React.string("Halo :)")} + {React.string("Halo :)")} diff --git a/e2e/rescript-v9-JSX3/src/content_test.res b/e2e/rescript-v9-JSX3/src/content_test.res index 61277000..130952f7 100644 --- a/e2e/rescript-v9-JSX3/src/content_test.res +++ b/e2e/rescript-v9-JSX3/src/content_test.res @@ -1,7 +1,7 @@ open Vitest -module Content = CssJs.Types.Content -module FontFamily = CssJs.Types.FontFamilyName +module Content = CSS.Types.Content +module FontFamily = CSS.Types.FontFamilyName let testData = [ (Content.toString(#text("")), "''"), @@ -23,13 +23,13 @@ describe("content as string", () => { }) let testData = list{ - (%css("content: ''"), CssJs.contentRule(#text("''"))), - (%css("content: '\"'"), CssJs.contentRule(#text(`'"'`))), - (%css(`content: '\"'`), CssJs.contentRule(#text("'\"'"))), - (%css("content: ' '"), CssJs.contentRule(#text("' '"))), - (%css("content: 'single'"), CssJs.contentRule(#text("'single'"))), - (%css(`font-family: "Lola"`), CssJs.fontFamily("Lola")), - (%css(`font-family: "Lola del rio"`), CssJs.fontFamily("Lola del rio")), + (%css("content: ''"), CSS.contentRule(#text("''"))), + (%css("content: '\"'"), CSS.contentRule(#text(`'"'`))), + (%css(`content: '\"'`), CSS.contentRule(#text("'\"'"))), + (%css("content: ' '"), CSS.contentRule(#text("' '"))), + (%css("content: 'single'"), CSS.contentRule(#text("'single'"))), + (%css(`font-family: "Lola"`), CSS.fontFamily("Lola")), + (%css(`font-family: "Lola del rio"`), CSS.fontFamily("Lola del rio")), } describe("content to rule", () => { diff --git a/e2e/rescript-v9-JSX3/src/cx_support_test.res b/e2e/rescript-v9-JSX3/src/cx_support_test.res index d1ec5c1e..67fd8dcf 100644 --- a/e2e/rescript-v9-JSX3/src/cx_support_test.res +++ b/e2e/rescript-v9-JSX3/src/cx_support_test.res @@ -1,16 +1,16 @@ open Vitest let testData = list{ - (%cx("opacity: 0.9"), CssJs.style([CssJs.opacity(0.9)])), + (%cx("opacity: 0.9"), CSS.style([CSS.opacity(0.9)])), ( %cx("@media (min-width: 30em) { color: brown; }"), - CssJs.style([CssJs.media("(min-width: 30em)", [CssJs.color(CssJs.brown)])]), + CSS.style([CSS.media("(min-width: 30em)", [CSS.color(CSS.brown)])]), ), - (%cx("text-transform: initial"), CssJs.style([CssJs.textTransform(#initial)])), - (%cx("text-transform: unset"), CssJs.style([CssJs.textTransform(#unset)])), - (%cx("text-transform: inherit"), CssJs.style([CssJs.textTransform(#inherit_)])), - (%cx("text-transform: revert"), CssJs.style([CssJs.textTransform(#revert)])), - (%cx("text-transform: revert-layer"), CssJs.style([CssJs.textTransform(#revertLayer)])), + (%cx("text-transform: initial"), CSS.style([CSS.textTransform(#initial)])), + (%cx("text-transform: unset"), CSS.style([CSS.textTransform(#unset)])), + (%cx("text-transform: inherit"), CSS.style([CSS.textTransform(#inherit_)])), + (%cx("text-transform: revert"), CSS.style([CSS.textTransform(#revert)])), + (%cx("text-transform: revert-layer"), CSS.style([CSS.textTransform(#revertLayer)])), } describe("cx", () => { diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re index c7d98be7..005c0a08 100644 --- a/packages/css-property-parser/lib/Parser.re +++ b/packages/css-property-parser/lib/Parser.re @@ -1026,7 +1026,9 @@ and property_contain = [%value.rec and property_content = [%value.rec "'normal' | 'none' | [ | ] [ '/' ]?" ] -and property_content_visibility = [%value.rec "'visible' | 'hidden' | 'collapse'"] +and property_content_visibility = [%value.rec + "'visible' | 'hidden' | 'collapse'" +] and property_counter_increment = [%value.rec "[ [ ]? ]+ | 'none'" ] @@ -1613,7 +1615,9 @@ and property_stroke_opacity = [%value.rec ""] and property_stroke_width = [%value.rec ""] and property_tab_size = [%value.rec " | "] and property_table_layout = [%value.rec "'auto' | 'fixed'"] -and property_text_autospace = [%value.rec "'none' | 'ideograph-alpha' | 'ideograph-numeric' | 'ideograph-parenthesis' | 'ideograph-space'"] +and property_text_autospace = [%value.rec + "'none' | 'ideograph-alpha' | 'ideograph-numeric' | 'ideograph-parenthesis' | 'ideograph-space'" +] and property_text_blink = [%value.rec "'none' | 'blink' | 'blink-anywhere'"] and property_text_align = [%value.rec "'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent' | 'justify-all'" @@ -1632,7 +1636,9 @@ and property_text_decoration = [%value.rec "[ <'text-decoration-line'>] [<'text-decoration-style'>]? [<'text-decoration-color'>]?" ] and property_text_justify_trim = [%value.rec "'none' | 'all' | 'auto'"] -and property_text_kashida = [%value.rec "'none' | 'horizontal' | 'vertical' | 'both'"] +and property_text_kashida = [%value.rec + "'none' | 'horizontal' | 'vertical' | 'both'" +] and property_text_kashida_space = [%value.rec "'normal' | 'pre' | 'post'"] and property_text_decoration_color = [%value.rec ""] /* Spec doesn't contain spelling-error and grammar-error: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line but this list used to have them | 'spelling-error' | 'grammar-error'. Leaving this comment here for reference */ @@ -1644,10 +1650,14 @@ and property_text_decoration_line = [%value.rec and property_text_decoration_skip = [%value.rec "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'" ] -and property_text_decoration_skip_self = [%value.rec "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'"] +and property_text_decoration_skip_self = [%value.rec + "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'" +] and property_text_decoration_skip_ink = [%value.rec "'auto' | 'all' | 'none'"] and property_text_decoration_skip_box = [%value.rec "'none' | 'all'"] -and property_text_decoration_skip_spaces = [%value.rec "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'"] +and property_text_decoration_skip_spaces = [%value.rec + "'none' | 'objects' || [ 'spaces' | 'leading-spaces' || 'trailing-spaces' ] || 'edges' || 'box-decoration'" +] and property_text_decoration_skip_inset = [%value.rec "'none' | 'auto'"] and property_text_decoration_style = [%value.rec diff --git a/packages/ppx/src/Css_to_runtime.re b/packages/ppx/src/Css_to_runtime.re index 1cfb3cbd..2025f5bc 100644 --- a/packages/ppx/src/Css_to_runtime.re +++ b/packages/ppx/src/Css_to_runtime.re @@ -5,9 +5,9 @@ module Builder = Ppxlib.Ast_builder.Default; exception Empty_buffer(string); -module CssJs = { +module CSS = { let ident = (~loc, name) => - {txt: Ldot(Lident("CssJs"), name), loc} |> Builder.pexp_ident(~loc); + {txt: Ldot(Lident("CSS"), name), loc} |> Builder.pexp_ident(~loc); let selector = (~loc) => ident(~loc, "selector"); let media = (~loc) => ident(~loc, "media"); let global = (~loc) => ident(~loc, "global"); @@ -146,7 +146,7 @@ and render_media_query = (~loc, at_rule: at_rule) => { Helper.Exp.apply( ~loc=at_rule.loc, - CssJs.media(~loc=at_rule.loc), + CSS.media(~loc=at_rule.loc), [(Nolabel, query), (Nolabel, rules)], ); }; @@ -185,7 +185,7 @@ and render_container_query = (~loc, at_rule: at_rule) => { Helper.Exp.apply( ~loc=at_rule.loc, - CssJs.selector(~loc=at_rule.loc), + CSS.selector(~loc=at_rule.loc), [(Nolabel, query), (Nolabel, rules)], ); }; @@ -415,21 +415,21 @@ and render_style_rule = (~loc, rule: style_rule) => { Helper.Exp.apply( ~loc=selector_location, - CssJs.selector(~loc=selector_location), + CSS.selector(~loc=selector_location), [(Nolabel, selector_name), (Nolabel, selector_expr)], ); }; let addLabel = (~loc, label, emotionExprs) => [ Helper.Exp.apply( - CssJs.label(~loc), + CSS.label(~loc), [(Nolabel, Helper.Exp.constant(Pconst_string(label, loc, None)))], ), ...emotionExprs, ]; let render_style_call = (~loc, declaration_list) => { - Helper.Exp.apply(~loc, CssJs.style(~loc), [(Nolabel, declaration_list)]); + Helper.Exp.apply(~loc, CSS.style(~loc), [(Nolabel, declaration_list)]); }; let render_keyframes = (~loc, declarations: rule_list) => { @@ -502,7 +502,7 @@ let render_keyframes = (~loc, declarations: rule_list) => { Builder.eapply( ~loc=declarations_loc, - CssJs.keyframes(~loc=declarations_loc), + CSS.keyframes(~loc=declarations_loc), [keyframes], ); }; @@ -530,7 +530,7 @@ If your intent is to apply the declaration to all elements, use the universal se let expr = Helper.Exp.apply( ~loc=stylesheet_loc, - CssJs.global(~loc=stylesheet_loc), + CSS.global(~loc=stylesheet_loc), [(Nolabel, styles)], ); [%expr ignore([%e expr])]; diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re index 44a7e98a..cebd2b59 100644 --- a/packages/ppx/src/Property_to_runtime.re +++ b/packages/ppx/src/Property_to_runtime.re @@ -26,13 +26,9 @@ type transform('ast, 'value) = { (~loc: Location.t, string) => result(list(Parsetree.expression), string), }; -let add_CssJs_rule_constraint = (~loc, expr) => { +let add_CSS_rule_constraint = (~loc, expr) => { let typ = - Builder.ptyp_constr( - ~loc, - {txt: Ldot(Lident("CssJs"), "rule"), loc}, - [], - ); + Builder.ptyp_constr(~loc, {txt: Ldot(Lident("CSS"), "rule"), loc}, []); Builder.pexp_constraint(~loc, expr, typ); }; @@ -83,11 +79,11 @@ let transform_with_variable = (parser, mapper, value_to_expr) => { (~loc, expression) => { switch (expression) { // Since we are treating with expressions here, we don't have any other way to detect if it's interpolation or not. We want to add type constraints on interpolation only. - | {pexp_desc: Pexp_ident({txt: Ldot(Lident("CssJs"), _), _}), _} as exp => + | {pexp_desc: Pexp_ident({txt: Ldot(Lident("CSS"), _), _}), _} as exp => value_to_expr(~loc, exp) | {pexp_desc: Pexp_ident(_), pexp_loc: _, _} as exp => value_to_expr(~loc, exp) - |> List.map(add_CssJs_rule_constraint(~loc)) + |> List.map(add_CSS_rule_constraint(~loc)) | exp => value_to_expr(~loc, exp) } }, @@ -98,7 +94,7 @@ let transform_with_variable = (parser, mapper, value_to_expr) => { /* Monomoprhipc properties are the ones that can only have one representation of the value (and it's one argument also) which it's also possible to interpolate on them. - For example: Property_parser.property_font_size => CssJs.fontSize + For example: Property_parser.property_font_size => CSS.fontSize */ let monomorphic = (parser, property_renderer, value_renderer) => transform_with_variable(parser, value_renderer, (~loc, value) => @@ -177,7 +173,7 @@ let render_css_global_values = (~loc, name, value) => { Ok([ [%expr - CssJs.unsafe( + CSS.unsafe( [%e name |> to_camel_case |> render_string(~loc)], [%e value], ) @@ -554,56 +550,56 @@ let variants = (parser, identifier) => let width = monomorphic( Property_parser.property_width, - (~loc) => [%expr CssJs.width], + (~loc) => [%expr CSS.width], render_size, ); let height = monomorphic( Property_parser.property_height, - (~loc) => [%expr CssJs.height], + (~loc) => [%expr CSS.height], render_size, ); let min_width = monomorphic( Property_parser.property_min_width, - (~loc) => [%expr CssJs.minWidth], + (~loc) => [%expr CSS.minWidth], render_min_size, ); let min_height = monomorphic( Property_parser.property_min_height, - (~loc) => [%expr CssJs.minHeight], + (~loc) => [%expr CSS.minHeight], render_min_size, ); let max_width = monomorphic( Property_parser.property_max_width, - (~loc) => [%expr CssJs.maxWidth], + (~loc) => [%expr CSS.maxWidth], render_max_width, ); let max_height = monomorphic( Property_parser.property_max_height, - (~loc) => [%expr CssJs.maxHeight], + (~loc) => [%expr CSS.maxHeight], render_size, ); let box_sizing = monomorphic( Property_parser.property_box_sizing, - (~loc) => [%expr CssJs.boxSizing], + (~loc) => [%expr CSS.boxSizing], variant_to_expression, ); let column_width = monomorphic( Property_parser.property_column_width, - (~loc) => [%expr CssJs.columnWidth], + (~loc) => [%expr CSS.columnWidth], (~loc, value: Types.property_column_width) => switch (value) { | `Auto => variant_to_expression(~loc, `Auto) @@ -627,28 +623,28 @@ let render_padding = (~loc) => let margin_top = monomorphic( Property_parser.property_margin_top, - (~loc) => [%expr CssJs.marginTop], + (~loc) => [%expr CSS.marginTop], render_margin, ); let margin_right = monomorphic( Property_parser.property_margin_right, - (~loc) => [%expr CssJs.marginRight], + (~loc) => [%expr CSS.marginRight], render_margin, ); let margin_bottom = monomorphic( Property_parser.property_margin_bottom, - (~loc) => [%expr CssJs.marginBottom], + (~loc) => [%expr CSS.marginBottom], render_margin, ); let margin_left = monomorphic( Property_parser.property_margin_left, - (~loc) => [%expr CssJs.marginLeft], + (~loc) => [%expr CSS.marginLeft], render_margin, ); @@ -663,14 +659,14 @@ let margin = | `Interpolation(name) => render_variable(~loc, name), (~loc) => fun - | [all] => [[%expr CssJs.margin([%e all])]] - | [v, h] => [[%expr CssJs.margin2(~v=[%e v], ~h=[%e h])]] + | [all] => [[%expr CSS.margin([%e all])]] + | [v, h] => [[%expr CSS.margin2(~v=[%e v], ~h=[%e h])]] | [t, h, b] => [ - [%expr CssJs.margin3(~top=[%e t], ~h=[%e h], ~bottom=[%e b])], + [%expr CSS.margin3(~top=[%e t], ~h=[%e h], ~bottom=[%e b])], ] | [t, r, b, l] => [ [%expr - CssJs.margin4( + CSS.margin4( ~top=[%e t], ~right=[%e r], ~bottom=[%e b], @@ -685,28 +681,28 @@ let margin = let padding_top = monomorphic( Property_parser.property_padding_top, - (~loc) => [%expr CssJs.paddingTop], + (~loc) => [%expr CSS.paddingTop], render_padding, ); let padding_right = monomorphic( Property_parser.property_padding_right, - (~loc) => [%expr CssJs.paddingRight], + (~loc) => [%expr CSS.paddingRight], render_padding, ); let padding_bottom = monomorphic( Property_parser.property_padding_bottom, - (~loc) => [%expr CssJs.paddingBottom], + (~loc) => [%expr CSS.paddingBottom], render_padding, ); let padding_left = monomorphic( Property_parser.property_padding_left, - (~loc) => [%expr CssJs.paddingLeft], + (~loc) => [%expr CSS.paddingLeft], render_padding, ); @@ -720,14 +716,14 @@ let padding = | `Interpolation(name) => render_variable(~loc, name), (~loc) => fun - | [all] => [[%expr CssJs.padding([%e all])]] - | [v, h] => [[%expr CssJs.padding2(~v=[%e v], ~h=[%e h])]] + | [all] => [[%expr CSS.padding([%e all])]] + | [v, h] => [[%expr CSS.padding2(~v=[%e v], ~h=[%e h])]] | [t, h, b] => [ - [%expr CssJs.padding3(~top=[%e t], ~h=[%e h], ~bottom=[%e b])], + [%expr CSS.padding3(~top=[%e t], ~h=[%e h], ~bottom=[%e b])], ] | [t, r, b, l] => [ [%expr - CssJs.padding4( + CSS.padding4( ~top=[%e t], ~right=[%e r], ~bottom=[%e b], @@ -742,154 +738,154 @@ let padding = let render_named_color = (~loc) => fun | `Transparent => variant_to_expression(~loc, `Transparent) - | `Aliceblue => [%expr CssJs.aliceblue] - | `Antiquewhite => [%expr CssJs.antiquewhite] - | `Aqua => [%expr CssJs.aqua] - | `Aquamarine => [%expr CssJs.aquamarine] - | `Azure => [%expr CssJs.azure] - | `Beige => [%expr CssJs.beige] - | `Bisque => [%expr CssJs.bisque] - | `Black => [%expr CssJs.black] - | `Blanchedalmond => [%expr CssJs.blanchedalmond] - | `Blue => [%expr CssJs.blue] - | `Blueviolet => [%expr CssJs.blueviolet] - | `Brown => [%expr CssJs.brown] - | `Burlywood => [%expr CssJs.burlywood] - | `Cadetblue => [%expr CssJs.cadetblue] - | `Chartreuse => [%expr CssJs.chartreuse] - | `Chocolate => [%expr CssJs.chocolate] - | `Coral => [%expr CssJs.coral] - | `Cornflowerblue => [%expr CssJs.cornflowerblue] - | `Cornsilk => [%expr CssJs.cornsilk] - | `Crimson => [%expr CssJs.crimson] - | `Cyan => [%expr CssJs.cyan] - | `Darkblue => [%expr CssJs.darkblue] - | `Darkcyan => [%expr CssJs.darkcyan] - | `Darkgoldenrod => [%expr CssJs.darkgoldenrod] - | `Darkgray => [%expr CssJs.darkgray] - | `Darkgreen => [%expr CssJs.darkgreen] - | `Darkgrey => [%expr CssJs.darkgrey] - | `Darkkhaki => [%expr CssJs.darkkhaki] - | `Darkmagenta => [%expr CssJs.darkmagenta] - | `Darkolivegreen => [%expr CssJs.darkolivegreen] - | `Darkorange => [%expr CssJs.darkorange] - | `Darkorchid => [%expr CssJs.darkorchid] - | `Darkred => [%expr CssJs.darkred] - | `Darksalmon => [%expr CssJs.darksalmon] - | `Darkseagreen => [%expr CssJs.darkseagreen] - | `Darkslateblue => [%expr CssJs.darkslateblue] - | `Darkslategray => [%expr CssJs.darkslategray] - | `Darkslategrey => [%expr CssJs.darkslategrey] - | `Darkturquoise => [%expr CssJs.darkturquoise] - | `Darkviolet => [%expr CssJs.darkviolet] - | `Deeppink => [%expr CssJs.deeppink] - | `Deepskyblue => [%expr CssJs.deepskyblue] - | `Dimgray => [%expr CssJs.dimgray] - | `Dimgrey => [%expr CssJs.dimgrey] - | `Dodgerblue => [%expr CssJs.dodgerblue] - | `Firebrick => [%expr CssJs.firebrick] - | `Floralwhite => [%expr CssJs.floralwhite] - | `Forestgreen => [%expr CssJs.forestgreen] - | `Fuchsia => [%expr CssJs.fuchsia] - | `Gainsboro => [%expr CssJs.gainsboro] - | `Ghostwhite => [%expr CssJs.ghostwhite] - | `Gold => [%expr CssJs.gold] - | `Goldenrod => [%expr CssJs.goldenrod] - | `Gray => [%expr CssJs.gray] - | `Green => [%expr CssJs.green] - | `Greenyellow => [%expr CssJs.greenyellow] - | `Grey => [%expr CssJs.grey] - | `Honeydew => [%expr CssJs.honeydew] - | `Hotpink => [%expr CssJs.hotpink] - | `Indianred => [%expr CssJs.indianred] - | `Indigo => [%expr CssJs.indigo] - | `Ivory => [%expr CssJs.ivory] - | `Khaki => [%expr CssJs.khaki] - | `Lavender => [%expr CssJs.lavender] - | `Lavenderblush => [%expr CssJs.lavenderblush] - | `Lawngreen => [%expr CssJs.lawngreen] - | `Lemonchiffon => [%expr CssJs.lemonchiffon] - | `Lightblue => [%expr CssJs.lightblue] - | `Lightcoral => [%expr CssJs.lightcoral] - | `Lightcyan => [%expr CssJs.lightcyan] - | `Lightgoldenrodyellow => [%expr CssJs.lightgoldenrodyellow] - | `Lightgray => [%expr CssJs.lightgray] - | `Lightgreen => [%expr CssJs.lightgreen] - | `Lightgrey => [%expr CssJs.lightgrey] - | `Lightpink => [%expr CssJs.lightpink] - | `Lightsalmon => [%expr CssJs.lightsalmon] - | `Lightseagreen => [%expr CssJs.lightseagreen] - | `Lightskyblue => [%expr CssJs.lightskyblue] - | `Lightslategray => [%expr CssJs.lightslategray] - | `Lightslategrey => [%expr CssJs.lightslategrey] - | `Lightsteelblue => [%expr CssJs.lightsteelblue] - | `Lightyellow => [%expr CssJs.lightyellow] - | `Lime => [%expr CssJs.lime] - | `Limegreen => [%expr CssJs.limegreen] - | `Linen => [%expr CssJs.linen] - | `Magenta => [%expr CssJs.magenta] - | `Maroon => [%expr CssJs.maroon] - | `Mediumaquamarine => [%expr CssJs.mediumaquamarine] - | `Mediumblue => [%expr CssJs.mediumblue] - | `Mediumorchid => [%expr CssJs.mediumorchid] - | `Mediumpurple => [%expr CssJs.mediumpurple] - | `Mediumseagreen => [%expr CssJs.mediumseagreen] - | `Mediumslateblue => [%expr CssJs.mediumslateblue] - | `Mediumspringgreen => [%expr CssJs.mediumspringgreen] - | `Mediumturquoise => [%expr CssJs.mediumturquoise] - | `Mediumvioletred => [%expr CssJs.mediumvioletred] - | `Midnightblue => [%expr CssJs.midnightblue] - | `Mintcream => [%expr CssJs.mintcream] - | `Mistyrose => [%expr CssJs.mistyrose] - | `Moccasin => [%expr CssJs.moccasin] - | `Navajowhite => [%expr CssJs.navajowhite] - | `Navy => [%expr CssJs.navy] - | `Oldlace => [%expr CssJs.oldlace] - | `Olive => [%expr CssJs.olive] - | `Olivedrab => [%expr CssJs.olivedrab] - | `Orange => [%expr CssJs.orange] - | `Orangered => [%expr CssJs.orangered] - | `Orchid => [%expr CssJs.orchid] - | `Palegoldenrod => [%expr CssJs.palegoldenrod] - | `Palegreen => [%expr CssJs.palegreen] - | `Paleturquoise => [%expr CssJs.paleturquoise] - | `Palevioletred => [%expr CssJs.palevioletred] - | `Papayawhip => [%expr CssJs.papayawhip] - | `Peachpuff => [%expr CssJs.peachpuff] - | `Peru => [%expr CssJs.peru] - | `Pink => [%expr CssJs.pink] - | `Plum => [%expr CssJs.plum] - | `Powderblue => [%expr CssJs.powderblue] - | `Purple => [%expr CssJs.purple] - | `Rebeccapurple => [%expr CssJs.rebeccapurple] - | `Red => [%expr CssJs.red] - | `Rosybrown => [%expr CssJs.rosybrown] - | `Royalblue => [%expr CssJs.royalblue] - | `Saddlebrown => [%expr CssJs.saddlebrown] - | `Salmon => [%expr CssJs.salmon] - | `Sandybrown => [%expr CssJs.sandybrown] - | `Seagreen => [%expr CssJs.seagreen] - | `Seashell => [%expr CssJs.seashell] - | `Sienna => [%expr CssJs.sienna] - | `Silver => [%expr CssJs.silver] - | `Skyblue => [%expr CssJs.skyblue] - | `Slateblue => [%expr CssJs.slateblue] - | `Slategray => [%expr CssJs.slategray] - | `Slategrey => [%expr CssJs.slategrey] - | `Snow => [%expr CssJs.snow] - | `Springgreen => [%expr CssJs.springgreen] - | `Steelblue => [%expr CssJs.steelblue] - | `Tan => [%expr CssJs.tan] - | `Teal => [%expr CssJs.teal] - | `Thistle => [%expr CssJs.thistle] - | `Tomato => [%expr CssJs.tomato] - | `Turquoise => [%expr CssJs.turquoise] - | `Violet => [%expr CssJs.violet] - | `Wheat => [%expr CssJs.wheat] - | `White => [%expr CssJs.white] - | `Whitesmoke => [%expr CssJs.whitesmoke] - | `Yellow => [%expr CssJs.yellow] - | `Yellowgreen => [%expr CssJs.yellowgreen] + | `Aliceblue => [%expr CSS.aliceblue] + | `Antiquewhite => [%expr CSS.antiquewhite] + | `Aqua => [%expr CSS.aqua] + | `Aquamarine => [%expr CSS.aquamarine] + | `Azure => [%expr CSS.azure] + | `Beige => [%expr CSS.beige] + | `Bisque => [%expr CSS.bisque] + | `Black => [%expr CSS.black] + | `Blanchedalmond => [%expr CSS.blanchedalmond] + | `Blue => [%expr CSS.blue] + | `Blueviolet => [%expr CSS.blueviolet] + | `Brown => [%expr CSS.brown] + | `Burlywood => [%expr CSS.burlywood] + | `Cadetblue => [%expr CSS.cadetblue] + | `Chartreuse => [%expr CSS.chartreuse] + | `Chocolate => [%expr CSS.chocolate] + | `Coral => [%expr CSS.coral] + | `Cornflowerblue => [%expr CSS.cornflowerblue] + | `Cornsilk => [%expr CSS.cornsilk] + | `Crimson => [%expr CSS.crimson] + | `Cyan => [%expr CSS.cyan] + | `Darkblue => [%expr CSS.darkblue] + | `Darkcyan => [%expr CSS.darkcyan] + | `Darkgoldenrod => [%expr CSS.darkgoldenrod] + | `Darkgray => [%expr CSS.darkgray] + | `Darkgreen => [%expr CSS.darkgreen] + | `Darkgrey => [%expr CSS.darkgrey] + | `Darkkhaki => [%expr CSS.darkkhaki] + | `Darkmagenta => [%expr CSS.darkmagenta] + | `Darkolivegreen => [%expr CSS.darkolivegreen] + | `Darkorange => [%expr CSS.darkorange] + | `Darkorchid => [%expr CSS.darkorchid] + | `Darkred => [%expr CSS.darkred] + | `Darksalmon => [%expr CSS.darksalmon] + | `Darkseagreen => [%expr CSS.darkseagreen] + | `Darkslateblue => [%expr CSS.darkslateblue] + | `Darkslategray => [%expr CSS.darkslategray] + | `Darkslategrey => [%expr CSS.darkslategrey] + | `Darkturquoise => [%expr CSS.darkturquoise] + | `Darkviolet => [%expr CSS.darkviolet] + | `Deeppink => [%expr CSS.deeppink] + | `Deepskyblue => [%expr CSS.deepskyblue] + | `Dimgray => [%expr CSS.dimgray] + | `Dimgrey => [%expr CSS.dimgrey] + | `Dodgerblue => [%expr CSS.dodgerblue] + | `Firebrick => [%expr CSS.firebrick] + | `Floralwhite => [%expr CSS.floralwhite] + | `Forestgreen => [%expr CSS.forestgreen] + | `Fuchsia => [%expr CSS.fuchsia] + | `Gainsboro => [%expr CSS.gainsboro] + | `Ghostwhite => [%expr CSS.ghostwhite] + | `Gold => [%expr CSS.gold] + | `Goldenrod => [%expr CSS.goldenrod] + | `Gray => [%expr CSS.gray] + | `Green => [%expr CSS.green] + | `Greenyellow => [%expr CSS.greenyellow] + | `Grey => [%expr CSS.grey] + | `Honeydew => [%expr CSS.honeydew] + | `Hotpink => [%expr CSS.hotpink] + | `Indianred => [%expr CSS.indianred] + | `Indigo => [%expr CSS.indigo] + | `Ivory => [%expr CSS.ivory] + | `Khaki => [%expr CSS.khaki] + | `Lavender => [%expr CSS.lavender] + | `Lavenderblush => [%expr CSS.lavenderblush] + | `Lawngreen => [%expr CSS.lawngreen] + | `Lemonchiffon => [%expr CSS.lemonchiffon] + | `Lightblue => [%expr CSS.lightblue] + | `Lightcoral => [%expr CSS.lightcoral] + | `Lightcyan => [%expr CSS.lightcyan] + | `Lightgoldenrodyellow => [%expr CSS.lightgoldenrodyellow] + | `Lightgray => [%expr CSS.lightgray] + | `Lightgreen => [%expr CSS.lightgreen] + | `Lightgrey => [%expr CSS.lightgrey] + | `Lightpink => [%expr CSS.lightpink] + | `Lightsalmon => [%expr CSS.lightsalmon] + | `Lightseagreen => [%expr CSS.lightseagreen] + | `Lightskyblue => [%expr CSS.lightskyblue] + | `Lightslategray => [%expr CSS.lightslategray] + | `Lightslategrey => [%expr CSS.lightslategrey] + | `Lightsteelblue => [%expr CSS.lightsteelblue] + | `Lightyellow => [%expr CSS.lightyellow] + | `Lime => [%expr CSS.lime] + | `Limegreen => [%expr CSS.limegreen] + | `Linen => [%expr CSS.linen] + | `Magenta => [%expr CSS.magenta] + | `Maroon => [%expr CSS.maroon] + | `Mediumaquamarine => [%expr CSS.mediumaquamarine] + | `Mediumblue => [%expr CSS.mediumblue] + | `Mediumorchid => [%expr CSS.mediumorchid] + | `Mediumpurple => [%expr CSS.mediumpurple] + | `Mediumseagreen => [%expr CSS.mediumseagreen] + | `Mediumslateblue => [%expr CSS.mediumslateblue] + | `Mediumspringgreen => [%expr CSS.mediumspringgreen] + | `Mediumturquoise => [%expr CSS.mediumturquoise] + | `Mediumvioletred => [%expr CSS.mediumvioletred] + | `Midnightblue => [%expr CSS.midnightblue] + | `Mintcream => [%expr CSS.mintcream] + | `Mistyrose => [%expr CSS.mistyrose] + | `Moccasin => [%expr CSS.moccasin] + | `Navajowhite => [%expr CSS.navajowhite] + | `Navy => [%expr CSS.navy] + | `Oldlace => [%expr CSS.oldlace] + | `Olive => [%expr CSS.olive] + | `Olivedrab => [%expr CSS.olivedrab] + | `Orange => [%expr CSS.orange] + | `Orangered => [%expr CSS.orangered] + | `Orchid => [%expr CSS.orchid] + | `Palegoldenrod => [%expr CSS.palegoldenrod] + | `Palegreen => [%expr CSS.palegreen] + | `Paleturquoise => [%expr CSS.paleturquoise] + | `Palevioletred => [%expr CSS.palevioletred] + | `Papayawhip => [%expr CSS.papayawhip] + | `Peachpuff => [%expr CSS.peachpuff] + | `Peru => [%expr CSS.peru] + | `Pink => [%expr CSS.pink] + | `Plum => [%expr CSS.plum] + | `Powderblue => [%expr CSS.powderblue] + | `Purple => [%expr CSS.purple] + | `Rebeccapurple => [%expr CSS.rebeccapurple] + | `Red => [%expr CSS.red] + | `Rosybrown => [%expr CSS.rosybrown] + | `Royalblue => [%expr CSS.royalblue] + | `Saddlebrown => [%expr CSS.saddlebrown] + | `Salmon => [%expr CSS.salmon] + | `Sandybrown => [%expr CSS.sandybrown] + | `Seagreen => [%expr CSS.seagreen] + | `Seashell => [%expr CSS.seashell] + | `Sienna => [%expr CSS.sienna] + | `Silver => [%expr CSS.silver] + | `Skyblue => [%expr CSS.skyblue] + | `Slateblue => [%expr CSS.slateblue] + | `Slategray => [%expr CSS.slategray] + | `Slategrey => [%expr CSS.slategrey] + | `Snow => [%expr CSS.snow] + | `Springgreen => [%expr CSS.springgreen] + | `Steelblue => [%expr CSS.steelblue] + | `Tan => [%expr CSS.tan] + | `Teal => [%expr CSS.teal] + | `Thistle => [%expr CSS.thistle] + | `Tomato => [%expr CSS.tomato] + | `Turquoise => [%expr CSS.turquoise] + | `Violet => [%expr CSS.violet] + | `Wheat => [%expr CSS.wheat] + | `White => [%expr CSS.white] + | `Whitesmoke => [%expr CSS.whitesmoke] + | `Yellow => [%expr CSS.yellow] + | `Yellowgreen => [%expr CSS.yellowgreen] | _ => raise(Unsupported_feature); let render_color_alpha = (~loc, color_alpha) => @@ -1165,14 +1161,14 @@ and render_function_color_mix = (~loc, value: Types.function_color_mix) => { let color = monomorphic( Property_parser.property_color, - (~loc) => [%expr CssJs.color], + (~loc) => [%expr CSS.color], render_color, ); let opacity = monomorphic( Property_parser.property_opacity, - (~loc) => [%expr CssJs.opacity], + (~loc) => [%expr CSS.opacity], (~loc) => fun | `Number(number) => render_float(~loc, number) @@ -1234,7 +1230,7 @@ let render_position = (~loc, position: Types.position) => { let object_fit = variants(Property_parser.property_object_fit, (~loc) => - [%expr CssJs.objectFit] + [%expr CSS.objectFit] ); let object_position = @@ -1242,14 +1238,14 @@ let object_position = Property_parser.property_object_position, (~loc, position: Types.position) => { let (x, y) = render_position(~loc, position); - [[%expr CssJs.objectPosition2([%e x], [%e y])]]; + [[%expr CSS.objectPosition2([%e x], [%e y])]]; }, ); let pointer_events = monomorphic( Property_parser.property_pointer_events, - (~loc) => [%expr CssJs.pointerEvents], + (~loc) => [%expr CSS.pointerEvents], (~loc, value: Types.property_pointer_events) => { switch (value) { | `Auto => [%expr `auto] @@ -1275,7 +1271,7 @@ let image_orientation = let image_rendering = variants(Property_parser.property_image_rendering, (~loc) => - [%expr CssJs.imageRendering] + [%expr CSS.imageRendering] ); let render_color_interp = (~loc) => @@ -1331,13 +1327,13 @@ let render_box_shadow = (~loc, shadow) => { Option.map(value => (label, value), value) ); - Builder.pexp_apply(~loc, [%expr CssJs.Shadow.box], args); + Builder.pexp_apply(~loc, [%expr CSS.Shadow.box], args); }; let background_color = monomorphic( Property_parser.property_background_color, - (~loc) => [%expr CssJs.backgroundColor], + (~loc) => [%expr CSS.backgroundColor], render_color, ); @@ -1425,19 +1421,19 @@ let render_function_linear_gradient = [%expr `linearGradient(( None, - [%e render_color_stop_list(~loc, stops)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, stops)]: CSS.Types.Gradient.color_stop_list, ))] | (Some(`Static_0(angle, ())), stops) => [%expr `linearGradient(( Some([%e render_extended_angle(~loc, angle)]), - [%e render_color_stop_list(~loc, stops)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, stops)]: CSS.Types.Gradient.color_stop_list, ))] | (Some(`Static_1((), side_or_corner, ())), stops) => [%expr `linearGradient(( Some([%e render_side_or_corner(~loc, side_or_corner)]), - [%e render_color_stop_list(~loc, stops)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, stops)]: CSS.Types.Gradient.color_stop_list, ))] }; }; @@ -1449,13 +1445,13 @@ let render_function_repeating_linear_gradient = [%expr `repeatingLinearGradient(( Some([%e render_extended_angle(~loc, angle)]), - [%e render_color_stop_list(~loc, stops)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, stops)]: CSS.Types.Gradient.color_stop_list, ))] | (None, (), stops) => [%expr `repeatingLinearGradient(( None, - [%e render_color_stop_list(~loc, stops)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, stops)]: CSS.Types.Gradient.color_stop_list, ))] | (Some(_), (), _stops) => raise(Unsupported_feature) }; @@ -1490,7 +1486,7 @@ let render_function_radial_gradient = [%e shape], None, None, - [%e render_color_stop_list(~loc, color_stop_list)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, color_stop_list)]: CSS.Types.Gradient.color_stop_list, ))]; | (shape, Some(radial_size), None, None | Some (), color_stop_list) => let shape = render_eding_shape(~loc, shape); @@ -1500,7 +1496,7 @@ let render_function_radial_gradient = [%e shape], Some([%e size]), None, - [%e render_color_stop_list(~loc, color_stop_list)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, color_stop_list)]: CSS.Types.Gradient.color_stop_list, ))]; | (shape, None, Some(((), position)), None | Some (), color_stop_list) => let shape = render_eding_shape(~loc, shape); @@ -1510,7 +1506,7 @@ let render_function_radial_gradient = [%e shape], None, Some(([%e positionX], [%e positionY])), - [%e render_color_stop_list(~loc, color_stop_list)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, color_stop_list)]: CSS.Types.Gradient.color_stop_list, ))]; | ( shape, @@ -1527,7 +1523,7 @@ let render_function_radial_gradient = [%e shape], Some([%e size]), Some(([%e positionX], [%e positionY])), - [%e render_color_stop_list(~loc, color_stop_list)]: CssJs.Types.Gradient.color_stop_list, + [%e render_color_stop_list(~loc, color_stop_list)]: CSS.Types.Gradient.color_stop_list, ))]; }; }; @@ -1618,16 +1614,16 @@ let background_image = polymorphic(Property_parser.property_background_image, (~loc) => fun | [] => failwith("expected at least one value") - | [i] => [[%expr CssJs.backgroundImage([%e render_bg_image(~loc, i)])]] + | [i] => [[%expr CSS.backgroundImage([%e render_bg_image(~loc, i)])]] | more => [ - [%expr CssJs.backgroundImages([%e render_bg_images(~loc, more)])], + [%expr CSS.backgroundImages([%e render_bg_images(~loc, more)])], ] ); let background_repeat = monomorphic( Property_parser.property_background_repeat, - (~loc) => [%expr CssJs.backgroundRepeat], + (~loc) => [%expr CSS.backgroundRepeat], (~loc) => fun | [] => failwith("expected at least one value") @@ -1640,7 +1636,7 @@ let background_repeat = let background_attachment = monomorphic( Property_parser.property_background_attachment, - (~loc) => [%expr CssJs.backgroundAttachment], + (~loc) => [%expr CSS.backgroundAttachment], (~loc) => fun | [] => failwith("expected at least one argument") @@ -1668,12 +1664,12 @@ let render_background_position = (~loc, position: Types.bg_position) => { | `Extended_length(_) as position | `Extended_percentage(_) as position => [%expr - CssJs.backgroundPosition( + CSS.backgroundPosition( [%e render_background_position_one(~loc, position)], )] | `Static(x, y) => [%expr - CssJs.backgroundPosition2( + CSS.backgroundPosition2( [%e render_background_position_one(~loc, x)], [%e render_background_position_one(~loc, y)], )] @@ -1698,7 +1694,7 @@ let background_position_y = let background_clip = monomorphic( Property_parser.property_background_clip, - (~loc) => [%expr CssJs.backgroundClip], + (~loc) => [%expr CSS.backgroundClip], (~loc) => fun | [] => failwith("expected at least one argument") @@ -1710,7 +1706,7 @@ let background_clip = let background_origin = monomorphic( Property_parser.property_background_origin, - (~loc) => [%expr CssJs.backgroundOrigin], + (~loc) => [%expr CSS.backgroundOrigin], (~loc) => fun | [] => failwith("expected at least one argument") @@ -1721,7 +1717,7 @@ let background_origin = let background_size = monomorphic( Property_parser.property_background_size, - (~loc) => [%expr CssJs.backgroundSize], + (~loc) => [%expr CSS.backgroundSize], (~loc) => fun | [] => failwith("expected at least one argument") @@ -1738,29 +1734,25 @@ let render_background = (~loc, background: Types.property_background) => { let render_layers = (value: Types.bg_layer) => { let (image, position, repeat_style, attachment, clip, origin) = value; [ - render_layer( - image, - [%expr CssJs.backgroundImage], - render_bg_image(~loc), - ), + render_layer(image, [%expr CSS.backgroundImage], render_bg_image(~loc)), render_layer( repeat_style, - [%expr CssJs.backgroundRepeat], + [%expr CSS.backgroundRepeat], render_repeat_style(~loc), ), render_layer( attachment, - [%expr CssJs.backgroundRepeat], + [%expr CSS.backgroundRepeat], render_attachment(~loc), ), render_layer( clip, - [%expr CssJs.backgroundClip], + [%expr CSS.backgroundClip], variant_to_expression(~loc), ), render_layer( origin, - [%expr CssJs.backgroundOrigin], + [%expr CSS.backgroundOrigin], variant_to_expression(~loc), ), ] @@ -1768,7 +1760,7 @@ let render_background = (~loc, background: Types.property_background) => { switch (position) { | Some((pos, Some(((), size)))) => [ [render_background_position(~loc, pos)], - [[%expr CssJs.backgroundSize([%e render_bg_size(~loc, size)])]], + [[%expr CSS.backgroundSize([%e render_bg_size(~loc, size)])]], ] | Some((pos, None)) => [[render_background_position(~loc, pos)]] | None => [] @@ -1779,30 +1771,30 @@ let render_background = (~loc, background: Types.property_background) => { let render_final_layer = (value: Types.final_bg_layer) => { let (color, image, position, repeat_style, attachment, clip, origin) = value; [ - render_layer(color, [%expr CssJs.backgroundColor], render_color(~loc)), + render_layer(color, [%expr CSS.backgroundColor], render_color(~loc)), render_layer( image, - [%expr CssJs.backgroundImage], + [%expr CSS.backgroundImage], render_bg_image(~loc), ), render_layer( repeat_style, - [%expr CssJs.backgroundRepeat], + [%expr CSS.backgroundRepeat], render_repeat_style(~loc), ), render_layer( attachment, - [%expr CssJs.backgroundRepeat], + [%expr CSS.backgroundRepeat], render_attachment(~loc), ), render_layer( clip, - [%expr CssJs.backgroundClip], + [%expr CSS.backgroundClip], variant_to_expression(~loc), ), render_layer( origin, - [%expr CssJs.backgroundOrigin], + [%expr CSS.backgroundOrigin], variant_to_expression(~loc), ), ] @@ -1810,7 +1802,7 @@ let render_background = (~loc, background: Types.property_background) => { switch (position) { | Some((pos, Some(((), size)))) => [ [render_background_position(~loc, pos)], - [[%expr CssJs.backgroundSize([%e render_bg_size(~loc, size)])]], + [[%expr CSS.backgroundSize([%e render_bg_size(~loc, size)])]], ] | Some((pos, None)) => [[render_background_position(~loc, pos)]] | None => [] @@ -1830,35 +1822,35 @@ let background = let border_top_color = monomorphic( Property_parser.property_border_top_color, - (~loc) => [%expr CssJs.borderTopColor], + (~loc) => [%expr CSS.borderTopColor], render_color, ); let border_right_color = monomorphic( Property_parser.property_border_right_color, - (~loc) => [%expr CssJs.borderRightColor], + (~loc) => [%expr CSS.borderRightColor], render_color, ); let border_bottom_color = monomorphic( Property_parser.property_border_bottom_color, - (~loc) => [%expr CssJs.borderBottomColor], + (~loc) => [%expr CSS.borderBottomColor], render_color, ); let border_left_color = monomorphic( Property_parser.property_border_left_color, - (~loc) => [%expr CssJs.borderLeftColor], + (~loc) => [%expr CSS.borderLeftColor], render_color, ); let border_color = monomorphic( Property_parser.property_border_color, - (~loc) => [%expr CssJs.borderColor], + (~loc) => [%expr CSS.borderColor], (~loc) => fun | [c] => render_color(~loc, c) @@ -1867,28 +1859,28 @@ let border_color = let border_top_style = variants(Property_parser.property_border_top_style, (~loc) => - [%expr CssJs.borderTopStyle] + [%expr CSS.borderTopStyle] ); let border_right_style = variants(Property_parser.property_border_right_style, (~loc) => - [%expr CssJs.borderRightStyle] + [%expr CSS.borderRightStyle] ); let border_bottom_style = variants(Property_parser.property_border_bottom_style, (~loc) => - [%expr CssJs.borderBottomStyle] + [%expr CSS.borderBottomStyle] ); let border_left_style = variants(Property_parser.property_border_left_style, (~loc) => - [%expr CssJs.borderLeftStyle] + [%expr CSS.borderLeftStyle] ); let border_style = monomorphic( Property_parser.property_border_style, - (~loc) => [%expr CssJs.borderStyle], + (~loc) => [%expr CSS.borderStyle], variant_to_expression, ); @@ -1903,35 +1895,35 @@ let render_line_width = (~loc, value: Types.line_width) => let border_top_width = monomorphic( Property_parser.property_border_top_width, - (~loc) => [%expr CssJs.borderTopWidth], + (~loc) => [%expr CSS.borderTopWidth], render_line_width, ); let border_right_width = monomorphic( Property_parser.property_border_right_width, - (~loc) => [%expr CssJs.borderRightWidth], + (~loc) => [%expr CSS.borderRightWidth], render_line_width, ); let border_bottom_width = monomorphic( Property_parser.property_border_bottom_width, - (~loc) => [%expr CssJs.borderBottomWidth], + (~loc) => [%expr CSS.borderBottomWidth], render_line_width, ); let border_left_width = monomorphic( Property_parser.property_border_left_width, - (~loc) => [%expr CssJs.borderLeftWidth], + (~loc) => [%expr CSS.borderLeftWidth], render_line_width, ); let border_width = monomorphic( Property_parser.property_border_width, - (~loc) => [%expr CssJs.borderWidth], + (~loc) => [%expr CSS.borderWidth], (~loc) => fun | [w] => render_line_width(~loc, w) @@ -1957,11 +1949,11 @@ type borderDirection = let direction_to_border = (~loc) => fun - | All => [%expr CssJs.border] - | Left => [%expr CssJs.borderLeft] - | Bottom => [%expr CssJs.borderBottom] - | Right => [%expr CssJs.borderRight] - | Top => [%expr CssJs.borderTop]; + | All => [%expr CSS.border] + | Left => [%expr CSS.borderLeft] + | Bottom => [%expr CSS.borderBottom] + | Right => [%expr CSS.borderRight] + | Top => [%expr CSS.borderTop]; let direction_to_fn_name = (~loc) => fun @@ -1975,7 +1967,7 @@ let render_border = (~loc, ~direction: borderDirection, border) => { switch (border) { | `None => let borderFn = direction_to_fn_name(~loc, direction); - [[%expr CssJs.unsafe([%e borderFn], {js|none|js})]]; + [[%expr CSS.unsafe([%e borderFn], {js|none|js})]]; | `Xor(`Interpolation(name)) => let borderFn = direction_to_border(~loc, direction); [[%expr [%e borderFn]([%e render_variable(~loc, name)])]]; @@ -2005,9 +1997,9 @@ let render_outline_style_interp = (~loc) => let render_outline = (~loc) => fun - | `None => [[%expr CssJs.unsafe({js|outline|js}, {js|none|js})]] + | `None => [[%expr CSS.unsafe({js|outline|js}, {js|none|js})]] | `Property_outline_width(`Interpolation(name)) => [ - [%expr CssJs.outline([%e render_variable(~loc, name)])], + [%expr CSS.outline([%e render_variable(~loc, name)])], ] /* bs-css doesn't support outline: 1px; */ | `Property_outline_width(_) => raise(Unsupported_feature) @@ -2015,7 +2007,7 @@ let render_outline = (~loc) => | `Static_0(_) => raise(Unsupported_feature) | `Static_1(line_width, style, color) => [ [%expr - CssJs.outline( + CSS.outline( [%e render_line_width_interp(~loc, line_width)], [%e render_outline_style_interp(~loc, style)], [%e render_color_interp(~loc, color)], @@ -2028,35 +2020,35 @@ let outline = polymorphic(Property_parser.property_outline, render_outline); let outline_color = monomorphic( Property_parser.property_outline_color, - (~loc) => [%expr CssJs.outlineColor], + (~loc) => [%expr CSS.outlineColor], render_color, ); let outline_offset = monomorphic( Property_parser.property_outline_offset, - (~loc) => [%expr CssJs.outlineOffset], + (~loc) => [%expr CSS.outlineOffset], render_extended_length, ); let outline_style = monomorphic( Property_parser.property_outline_style, - (~loc) => [%expr CssJs.outlineStyle], + (~loc) => [%expr CSS.outlineStyle], render_outline_style_interp, ); let outline_width = monomorphic( Property_parser.property_outline_width, - (~loc) => [%expr CssJs.outlineWidth], + (~loc) => [%expr CSS.outlineWidth], render_line_width_interp, ); let vertical_align = monomorphic( Property_parser.property_vertical_align, - (~loc) => [%expr CssJs.verticalAlign], + (~loc) => [%expr CSS.verticalAlign], (~loc, value) => { switch (value) { | `Baseline => [%expr `baseline] @@ -2112,42 +2104,42 @@ let render_border_radius_value = (~loc) => let border_top_left_radius = monomorphic( Property_parser.property_border_top_left_radius, - (~loc) => [%expr CssJs.borderTopLeftRadius], + (~loc) => [%expr CSS.borderTopLeftRadius], render_border_radius_value, ); let border_top_right_radius = monomorphic( Property_parser.property_border_top_right_radius, - (~loc) => [%expr CssJs.borderTopRightRadius], + (~loc) => [%expr CSS.borderTopRightRadius], render_border_radius_value, ); let border_bottom_right_radius = monomorphic( Property_parser.property_border_bottom_right_radius, - (~loc) => [%expr CssJs.borderBottomRightRadius], + (~loc) => [%expr CSS.borderBottomRightRadius], render_border_radius_value, ); let border_bottom_left_radius = monomorphic( Property_parser.property_border_bottom_left_radius, - (~loc) => [%expr CssJs.borderBottomLeftRadius], + (~loc) => [%expr CSS.borderBottomLeftRadius], render_border_radius_value, ); let border_radius = monomorphic( Property_parser.property_border_radius, - (~loc) => [%expr CssJs.borderRadius], + (~loc) => [%expr CSS.borderRadius], render_length_percentage, ); let border_image_source = monomorphic( Property_parser.property_border_image_source, - (~loc) => [%expr CssJs.borderImageSource], + (~loc) => [%expr CSS.borderImageSource], (~loc, value) => { switch (value) { | `None => [%expr `none] @@ -2178,40 +2170,40 @@ let box_shadow = | `Interpolation(variable) => /* Here we rely on boxShadow*s* which makes the value be an array */ let var = render_variable(~loc, variable); - [[%expr CssJs.boxShadows([%e var])]]; + [[%expr CSS.boxShadows([%e var])]]; | `None => let none = variant_to_expression(~loc, `None); - [[%expr CssJs.boxShadow([%e none])]]; + [[%expr CSS.boxShadow([%e none])]]; | `Shadow(shadows) => let shadows = shadows |> List.map(render_box_shadow(~loc)); let shadows = Builder.pexp_array(~loc, shadows); - [[%expr CssJs.boxShadows([%e shadows])]]; + [[%expr CSS.boxShadows([%e shadows])]]; } ); // css-overflow-3 let overflow_x = variants(Property_parser.property_overflow_x, (~loc) => - [%expr CssJs.overflowX] + [%expr CSS.overflowX] ); let overflow_y = variants(Property_parser.property_overflow_y, (~loc) => - [%expr CssJs.overflowY] + [%expr CSS.overflowY] ); let overflow = polymorphic(Property_parser.property_overflow, (~loc) => fun | `Xor([all]) => [ - [%expr CssJs.overflow([%e variant_to_expression(~loc, all)])], + [%expr CSS.overflow([%e variant_to_expression(~loc, all)])], ] | `Xor([x, y]) => [ - [%expr CssJs.overflowX([%e variant_to_expression(~loc, x)])], - [%expr CssJs.overflowY([%e variant_to_expression(~loc, y)])], + [%expr CSS.overflowX([%e variant_to_expression(~loc, x)])], + [%expr CSS.overflowY([%e variant_to_expression(~loc, y)])], ] | `Interpolation(i) => [ - [%expr CssJs.overflow([%e render_variable(~loc, i)])], + [%expr CSS.overflow([%e render_variable(~loc, i)])], ] | `Xor(_) => raise(Unsupported_feature) | _ => raise(Unsupported_feature) @@ -2222,7 +2214,7 @@ let overflow = let overflow_block = monomorphic( Property_parser.property_overflow_block, - (~loc) => [%expr CssJs.overflowBlock], + (~loc) => [%expr CSS.overflowBlock], (~loc, value) => { switch (value) { | `Interpolation(i) => render_variable(~loc, i) @@ -2238,7 +2230,7 @@ let overflow_block = let overflow_inline = monomorphic( Property_parser.property_overflow_inline, - (~loc) => [%expr CssJs.overflowInline], + (~loc) => [%expr CSS.overflowInline], (~loc, value) => { switch (value) { | `Interpolation(i) => render_variable(~loc, i) @@ -2254,7 +2246,7 @@ let overflow_inline = let text_overflow = monomorphic( Property_parser.property_text_overflow, - (~loc) => [%expr CssJs.textOverflow], + (~loc) => [%expr CSS.textOverflow], (~loc) => fun | [one] => @@ -2274,12 +2266,12 @@ let max_lines = unsupportedProperty(Property_parser.property_max_lines); // css-text-3 let text_transform = variants(Property_parser.property_text_transform, (~loc) => - [%expr CssJs.textTransform] + [%expr CSS.textTransform] ); let white_space = variants(Property_parser.property_white_space, (~loc) => - [%expr CssJs.whiteSpace] + [%expr CSS.whiteSpace] ); let render_tab_size = (~loc, value: Types.property_tab_size) => { @@ -2295,13 +2287,13 @@ let render_tab_size = (~loc, value: Types.property_tab_size) => { let tab_size = monomorphic( Property_parser.property_tab_size, - (~loc) => [%expr CssJs.tabSize], + (~loc) => [%expr CSS.tabSize], render_tab_size, ); let word_break = variants(Property_parser.property_word_break, (~loc) => - [%expr CssJs.wordBreak] + [%expr CSS.wordBreak] ); let render_line_height = (~loc) => @@ -2314,54 +2306,54 @@ let render_line_height = (~loc) => let line_height = monomorphic( Property_parser.property_line_height, - (~loc) => [%expr CssJs.lineHeight], + (~loc) => [%expr CSS.lineHeight], render_line_height, ); let line_height_step = monomorphic( Property_parser.property_line_height_step, - (~loc) => [%expr CssJs.lineHeightStep], + (~loc) => [%expr CSS.lineHeightStep], render_extended_length, ); let hyphens = - variants(Property_parser.property_hyphens, (~loc) => [%expr CssJs.hyphens]); + variants(Property_parser.property_hyphens, (~loc) => [%expr CSS.hyphens]); let overflow_wrap = variants(Property_parser.property_overflow_wrap, (~loc) => - [%expr CssJs.overflowWrap] + [%expr CSS.overflowWrap] ); let word_wrap = variants(Property_parser.property_word_wrap, (~loc) => - [%expr CssJs.wordWrap] + [%expr CSS.wordWrap] ); let text_align = variants(Property_parser.property_text_align, (~loc) => - [%expr CssJs.textAlign] + [%expr CSS.textAlign] ); let text_align_all = variants(Property_parser.property_text_align_all, (~loc) => - [%expr CssJs.textAlignAll] + [%expr CSS.textAlignAll] ); let text_align_last = variants(Property_parser.property_text_align_last, (~loc) => - [%expr CssJs.textAlignLast] + [%expr CSS.textAlignLast] ); let text_justify = variants(Property_parser.property_text_justify, (~loc) => - [%expr CssJs.textJustify] + [%expr CSS.textJustify] ); let word_spacing = monomorphic( Property_parser.property_word_spacing, - (~loc) => [%expr CssJs.wordSpacing], + (~loc) => [%expr CSS.wordSpacing], (~loc) => fun | `Normal => variant_to_expression(~loc, `Normal) @@ -2372,7 +2364,7 @@ let word_spacing = let letter_spacing = monomorphic( Property_parser.property_word_spacing, - (~loc) => [%expr CssJs.letterSpacing], + (~loc) => [%expr CSS.letterSpacing], (~loc) => fun | `Normal => variant_to_expression(~loc, `Normal) @@ -2383,7 +2375,7 @@ let letter_spacing = let text_indent = monomorphic( Property_parser.property_text_indent, - (~loc) => [%expr CssJs.textIndent], + (~loc) => [%expr CSS.textIndent], (~loc) => fun | (`Extended_length(l), None, None) => render_extended_length(~loc, l) @@ -2420,15 +2412,15 @@ let font_family = switch (value) { | `Interpolation(v) => /* We need to add annotation since arrays can be mutable and the type isn't scoped enough */ - let annotation = [%type: array(CssJs.Types.FontFamilyName.t)]; + let annotation = [%type: array(CSS.Types.FontFamilyName.t)]; [ [%expr - CssJs.fontFamilies([%e render_variable(~loc, v)]: [%t annotation]) + CSS.fontFamilies([%e render_variable(~loc, v)]: [%t annotation]) ], ]; | `Font_families(font_families) => [ [%expr - CssJs.fontFamilies( + CSS.fontFamilies( [%e font_families |> List.map(render_font_family(~loc)) @@ -2454,7 +2446,7 @@ let render_font_weight = (~loc) => let font_weight = monomorphic( Property_parser.property_font_weight, - (~loc) => [%expr CssJs.fontWeight], + (~loc) => [%expr CSS.fontWeight], render_font_weight, ); @@ -2471,7 +2463,7 @@ let render_font_style = (~loc) => let font_style = monomorphic( Property_parser.property_font_style, - (~loc) => [%expr CssJs.fontStyle], + (~loc) => [%expr CSS.fontStyle], render_font_style, ); @@ -2505,7 +2497,7 @@ let render_font_size = (~loc, value: Types.property_font_size) => let font_size = monomorphic( Property_parser.property_font_size, - (~loc) => [%expr CssJs.fontSize], + (~loc) => [%expr CSS.fontSize], render_font_size, ); @@ -2516,22 +2508,22 @@ let font = unsupportedProperty(Property_parser.property_font); let font_synthesis_weight = variants(Property_parser.property_font_synthesis_weight, (~loc) => - [%expr CssJs.fontSynthesisWeight] + [%expr CSS.fontSynthesisWeight] ); let font_synthesis_style = variants(Property_parser.property_font_synthesis_style, (~loc) => - [%expr CssJs.fontSynthesisStyle] + [%expr CSS.fontSynthesisStyle] ); let font_synthesis_small_caps = variants(Property_parser.property_font_synthesis_small_caps, (~loc) => - [%expr CssJs.fontSynthesisSmallCaps] + [%expr CSS.fontSynthesisSmallCaps] ); let font_synthesis_position = variants(Property_parser.property_font_synthesis_position, (~loc) => - [%expr CssJs.fontSynthesisPosition] + [%expr CSS.fontSynthesisPosition] ); let font_synthesis = @@ -2539,7 +2531,7 @@ let font_synthesis = let font_kerning = variants(Property_parser.property_font_kerning, (~loc) => - [%expr CssJs.fontKerning] + [%expr CSS.fontKerning] ); let font_variant_ligatures = @@ -2547,12 +2539,12 @@ let font_variant_ligatures = let font_variant_position = variants(Property_parser.property_font_variant_position, (~loc) => - [%expr CssJs.fontVariantPosition] + [%expr CSS.fontVariantPosition] ); let font_variant_caps = variants(Property_parser.property_font_variant_caps, (~loc) => - [%expr CssJs.fontVariantCaps] + [%expr CSS.fontVariantCaps] ); let font_variant_numeric = @@ -2567,9 +2559,9 @@ let font_variant_east_asian = let font_variant = polymorphic(Property_parser.property_font_variant, (~loc) => fun - | `None => [[%expr CssJs.unsafe({|fontVariant|}, {|none|})]] - | `Normal => [[%expr CssJs.fontVariant(`normal)]] - | `Small_caps => [[%expr CssJs.fontVariant(`smallCaps)]] + | `None => [[%expr CSS.unsafe({|fontVariant|}, {|none|})]] + | `Normal => [[%expr CSS.fontVariant(`normal)]] + | `Small_caps => [[%expr CSS.fontVariant(`smallCaps)]] | _ => raise(Unsupported_feature) ); @@ -2578,7 +2570,7 @@ let font_feature_settings = let font_optical_sizing = variants(Property_parser.property_font_optical_sizing, (~loc) => - [%expr CssJs.fontOpticalSizing] + [%expr CSS.fontOpticalSizing] ); let font_variation_settings = @@ -2588,7 +2580,7 @@ let font_palette = unsupportedProperty(Property_parser.property_font_palette); let font_variant_emoji = variants(Property_parser.property_font_variant_emoji, (~loc) => - [%expr CssJs.fontVariantEmoji] + [%expr CSS.fontVariantEmoji] ); // css-text-decor-3 @@ -2608,7 +2600,7 @@ let render_text_decoration_line = let text_decoration_line = monomorphic( Property_parser.property_text_decoration_line, - (~loc) => [%expr CssJs.textDecorationLine], + (~loc) => [%expr CSS.textDecorationLine], render_text_decoration_line, ); @@ -2623,14 +2615,14 @@ let render_text_decoration_style = (~loc) => let text_decoration_style = monomorphic( Property_parser.property_text_decoration_style, - (~loc) => [%expr CssJs.textDecorationStyle], + (~loc) => [%expr CSS.textDecorationStyle], render_text_decoration_style, ); let text_decoration_color = monomorphic( Property_parser.property_text_decoration_color, - (~loc) => [%expr CssJs.textDecorationColor], + (~loc) => [%expr CSS.textDecorationColor], render_color, ); @@ -2644,14 +2636,14 @@ let render_text_decoration_thickness = (~loc) => let text_decoration_thickness = monomorphic( Property_parser.property_text_decoration_thickness, - (~loc) => [%expr CssJs.textDecorationThickness], + (~loc) => [%expr CSS.textDecorationThickness], render_text_decoration_thickness, ); let text_decoration = monomorphic( Property_parser.property_text_decoration, - (~loc) => [%expr CssJs.textDecoration], + (~loc) => [%expr CSS.textDecoration], (~loc, v) => switch (v) { | (line, None, None) => render_text_decoration_line(~loc, line) @@ -2675,12 +2667,12 @@ let text_decoration_skip_self = let text_decoration_skip_box = variants(Property_parser.property_text_decoration_skip_box, (~loc) => - [%expr CssJs.textDecorationSkipBox] + [%expr CSS.textDecorationSkipBox] ); let text_decoration_skip_inset = variants(Property_parser.property_text_decoration_skip_inset, (~loc) => - [%expr CssJs.textDecorationSkipInset] + [%expr CSS.textDecorationSkipInset] ); let text_decoration_skip_spaces = @@ -2688,7 +2680,7 @@ let text_decoration_skip_spaces = let text_decoration_skip_ink = variants(Property_parser.property_text_decoration_skip_ink, (~loc) => - [%expr CssJs.textDecorationSkipInk] + [%expr CSS.textDecorationSkipInk] ); let text_emphasis_style = @@ -2712,26 +2704,24 @@ let text_emphasis_style = switch (value) { | `Or(Some(x), None) => [ - [%expr - CssJs.textEmphasisStyle([%e render_filled_or_open(~loc, x)]) - ], + [%expr CSS.textEmphasisStyle([%e render_filled_or_open(~loc, x)])], ] | `Or(None, Some(y)) => [ - [%expr CssJs.textEmphasisStyle([%e render_shape(~loc, y)])], + [%expr CSS.textEmphasisStyle([%e render_shape(~loc, y)])], ] | `Or(Some(x), Some(y)) => [ [%expr - CssJs.textEmphasisStyles( + CSS.textEmphasisStyles( [%e render_filled_or_open(~loc, x)], [%e render_shape(~loc, y)], ) ], ] | `Or(None, None) - | `None => [[%expr CssJs.textEmphasisStyle(`none)]] + | `None => [[%expr CSS.textEmphasisStyle(`none)]] | `String(str) => [ [%expr - CssJs.textEmphasisStyle(`string([%e render_string(~loc, str)])) + CSS.textEmphasisStyle(`string([%e render_string(~loc, str)])) ], ] }; @@ -2741,7 +2731,7 @@ let text_emphasis_style = let text_emphasis_color = monomorphic( Property_parser.property_text_emphasis_color, - (~loc) => [%expr CssJs.textEmphasisColor], + (~loc) => [%expr CSS.textEmphasisColor], render_color, ); @@ -2767,12 +2757,12 @@ let text_emphasis_position = switch (value) { | (y, None) => [ [%expr - CssJs.textEmphasisPosition([%e render_over_or_under(~loc, y)]) + CSS.textEmphasisPosition([%e render_over_or_under(~loc, y)]) ], ] | (y, Some(position)) => [ [%expr - CssJs.textEmphasisPositions( + CSS.textEmphasisPositions( [%e render_over_or_under(~loc, y)], [%e render_position_left_right(~loc, position)], ) @@ -2811,24 +2801,24 @@ let render_text_shadow = (~loc, shadow) => { Option.map(value => (label, value), value) ); - Builder.pexp_apply(~loc, [%expr CssJs.Shadow.text], args); + Builder.pexp_apply(~loc, [%expr CSS.Shadow.text], args); }; let text_shadow = polymorphic(Property_parser.property_text_shadow, (~loc) => fun | `Interpolation(variable) => [ - [%expr CssJs.textShadows([%e render_variable(~loc, variable)])], + [%expr CSS.textShadows([%e render_variable(~loc, variable)])], ] | `None => [ - [%expr CssJs.textShadow([%e variant_to_expression(~loc, `None)])], + [%expr CSS.textShadow([%e variant_to_expression(~loc, `None)])], ] | `Shadow_t([shadow]) => [ - [%expr CssJs.textShadow([%e render_text_shadow(~loc, shadow)])], + [%expr CSS.textShadow([%e render_text_shadow(~loc, shadow)])], ] | `Shadow_t(shadows) => { let shadows = shadows |> List.map(render_text_shadow(~loc)); - [[%expr CssJs.textShadows([%e Builder.pexp_array(~loc, shadows)])]]; + [[%expr CSS.textShadows([%e Builder.pexp_array(~loc, shadows)])]]; } ); @@ -2843,87 +2833,85 @@ let render_transform = (~loc, value: Types.transform_function) => | `Function_matrix(_) => raise(Unsupported_feature) | `Function_matrix3d(_) => raise(Unsupported_feature) | `Function_rotate(v) => - [%expr CssJs.rotate([%e render_transform_functions(~loc, v)])] + [%expr CSS.rotate([%e render_transform_functions(~loc, v)])] | `Function_rotate3d(x, (), y, (), z, (), a) => [%expr - CssJs.rotate3d( + CSS.rotate3d( [%e render_float(~loc, x)], [%e render_float(~loc, y)], [%e render_float(~loc, z)], [%e render_transform_functions(~loc, a)], )] | `Function_rotateX(v) => - [%expr CssJs.rotateX([%e render_transform_functions(~loc, v)])] + [%expr CSS.rotateX([%e render_transform_functions(~loc, v)])] | `Function_rotateY(v) => - [%expr CssJs.rotateY([%e render_transform_functions(~loc, v)])] + [%expr CSS.rotateY([%e render_transform_functions(~loc, v)])] | `Function_rotateZ(v) => - [%expr CssJs.rotateZ([%e render_transform_functions(~loc, v)])] + [%expr CSS.rotateZ([%e render_transform_functions(~loc, v)])] | `Function_skew(a1, a2) => switch (a2) { | Some(((), v)) => [%expr - CssJs.skew( + CSS.skew( [%e render_transform_functions(~loc, a1)], [%e render_transform_functions(~loc, v)], )] | None => - [%expr CssJs.skew([%e render_transform_functions(~loc, a1)], `deg(0.))] + [%expr CSS.skew([%e render_transform_functions(~loc, a1)], `deg(0.))] } | `Function_skewX(v) => - [%expr CssJs.skewX([%e render_transform_functions(~loc, v)])] + [%expr CSS.skewX([%e render_transform_functions(~loc, v)])] | `Function_skewY(v) => - [%expr CssJs.skewY([%e render_transform_functions(~loc, v)])] + [%expr CSS.skewY([%e render_transform_functions(~loc, v)])] | `Function_translate(x, None) => - [%expr CssJs.translate([%e render_length_percentage(~loc, x)], `zero)] + [%expr CSS.translate([%e render_length_percentage(~loc, x)], `zero)] | `Function_translate(x, Some(((), v))) => [%expr - CssJs.translate( + CSS.translate( [%e render_length_percentage(~loc, x)], [%e render_length_percentage(~loc, v)], )] | `Function_translate3d(x, (), y, (), z) => [%expr - CssJs.translate3d( + CSS.translate3d( [%e render_length_percentage(~loc, x)], [%e render_length_percentage(~loc, y)], [%e render_extended_length(~loc, z)], )] | `Function_translateX(x) => - [%expr CssJs.translateX([%e render_length_percentage(~loc, x)])] + [%expr CSS.translateX([%e render_length_percentage(~loc, x)])] | `Function_translateY(y) => - [%expr CssJs.translateY([%e render_length_percentage(~loc, y)])] + [%expr CSS.translateY([%e render_length_percentage(~loc, y)])] | `Function_translateZ(z) => - [%expr CssJs.translateZ([%e render_extended_length(~loc, z)])] + [%expr CSS.translateZ([%e render_extended_length(~loc, z)])] | `Function_scale(x, None) => - [%expr - CssJs.scale([%e render_float(~loc, x)], [%e render_float(~loc, x)])] + [%expr CSS.scale([%e render_float(~loc, x)], [%e render_float(~loc, x)])] | `Function_scale(x, Some(((), v))) => - [%expr - CssJs.scale([%e render_float(~loc, x)], [%e render_float(~loc, v)])] + [%expr CSS.scale([%e render_float(~loc, x)], [%e render_float(~loc, v)])] | `Function_scale3d(x, (), y, (), z) => [%expr - CssJs.scale3d( + CSS.scale3d( [%e render_float(~loc, x)], [%e render_float(~loc, y)], [%e render_float(~loc, z)], )] - | `Function_scaleX(x) => [%expr CssJs.scaleX([%e render_float(~loc, x)])] - | `Function_scaleY(y) => [%expr CssJs.scaleY([%e render_float(~loc, y)])] - | `Function_scaleZ(z) => [%expr CssJs.scaleZ([%e render_float(~loc, z)])] + | `Function_scaleX(x) => [%expr CSS.scaleX([%e render_float(~loc, x)])] + | `Function_scaleY(y) => [%expr CSS.scaleY([%e render_float(~loc, y)])] + | `Function_scaleZ(z) => [%expr CSS.scaleZ([%e render_float(~loc, z)])] }; // css-transforms-2 let transform = polymorphic(Property_parser.property_transform, (~loc) => fun - | `None => [[%expr CssJs.transform(`none)]] + | `None => [[%expr CSS.transform(`none)]] | `Transform_list([one]) => [ - [%expr CssJs.transform([%e render_transform(~loc, one)])], + [%expr CSS.transform([%e render_transform(~loc, one)])], ] | `Transform_list(list) => { let transforms = List.map(render_transform(~loc), list) |> Builder.pexp_array(~loc); - [[%expr CssJs.transforms([%e transforms])]]; + [[%expr CSS.transforms([%e transforms])]]; } ); @@ -2947,24 +2935,24 @@ let transform_origin = | `Static((y, x), None) => { [ [%expr - CssJs.transformOrigin2( + CSS.transformOrigin2( [%e render_origin(~loc, x)], [%e render_origin(~loc, y)], ) ], ]; } - | `Center => [[%expr CssJs.transformOrigin(`center)]] - | `Left => [[%expr CssJs.transformOrigin(`left)]] - | `Right => [[%expr CssJs.transformOrigin(`right)]] - | `Bottom => [[%expr CssJs.transformOrigin(`bottom)]] - | `Top => [[%expr CssJs.transformOrigin(`top)]] + | `Center => [[%expr CSS.transformOrigin(`center)]] + | `Left => [[%expr CSS.transformOrigin(`left)]] + | `Right => [[%expr CSS.transformOrigin(`right)]] + | `Bottom => [[%expr CSS.transformOrigin(`bottom)]] + | `Top => [[%expr CSS.transformOrigin(`top)]] | `Extended_length(el) => [ - [%expr CssJs.transformOrigin([%e render_extended_length(~loc, el)])], + [%expr CSS.transformOrigin([%e render_extended_length(~loc, el)])], ] | `Extended_percentage(ep) => [ [%expr - CssJs.transformOrigin([%e render_extended_percentage(~loc, ep)]) + CSS.transformOrigin([%e render_extended_percentage(~loc, ep)]) ], ] | `Static(_, Some(_)) => raise(Unsupported_feature) @@ -2972,28 +2960,28 @@ let transform_origin = let transform_box = variants(Property_parser.property_transform_box, (~loc) => - [%expr CssJs.transformBox] + [%expr CSS.transformBox] ); let translate = unsupportedValue(Property_parser.property_translate, (~loc) => - [%expr CssJs.translate] + [%expr CSS.translate] ); let rotate = unsupportedValue(Property_parser.property_rotate, (~loc) => - [%expr CssJs.rotate] + [%expr CSS.rotate] ); let scale = unsupportedValue(Property_parser.property_scale, (~loc) => - [%expr CssJs.scale] + [%expr CSS.scale] ); let transform_style = monomorphic( Property_parser.property_transform_style, - (~loc) => [%expr CssJs.transformStyle], + (~loc) => [%expr CSS.transformStyle], (~loc) => fun | `Flat => variant_to_expression(~loc, `Flat) @@ -3007,13 +2995,13 @@ let perspective_origin = Property_parser.property_perspective_origin, (~loc, position) => { let (x, y) = render_position(~loc, position); - [[%expr CssJs.perspectiveOrigin2([%e x], [%e y])]]; + [[%expr CSS.perspectiveOrigin2([%e x], [%e y])]]; }, ); let backface_visibility = variants(Property_parser.property_backface_visibility, (~loc) => - [%expr CssJs.backfaceVisibility] + [%expr CSS.backfaceVisibility] ); let render_single_transition_property_no_interp = (~loc, value) => { @@ -3035,7 +3023,7 @@ let render_single_transition_property = (~loc, value) => { let transition_property = monomorphic( Property_parser.property_transition_property, - (~loc) => [%expr CssJs.transitionProperty], + (~loc) => [%expr CSS.transitionProperty], (~loc) => fun | `None => render_string(~loc, "none") @@ -3049,7 +3037,7 @@ let transition_property = let transition_duration = monomorphic( Property_parser.property_transition_duration, - (~loc) => [%expr CssJs.transitionDuration], + (~loc) => [%expr CSS.transitionDuration], (~loc) => fun | [] => [%expr `none] @@ -3060,7 +3048,7 @@ let transition_duration = let widows = monomorphic( Property_parser.property_widows, - (~loc) => [%expr CssJs.widows], + (~loc) => [%expr CSS.widows], render_integer, ); @@ -3115,7 +3103,7 @@ let render_timing = (~loc) => let transition_timing_function = monomorphic( Property_parser.property_transition_timing_function, - (~loc) => [%expr CssJs.transitionTimingFunction], + (~loc) => [%expr CSS.transitionTimingFunction], (~loc) => fun | [t] => render_timing(~loc, t) @@ -3125,7 +3113,7 @@ let transition_timing_function = let transition_delay = monomorphic( Property_parser.property_transition_delay, - (~loc) => [%expr CssJs.transitionDelay], + (~loc) => [%expr CSS.transitionDelay], (~loc) => fun | [`Time(t)] => render_time_as_int(~loc, t) @@ -3143,14 +3131,14 @@ let render_single_transition = (~loc) => fun | `Static_0(property, duration) => { [%expr - CssJs.Transition.shorthand( + CSS.Transition.shorthand( ~duration=[%e render_extended_time(~loc, duration)], [%e render_transition_property(~loc, property)], )]; } | `Static_1(property, duration, timingFunction) => { [%expr - CssJs.Transition.shorthand( + CSS.Transition.shorthand( ~duration=[%e render_extended_time(~loc, duration)], ~timingFunction=[%e render_timing(~loc, timingFunction)], [%e render_transition_property(~loc, property)], @@ -3158,7 +3146,7 @@ let render_single_transition = (~loc) => } | `Static_2(property, duration, timingFunction, delay) => { [%expr - CssJs.Transition.shorthand( + CSS.Transition.shorthand( ~duration=[%e render_extended_time(~loc, duration)], ~delay=[%e render_extended_time(~loc, delay)], ~timingFunction=[%e render_timing(~loc, timingFunction)], @@ -3184,7 +3172,7 @@ let render_single_transition_no_interp = }; [%expr - CssJs.Transition.shorthand( + CSS.Transition.shorthand( ~duration=?[%e render_option(~loc, render_extended_time_no_interp, duration) ], @@ -3199,7 +3187,7 @@ let render_single_transition_no_interp = let transition = monomorphic( Property_parser.property_transition, - (~loc) => [%expr CssJs.transitionList], + (~loc) => [%expr CSS.transitionList], (~loc) => fun | `Interpolation(v) => render_variable(~loc, v) @@ -3232,7 +3220,7 @@ let render_animation_name = (~loc) => let animation_name = monomorphic( Property_parser.property_animation_name, - (~loc) => [%expr CssJs.animationName], + (~loc) => [%expr CSS.animationName], (~loc) => fun | [one] => render_animation_name(~loc, one) @@ -3242,7 +3230,7 @@ let animation_name = let animation_duration = monomorphic( Property_parser.property_animation_duration, - (~loc) => [%expr CssJs.animationDuration], + (~loc) => [%expr CSS.animationDuration], (~loc) => fun | [] => [%expr `ms(0)] @@ -3253,7 +3241,7 @@ let animation_duration = let animation_timing_function = monomorphic( Property_parser.property_animation_timing_function, - (~loc) => [%expr CssJs.animationTimingFunction], + (~loc) => [%expr CSS.animationTimingFunction], (~loc) => fun | [t] => render_timing(~loc, t) @@ -3268,7 +3256,7 @@ let render_animation_iteration_count = (~loc) => let animation_iteration_count = monomorphic( Property_parser.property_animation_iteration_count, - (~loc) => [%expr CssJs.animationIterationCount], + (~loc) => [%expr CSS.animationIterationCount], (~loc) => fun | [one] => render_animation_iteration_count(~loc, one) @@ -3285,7 +3273,7 @@ let render_animation_direction = (~loc) => let animation_direction = monomorphic( Property_parser.property_animation_direction, - (~loc) => [%expr CssJs.animationDirection], + (~loc) => [%expr CSS.animationDirection], (~loc) => fun | [one] => render_animation_direction(~loc, one) @@ -3300,7 +3288,7 @@ let render_animation_play_state = (~loc) => let animation_play_state = monomorphic( Property_parser.property_animation_play_state, - (~loc) => [%expr CssJs.animationPlayState], + (~loc) => [%expr CSS.animationPlayState], (~loc) => fun | [one] => render_animation_play_state(~loc, one) @@ -3310,7 +3298,7 @@ let animation_play_state = let animation_delay = monomorphic( Property_parser.property_animation_delay, - (~loc) => [%expr CssJs.animationDelay], + (~loc) => [%expr CSS.animationDelay], (~loc) => fun | [one] => render_extended_time(~loc, one) @@ -3327,7 +3315,7 @@ let render_animation_fill_mode = (~loc) => let animation_fill_mode = monomorphic( Property_parser.property_animation_fill_mode, - (~loc) => [%expr CssJs.animationFillMode], + (~loc) => [%expr CSS.animationFillMode], (~loc) => fun | [one] => render_animation_fill_mode(~loc, one) @@ -3349,7 +3337,7 @@ let render_single_animation = ): Types.single_animation, ) => { [%expr - CssJs.animation( + CSS.animation( ~duration=?[%e render_option(~loc, render_extended_time, duration)], ~delay=?[%e render_option(~loc, render_extended_time, delay)], ~direction=?[%e @@ -3392,7 +3380,7 @@ let render_ratio = (~loc, value: Types.ratio) => { let aspect_ratio = monomorphic( Property_parser.property_aspect_ratio, - (~loc) => [%expr CssJs.aspectRatio], + (~loc) => [%expr CSS.aspectRatio], (~loc, value) => { switch (value) { | `Auto => [%expr `auto] @@ -3404,12 +3392,12 @@ let aspect_ratio = // css-flexbox-1 let flex_direction = variants(Property_parser.property_flex_direction, (~loc) => - [%expr CssJs.flexDirection] + [%expr CSS.flexDirection] ); let flex_wrap = variants(Property_parser.property_flex_wrap, (~loc) => - [%expr CssJs.flexWrap] + [%expr CSS.flexWrap] ); // shorthand - https://drafts.csswg.org/css-flexbox-1/#flex-flow-property @@ -3436,7 +3424,7 @@ let flex_flow = let order = monomorphic( Property_parser.property_order, - (~loc) => [%expr CssJs.order], + (~loc) => [%expr CSS.order], render_integer, ); @@ -3450,14 +3438,14 @@ let render_float_interp = (~loc, value) => { let flex_grow = monomorphic( Property_parser.property_flex_grow, - (~loc) => [%expr CssJs.flexGrow], + (~loc) => [%expr CSS.flexGrow], render_float_interp, ); let flex_shrink = monomorphic( Property_parser.property_flex_shrink, - (~loc) => [%expr CssJs.flexShrink], + (~loc) => [%expr CSS.flexShrink], render_float_interp, ); @@ -3470,24 +3458,24 @@ let render_flex_basis = (~loc) => let flex_basis = monomorphic( Property_parser.property_flex_basis, - (~loc) => [%expr CssJs.flexBasis], + (~loc) => [%expr CSS.flexBasis], render_flex_basis, ); let flex = polymorphic(Property_parser.property_flex, (~loc, value) => switch (value) { - | `None => [[%expr CssJs.flex1(`none)]] + | `None => [[%expr CSS.flex1(`none)]] | `Interpolation(interp) => [ - [%expr CssJs.flex1([%e render_variable(~loc, interp)])], + [%expr CSS.flex1([%e render_variable(~loc, interp)])], ] - | `Or(None, None) => [[%expr CssJs.flex1(`none)]] + | `Or(None, None) => [[%expr CSS.flex1(`none)]] | `Or(Some((grow, None)), None) => [ - [%expr CssJs.flex1(`num([%e render_float_interp(~loc, grow)]))], + [%expr CSS.flex1(`num([%e render_float_interp(~loc, grow)]))], ] | `Or(Some((grow, Some(shrink))), None) => [ [%expr - CssJs.flex2( + CSS.flex2( ~shrink=[%e render_float_interp(~loc, shrink)], [%e render_float_interp(~loc, grow)], ) @@ -3495,7 +3483,7 @@ let flex = ] | `Or(Some((grow, None)), Some(basis)) => [ [%expr - CssJs.flex2( + CSS.flex2( ~basis=[%e render_flex_basis(~loc, basis)], [%e render_float_interp(~loc, grow)], ) @@ -3503,7 +3491,7 @@ let flex = ] | `Or(Some((grow, Some(shrink))), Some(basis)) => [ [%expr - CssJs.flex( + CSS.flex( [%e render_float_interp(~loc, grow)], [%e render_float_interp(~loc, shrink)], [%e render_flex_basis(~loc, basis)], @@ -3511,7 +3499,7 @@ let flex = ], ] | `Or(None, Some(basis)) => [ - [%expr CssJs.flexBasis([%e render_flex_basis(~loc, basis)])], + [%expr CSS.flexBasis([%e render_flex_basis(~loc, basis)])], ] } ); @@ -3564,7 +3552,7 @@ let render_content_distribution = (~loc) => let justify_content = monomorphic( Property_parser.property_justify_content, - (~loc) => [%expr CssJs.justifyContent], + (~loc) => [%expr CSS.justifyContent], (~loc, value) => { switch (value) { | `Normal => [%expr `normal] @@ -3600,7 +3588,7 @@ let render_baseline_position = (~loc, value) => { let justify_items = monomorphic( Property_parser.property_justify_items, - (~loc) => [%expr CssJs.justifyItems], + (~loc) => [%expr CSS.justifyItems], (~loc, value) => { switch (value) { | `Normal => [%expr `normal] @@ -3621,7 +3609,7 @@ let justify_items = let justify_self = monomorphic( Property_parser.property_justify_self, - (~loc) => [%expr CssJs.justifySelf], + (~loc) => [%expr CSS.justifySelf], (~loc, value) => { switch (value) { | `Auto => [%expr `auto] @@ -3641,7 +3629,7 @@ let justify_self = let align_items = monomorphic( Property_parser.property_align_items, - (~loc) => [%expr CssJs.alignItems], + (~loc) => [%expr CSS.alignItems], (~loc, value) => { switch (value) { | `Normal => [%expr `normal] @@ -3661,7 +3649,7 @@ let align_items = let align_self = monomorphic( Property_parser.property_align_self, - (~loc) => [%expr CssJs.alignSelf], + (~loc) => [%expr CSS.alignSelf], (~loc, value) => { switch (value) { | `Auto => [%expr `auto] @@ -3682,7 +3670,7 @@ let align_self = let align_content = monomorphic( Property_parser.property_align_content, - (~loc) => [%expr CssJs.alignContent], + (~loc) => [%expr CSS.alignContent], (~loc, value) => { switch (value) { | `Baseline_position(pos, ()) => render_baseline_position(~loc, pos) @@ -3908,7 +3896,7 @@ let render_subgrid = (~loc, line_name_list: Types.line_name_list) => { let grid_template_columns = monomorphic( Property_parser.property_grid_template_columns, - (~loc) => [%expr CssJs.gridTemplateColumns], + (~loc) => [%expr CSS.gridTemplateColumns], (~loc, value: Types.property_grid_template_columns) => switch (value) { | `None => [%expr [|`none|]] @@ -3924,7 +3912,7 @@ let grid_template_columns = let grid_template_rows = monomorphic( Property_parser.property_grid_template_rows, - (~loc) => [%expr CssJs.gridTemplateRows], + (~loc) => [%expr CSS.gridTemplateRows], (~loc, value: Types.property_grid_template_rows) => switch (value) { | `None => [%expr [|`none|]] @@ -3939,7 +3927,7 @@ let grid_template_rows = let grid_template_areas = unsupportedValue(Property_parser.property_grid_template_areas, (~loc) => - [%expr CssJs.gridTemplateAreas] + [%expr CSS.gridTemplateAreas] ); let grid_template = @@ -3947,33 +3935,31 @@ let grid_template = let grid_auto_columns = unsupportedValue(Property_parser.property_grid_auto_columns, (~loc) => - [%expr CssJs.gridAutoColumns] + [%expr CSS.gridAutoColumns] ); let grid_auto_rows = unsupportedValue(Property_parser.property_grid_auto_rows, (~loc) => - [%expr CssJs.gridAutoRows] + [%expr CSS.gridAutoRows] ); let grid_auto_flow = unsupportedValue(Property_parser.property_grid_auto_flow, (~loc) => - [%expr CssJs.gridAutoFlow] + [%expr CSS.gridAutoFlow] ); let grid = - unsupportedValue(Property_parser.property_grid, (~loc) => - [%expr CssJs.grid] - ); + unsupportedValue(Property_parser.property_grid, (~loc) => [%expr CSS.grid]); let grid_row_start = unsupportedValue(Property_parser.property_grid_row_start, (~loc) => - [%expr CssJs.gridRowStart] + [%expr CSS.gridRowStart] ); let grid_row_gap = monomorphic( Property_parser.property_grid_row_gap, - (~loc) => [%expr CssJs.gridRowGap], + (~loc) => [%expr CSS.gridRowGap], (~loc) => fun | `Extended_length(el) => render_extended_length(~loc, el) @@ -3983,7 +3969,7 @@ let grid_row_gap = let grid_column_gap = monomorphic( Property_parser.property_grid_column_gap, - (~loc) => [%expr CssJs.gridColumnGap], + (~loc) => [%expr CSS.gridColumnGap], (~loc) => fun | `Extended_length(el) => render_extended_length(~loc, el) @@ -3992,38 +3978,38 @@ let grid_column_gap = let grid_column_start = unsupportedValue(Property_parser.property_grid_column_start, (~loc) => - [%expr CssJs.gridColumnStart] + [%expr CSS.gridColumnStart] ); let grid_row_end = unsupportedValue(Property_parser.property_grid_row_end, (~loc) => - [%expr CssJs.gridRowEnd] + [%expr CSS.gridRowEnd] ); let grid_column_end = unsupportedValue(Property_parser.property_grid_column_end, (~loc) => - [%expr CssJs.gridColumnEnd] + [%expr CSS.gridColumnEnd] ); let grid_row = unsupportedValue(Property_parser.property_grid_row, (~loc) => - [%expr CssJs.gridRow] + [%expr CSS.gridRow] ); let grid_column = unsupportedValue(Property_parser.property_grid_column, (~loc) => - [%expr CssJs.gridColumn] + [%expr CSS.gridColumn] ); let grid_area = unsupportedValue(Property_parser.property_grid_area, (~loc) => - [%expr CssJs.gridArea] + [%expr CSS.gridArea] ); let grid_gap = monomorphic( Property_parser.property_grid_gap, - (~loc) => [%expr CssJs.gridGap], + (~loc) => [%expr CSS.gridGap], (~loc) => fun | (`Extended_length(el), None) => render_extended_length(~loc, el) @@ -4044,10 +4030,10 @@ let render_gap = let render_property_gap = (~loc, value: Types.property_gap) => { switch (value) { - | (row, None) => [[%expr CssJs.gap([%e render_gap(~loc, row)])]] + | (row, None) => [[%expr CSS.gap([%e render_gap(~loc, row)])]] | (row, Some(column)) => [ [%expr - CssJs.gap2( + CSS.gap2( ~rowGap=[%e render_gap(~loc, row)], ~columnGap=[%e render_gap(~loc, column)], ) @@ -4061,7 +4047,7 @@ let gap = polymorphic(Property_parser.property_gap, render_property_gap); let z_index = monomorphic( Property_parser.property_z_index, - (~loc) => [%expr CssJs.zIndex], + (~loc) => [%expr CSS.zIndex], (~loc, value) => { switch (value) { | `Auto => [%expr `auto] @@ -4080,28 +4066,28 @@ let render_position_value = (~loc) => let left = monomorphic( Property_parser.property_left, - (~loc) => [%expr CssJs.left], + (~loc) => [%expr CSS.left], render_position_value, ); let top = monomorphic( Property_parser.property_top, - (~loc) => [%expr CssJs.top], + (~loc) => [%expr CSS.top], render_position_value, ); let right = monomorphic( Property_parser.property_right, - (~loc) => [%expr CssJs.right], + (~loc) => [%expr CSS.right], render_position_value, ); let bottom = monomorphic( Property_parser.property_bottom, - (~loc) => [%expr CssJs.bottom], + (~loc) => [%expr CSS.bottom], render_position_value, ); @@ -4151,7 +4137,7 @@ let render_display = (~loc) => let display = monomorphic( Property_parser.property_display, - (~loc) => [%expr CssJs.display], + (~loc) => [%expr CSS.display], render_display, ); @@ -4164,7 +4150,7 @@ let render_mask_image = (~loc) => let mask_image = monomorphic( Property_parser.property_mask_image, - (~loc) => [%expr CssJs.maskImage], + (~loc) => [%expr CSS.maskImage], (~loc) => fun | [one] => render_mask_image(~loc, one) @@ -4185,14 +4171,14 @@ let render_paint = (~loc, value: Types.paint) => { let fill = monomorphic( Property_parser.property_fill, - (~loc) => [%expr CssJs.SVG.fill], + (~loc) => [%expr CSS.SVG.fill], render_paint, ); let stroke = monomorphic( Property_parser.property_stroke, - (~loc) => [%expr CssJs.SVG.stroke], + (~loc) => [%expr CSS.SVG.stroke], render_paint, ); @@ -4206,14 +4192,14 @@ let render_alpha_value = (~loc, value: Types.alpha_value) => { let stroke_opacity = monomorphic( Property_parser.property_stroke_opacity, - (~loc) => [%expr CssJs.SVG.strokeOpacity], + (~loc) => [%expr CSS.SVG.strokeOpacity], render_alpha_value, ); let line_break = monomorphic( Property_parser.property_line_break, - (~loc) => [%expr CssJs.lineBreak], + (~loc) => [%expr CSS.lineBreak], (~loc, value) => { switch (value) { | `Auto => [%expr `auto] @@ -4250,7 +4236,7 @@ let column_fill = unsupportedProperty(Property_parser.property_column_fill); let column_gap = monomorphic( Property_parser.property_column_gap, - (~loc) => [%expr CssJs.columnGap], + (~loc) => [%expr CSS.columnGap], (~loc) => render_gap(~loc), ); @@ -4330,7 +4316,7 @@ let render_cursor = (~loc, value) => let cursor = monomorphic( Property_parser.property_cursor, - (~loc) => [%expr CssJs.cursor], + (~loc) => [%expr CSS.cursor], render_cursor, ); @@ -4400,7 +4386,7 @@ let render_filter_function_list = (~loc, value: Types.filter_function_list) => { let filter = monomorphic( Property_parser.property_filter, - (~loc) => [%expr CssJs.filter], + (~loc) => [%expr CSS.filter], (~loc, value) => switch (value) { | `None => [%expr [|`none|]] @@ -4413,7 +4399,7 @@ let filter = let backdrop_filter = monomorphic( Property_parser.property_backdrop_filter, - (~loc) => [%expr CssJs.backdropFilter], + (~loc) => [%expr CSS.backdropFilter], (~loc, value) => switch (value) { | `None => [%expr [|`none|]] @@ -4438,7 +4424,7 @@ let list_style = unsupportedProperty(Property_parser.property_list_style); let list_style_image = monomorphic( Property_parser.property_list_style_image, - (~loc) => [%expr CssJs.listStyleImage], + (~loc) => [%expr CSS.listStyleImage], (~loc, value: Types.property_list_style_image) => { switch (value) { | `None => [%expr `none] @@ -4463,7 +4449,7 @@ let resize = unsupportedProperty(Property_parser.property_resize); let row_gap = monomorphic( Property_parser.property_row_gap, - (~loc) => [%expr CssJs.rowGap], + (~loc) => [%expr CSS.rowGap], (~loc) => render_gap(~loc), ); @@ -4813,22 +4799,19 @@ let page_break_inside = let table_layout = unsupportedProperty(Property_parser.property_table_layout); /* let render_animatable_feature = (~loc) => - fun - | `Scroll_position => [%expr `scrollPosition] - | `Contents => [%expr `contents] - | `Custom_ident(v) => render_string(~loc, v); */ + fun + | `Scroll_position => [%expr `scrollPosition] + | `Contents => [%expr `contents] + | `Custom_ident(v) => render_string(~loc, v); */ let will_change = monomorphic( Property_parser.property_will_change, - (~loc) => [%expr CssJs.willChange], + (~loc) => [%expr CSS.willChange], (~loc, value: Types.property_will_change) => { switch (value) { | `Auto => [%expr `auto] - | _ => - raise( - Unsupported_feature - ) + | _ => raise(Unsupported_feature) } }, ); @@ -4843,7 +4826,7 @@ let touch_action = unsupportedProperty(Property_parser.property_touch_action); let user_select = monomorphic( Property_parser.property_user_select, - (~loc) => [%expr CssJs.userSelect], + (~loc) => [%expr CSS.userSelect], (~loc) => fun | `Auto => [%expr `auto] @@ -4857,7 +4840,7 @@ let user_select = let zoom = monomorphic( Property_parser.property_zoom, - (~loc) => [%expr CssJs.zoom], + (~loc) => [%expr CSS.zoom], (~loc) => fun | `Number(number) => [%expr `num([%e render_float(~loc, number)])] @@ -4869,7 +4852,7 @@ let zoom = let visibility = monomorphic( Property_parser.property_visibility, - (~loc) => [%expr CssJs.visibility], + (~loc) => [%expr CSS.visibility], (~loc) => fun | `Visible => [%expr `visible] @@ -5270,7 +5253,7 @@ let render_when_unsupported_features = (~loc, property, value) => { let value = Result.value(unsafeInterpolation, ~default=render_string(~loc, value)); - [%expr CssJs.unsafe([%e propertyName], [%e value])]; + [%expr CSS.unsafe([%e propertyName], [%e value])]; }; let findProperty = name => { @@ -5286,7 +5269,7 @@ let render_to_expr = (~loc, property, value, important) => { switch (expr_of_string(~loc, value)) { | Ok(expr) when important => - Ok(expr |> List.map(expr => [%expr CssJs.important([%e expr])])) + Ok(expr |> List.map(expr => [%expr CSS.important([%e expr])])) | Ok(expr) => Ok(expr) | Error(err) => Error(`Invalid_value(err)) /* | exception (Invalid_value(v)) => Error(`Invalid_value(v)) */ diff --git a/packages/ppx/src/Property_to_string.re b/packages/ppx/src/Property_to_string.re index 4f6c55c0..8ce3f995 100644 --- a/packages/ppx/src/Property_to_string.re +++ b/packages/ppx/src/Property_to_string.re @@ -285,7 +285,7 @@ let render_css_global_values = (name, value) => { }; /* bs-css doesn't have those */ - Ok([[%expr CssJs.unsafe([%e render_string(name)], [%e value])]]); + Ok([[%expr CSS.unsafe([%e render_string(name)], [%e value])]]); }; let found = ({ast_of_string, string_to_expr, _}) => { diff --git a/packages/ppx/src/ppx.re b/packages/ppx/src/ppx.re index 54f8ca52..7829fc6d 100644 --- a/packages/ppx/src/ppx.re +++ b/packages/ppx/src/ppx.re @@ -446,7 +446,7 @@ let _ = ~instrument= Ppxlib.Driver.Instrument.make(~position=Before, traverser#structure), ~rules=[ - /* %cx without let binding, it doesn't have CssJs.label + /* %cx without let binding, it doesn't have CSS.label %cx is defined in traverser#structure */ Ppxlib.Context_free.Rule.extension( Ppxlib.Extension.declare( diff --git a/packages/ppx/test/css-support/animations.t/run.t b/packages/ppx/test/css-support/animations.t/run.t index 0b64fad3..25019faf 100644 --- a/packages/ppx/test/css-support/animations.t/run.t +++ b/packages/ppx/test/css-support/animations.t/run.t @@ -33,38 +33,38 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.animationName({js|foo|js}); - CssJs.unsafe({js|animationName|js}, {js|foo, bar|js}); - CssJs.animationDuration(`s(0)); - CssJs.animationDuration(`s(1)); - CssJs.animationDuration(`ms(100)); - CssJs.animationTimingFunction(`ease); - CssJs.animationTimingFunction(`linear); - CssJs.animationTimingFunction(`easeIn); - CssJs.animationTimingFunction(`easeOut); - CssJs.animationTimingFunction(`easeInOut); - CssJs.animationTimingFunction(`cubicBezier((0.5, 0.5, 0.5, 0.5))); - CssJs.animationTimingFunction(`cubicBezier((0.5, 1.5, 0.5, (-2.5)))); - CssJs.animationTimingFunction(`stepStart); - CssJs.animationTimingFunction(`stepEnd); - CssJs.animationTimingFunction(`steps((3, `start))); - CssJs.animationTimingFunction(`steps((5, `end_))); - CssJs.animationIterationCount(`infinite); - CssJs.animationIterationCount(`count(8.)); - CssJs.animationIterationCount(`count(4.35)); - CssJs.animationDirection(`normal); - CssJs.animationDirection(`alternate); - CssJs.animationDirection(`reverse); - CssJs.animationDirection(`alternateReverse); - CssJs.animationPlayState(`running); - CssJs.animationPlayState(`paused); - CssJs.animationDelay(`s(1)); - CssJs.animationDelay(`s(-1)); - CssJs.animationFillMode(`none); - CssJs.animationFillMode(`forwards); - CssJs.animationFillMode(`backwards); - CssJs.animationFillMode(`both); - CssJs.animation( + CSS.animationName({js|foo|js}); + CSS.unsafe({js|animationName|js}, {js|foo, bar|js}); + CSS.animationDuration(`s(0)); + CSS.animationDuration(`s(1)); + CSS.animationDuration(`ms(100)); + CSS.animationTimingFunction(`ease); + CSS.animationTimingFunction(`linear); + CSS.animationTimingFunction(`easeIn); + CSS.animationTimingFunction(`easeOut); + CSS.animationTimingFunction(`easeInOut); + CSS.animationTimingFunction(`cubicBezier((0.5, 0.5, 0.5, 0.5))); + CSS.animationTimingFunction(`cubicBezier((0.5, 1.5, 0.5, (-2.5)))); + CSS.animationTimingFunction(`stepStart); + CSS.animationTimingFunction(`stepEnd); + CSS.animationTimingFunction(`steps((3, `start))); + CSS.animationTimingFunction(`steps((5, `end_))); + CSS.animationIterationCount(`infinite); + CSS.animationIterationCount(`count(8.)); + CSS.animationIterationCount(`count(4.35)); + CSS.animationDirection(`normal); + CSS.animationDirection(`alternate); + CSS.animationDirection(`reverse); + CSS.animationDirection(`alternateReverse); + CSS.animationPlayState(`running); + CSS.animationPlayState(`paused); + CSS.animationDelay(`s(1)); + CSS.animationDelay(`s(-1)); + CSS.animationFillMode(`none); + CSS.animationFillMode(`forwards); + CSS.animationFillMode(`backwards); + CSS.animationFillMode(`both); + CSS.animation( ~duration=?Some(`s(1)), ~delay=?Some(`s(2)), ~direction=?Some(`alternate), @@ -74,7 +74,7 @@ If this test fail means that the module is not in sync with the ppx ~iterationCount=?Some(`infinite), {js|foo|js}, ); - CssJs.animation( + CSS.animation( ~duration=?Some(`s(4)), ~delay=?Some(`s(1)), ~direction=?Some(`reverse), @@ -84,7 +84,7 @@ If this test fail means that the module is not in sync with the ppx ~iterationCount=?Some(`infinite), {js|none|js}, ); - CssJs.animation( + CSS.animation( ~duration=?Some(`ms(300)), ~delay=?Some(`ms(400)), ~direction=?Some(`reverse), diff --git a/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t b/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t index afedb7fe..38091b97 100644 --- a/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t +++ b/packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t @@ -41,213 +41,213 @@ If this test fail means that the module is not in sync with the ppx let elevation1 = `rgba((0, 0, 0, `num(0.03))); }; }; - CssJs.backgroundRepeat(`space); - CssJs.backgroundRepeat(`round); - CssJs.backgroundRepeat(`hv((`repeat, `repeat))); - CssJs.backgroundRepeat(`hv((`space, `repeat))); - CssJs.backgroundRepeat(`hv((`round, `repeat))); - CssJs.backgroundRepeat(`hv((`noRepeat, `repeat))); - CssJs.backgroundRepeat(`hv((`repeat, `space))); - CssJs.backgroundRepeat(`hv((`space, `space))); - CssJs.backgroundRepeat(`hv((`round, `space))); - CssJs.backgroundRepeat(`hv((`noRepeat, `space))); - CssJs.backgroundRepeat(`hv((`repeat, `round))); - CssJs.backgroundRepeat(`hv((`space, `round))); - CssJs.backgroundRepeat(`hv((`round, `round))); - CssJs.backgroundRepeat(`hv((`noRepeat, `round))); - CssJs.backgroundRepeat(`hv((`repeat, `noRepeat))); - CssJs.backgroundRepeat(`hv((`space, `noRepeat))); - CssJs.backgroundRepeat(`hv((`round, `noRepeat))); - CssJs.backgroundRepeat(`hv((`noRepeat, `noRepeat))); - CssJs.backgroundAttachment(`local); - CssJs.backgroundClip(`borderBox); - CssJs.backgroundClip(`paddingBox); - CssJs.backgroundClip(`contentBox); - CssJs.backgroundOrigin(`borderBox); - CssJs.backgroundOrigin(`paddingBox); - CssJs.backgroundOrigin(`contentBox); - CssJs.unsafe({js|backgroundSize|js}, {js|auto|js}); - CssJs.backgroundSize(`cover); - CssJs.backgroundSize(`contain); - CssJs.unsafe({js|backgroundSize|js}, {js|10px|js}); - CssJs.unsafe({js|backgroundSize|js}, {js|50%|js}); - CssJs.unsafe({js|backgroundSize|js}, {js|10px auto|js}); - CssJs.unsafe({js|backgroundSize|js}, {js|auto 10%|js}); - CssJs.backgroundSize(`size((`em(50.), `percent(50.)))); - CssJs.unsafe({js|background|js}, {js|top left / 50% 60%|js}); - CssJs.backgroundOrigin(`borderBox); - CssJs.backgroundColor(CssJs.blue); - CssJs.backgroundColor(CssJs.red); - CssJs.backgroundClip(`paddingBox); - CssJs.unsafe( + CSS.backgroundRepeat(`space); + CSS.backgroundRepeat(`round); + CSS.backgroundRepeat(`hv((`repeat, `repeat))); + CSS.backgroundRepeat(`hv((`space, `repeat))); + CSS.backgroundRepeat(`hv((`round, `repeat))); + CSS.backgroundRepeat(`hv((`noRepeat, `repeat))); + CSS.backgroundRepeat(`hv((`repeat, `space))); + CSS.backgroundRepeat(`hv((`space, `space))); + CSS.backgroundRepeat(`hv((`round, `space))); + CSS.backgroundRepeat(`hv((`noRepeat, `space))); + CSS.backgroundRepeat(`hv((`repeat, `round))); + CSS.backgroundRepeat(`hv((`space, `round))); + CSS.backgroundRepeat(`hv((`round, `round))); + CSS.backgroundRepeat(`hv((`noRepeat, `round))); + CSS.backgroundRepeat(`hv((`repeat, `noRepeat))); + CSS.backgroundRepeat(`hv((`space, `noRepeat))); + CSS.backgroundRepeat(`hv((`round, `noRepeat))); + CSS.backgroundRepeat(`hv((`noRepeat, `noRepeat))); + CSS.backgroundAttachment(`local); + CSS.backgroundClip(`borderBox); + CSS.backgroundClip(`paddingBox); + CSS.backgroundClip(`contentBox); + CSS.backgroundOrigin(`borderBox); + CSS.backgroundOrigin(`paddingBox); + CSS.backgroundOrigin(`contentBox); + CSS.unsafe({js|backgroundSize|js}, {js|auto|js}); + CSS.backgroundSize(`cover); + CSS.backgroundSize(`contain); + CSS.unsafe({js|backgroundSize|js}, {js|10px|js}); + CSS.unsafe({js|backgroundSize|js}, {js|50%|js}); + CSS.unsafe({js|backgroundSize|js}, {js|10px auto|js}); + CSS.unsafe({js|backgroundSize|js}, {js|auto 10%|js}); + CSS.backgroundSize(`size((`em(50.), `percent(50.)))); + CSS.unsafe({js|background|js}, {js|top left / 50% 60%|js}); + CSS.backgroundOrigin(`borderBox); + CSS.backgroundColor(CSS.blue); + CSS.backgroundColor(CSS.red); + CSS.backgroundClip(`paddingBox); + CSS.unsafe( {js|background|js}, {js|url(foo.png) bottom right / cover padding-box content-box|js}, ); - CssJs.borderTopLeftRadius(`zero); - CssJs.borderTopLeftRadius(`percent(50.)); - CssJs.unsafe({js|borderTopLeftRadius|js}, {js|250px 100px|js}); - CssJs.borderTopRightRadius(`zero); - CssJs.borderTopRightRadius(`percent(50.)); - CssJs.unsafe({js|borderTopRightRadius|js}, {js|250px 100px|js}); - CssJs.borderBottomRightRadius(`zero); - CssJs.borderBottomRightRadius(`percent(50.)); - CssJs.unsafe({js|borderBottomRightRadius|js}, {js|250px 100px|js}); - CssJs.borderBottomLeftRadius(`zero); - CssJs.borderBottomLeftRadius(`percent(50.)); - CssJs.unsafe({js|borderBottomLeftRadius|js}, {js|250px 100px|js}); - CssJs.borderRadius(`pxFloat(10.)); - CssJs.borderRadius(`percent(50.)); - CssJs.borderImageSource(`none); - CssJs.borderImageSource(`url({js|foo.png|js})); - CssJs.unsafe({js|borderImageSlice|js}, {js|10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 10 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 10 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 30% 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 30% 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 10 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 10 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 30% 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 30% 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 10 10 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 10 10 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 30% 10 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 30% 10 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 10 30% 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 10 30% 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 30% 30% 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 30% 30% 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 10 10 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 10 10 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 30% 10 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 30% 10 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 10 30% 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 10 30% 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 30% 30% 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% 30% 30% 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|fill 30%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|fill 10|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|fill 2 4 8% 16%|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|30% fill|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|10 fill|js}); - CssJs.unsafe({js|borderImageSlice|js}, {js|2 4 8% 16% fill|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|10px|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|5%|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|28|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|auto|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|10px 10px|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|5% 10px|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|28 10px|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|auto 10px|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|10px 5%|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|5% 5%|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|28 5%|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|auto 5%|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|10px 28|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|5% 28|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|28 28|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|auto 28|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|10px auto|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|5% auto|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|28 auto|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|auto auto|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|10px 10% 10|js}); - CssJs.unsafe({js|borderImageWidth|js}, {js|5% 10px 20 auto|js}); - CssJs.unsafe({js|borderImageOutset|js}, {js|10px|js}); - CssJs.unsafe({js|borderImageOutset|js}, {js|20|js}); - CssJs.unsafe({js|borderImageOutset|js}, {js|10px 20|js}); - CssJs.unsafe({js|borderImageOutset|js}, {js|10px 20px|js}); - CssJs.unsafe({js|borderImageOutset|js}, {js|20 30|js}); - CssJs.unsafe({js|borderImageOutset|js}, {js|2px 3px 4|js}); - CssJs.unsafe({js|borderImageOutset|js}, {js|1 2px 3px 4|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|stretch|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|repeat|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|round|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|space|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|stretch stretch|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|repeat stretch|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|round stretch|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|space stretch|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|stretch repeat|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|repeat repeat|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|round repeat|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|space repeat|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|stretch round|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|repeat round|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|round round|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|space round|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|stretch space|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|repeat space|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|round space|js}); - CssJs.unsafe({js|borderImageRepeat|js}, {js|space space|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) 10|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) 10%|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) 10% fill|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) 10 round|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) 10 stretch repeat|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) 10 / 10px|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) 10 / 10% / 10px|js}); - CssJs.unsafe({js|borderImage|js}, {js|url(foo.png) fill 10 / 10% / 10px|js}); - CssJs.unsafe( + CSS.borderTopLeftRadius(`zero); + CSS.borderTopLeftRadius(`percent(50.)); + CSS.unsafe({js|borderTopLeftRadius|js}, {js|250px 100px|js}); + CSS.borderTopRightRadius(`zero); + CSS.borderTopRightRadius(`percent(50.)); + CSS.unsafe({js|borderTopRightRadius|js}, {js|250px 100px|js}); + CSS.borderBottomRightRadius(`zero); + CSS.borderBottomRightRadius(`percent(50.)); + CSS.unsafe({js|borderBottomRightRadius|js}, {js|250px 100px|js}); + CSS.borderBottomLeftRadius(`zero); + CSS.borderBottomLeftRadius(`percent(50.)); + CSS.unsafe({js|borderBottomLeftRadius|js}, {js|250px 100px|js}); + CSS.borderRadius(`pxFloat(10.)); + CSS.borderRadius(`percent(50.)); + CSS.borderImageSource(`none); + CSS.borderImageSource(`url({js|foo.png|js})); + CSS.unsafe({js|borderImageSlice|js}, {js|10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 10 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 10 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 30% 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 30% 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 10 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 10 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 30% 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 30% 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 10 10 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 10 10 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 30% 10 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 30% 10 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 10 30% 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 10 30% 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 30% 30% 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 30% 30% 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 10 10 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 10 10 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 30% 10 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 30% 10 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 10 30% 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 10 30% 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 30% 30% 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% 30% 30% 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|fill 30%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|fill 10|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|fill 2 4 8% 16%|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|30% fill|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|10 fill|js}); + CSS.unsafe({js|borderImageSlice|js}, {js|2 4 8% 16% fill|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|10px|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|5%|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|28|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|auto|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|10px 10px|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|5% 10px|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|28 10px|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|auto 10px|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|10px 5%|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|5% 5%|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|28 5%|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|auto 5%|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|10px 28|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|5% 28|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|28 28|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|auto 28|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|10px auto|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|5% auto|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|28 auto|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|auto auto|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|10px 10% 10|js}); + CSS.unsafe({js|borderImageWidth|js}, {js|5% 10px 20 auto|js}); + CSS.unsafe({js|borderImageOutset|js}, {js|10px|js}); + CSS.unsafe({js|borderImageOutset|js}, {js|20|js}); + CSS.unsafe({js|borderImageOutset|js}, {js|10px 20|js}); + CSS.unsafe({js|borderImageOutset|js}, {js|10px 20px|js}); + CSS.unsafe({js|borderImageOutset|js}, {js|20 30|js}); + CSS.unsafe({js|borderImageOutset|js}, {js|2px 3px 4|js}); + CSS.unsafe({js|borderImageOutset|js}, {js|1 2px 3px 4|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|stretch|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|repeat|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|round|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|space|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|stretch stretch|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|repeat stretch|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|round stretch|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|space stretch|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|stretch repeat|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|repeat repeat|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|round repeat|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|space repeat|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|stretch round|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|repeat round|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|round round|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|space round|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|stretch space|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|repeat space|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|round space|js}); + CSS.unsafe({js|borderImageRepeat|js}, {js|space space|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) 10|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) 10%|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) 10% fill|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) 10 round|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) 10 stretch repeat|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) 10 / 10px|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) 10 / 10% / 10px|js}); + CSS.unsafe({js|borderImage|js}, {js|url(foo.png) fill 10 / 10% / 10px|js}); + CSS.unsafe( {js|borderImage|js}, {js|url(foo.png) fill 10 / 10% / 10px space|js}, ); - CssJs.boxShadows([| - CssJs.Shadow.box( + CSS.boxShadows([| + CSS.Shadow.box( ~x=`pxFloat(1.), ~y=`pxFloat(2.), ~blur=`pxFloat(3.), ~spread=`pxFloat(4.), - CssJs.black, + CSS.black, ), |]); - CssJs.boxShadows([| - CssJs.Shadow.box( + CSS.boxShadows([| + CSS.Shadow.box( ~x=`pxFloat(1.), ~y=`pxFloat(2.), ~blur=`pxFloat(3.), ~spread=`pxFloat(4.), ~inset=true, - CssJs.black, + CSS.black, ), |]); - CssJs.boxShadows([| - CssJs.Shadow.box( + CSS.boxShadows([| + CSS.Shadow.box( ~x=`pxFloat(1.), ~y=`pxFloat(2.), ~blur=`pxFloat(3.), ~spread=`pxFloat(4.), ~inset=true, - CssJs.black, + CSS.black, ), - CssJs.Shadow.box( + CSS.Shadow.box( ~x=`pxFloat(1.), ~y=`pxFloat(2.), ~blur=`pxFloat(3.), ~spread=`pxFloat(4.), - CssJs.black, + CSS.black, ), |]); - CssJs.boxShadows([| - CssJs.Shadow.box( + CSS.boxShadows([| + CSS.Shadow.box( ~x=`pxFloat(-1.), ~y=`pxFloat(1.), ~blur=`pxFloat(0.), ~spread=`pxFloat(0.), Color.Shadow.elevation1, ), - CssJs.Shadow.box( + CSS.Shadow.box( ~x=`pxFloat(1.), ~y=`pxFloat(1.), ~blur=`pxFloat(0.), ~spread=`pxFloat(0.), Color.Shadow.elevation1, ), - CssJs.Shadow.box( + CSS.Shadow.box( ~x=`pxFloat(0.), ~y=`pxFloat(-1.), ~blur=`pxFloat(0.), @@ -255,163 +255,157 @@ If this test fail means that the module is not in sync with the ppx Color.Shadow.elevation1, ), |]); - CssJs.unsafe({js|backgroundPositionX|js}, {js|right|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|center|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|50%|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|left, left|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|left, right|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|right, left|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|left, 0%|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|10%, 20%, 40%|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|0px|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|30px|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|0%, 10%, 20%, 30%|js}); - CssJs.unsafe( - {js|backgroundPositionX|js}, - {js|left, left, left, left, left|js}, - ); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(20px)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(20px + 1em)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(20px / 2)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(20px + 50%)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(50% - 10px)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(-20px)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(-50%)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|calc(-20%)|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|right 20px|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|left 20px|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|right -50px|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|left -50px|js}); - CssJs.unsafe({js|backgroundPositionX|js}, {js|right 20px|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|bottom|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|center|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|50%|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|top, top|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|top, bottom|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|bottom, top|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|top, 0%|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|10%, 20%, 40%|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|0px|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|30px|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|0%, 10%, 20%, 30%|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|top, top, top, top, top|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(20px)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(20px + 1em)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(20px / 2)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(20px + 50%)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(50% - 10px)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(-20px)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(-50%)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|calc(-20%)|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|bottom 20px|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|top 20px|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|bottom -50px|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|top -50px|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|bottom 20px|js}); - CssJs.backgroundImage( + CSS.unsafe({js|backgroundPositionX|js}, {js|right|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|center|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|50%|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|left, left|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|left, right|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|right, left|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|left, 0%|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|10%, 20%, 40%|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|0px|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|30px|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|0%, 10%, 20%, 30%|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|left, left, left, left, left|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(20px)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(20px + 1em)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(20px / 2)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(20px + 50%)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(50% - 10px)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(-20px)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(-50%)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|calc(-20%)|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|right 20px|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|left 20px|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|right -50px|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|left -50px|js}); + CSS.unsafe({js|backgroundPositionX|js}, {js|right 20px|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|bottom|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|center|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|50%|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|top, top|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|top, bottom|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|bottom, top|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|top, 0%|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|10%, 20%, 40%|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|0px|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|30px|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|0%, 10%, 20%, 30%|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|top, top, top, top, top|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(20px)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(20px + 1em)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(20px / 2)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(20px + 50%)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(50% - 10px)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(-20px)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(-50%)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|calc(-20%)|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|bottom 20px|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|top 20px|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|bottom -50px|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|top -50px|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|bottom 20px|js}); + CSS.backgroundImage( `linearGradient(( Some(`deg(45.)), - [|(Some(CssJs.blue), None), (Some(CssJs.red), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.blue), None), (Some(CSS.red), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( Some(`deg(90.)), [| - (Some(CssJs.blue), Some(`percent(10.))), - (Some(CssJs.red), Some(`percent(20.))), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.blue), Some(`percent(10.))), + (Some(CSS.red), Some(`percent(20.))), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( Some(`deg(90.)), - [|(Some(CssJs.blue), Some(`percent(10.))), (Some(CssJs.red), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.blue), Some(`percent(10.))), (Some(CSS.red), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( Some(`deg(90.)), [| - (Some(CssJs.blue), None), + (Some(CSS.blue), None), (None, Some(`percent(10.))), - (Some(CssJs.red), None), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.red), None), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( Some(`Right), - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( Some(`deg(45.)), - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( None, - [| - (Some(CssJs.white), Some(`percent(50.))), - (Some(CssJs.black), None), - |]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), Some(`percent(50.))), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( None, [| - (Some(CssJs.white), None), + (Some(CSS.white), None), (Some(`hex({js|f06|js})), None), - (Some(CssJs.black), None), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.black), None), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( None, [| - (Some(CssJs.red), Some(`pxFloat(-50.))), + (Some(CSS.red), Some(`pxFloat(-50.))), ( - Some(CssJs.white), + Some(CSS.white), Some(`calc(`add((`pxFloat(-25.), `percent(50.))))), ), - (Some(CssJs.blue), Some(`percent(100.))), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.blue), Some(`percent(100.))), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImages([| + CSS.backgroundImages([| `linearGradient(( Some(`deg(45.)), - [|(Some(CssJs.blue), None), (Some(CssJs.red), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.blue), None), (Some(CSS.red), None)|]: CSS.Types.Gradient.color_stop_list, )), `linearGradient(( None, [| - (Some(CssJs.red), Some(`pxFloat(-50.))), + (Some(CSS.red), Some(`pxFloat(-50.))), ( - Some(CssJs.white), + Some(CSS.white), Some(`calc(`add((`pxFloat(-25.), `percent(50.))))), ), - (Some(CssJs.blue), Some(`percent(100.))), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.blue), Some(`percent(100.))), + |]: CSS.Types.Gradient.color_stop_list, )), `linearGradient(( Some(`deg(45.)), - [|(Some(CssJs.blue), None), (Some(CssJs.red), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.blue), None), (Some(CSS.red), None)|]: CSS.Types.Gradient.color_stop_list, )), |]); let color = `hex("333"); - CssJs.backgroundImage( + CSS.backgroundImage( `linearGradient(( Some(`deg(45.)), [| @@ -422,10 +416,10 @@ If this test fail means that the module is not in sync with the ppx (Some(color), Some(`percent(75.))), (Some(`transparent), Some(`percent(0.))), (Some(`transparent), Some(`percent(100.))), - |]: CssJs.Types.Gradient.color_stop_list, + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `repeatingLinearGradient(( Some(`deg(45.)), [| @@ -433,265 +427,259 @@ If this test fail means that the module is not in sync with the ppx (Some(color), Some(`pxFloat(4.))), (Some(color), Some(`pxFloat(5.))), (Some(color), Some(`pxFloat(9.))), - |]: CssJs.Types.Gradient.color_stop_list, + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImages([| + CSS.backgroundImages([| `linearGradient(( Some(`deg(45.)), [| (Some(Color.Background.boxDark), Some(`percent(25.))), (Some(`transparent), Some(`percent(25.))), - |]: CssJs.Types.Gradient.color_stop_list, + |]: CSS.Types.Gradient.color_stop_list, )), `linearGradient(( None, [| - (Some(CssJs.red), Some(`pxFloat(-50.))), + (Some(CSS.red), Some(`pxFloat(-50.))), ( - Some(CssJs.white), + Some(CSS.white), Some(`calc(`add((`pxFloat(-25.), `percent(50.))))), ), - (Some(CssJs.blue), Some(`percent(100.))), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.blue), Some(`percent(100.))), + |]: CSS.Types.Gradient.color_stop_list, )), `linearGradient(( Some(`deg(45.)), - [|(Some(CssJs.blue), None), (Some(CssJs.red), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.blue), None), (Some(CSS.red), None)|]: CSS.Types.Gradient.color_stop_list, )), |]); - CssJs.backgroundImage( + CSS.backgroundImage( `radialGradient(( Some(`ellipse), None, None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `radialGradient(( Some(`circle), None, None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `radialGradient(( Some(`ellipse), None, None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `radialGradient(( Some(`circle), Some(`closestCorner), None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `radialGradient(( Some(`ellipse), Some(`farthestSide), None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `radialGradient(( Some(`circle), Some(`farthestSide), None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.backgroundImage( + CSS.backgroundImage( `radialGradient(( Some(`ellipse), None, None, [| (None, Some(`percent(50.))), - (Some(CssJs.white), None), - (Some(CssJs.black), None), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.white), None), + (Some(CSS.black), None), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.unsafe( + CSS.unsafe( {js|backgroundImage|js}, {js|radial-gradient(60% 60%, white, black)|js}, ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( Some(`Right), - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( Some(`deg(45.)), - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( None, - [| - (Some(CssJs.white), Some(`percent(50.))), - (Some(CssJs.black), None), - |]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), Some(`percent(50.))), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( None, - [| - (Some(CssJs.white), Some(`pxFloat(5.))), - (Some(CssJs.black), None), - |]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), Some(`pxFloat(5.))), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( None, [| - (Some(CssJs.white), None), + (Some(CSS.white), None), (Some(`hex({js|f06|js})), None), - (Some(CssJs.black), None), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.black), None), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( None, - [|(Some(`currentColor), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(`currentColor), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `linearGradient(( None, [| - (Some(CssJs.red), Some(`pxFloat(-50.))), + (Some(CSS.red), Some(`pxFloat(-50.))), ( - Some(CssJs.white), + Some(CSS.white), Some(`calc(`add((`pxFloat(-25.), `percent(50.))))), ), - (Some(CssJs.blue), Some(`percent(100.))), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.blue), Some(`percent(100.))), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`ellipse), None, None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`circle), None, None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`ellipse), None, None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`ellipse), Some(`closestCorner), None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`circle), Some(`closestCorner), None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`ellipse), Some(`farthestSide), None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`circle), Some(`farthestSide), None, - [|(Some(CssJs.white), None), (Some(CssJs.black), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(CSS.white), None), (Some(CSS.black), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.listStyleImage( + CSS.listStyleImage( `radialGradient(( Some(`ellipse), None, None, [| (None, Some(`percent(50.))), - (Some(CssJs.white), None), - (Some(CssJs.black), None), - |]: CssJs.Types.Gradient.color_stop_list, + (Some(CSS.white), None), + (Some(CSS.black), None), + |]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.unsafe( + CSS.unsafe( {js|listStyleImage|js}, {js|radial-gradient(60% 60%, white, black)|js}, ); - CssJs.imageRendering(`auto); - CssJs.imageRendering(`smooth); - CssJs.imageRendering(`highQuality); - CssJs.imageRendering(`pixelated); - CssJs.imageRendering(`crispEdges); - CssJs.backgroundPosition(`bottom); - CssJs.unsafe({js|backgroundPositionX|js}, {js|50%|js}); - CssJs.unsafe({js|backgroundPositionY|js}, {js|0|js}); - CssJs.backgroundPosition2(`zero, `zero); - CssJs.backgroundPosition2(`rem(1.), `zero); - CssJs.objectPosition2(`center, `top); - CssJs.objectPosition2(`center, `bottom); - CssJs.objectPosition2(`left, `center); - CssJs.objectPosition2(`right, `center); - CssJs.objectPosition2(`center, `center); - CssJs.unsafe({js|objectPosition|js}, {js|25% 75%|js}); - CssJs.objectPosition2(`percent(25.), `center); - CssJs.objectPosition2(`zero, `zero); - CssJs.objectPosition2(`cm(1.), `cm(2.)); - CssJs.objectPosition2(`ch(10.), `em(8.)); - CssJs.unsafe({js|objectPosition|js}, {js|bottom 10px right 20px|js}); - CssJs.unsafe({js|objectPosition|js}, {js|right 3em bottom 10px|js}); - CssJs.unsafe({js|objectPosition|js}, {js|top 0 right 10px|js}); - CssJs.unsafe({js|objectPosition|js}, {js|inherit|js}); - CssJs.unsafe({js|objectPosition|js}, {js|initial|js}); - CssJs.unsafe({js|objectPosition|js}, {js|revert|js}); - CssJs.unsafe({js|objectPosition|js}, {js|revert-layer|js}); - CssJs.unsafe({js|objectPosition|js}, {js|unset|js}); + CSS.imageRendering(`auto); + CSS.imageRendering(`smooth); + CSS.imageRendering(`highQuality); + CSS.imageRendering(`pixelated); + CSS.imageRendering(`crispEdges); + CSS.backgroundPosition(`bottom); + CSS.unsafe({js|backgroundPositionX|js}, {js|50%|js}); + CSS.unsafe({js|backgroundPositionY|js}, {js|0|js}); + CSS.backgroundPosition2(`zero, `zero); + CSS.backgroundPosition2(`rem(1.), `zero); + CSS.objectPosition2(`center, `top); + CSS.objectPosition2(`center, `bottom); + CSS.objectPosition2(`left, `center); + CSS.objectPosition2(`right, `center); + CSS.objectPosition2(`center, `center); + CSS.unsafe({js|objectPosition|js}, {js|25% 75%|js}); + CSS.objectPosition2(`percent(25.), `center); + CSS.objectPosition2(`zero, `zero); + CSS.objectPosition2(`cm(1.), `cm(2.)); + CSS.objectPosition2(`ch(10.), `em(8.)); + CSS.unsafe({js|objectPosition|js}, {js|bottom 10px right 20px|js}); + CSS.unsafe({js|objectPosition|js}, {js|right 3em bottom 10px|js}); + CSS.unsafe({js|objectPosition|js}, {js|top 0 right 10px|js}); + CSS.unsafe({js|objectPosition|js}, {js|inherit|js}); + CSS.unsafe({js|objectPosition|js}, {js|initial|js}); + CSS.unsafe({js|objectPosition|js}, {js|revert|js}); + CSS.unsafe({js|objectPosition|js}, {js|revert-layer|js}); + CSS.unsafe({js|objectPosition|js}, {js|unset|js}); let _loadingKeyframes = - CssJs.keyframes([| - (0, [|CssJs.backgroundPosition2(`zero, `zero)|]), - (100, [|CssJs.backgroundPosition2(`rem(1.), `zero)|]), + CSS.keyframes([| + (0, [|CSS.backgroundPosition2(`zero, `zero)|]), + (100, [|CSS.backgroundPosition2(`rem(1.), `zero)|]), |]); diff --git a/packages/ppx/test/css-support/basic-user-interface-module.t/run.t b/packages/ppx/test/css-support/basic-user-interface-module.t/run.t index 7871decd..3d784e9f 100644 --- a/packages/ppx/test/css-support/basic-user-interface-module.t/run.t +++ b/packages/ppx/test/css-support/basic-user-interface-module.t/run.t @@ -33,67 +33,67 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.boxSizing(`borderBox); - CssJs.boxSizing(`contentBox); - CssJs.outlineStyle(`auto); - CssJs.outlineStyle(`none); - CssJs.outlineStyle(`dotted); - CssJs.outlineStyle(`dashed); - CssJs.outlineStyle(`solid); - CssJs.outlineStyle(`double); - CssJs.outlineStyle(`groove); - CssJs.outlineStyle(`ridge); - CssJs.outlineStyle(`inset); - CssJs.outlineStyle(`outset); - CssJs.outlineOffset(`pxFloat(-5.)); - CssJs.outlineOffset(`zero); - CssJs.outlineOffset(`pxFloat(5.)); - CssJs.unsafe({js|resize|js}, {js|none|js}); - CssJs.unsafe({js|resize|js}, {js|both|js}); - CssJs.unsafe({js|resize|js}, {js|horizontal|js}); - CssJs.unsafe({js|resize|js}, {js|vertical|js}); - CssJs.textOverflow(`clip); - CssJs.textOverflow(`ellipsis); - CssJs.cursor(`default); - CssJs.cursor(`none); - CssJs.cursor(`contextMenu); - CssJs.cursor(`cell); - CssJs.cursor(`verticalText); - CssJs.cursor(`alias); - CssJs.cursor(`copy); - CssJs.cursor(`noDrop); - CssJs.cursor(`notAllowed); - CssJs.cursor(`grab); - CssJs.cursor(`grabbing); - CssJs.cursor(`ewResize); - CssJs.cursor(`nsResize); - CssJs.cursor(`neswResize); - CssJs.cursor(`nwseResize); - CssJs.cursor(`colResize); - CssJs.cursor(`rowResize); - CssJs.cursor(`allScroll); - CssJs.cursor(`zoomIn); - CssJs.cursor(`zoomOut); - CssJs.unsafe({js|caretColor|js}, {js|auto|js}); - CssJs.unsafe({js|caretColor|js}, {js|green|js}); - CssJs.unsafe({js|appearance|js}, {js|auto|js}); - CssJs.unsafe({js|appearance|js}, {js|none|js}); - CssJs.textOverflow(`clip); - CssJs.textOverflow(`ellipsis); - CssJs.textOverflow(`string({js|foo|js})); - CssJs.unsafe({js|textOverflow|js}, {js|clip clip|js}); - CssJs.unsafe({js|textOverflow|js}, {js|ellipsis clip|js}); - CssJs.unsafe({js|textOverflow|js}, {js|'foo' clip|js}); - CssJs.unsafe({js|textOverflow|js}, {js|clip ellipsis|js}); - CssJs.unsafe({js|textOverflow|js}, {js|ellipsis ellipsis|js}); - CssJs.unsafe({js|textOverflow|js}, {js|'foo' ellipsis|js}); - CssJs.unsafe({js|textOverflow|js}, {js|clip 'foo'|js}); - CssJs.unsafe({js|textOverflow|js}, {js|ellipsis 'foo'|js}); - CssJs.unsafe({js|textOverflow|js}, {js|'foo' 'foo'|js}); - CssJs.unsafe({js|userSelect|js}, {js|auto|js}); - CssJs.unsafe({js|userSelect|js}, {js|text|js}); - CssJs.unsafe({js|userSelect|js}, {js|none|js}); - CssJs.unsafe({js|userSelect|js}, {js|contain|js}); - CssJs.unsafe({js|userSelect|js}, {js|all|js}); + CSS.boxSizing(`borderBox); + CSS.boxSizing(`contentBox); + CSS.outlineStyle(`auto); + CSS.outlineStyle(`none); + CSS.outlineStyle(`dotted); + CSS.outlineStyle(`dashed); + CSS.outlineStyle(`solid); + CSS.outlineStyle(`double); + CSS.outlineStyle(`groove); + CSS.outlineStyle(`ridge); + CSS.outlineStyle(`inset); + CSS.outlineStyle(`outset); + CSS.outlineOffset(`pxFloat(-5.)); + CSS.outlineOffset(`zero); + CSS.outlineOffset(`pxFloat(5.)); + CSS.unsafe({js|resize|js}, {js|none|js}); + CSS.unsafe({js|resize|js}, {js|both|js}); + CSS.unsafe({js|resize|js}, {js|horizontal|js}); + CSS.unsafe({js|resize|js}, {js|vertical|js}); + CSS.textOverflow(`clip); + CSS.textOverflow(`ellipsis); + CSS.cursor(`default); + CSS.cursor(`none); + CSS.cursor(`contextMenu); + CSS.cursor(`cell); + CSS.cursor(`verticalText); + CSS.cursor(`alias); + CSS.cursor(`copy); + CSS.cursor(`noDrop); + CSS.cursor(`notAllowed); + CSS.cursor(`grab); + CSS.cursor(`grabbing); + CSS.cursor(`ewResize); + CSS.cursor(`nsResize); + CSS.cursor(`neswResize); + CSS.cursor(`nwseResize); + CSS.cursor(`colResize); + CSS.cursor(`rowResize); + CSS.cursor(`allScroll); + CSS.cursor(`zoomIn); + CSS.cursor(`zoomOut); + CSS.unsafe({js|caretColor|js}, {js|auto|js}); + CSS.unsafe({js|caretColor|js}, {js|green|js}); + CSS.unsafe({js|appearance|js}, {js|auto|js}); + CSS.unsafe({js|appearance|js}, {js|none|js}); + CSS.textOverflow(`clip); + CSS.textOverflow(`ellipsis); + CSS.textOverflow(`string({js|foo|js})); + CSS.unsafe({js|textOverflow|js}, {js|clip clip|js}); + CSS.unsafe({js|textOverflow|js}, {js|ellipsis clip|js}); + CSS.unsafe({js|textOverflow|js}, {js|'foo' clip|js}); + CSS.unsafe({js|textOverflow|js}, {js|clip ellipsis|js}); + CSS.unsafe({js|textOverflow|js}, {js|ellipsis ellipsis|js}); + CSS.unsafe({js|textOverflow|js}, {js|'foo' ellipsis|js}); + CSS.unsafe({js|textOverflow|js}, {js|clip 'foo'|js}); + CSS.unsafe({js|textOverflow|js}, {js|ellipsis 'foo'|js}); + CSS.unsafe({js|textOverflow|js}, {js|'foo' 'foo'|js}); + CSS.userSelect(`auto); + CSS.userSelect(`text); + CSS.userSelect(`none); + CSS.userSelect(`contain); + CSS.userSelect(`all); $ dune build diff --git a/packages/ppx/test/css-support/box-alignment-module.t/run.t b/packages/ppx/test/css-support/box-alignment-module.t/run.t index b4dca48a..5f4086ee 100644 --- a/packages/ppx/test/css-support/box-alignment-module.t/run.t +++ b/packages/ppx/test/css-support/box-alignment-module.t/run.t @@ -32,173 +32,173 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.alignSelf(`auto); - CssJs.alignSelf(`normal); - CssJs.alignSelf(`stretch); - CssJs.alignSelf(`baseline); - CssJs.alignSelf(`firstBaseline); - CssJs.alignSelf(`lastBaseline); - CssJs.alignSelf(`center); - CssJs.alignSelf(`start); - CssJs.alignSelf(`end_); - CssJs.alignSelf(`selfStart); - CssJs.alignSelf(`selfEnd); - CssJs.alignSelf(`unsafe(`start)); - CssJs.alignSelf(`safe(`start)); - CssJs.alignItems(`normal); - CssJs.alignItems(`stretch); - CssJs.alignItems(`baseline); - CssJs.alignItems(`firstBaseline); - CssJs.alignItems(`lastBaseline); - CssJs.alignItems(`center); - CssJs.alignItems(`start); - CssJs.alignItems(`end_); - CssJs.alignItems(`selfStart); - CssJs.alignItems(`selfEnd); - CssJs.alignItems(`unsafe(`start)); - CssJs.alignItems(`safe(`start)); - CssJs.alignContent(`normal); - CssJs.alignContent(`baseline); - CssJs.alignContent(`firstBaseline); - CssJs.alignContent(`lastBaseline); - CssJs.alignContent(`spaceBetween); - CssJs.alignContent(`spaceAround); - CssJs.alignContent(`spaceEvenly); - CssJs.alignContent(`stretch); - CssJs.alignContent(`center); - CssJs.alignContent(`start); - CssJs.alignContent(`end_); - CssJs.alignContent(`flexStart); - CssJs.alignContent(`flexEnd); - CssJs.alignContent(`unsafe(`start)); - CssJs.alignContent(`safe(`start)); - CssJs.justifySelf(`auto); - CssJs.justifySelf(`normal); - CssJs.justifySelf(`stretch); - CssJs.justifySelf(`baseline); - CssJs.justifySelf(`firstBaseline); - CssJs.justifySelf(`lastBaseline); - CssJs.justifySelf(`center); - CssJs.justifySelf(`start); - CssJs.justifySelf(`end_); - CssJs.justifySelf(`selfStart); - CssJs.justifySelf(`selfEnd); - CssJs.justifySelf(`unsafe(`start)); - CssJs.justifySelf(`safe(`start)); - CssJs.justifySelf(`left); - CssJs.justifySelf(`right); - CssJs.justifySelf(`safe(`right)); - CssJs.justifyItems(`normal); - CssJs.justifyItems(`stretch); - CssJs.justifyItems(`baseline); - CssJs.justifyItems(`firstBaseline); - CssJs.justifyItems(`lastBaseline); - CssJs.justifyItems(`center); - CssJs.justifyItems(`start); - CssJs.justifyItems(`end_); - CssJs.justifyItems(`selfStart); - CssJs.justifyItems(`selfEnd); - CssJs.justifyItems(`unsafe(`start)); - CssJs.justifyItems(`safe(`start)); - CssJs.justifyItems(`left); - CssJs.justifyItems(`right); - CssJs.justifyItems(`safe(`right)); - CssJs.justifyItems(`legacy); - CssJs.justifyItems(`legacyLeft); - CssJs.justifyItems(`legacyRight); - CssJs.justifyItems(`legacyCenter); - CssJs.justifyContent(`normal); - CssJs.justifyContent(`spaceBetween); - CssJs.justifyContent(`spaceAround); - CssJs.justifyContent(`spaceEvenly); - CssJs.justifyContent(`stretch); - CssJs.justifyContent(`center); - CssJs.justifyContent(`start); - CssJs.justifyContent(`end_); - CssJs.justifyContent(`flexStart); - CssJs.justifyContent(`flexEnd); - CssJs.justifyContent(`unsafe(`start)); - CssJs.justifyContent(`safe(`start)); - CssJs.justifyContent(`left); - CssJs.justifyContent(`right); - CssJs.justifyContent(`safe(`right)); - CssJs.unsafe({js|placeContent|js}, {js|normal|js}); - CssJs.unsafe({js|placeContent|js}, {js|baseline|js}); - CssJs.unsafe({js|placeContent|js}, {js|first baseline|js}); - CssJs.unsafe({js|placeContent|js}, {js|last baseline|js}); - CssJs.unsafe({js|placeContent|js}, {js|space-between|js}); - CssJs.unsafe({js|placeContent|js}, {js|space-around|js}); - CssJs.unsafe({js|placeContent|js}, {js|space-evenly|js}); - CssJs.unsafe({js|placeContent|js}, {js|stretch|js}); - CssJs.unsafe({js|placeContent|js}, {js|center|js}); - CssJs.unsafe({js|placeContent|js}, {js|start|js}); - CssJs.unsafe({js|placeContent|js}, {js|end|js}); - CssJs.unsafe({js|placeContent|js}, {js|flex-start|js}); - CssJs.unsafe({js|placeContent|js}, {js|flex-end|js}); - CssJs.unsafe({js|placeContent|js}, {js|unsafe start|js}); - CssJs.unsafe({js|placeContent|js}, {js|safe start|js}); - CssJs.unsafe({js|placeContent|js}, {js|normal normal|js}); - CssJs.unsafe({js|placeContent|js}, {js|baseline normal|js}); - CssJs.unsafe({js|placeContent|js}, {js|first baseline normal|js}); - CssJs.unsafe({js|placeContent|js}, {js|space-between normal|js}); - CssJs.unsafe({js|placeContent|js}, {js|center normal|js}); - CssJs.unsafe({js|placeContent|js}, {js|unsafe start normal|js}); - CssJs.unsafe({js|placeContent|js}, {js|normal stretch|js}); - CssJs.unsafe({js|placeContent|js}, {js|baseline stretch|js}); - CssJs.unsafe({js|placeContent|js}, {js|first baseline stretch|js}); - CssJs.unsafe({js|placeContent|js}, {js|center stretch|js}); - CssJs.unsafe({js|placeContent|js}, {js|unsafe start stretch|js}); - CssJs.unsafe({js|placeContent|js}, {js|normal safe right|js}); - CssJs.unsafe({js|placeContent|js}, {js|baseline safe right|js}); - CssJs.unsafe({js|placeContent|js}, {js|first baseline safe right|js}); - CssJs.unsafe({js|placeContent|js}, {js|space-between safe right|js}); - CssJs.unsafe({js|placeContent|js}, {js|center safe right|js}); - CssJs.unsafe({js|placeContent|js}, {js|unsafe start safe right|js}); - CssJs.unsafe({js|placeItems|js}, {js|normal|js}); - CssJs.unsafe({js|placeItems|js}, {js|stretch|js}); - CssJs.unsafe({js|placeItems|js}, {js|baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|first baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|last baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|center|js}); - CssJs.unsafe({js|placeItems|js}, {js|start|js}); - CssJs.unsafe({js|placeItems|js}, {js|end|js}); - CssJs.unsafe({js|placeItems|js}, {js|self-start|js}); - CssJs.unsafe({js|placeItems|js}, {js|self-end|js}); - CssJs.unsafe({js|placeItems|js}, {js|unsafe start|js}); - CssJs.unsafe({js|placeItems|js}, {js|safe start|js}); - CssJs.unsafe({js|placeItems|js}, {js|normal normal|js}); - CssJs.unsafe({js|placeItems|js}, {js|stretch normal|js}); - CssJs.unsafe({js|placeItems|js}, {js|baseline normal|js}); - CssJs.unsafe({js|placeItems|js}, {js|first baseline normal|js}); - CssJs.unsafe({js|placeItems|js}, {js|self-start normal|js}); - CssJs.unsafe({js|placeItems|js}, {js|unsafe start normal|js}); - CssJs.unsafe({js|placeItems|js}, {js|normal stretch|js}); - CssJs.unsafe({js|placeItems|js}, {js|stretch stretch|js}); - CssJs.unsafe({js|placeItems|js}, {js|baseline stretch|js}); - CssJs.unsafe({js|placeItems|js}, {js|first baseline stretch|js}); - CssJs.unsafe({js|placeItems|js}, {js|self-start stretch|js}); - CssJs.unsafe({js|placeItems|js}, {js|unsafe start stretch|js}); - CssJs.unsafe({js|placeItems|js}, {js|normal last baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|stretch last baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|baseline last baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|first baseline last baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|self-start last baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|unsafe start last baseline|js}); - CssJs.unsafe({js|placeItems|js}, {js|normal legacy left|js}); - CssJs.unsafe({js|placeItems|js}, {js|stretch legacy left|js}); - CssJs.unsafe({js|placeItems|js}, {js|baseline legacy left|js}); - CssJs.unsafe({js|placeItems|js}, {js|first baseline legacy left|js}); - CssJs.unsafe({js|placeItems|js}, {js|self-start legacy left|js}); - CssJs.unsafe({js|placeItems|js}, {js|unsafe start legacy left|js}); - CssJs.gap2(~rowGap=`zero, ~columnGap=`zero); - CssJs.gap2(~rowGap=`zero, ~columnGap=`em(1.)); - CssJs.gap(`em(1.)); - CssJs.gap2(~rowGap=`em(1.), ~columnGap=`em(1.)); - CssJs.columnGap(`zero); - CssJs.columnGap(`em(1.)); - CssJs.columnGap(`normal); - CssJs.rowGap(`zero); - CssJs.rowGap(`em(1.)); - CssJs.unsafe({js|marginTrim|js}, {js|none|js}); - CssJs.unsafe({js|marginTrim|js}, {js|in-flow|js}); - CssJs.unsafe({js|marginTrim|js}, {js|all|js}); + CSS.alignSelf(`auto); + CSS.alignSelf(`normal); + CSS.alignSelf(`stretch); + CSS.alignSelf(`baseline); + CSS.alignSelf(`firstBaseline); + CSS.alignSelf(`lastBaseline); + CSS.alignSelf(`center); + CSS.alignSelf(`start); + CSS.alignSelf(`end_); + CSS.alignSelf(`selfStart); + CSS.alignSelf(`selfEnd); + CSS.alignSelf(`unsafe(`start)); + CSS.alignSelf(`safe(`start)); + CSS.alignItems(`normal); + CSS.alignItems(`stretch); + CSS.alignItems(`baseline); + CSS.alignItems(`firstBaseline); + CSS.alignItems(`lastBaseline); + CSS.alignItems(`center); + CSS.alignItems(`start); + CSS.alignItems(`end_); + CSS.alignItems(`selfStart); + CSS.alignItems(`selfEnd); + CSS.alignItems(`unsafe(`start)); + CSS.alignItems(`safe(`start)); + CSS.alignContent(`normal); + CSS.alignContent(`baseline); + CSS.alignContent(`firstBaseline); + CSS.alignContent(`lastBaseline); + CSS.alignContent(`spaceBetween); + CSS.alignContent(`spaceAround); + CSS.alignContent(`spaceEvenly); + CSS.alignContent(`stretch); + CSS.alignContent(`center); + CSS.alignContent(`start); + CSS.alignContent(`end_); + CSS.alignContent(`flexStart); + CSS.alignContent(`flexEnd); + CSS.alignContent(`unsafe(`start)); + CSS.alignContent(`safe(`start)); + CSS.justifySelf(`auto); + CSS.justifySelf(`normal); + CSS.justifySelf(`stretch); + CSS.justifySelf(`baseline); + CSS.justifySelf(`firstBaseline); + CSS.justifySelf(`lastBaseline); + CSS.justifySelf(`center); + CSS.justifySelf(`start); + CSS.justifySelf(`end_); + CSS.justifySelf(`selfStart); + CSS.justifySelf(`selfEnd); + CSS.justifySelf(`unsafe(`start)); + CSS.justifySelf(`safe(`start)); + CSS.justifySelf(`left); + CSS.justifySelf(`right); + CSS.justifySelf(`safe(`right)); + CSS.justifyItems(`normal); + CSS.justifyItems(`stretch); + CSS.justifyItems(`baseline); + CSS.justifyItems(`firstBaseline); + CSS.justifyItems(`lastBaseline); + CSS.justifyItems(`center); + CSS.justifyItems(`start); + CSS.justifyItems(`end_); + CSS.justifyItems(`selfStart); + CSS.justifyItems(`selfEnd); + CSS.justifyItems(`unsafe(`start)); + CSS.justifyItems(`safe(`start)); + CSS.justifyItems(`left); + CSS.justifyItems(`right); + CSS.justifyItems(`safe(`right)); + CSS.justifyItems(`legacy); + CSS.justifyItems(`legacyLeft); + CSS.justifyItems(`legacyRight); + CSS.justifyItems(`legacyCenter); + CSS.justifyContent(`normal); + CSS.justifyContent(`spaceBetween); + CSS.justifyContent(`spaceAround); + CSS.justifyContent(`spaceEvenly); + CSS.justifyContent(`stretch); + CSS.justifyContent(`center); + CSS.justifyContent(`start); + CSS.justifyContent(`end_); + CSS.justifyContent(`flexStart); + CSS.justifyContent(`flexEnd); + CSS.justifyContent(`unsafe(`start)); + CSS.justifyContent(`safe(`start)); + CSS.justifyContent(`left); + CSS.justifyContent(`right); + CSS.justifyContent(`safe(`right)); + CSS.unsafe({js|placeContent|js}, {js|normal|js}); + CSS.unsafe({js|placeContent|js}, {js|baseline|js}); + CSS.unsafe({js|placeContent|js}, {js|first baseline|js}); + CSS.unsafe({js|placeContent|js}, {js|last baseline|js}); + CSS.unsafe({js|placeContent|js}, {js|space-between|js}); + CSS.unsafe({js|placeContent|js}, {js|space-around|js}); + CSS.unsafe({js|placeContent|js}, {js|space-evenly|js}); + CSS.unsafe({js|placeContent|js}, {js|stretch|js}); + CSS.unsafe({js|placeContent|js}, {js|center|js}); + CSS.unsafe({js|placeContent|js}, {js|start|js}); + CSS.unsafe({js|placeContent|js}, {js|end|js}); + CSS.unsafe({js|placeContent|js}, {js|flex-start|js}); + CSS.unsafe({js|placeContent|js}, {js|flex-end|js}); + CSS.unsafe({js|placeContent|js}, {js|unsafe start|js}); + CSS.unsafe({js|placeContent|js}, {js|safe start|js}); + CSS.unsafe({js|placeContent|js}, {js|normal normal|js}); + CSS.unsafe({js|placeContent|js}, {js|baseline normal|js}); + CSS.unsafe({js|placeContent|js}, {js|first baseline normal|js}); + CSS.unsafe({js|placeContent|js}, {js|space-between normal|js}); + CSS.unsafe({js|placeContent|js}, {js|center normal|js}); + CSS.unsafe({js|placeContent|js}, {js|unsafe start normal|js}); + CSS.unsafe({js|placeContent|js}, {js|normal stretch|js}); + CSS.unsafe({js|placeContent|js}, {js|baseline stretch|js}); + CSS.unsafe({js|placeContent|js}, {js|first baseline stretch|js}); + CSS.unsafe({js|placeContent|js}, {js|center stretch|js}); + CSS.unsafe({js|placeContent|js}, {js|unsafe start stretch|js}); + CSS.unsafe({js|placeContent|js}, {js|normal safe right|js}); + CSS.unsafe({js|placeContent|js}, {js|baseline safe right|js}); + CSS.unsafe({js|placeContent|js}, {js|first baseline safe right|js}); + CSS.unsafe({js|placeContent|js}, {js|space-between safe right|js}); + CSS.unsafe({js|placeContent|js}, {js|center safe right|js}); + CSS.unsafe({js|placeContent|js}, {js|unsafe start safe right|js}); + CSS.unsafe({js|placeItems|js}, {js|normal|js}); + CSS.unsafe({js|placeItems|js}, {js|stretch|js}); + CSS.unsafe({js|placeItems|js}, {js|baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|first baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|last baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|center|js}); + CSS.unsafe({js|placeItems|js}, {js|start|js}); + CSS.unsafe({js|placeItems|js}, {js|end|js}); + CSS.unsafe({js|placeItems|js}, {js|self-start|js}); + CSS.unsafe({js|placeItems|js}, {js|self-end|js}); + CSS.unsafe({js|placeItems|js}, {js|unsafe start|js}); + CSS.unsafe({js|placeItems|js}, {js|safe start|js}); + CSS.unsafe({js|placeItems|js}, {js|normal normal|js}); + CSS.unsafe({js|placeItems|js}, {js|stretch normal|js}); + CSS.unsafe({js|placeItems|js}, {js|baseline normal|js}); + CSS.unsafe({js|placeItems|js}, {js|first baseline normal|js}); + CSS.unsafe({js|placeItems|js}, {js|self-start normal|js}); + CSS.unsafe({js|placeItems|js}, {js|unsafe start normal|js}); + CSS.unsafe({js|placeItems|js}, {js|normal stretch|js}); + CSS.unsafe({js|placeItems|js}, {js|stretch stretch|js}); + CSS.unsafe({js|placeItems|js}, {js|baseline stretch|js}); + CSS.unsafe({js|placeItems|js}, {js|first baseline stretch|js}); + CSS.unsafe({js|placeItems|js}, {js|self-start stretch|js}); + CSS.unsafe({js|placeItems|js}, {js|unsafe start stretch|js}); + CSS.unsafe({js|placeItems|js}, {js|normal last baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|stretch last baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|baseline last baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|first baseline last baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|self-start last baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|unsafe start last baseline|js}); + CSS.unsafe({js|placeItems|js}, {js|normal legacy left|js}); + CSS.unsafe({js|placeItems|js}, {js|stretch legacy left|js}); + CSS.unsafe({js|placeItems|js}, {js|baseline legacy left|js}); + CSS.unsafe({js|placeItems|js}, {js|first baseline legacy left|js}); + CSS.unsafe({js|placeItems|js}, {js|self-start legacy left|js}); + CSS.unsafe({js|placeItems|js}, {js|unsafe start legacy left|js}); + CSS.gap2(~rowGap=`zero, ~columnGap=`zero); + CSS.gap2(~rowGap=`zero, ~columnGap=`em(1.)); + CSS.gap(`em(1.)); + CSS.gap2(~rowGap=`em(1.), ~columnGap=`em(1.)); + CSS.columnGap(`zero); + CSS.columnGap(`em(1.)); + CSS.columnGap(`normal); + CSS.rowGap(`zero); + CSS.rowGap(`em(1.)); + CSS.unsafe({js|marginTrim|js}, {js|none|js}); + CSS.unsafe({js|marginTrim|js}, {js|in-flow|js}); + CSS.unsafe({js|marginTrim|js}, {js|all|js}); diff --git a/packages/ppx/test/css-support/box-sizing-module.t/run.t b/packages/ppx/test/css-support/box-sizing-module.t/run.t index 4d2e1e78..280f5b3e 100644 --- a/packages/ppx/test/css-support/box-sizing-module.t/run.t +++ b/packages/ppx/test/css-support/box-sizing-module.t/run.t @@ -33,30 +33,30 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.width(`maxContent); - CssJs.width(`minContent); - CssJs.unsafe({js|width|js}, {js|fit-content(10%)|js}); - CssJs.minWidth(`maxContent); - CssJs.minWidth(`minContent); - CssJs.unsafe({js|minWidth|js}, {js|fit-content(10%)|js}); - CssJs.maxWidth(`maxContent); - CssJs.maxWidth(`minContent); - CssJs.unsafe({js|maxWidth|js}, {js|fit-content(10%)|js}); - CssJs.height(`maxContent); - CssJs.height(`minContent); - CssJs.unsafe({js|height|js}, {js|fit-content(10%)|js}); - CssJs.minHeight(`maxContent); - CssJs.minHeight(`minContent); - CssJs.unsafe({js|minHeight|js}, {js|fit-content(10%)|js}); - CssJs.maxHeight(`maxContent); - CssJs.maxHeight(`minContent); - CssJs.unsafe({js|maxHeight|js}, {js|fit-content(10%)|js}); - CssJs.aspectRatio(`auto); - CssJs.aspectRatio(`num(2.)); - CssJs.aspectRatio(`ratio((16, 9))); - CssJs.unsafe({js|width|js}, {js|fit-content|js}); - CssJs.unsafe({js|minWidth|js}, {js|fit-content|js}); - CssJs.unsafe({js|maxWidth|js}, {js|fit-content|js}); - CssJs.unsafe({js|height|js}, {js|fit-content|js}); - CssJs.unsafe({js|minHeight|js}, {js|fit-content|js}); - CssJs.unsafe({js|maxHeight|js}, {js|fit-content|js}); + CSS.width(`maxContent); + CSS.width(`minContent); + CSS.unsafe({js|width|js}, {js|fit-content(10%)|js}); + CSS.minWidth(`maxContent); + CSS.minWidth(`minContent); + CSS.unsafe({js|minWidth|js}, {js|fit-content(10%)|js}); + CSS.maxWidth(`maxContent); + CSS.maxWidth(`minContent); + CSS.unsafe({js|maxWidth|js}, {js|fit-content(10%)|js}); + CSS.height(`maxContent); + CSS.height(`minContent); + CSS.unsafe({js|height|js}, {js|fit-content(10%)|js}); + CSS.minHeight(`maxContent); + CSS.minHeight(`minContent); + CSS.unsafe({js|minHeight|js}, {js|fit-content(10%)|js}); + CSS.maxHeight(`maxContent); + CSS.maxHeight(`minContent); + CSS.unsafe({js|maxHeight|js}, {js|fit-content(10%)|js}); + CSS.aspectRatio(`auto); + CSS.aspectRatio(`num(2.)); + CSS.aspectRatio(`ratio((16, 9))); + CSS.unsafe({js|width|js}, {js|fit-content|js}); + CSS.unsafe({js|minWidth|js}, {js|fit-content|js}); + CSS.unsafe({js|maxWidth|js}, {js|fit-content|js}); + CSS.unsafe({js|height|js}, {js|fit-content|js}); + CSS.unsafe({js|minHeight|js}, {js|fit-content|js}); + CSS.unsafe({js|maxHeight|js}, {js|fit-content|js}); diff --git a/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t b/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t index 7ef7baa8..056dabd9 100644 --- a/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t +++ b/packages/ppx/test/css-support/cascading-and-inheritance.t/run.t @@ -33,7 +33,7 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|color|js}, {js|unset|js}); - CssJs.unsafe({js|fontWeight|js}, {js|unset|js}); - CssJs.unsafe({js|backgroundImage|js}, {js|unset|js}); - CssJs.unsafe({js|width|js}, {js|unset|js}); + CSS.unsafe({js|color|js}, {js|unset|js}); + CSS.unsafe({js|fontWeight|js}, {js|unset|js}); + CSS.unsafe({js|backgroundImage|js}, {js|unset|js}); + CSS.unsafe({js|width|js}, {js|unset|js}); diff --git a/packages/ppx/test/css-support/color-adjustments-module.t/run.t b/packages/ppx/test/css-support/color-adjustments-module.t/run.t index ff7cf9d1..78c48bd2 100644 --- a/packages/ppx/test/css-support/color-adjustments-module.t/run.t +++ b/packages/ppx/test/css-support/color-adjustments-module.t/run.t @@ -33,21 +33,21 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|colorAdjust|js}, {js|economy|js}); - CssJs.unsafe({js|colorAdjust|js}, {js|exact|js}); - CssJs.unsafe({js|forcedColorAdjust|js}, {js|auto|js}); - CssJs.unsafe({js|forcedColorAdjust|js}, {js|none|js}); - CssJs.unsafe({js|forcedColorAdjust|js}, {js|preserve-parent-color|js}); - CssJs.unsafe({js|colorScheme|js}, {js|normal|js}); - CssJs.unsafe({js|colorScheme|js}, {js|light|js}); - CssJs.unsafe({js|colorScheme|js}, {js|dark|js}); - CssJs.unsafe({js|colorScheme|js}, {js|light dark|js}); - CssJs.unsafe({js|colorScheme|js}, {js|dark light|js}); - CssJs.unsafe({js|colorScheme|js}, {js|only light|js}); - CssJs.unsafe({js|colorScheme|js}, {js|light only|js}); - CssJs.unsafe({js|colorScheme|js}, {js|light light|js}); - CssJs.unsafe({js|colorScheme|js}, {js|dark dark|js}); - CssJs.unsafe({js|colorScheme|js}, {js|light purple|js}); - CssJs.unsafe({js|colorScheme|js}, {js|purple dark interesting|js}); - CssJs.unsafe({js|colorScheme|js}, {js|none|js}); - CssJs.unsafe({js|colorScheme|js}, {js|light none|js}); + CSS.unsafe({js|colorAdjust|js}, {js|economy|js}); + CSS.unsafe({js|colorAdjust|js}, {js|exact|js}); + CSS.unsafe({js|forcedColorAdjust|js}, {js|auto|js}); + CSS.unsafe({js|forcedColorAdjust|js}, {js|none|js}); + CSS.unsafe({js|forcedColorAdjust|js}, {js|preserve-parent-color|js}); + CSS.unsafe({js|colorScheme|js}, {js|normal|js}); + CSS.unsafe({js|colorScheme|js}, {js|light|js}); + CSS.unsafe({js|colorScheme|js}, {js|dark|js}); + CSS.unsafe({js|colorScheme|js}, {js|light dark|js}); + CSS.unsafe({js|colorScheme|js}, {js|dark light|js}); + CSS.unsafe({js|colorScheme|js}, {js|only light|js}); + CSS.unsafe({js|colorScheme|js}, {js|light only|js}); + CSS.unsafe({js|colorScheme|js}, {js|light light|js}); + CSS.unsafe({js|colorScheme|js}, {js|dark dark|js}); + CSS.unsafe({js|colorScheme|js}, {js|light purple|js}); + CSS.unsafe({js|colorScheme|js}, {js|purple dark interesting|js}); + CSS.unsafe({js|colorScheme|js}, {js|none|js}); + CSS.unsafe({js|colorScheme|js}, {js|light none|js}); diff --git a/packages/ppx/test/css-support/color-module.t/run.t b/packages/ppx/test/css-support/color-module.t/run.t index 677193c3..39894c1a 100644 --- a/packages/ppx/test/css-support/color-module.t/run.t +++ b/packages/ppx/test/css-support/color-module.t/run.t @@ -33,130 +33,130 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.color(`rgba((0, 0, 0, `num(0.5)))); - CssJs.color(`hex({js|F06|js})); - CssJs.color(`hex({js|FF0066|js})); - CssJs.unsafe({js|color|js}, {js|hsl(0,0%,0%)|js}); - CssJs.unsafe({js|color|js}, {js|hsl(0,0%,0%,.5)|js}); - CssJs.color(`transparent); - CssJs.color(`currentColor); - CssJs.backgroundColor(`rgba((0, 0, 0, `num(0.5)))); - CssJs.backgroundColor(`hex({js|F06|js})); - CssJs.backgroundColor(`hex({js|FF0066|js})); - CssJs.unsafe({js|backgroundColor|js}, {js|hsl(0,0%,0%)|js}); - CssJs.unsafe({js|backgroundColor|js}, {js|hsl(0,0%,0%,.5)|js}); - CssJs.backgroundColor(`transparent); - CssJs.backgroundColor(`currentColor); - CssJs.borderColor(`rgba((0, 0, 0, `num(0.5)))); - CssJs.borderColor(`hex({js|F06|js})); - CssJs.borderColor(`hex({js|FF0066|js})); - CssJs.unsafe({js|borderColor|js}, {js|hsl(0,0%,0%)|js}); - CssJs.unsafe({js|borderColor|js}, {js|hsl(0,0%,0%,.5)|js}); - CssJs.borderColor(`transparent); - CssJs.borderColor(`currentColor); - CssJs.textDecorationColor(`rgba((0, 0, 0, `num(0.5)))); - CssJs.textDecorationColor(`hex({js|F06|js})); - CssJs.textDecorationColor(`hex({js|FF0066|js})); - CssJs.unsafe({js|textDecorationColor|js}, {js|hsl(0,0%,0%)|js}); - CssJs.unsafe({js|textDecorationColor|js}, {js|hsl(0,0%,0%,.5)|js}); - CssJs.textDecorationColor(`transparent); - CssJs.textDecorationColor(`currentColor); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgba(0,0,0,.5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|#F06|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|#FF0066|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|hsl(0,0%,0%)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|hsl(0,0%,0%,.5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|transparent|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|currentColor|js}); - CssJs.color(`rgb((0, 51, 178))); - CssJs.color(`rgb((0, 64, 185))); - CssJs.color(`hsl((`deg(0.), `percent(0.), `percent(0.)))); - CssJs.color(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.color(`rgba((0, 51, 178, `num(0.5)))); - CssJs.color(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.color(`rgba((0, 64, 185, `num(0.5)))); - CssJs.color(`hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5)))); - CssJs.color(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.color(`rgba((0, 51, 178, `num(0.5)))); - CssJs.color(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.color(`rgba((0, 64, 185, `num(0.5)))); - CssJs.color(`hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5)))); - CssJs.color(`hex({js|000F|js})); - CssJs.color(`hex({js|000000FF|js})); - CssJs.color(CssJs.rebeccapurple); - CssJs.backgroundColor(`rgb((0, 51, 178))); - CssJs.backgroundColor(`rgb((0, 64, 185))); - CssJs.backgroundColor(`hsl((`deg(0.), `percent(0.), `percent(0.)))); - CssJs.backgroundColor(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.backgroundColor(`rgba((0, 51, 178, `num(0.5)))); - CssJs.backgroundColor(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.backgroundColor(`rgba((0, 64, 185, `num(0.5)))); - CssJs.backgroundColor( + CSS.color(`rgba((0, 0, 0, `num(0.5)))); + CSS.color(`hex({js|F06|js})); + CSS.color(`hex({js|FF0066|js})); + CSS.unsafe({js|color|js}, {js|hsl(0,0%,0%)|js}); + CSS.unsafe({js|color|js}, {js|hsl(0,0%,0%,.5)|js}); + CSS.color(`transparent); + CSS.color(`currentColor); + CSS.backgroundColor(`rgba((0, 0, 0, `num(0.5)))); + CSS.backgroundColor(`hex({js|F06|js})); + CSS.backgroundColor(`hex({js|FF0066|js})); + CSS.unsafe({js|backgroundColor|js}, {js|hsl(0,0%,0%)|js}); + CSS.unsafe({js|backgroundColor|js}, {js|hsl(0,0%,0%,.5)|js}); + CSS.backgroundColor(`transparent); + CSS.backgroundColor(`currentColor); + CSS.borderColor(`rgba((0, 0, 0, `num(0.5)))); + CSS.borderColor(`hex({js|F06|js})); + CSS.borderColor(`hex({js|FF0066|js})); + CSS.unsafe({js|borderColor|js}, {js|hsl(0,0%,0%)|js}); + CSS.unsafe({js|borderColor|js}, {js|hsl(0,0%,0%,.5)|js}); + CSS.borderColor(`transparent); + CSS.borderColor(`currentColor); + CSS.textDecorationColor(`rgba((0, 0, 0, `num(0.5)))); + CSS.textDecorationColor(`hex({js|F06|js})); + CSS.textDecorationColor(`hex({js|FF0066|js})); + CSS.unsafe({js|textDecorationColor|js}, {js|hsl(0,0%,0%)|js}); + CSS.unsafe({js|textDecorationColor|js}, {js|hsl(0,0%,0%,.5)|js}); + CSS.textDecorationColor(`transparent); + CSS.textDecorationColor(`currentColor); + CSS.unsafe({js|columnRuleColor|js}, {js|rgba(0,0,0,.5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|#F06|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|#FF0066|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|hsl(0,0%,0%)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|hsl(0,0%,0%,.5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|transparent|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|currentColor|js}); + CSS.color(`rgb((0, 51, 178))); + CSS.color(`rgb((0, 64, 185))); + CSS.color(`hsl((`deg(0.), `percent(0.), `percent(0.)))); + CSS.color(`rgba((0, 51, 178, `percent(0.5)))); + CSS.color(`rgba((0, 51, 178, `num(0.5)))); + CSS.color(`rgba((0, 64, 185, `percent(0.5)))); + CSS.color(`rgba((0, 64, 185, `num(0.5)))); + CSS.color(`hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5)))); + CSS.color(`rgba((0, 51, 178, `percent(0.5)))); + CSS.color(`rgba((0, 51, 178, `num(0.5)))); + CSS.color(`rgba((0, 64, 185, `percent(0.5)))); + CSS.color(`rgba((0, 64, 185, `num(0.5)))); + CSS.color(`hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5)))); + CSS.color(`hex({js|000F|js})); + CSS.color(`hex({js|000000FF|js})); + CSS.color(CSS.rebeccapurple); + CSS.backgroundColor(`rgb((0, 51, 178))); + CSS.backgroundColor(`rgb((0, 64, 185))); + CSS.backgroundColor(`hsl((`deg(0.), `percent(0.), `percent(0.)))); + CSS.backgroundColor(`rgba((0, 51, 178, `percent(0.5)))); + CSS.backgroundColor(`rgba((0, 51, 178, `num(0.5)))); + CSS.backgroundColor(`rgba((0, 64, 185, `percent(0.5)))); + CSS.backgroundColor(`rgba((0, 64, 185, `num(0.5)))); + CSS.backgroundColor( `hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5))), ); - CssJs.backgroundColor(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.backgroundColor(`rgba((0, 51, 178, `num(0.5)))); - CssJs.backgroundColor(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.backgroundColor(`rgba((0, 64, 185, `num(0.5)))); - CssJs.backgroundColor( + CSS.backgroundColor(`rgba((0, 51, 178, `percent(0.5)))); + CSS.backgroundColor(`rgba((0, 51, 178, `num(0.5)))); + CSS.backgroundColor(`rgba((0, 64, 185, `percent(0.5)))); + CSS.backgroundColor(`rgba((0, 64, 185, `num(0.5)))); + CSS.backgroundColor( `hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5))), ); - CssJs.backgroundColor(`hex({js|000F|js})); - CssJs.backgroundColor(`hex({js|000000FF|js})); - CssJs.backgroundColor(CssJs.rebeccapurple); - CssJs.borderColor(`rgb((0, 51, 178))); - CssJs.borderColor(`rgb((0, 64, 185))); - CssJs.borderColor(`hsl((`deg(0.), `percent(0.), `percent(0.)))); - CssJs.borderColor(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.borderColor(`rgba((0, 51, 178, `num(0.5)))); - CssJs.borderColor(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.borderColor(`rgba((0, 64, 185, `num(0.5)))); - CssJs.borderColor( + CSS.backgroundColor(`hex({js|000F|js})); + CSS.backgroundColor(`hex({js|000000FF|js})); + CSS.backgroundColor(CSS.rebeccapurple); + CSS.borderColor(`rgb((0, 51, 178))); + CSS.borderColor(`rgb((0, 64, 185))); + CSS.borderColor(`hsl((`deg(0.), `percent(0.), `percent(0.)))); + CSS.borderColor(`rgba((0, 51, 178, `percent(0.5)))); + CSS.borderColor(`rgba((0, 51, 178, `num(0.5)))); + CSS.borderColor(`rgba((0, 64, 185, `percent(0.5)))); + CSS.borderColor(`rgba((0, 64, 185, `num(0.5)))); + CSS.borderColor( `hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5))), ); - CssJs.borderColor(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.borderColor(`rgba((0, 51, 178, `num(0.5)))); - CssJs.borderColor(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.borderColor(`rgba((0, 64, 185, `num(0.5)))); - CssJs.borderColor( + CSS.borderColor(`rgba((0, 51, 178, `percent(0.5)))); + CSS.borderColor(`rgba((0, 51, 178, `num(0.5)))); + CSS.borderColor(`rgba((0, 64, 185, `percent(0.5)))); + CSS.borderColor(`rgba((0, 64, 185, `num(0.5)))); + CSS.borderColor( `hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5))), ); - CssJs.borderColor(`hex({js|000F|js})); - CssJs.borderColor(`hex({js|000000FF|js})); - CssJs.borderColor(CssJs.rebeccapurple); - CssJs.textDecorationColor(`rgb((0, 51, 178))); - CssJs.textDecorationColor(`rgb((0, 64, 185))); - CssJs.textDecorationColor(`hsl((`deg(0.), `percent(0.), `percent(0.)))); - CssJs.textDecorationColor(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.textDecorationColor(`rgba((0, 51, 178, `num(0.5)))); - CssJs.textDecorationColor(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.textDecorationColor(`rgba((0, 64, 185, `num(0.5)))); - CssJs.textDecorationColor( + CSS.borderColor(`hex({js|000F|js})); + CSS.borderColor(`hex({js|000000FF|js})); + CSS.borderColor(CSS.rebeccapurple); + CSS.textDecorationColor(`rgb((0, 51, 178))); + CSS.textDecorationColor(`rgb((0, 64, 185))); + CSS.textDecorationColor(`hsl((`deg(0.), `percent(0.), `percent(0.)))); + CSS.textDecorationColor(`rgba((0, 51, 178, `percent(0.5)))); + CSS.textDecorationColor(`rgba((0, 51, 178, `num(0.5)))); + CSS.textDecorationColor(`rgba((0, 64, 185, `percent(0.5)))); + CSS.textDecorationColor(`rgba((0, 64, 185, `num(0.5)))); + CSS.textDecorationColor( `hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5))), ); - CssJs.textDecorationColor(`rgba((0, 51, 178, `percent(0.5)))); - CssJs.textDecorationColor(`rgba((0, 51, 178, `num(0.5)))); - CssJs.textDecorationColor(`rgba((0, 64, 185, `percent(0.5)))); - CssJs.textDecorationColor(`rgba((0, 64, 185, `num(0.5)))); - CssJs.textDecorationColor( + CSS.textDecorationColor(`rgba((0, 51, 178, `percent(0.5)))); + CSS.textDecorationColor(`rgba((0, 51, 178, `num(0.5)))); + CSS.textDecorationColor(`rgba((0, 64, 185, `percent(0.5)))); + CSS.textDecorationColor(`rgba((0, 64, 185, `num(0.5)))); + CSS.textDecorationColor( `hsla((`deg(0.), `percent(0.), `percent(0.), `num(0.5))), ); - CssJs.textDecorationColor(`hex({js|000F|js})); - CssJs.textDecorationColor(`hex({js|000000FF|js})); - CssJs.textDecorationColor(CssJs.rebeccapurple); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgb(0% 20% 70%)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgb(0 64 185)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|hsl(0 0% 0%)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgba(0% 20% 70% / 50%)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgba(0% 20% 70% / .5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgba(0 64 185 / 50%)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgba(0 64 185 / .5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|hsla(0 0% 0% /.5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgb(0% 20% 70% / 50%)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgb(0% 20% 70% / .5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgb(0 64 185 / 50%)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rgb(0 64 185 / .5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|hsl(0 0% 0% / .5)|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|#000F|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|#000000FF|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|rebeccapurple|js}); + CSS.textDecorationColor(`hex({js|000F|js})); + CSS.textDecorationColor(`hex({js|000000FF|js})); + CSS.textDecorationColor(CSS.rebeccapurple); + CSS.unsafe({js|columnRuleColor|js}, {js|rgb(0% 20% 70%)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgb(0 64 185)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|hsl(0 0% 0%)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgba(0% 20% 70% / 50%)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgba(0% 20% 70% / .5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgba(0 64 185 / 50%)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgba(0 64 185 / .5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|hsla(0 0% 0% /.5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgb(0% 20% 70% / 50%)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgb(0% 20% 70% / .5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgb(0 64 185 / 50%)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rgb(0 64 185 / .5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|hsl(0 0% 0% / .5)|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|#000F|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|#000000FF|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|rebeccapurple|js}); diff --git a/packages/ppx/test/css-support/compositingand-blending.t/run.t b/packages/ppx/test/css-support/compositingand-blending.t/run.t index 021a21fc..902d73c3 100644 --- a/packages/ppx/test/css-support/compositingand-blending.t/run.t +++ b/packages/ppx/test/css-support/compositingand-blending.t/run.t @@ -33,38 +33,38 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|mixBlendMode|js}, {js|normal|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|multiply|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|screen|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|overlay|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|darken|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|lighten|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|color-dodge|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|color-burn|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|hard-light|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|soft-light|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|difference|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|exclusion|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|hue|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|saturation|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|color|js}); - CssJs.unsafe({js|mixBlendMode|js}, {js|luminosity|js}); - CssJs.unsafe({js|isolation|js}, {js|auto|js}); - CssJs.unsafe({js|isolation|js}, {js|isolate|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|normal|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|multiply|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|screen|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|overlay|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|darken|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|lighten|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|color-dodge|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|color-burn|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|hard-light|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|soft-light|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|difference|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|exclusion|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|hue|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|saturation|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|color|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|luminosity|js}); - CssJs.unsafe({js|backgroundBlendMode|js}, {js|normal, multiply|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|normal|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|multiply|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|screen|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|overlay|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|darken|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|lighten|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|color-dodge|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|color-burn|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|hard-light|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|soft-light|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|difference|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|exclusion|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|hue|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|saturation|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|color|js}); + CSS.unsafe({js|mixBlendMode|js}, {js|luminosity|js}); + CSS.unsafe({js|isolation|js}, {js|auto|js}); + CSS.unsafe({js|isolation|js}, {js|isolate|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|normal|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|multiply|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|screen|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|overlay|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|darken|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|lighten|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|color-dodge|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|color-burn|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|hard-light|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|soft-light|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|difference|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|exclusion|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|hue|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|saturation|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|color|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|luminosity|js}); + CSS.unsafe({js|backgroundBlendMode|js}, {js|normal, multiply|js}); diff --git a/packages/ppx/test/css-support/containment-module.t/run.t b/packages/ppx/test/css-support/containment-module.t/run.t index 300d0e4e..34533335 100644 --- a/packages/ppx/test/css-support/containment-module.t/run.t +++ b/packages/ppx/test/css-support/containment-module.t/run.t @@ -33,29 +33,29 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|contain|js}, {js|none|js}); - CssJs.unsafe({js|contain|js}, {js|strict|js}); - CssJs.unsafe({js|contain|js}, {js|content|js}); - CssJs.unsafe({js|contain|js}, {js|size|js}); - CssJs.unsafe({js|contain|js}, {js|layout|js}); - CssJs.unsafe({js|contain|js}, {js|paint|js}); - CssJs.unsafe({js|contain|js}, {js|size layout|js}); - CssJs.unsafe({js|contain|js}, {js|size paint|js}); - CssJs.unsafe({js|contain|js}, {js|size layout paint|js}); - CssJs.style([|CssJs.width(`cqw(5.))|]); - CssJs.style([|CssJs.width(`cqh(5.))|]); - CssJs.style([|CssJs.width(`cqi(5.))|]); - CssJs.style([|CssJs.width(`cqb(5.))|]); - CssJs.style([|CssJs.width(`cqmin(5.))|]); - CssJs.style([|CssJs.width(`cqmax(5.))|]); - CssJs.style([|CssJs.unsafe({js|containerType|js}, {js|normal|js})|]); - CssJs.style([|CssJs.unsafe({js|containerType|js}, {js|size|js})|]); - CssJs.style([|CssJs.unsafe({js|containerType|js}, {js|inline-size|js})|]); - CssJs.style([|CssJs.unsafe({js|containerName|js}, {js|none|js})|]); - CssJs.style([|CssJs.unsafe({js|containerName|js}, {js|x|js})|]); - CssJs.style([|CssJs.unsafe({js|containerName|js}, {js|x y|js})|]); - CssJs.style([|CssJs.unsafe({js|container|js}, {js|none|js})|]); - CssJs.style([|CssJs.unsafe({js|container|js}, {js|x / normal|js})|]); - CssJs.style([|CssJs.unsafe({js|container|js}, {js|x / size|js})|]); - CssJs.style([|CssJs.unsafe({js|container|js}, {js|x / inline-size|js})|]); - CssJs.style([|CssJs.unsafe({js|container|js}, {js|x y / size|js})|]); + CSS.unsafe({js|contain|js}, {js|none|js}); + CSS.unsafe({js|contain|js}, {js|strict|js}); + CSS.unsafe({js|contain|js}, {js|content|js}); + CSS.unsafe({js|contain|js}, {js|size|js}); + CSS.unsafe({js|contain|js}, {js|layout|js}); + CSS.unsafe({js|contain|js}, {js|paint|js}); + CSS.unsafe({js|contain|js}, {js|size layout|js}); + CSS.unsafe({js|contain|js}, {js|size paint|js}); + CSS.unsafe({js|contain|js}, {js|size layout paint|js}); + CSS.style([|CSS.width(`cqw(5.))|]); + CSS.style([|CSS.width(`cqh(5.))|]); + CSS.style([|CSS.width(`cqi(5.))|]); + CSS.style([|CSS.width(`cqb(5.))|]); + CSS.style([|CSS.width(`cqmin(5.))|]); + CSS.style([|CSS.width(`cqmax(5.))|]); + CSS.style([|CSS.unsafe({js|containerType|js}, {js|normal|js})|]); + CSS.style([|CSS.unsafe({js|containerType|js}, {js|size|js})|]); + CSS.style([|CSS.unsafe({js|containerType|js}, {js|inline-size|js})|]); + CSS.style([|CSS.unsafe({js|containerName|js}, {js|none|js})|]); + CSS.style([|CSS.unsafe({js|containerName|js}, {js|x|js})|]); + CSS.style([|CSS.unsafe({js|containerName|js}, {js|x y|js})|]); + CSS.style([|CSS.unsafe({js|container|js}, {js|none|js})|]); + CSS.style([|CSS.unsafe({js|container|js}, {js|x / normal|js})|]); + CSS.style([|CSS.unsafe({js|container|js}, {js|x / size|js})|]); + CSS.style([|CSS.unsafe({js|container|js}, {js|x / inline-size|js})|]); + CSS.style([|CSS.unsafe({js|container|js}, {js|x y / size|js})|]); diff --git a/packages/ppx/test/css-support/content.t/run.t b/packages/ppx/test/css-support/content.t/run.t index 8b1e838a..bb8e430e 100644 --- a/packages/ppx/test/css-support/content.t/run.t +++ b/packages/ppx/test/css-support/content.t/run.t @@ -33,7 +33,7 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|quotes|js}, {js|auto|js}); - CssJs.unsafe({js|content|js}, {js|"\25BA" / ""|js}); - CssJs.unsafe({js|content|js}, {js|""|js}); - CssJs.unsafe({js|content|js}, {js|unset|js}); + CSS.unsafe({js|quotes|js}, {js|auto|js}); + CSS.unsafe({js|content|js}, {js|"\25BA" / ""|js}); + CSS.unsafe({js|content|js}, {js|""|js}); + CSS.unsafe({js|content|js}, {js|unset|js}); diff --git a/packages/ppx/test/css-support/display-module.t/run.t b/packages/ppx/test/css-support/display-module.t/run.t index 811c3f9c..5a0b2978 100644 --- a/packages/ppx/test/css-support/display-module.t/run.t +++ b/packages/ppx/test/css-support/display-module.t/run.t @@ -33,6 +33,6 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.display(`runIn); - CssJs.display(`flow); - CssJs.display(`flowRoot); + CSS.display(`runIn); + CSS.display(`flow); + CSS.display(`flowRoot); diff --git a/packages/ppx/test/css-support/easing-functions.t/run.t b/packages/ppx/test/css-support/easing-functions.t/run.t index 11ba8037..b8d1b069 100644 --- a/packages/ppx/test/css-support/easing-functions.t/run.t +++ b/packages/ppx/test/css-support/easing-functions.t/run.t @@ -33,7 +33,7 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|transitionTimingFunction|js}, {js|steps(2, jump-start)|js}); - CssJs.unsafe({js|transitionTimingFunction|js}, {js|steps(2, jump-end)|js}); - CssJs.unsafe({js|transitionTimingFunction|js}, {js|steps(1, jump-both)|js}); - CssJs.unsafe({js|transitionTimingFunction|js}, {js|steps(2, jump-none)|js}); + CSS.unsafe({js|transitionTimingFunction|js}, {js|steps(2, jump-start)|js}); + CSS.unsafe({js|transitionTimingFunction|js}, {js|steps(2, jump-end)|js}); + CSS.unsafe({js|transitionTimingFunction|js}, {js|steps(1, jump-both)|js}); + CSS.unsafe({js|transitionTimingFunction|js}, {js|steps(2, jump-none)|js}); diff --git a/packages/ppx/test/css-support/empty-declarations.t/run.t b/packages/ppx/test/css-support/empty-declarations.t/run.t index 634a16ff..68337a3b 100644 --- a/packages/ppx/test/css-support/empty-declarations.t/run.t +++ b/packages/ppx/test/css-support/empty-declarations.t/run.t @@ -31,14 +31,14 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.style([||]); - CssJs.style([||]); - CssJs.style([||]); - let _a = CssJs.style([|CssJs.label("_a")|]); - let _a = CssJs.style([|CssJs.label("_a")|]); - let _a = CssJs.style([|CssJs.label("_a")|]); - let _a = CssJs.style([|CssJs.label("_a")|]); - let _a = CssJs.style([|CssJs.label("_a")|]); - let _a = CssJs.style([|CssJs.label("_a")|]); + CSS.style([||]); + CSS.style([||]); + CSS.style([||]); + let _a = CSS.style([|CSS.label("_a")|]); + let _a = CSS.style([|CSS.label("_a")|]); + let _a = CSS.style([|CSS.label("_a")|]); + let _a = CSS.style([|CSS.label("_a")|]); + let _a = CSS.style([|CSS.label("_a")|]); + let _a = CSS.style([|CSS.label("_a")|]); $ dune build diff --git a/packages/ppx/test/css-support/filter-effects-module.t/input.re b/packages/ppx/test/css-support/filter-effects-module.t/input.re index 59bf119c..53500e64 100644 --- a/packages/ppx/test/css-support/filter-effects-module.t/input.re +++ b/packages/ppx/test/css-support/filter-effects-module.t/input.re @@ -1,4 +1,4 @@ -let color = CssJs.hex("333"); +let color = CSS.hex("333"); /* Filter Effects Module Level 1 */ [%css {|filter: none|}]; diff --git a/packages/ppx/test/css-support/filter-effects-module.t/run.t b/packages/ppx/test/css-support/filter-effects-module.t/run.t index 5997e475..312eab4e 100644 --- a/packages/ppx/test/css-support/filter-effects-module.t/run.t +++ b/packages/ppx/test/css-support/filter-effects-module.t/run.t @@ -32,14 +32,14 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - let color = CssJs.hex("333"); - CssJs.filter([|`none|]); - CssJs.filter([|`url({js|#id|js})|]); - CssJs.filter([|`url({js|image.svg#id|js})|]); - CssJs.filter([|`blur(`pxFloat(5.))|]); - CssJs.filter([|`brightness(`num(0.5))|]); - CssJs.filter([|`contrast(`percent(150.))|]); - CssJs.filter([| + let color = CSS.hex("333"); + CSS.filter([|`none|]); + CSS.filter([|`url({js|#id|js})|]); + CSS.filter([|`url({js|image.svg#id|js})|]); + CSS.filter([|`blur(`pxFloat(5.))|]); + CSS.filter([|`brightness(`num(0.5))|]); + CSS.filter([|`contrast(`percent(150.))|]); + CSS.filter([| `dropShadow(( `pxFloat(15.), `pxFloat(15.), @@ -47,14 +47,14 @@ If this test fail means that the module is not in sync with the ppx `hex({js|123|js}), )), |]); - CssJs.filter([|`grayscale(`percent(50.))|]); - CssJs.filter([|`hueRotate(`deg(50.))|]); - CssJs.filter([|`invert(`percent(50.))|]); - CssJs.filter([|`opacity(`percent(50.))|]); - CssJs.filter([|`sepia(`percent(50.))|]); - CssJs.filter([|`saturate(`percent(150.))|]); - CssJs.filter([|`grayscale(`percent(100.)), `sepia(`percent(100.))|]); - CssJs.filter([| + CSS.filter([|`grayscale(`percent(50.))|]); + CSS.filter([|`hueRotate(`deg(50.))|]); + CSS.filter([|`invert(`percent(50.))|]); + CSS.filter([|`opacity(`percent(50.))|]); + CSS.filter([|`sepia(`percent(50.))|]); + CSS.filter([|`saturate(`percent(150.))|]); + CSS.filter([|`grayscale(`percent(100.)), `sepia(`percent(100.))|]); + CSS.filter([| `dropShadow(( `zero, `pxFloat(8.), @@ -62,7 +62,7 @@ If this test fail means that the module is not in sync with the ppx `rgba((0, 0, 0, `num(0.03))), )), |]); - CssJs.filter([| + CSS.filter([| `dropShadow((`zero, `pxFloat(1.), `zero, color)), `dropShadow((`zero, `pxFloat(1.), `zero, color)), `dropShadow((`zero, `pxFloat(1.), `zero, color)), @@ -79,13 +79,13 @@ If this test fail means that the module is not in sync with the ppx `rgba((0, 0, 0, `num(0.03))), )), |]); - CssJs.backdropFilter([|`none|]); - CssJs.backdropFilter([|`url({js|#id|js})|]); - CssJs.backdropFilter([|`url({js|image.svg#id|js})|]); - CssJs.backdropFilter([|`blur(`pxFloat(5.))|]); - CssJs.backdropFilter([|`brightness(`num(0.5))|]); - CssJs.backdropFilter([|`contrast(`percent(150.))|]); - CssJs.backdropFilter([| + CSS.backdropFilter([|`none|]); + CSS.backdropFilter([|`url({js|#id|js})|]); + CSS.backdropFilter([|`url({js|image.svg#id|js})|]); + CSS.backdropFilter([|`blur(`pxFloat(5.))|]); + CSS.backdropFilter([|`brightness(`num(0.5))|]); + CSS.backdropFilter([|`contrast(`percent(150.))|]); + CSS.backdropFilter([| `dropShadow(( `pxFloat(15.), `pxFloat(15.), @@ -93,13 +93,13 @@ If this test fail means that the module is not in sync with the ppx `rgba((0, 0, 0, `num(1.))), )), |]); - CssJs.backdropFilter([|`grayscale(`percent(50.))|]); - CssJs.backdropFilter([|`hueRotate(`deg(50.))|]); - CssJs.backdropFilter([|`invert(`percent(50.))|]); - CssJs.backdropFilter([|`opacity(`percent(50.))|]); - CssJs.backdropFilter([|`sepia(`percent(50.))|]); - CssJs.backdropFilter([|`saturate(`percent(150.))|]); - CssJs.backdropFilter([| + CSS.backdropFilter([|`grayscale(`percent(50.))|]); + CSS.backdropFilter([|`hueRotate(`deg(50.))|]); + CSS.backdropFilter([|`invert(`percent(50.))|]); + CSS.backdropFilter([|`opacity(`percent(50.))|]); + CSS.backdropFilter([|`sepia(`percent(50.))|]); + CSS.backdropFilter([|`saturate(`percent(150.))|]); + CSS.backdropFilter([| `grayscale(`percent(100.)), `sepia(`percent(100.)), |]); diff --git a/packages/ppx/test/css-support/flex.t/run.t b/packages/ppx/test/css-support/flex.t/run.t index 7c868b40..f9e24083 100644 --- a/packages/ppx/test/css-support/flex.t/run.t +++ b/packages/ppx/test/css-support/flex.t/run.t @@ -33,15 +33,15 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.flexBasis(`auto); - CssJs.unsafe({js|flex|js}, {js|initial|js}); - CssJs.flex1(`none); - CssJs.flex1(`num(2.)); - CssJs.flexBasis(`em(10.)); - CssJs.flexBasis(`percent(30.)); - CssJs.flexBasis(`minContent); - CssJs.flex2(~basis=`pxFloat(30.), 1.); - CssJs.flex2(~shrink=2., 2.); - CssJs.flex(2., 2., `percent(10.)); - CssJs.flex(2., 2., `em(10.)); - CssJs.flex(2., 2., `minContent); + CSS.flexBasis(`auto); + CSS.unsafe({js|flex|js}, {js|initial|js}); + CSS.flex1(`none); + CSS.flex1(`num(2.)); + CSS.flexBasis(`em(10.)); + CSS.flexBasis(`percent(30.)); + CSS.flexBasis(`minContent); + CSS.flex2(~basis=`pxFloat(30.), 1.); + CSS.flex2(~shrink=2., 2.); + CSS.flex(2., 2., `percent(10.)); + CSS.flex(2., 2., `em(10.)); + CSS.flex(2., 2., `minContent); diff --git a/packages/ppx/test/css-support/flexible-box-layout-module.t/run.t b/packages/ppx/test/css-support/flexible-box-layout-module.t/run.t index 02854ed1..33037a16 100644 --- a/packages/ppx/test/css-support/flexible-box-layout-module.t/run.t +++ b/packages/ppx/test/css-support/flexible-box-layout-module.t/run.t @@ -37,53 +37,53 @@ If this test fail means that the module is not in sync with the ppx let flex1 = `num(1.); let min = `px(500); }; - CssJs.alignContent(`flexStart); - CssJs.alignContent(`flexEnd); - CssJs.alignContent(`spaceBetween); - CssJs.alignContent(`spaceAround); - CssJs.alignItems(`flexStart); - CssJs.alignItems(`flexEnd); - CssJs.alignSelf(`flexStart); - CssJs.alignSelf(`flexEnd); - CssJs.display(`flex); - CssJs.display(`inlineFlex); - CssJs.flex1(`none); - CssJs.flex(5., 7., `percent(10.)); - CssJs.flex1(`num(2.)); - CssJs.flexBasis(`em(10.)); - CssJs.flexBasis(`percent(30.)); - CssJs.flexBasis(`minContent); - CssJs.flex2(~basis=`pxFloat(30.), 1.); - CssJs.flex2(~shrink=2., 2.); - CssJs.flex(2., 2., `percent(10.)); - CssJs.flex1(X.flex1); - CssJs.flex2(~shrink=X.value, X.value); - CssJs.flex(X.value, X.value, X.min); - CssJs.flexBasis(`auto); - CssJs.flexBasis(`content); - CssJs.flexBasis(`pxFloat(1.)); - CssJs.flexDirection(`row); - CssJs.flexDirection(`rowReverse); - CssJs.flexDirection(`column); - CssJs.flexDirection(`columnReverse); - CssJs.flexDirection(`row); - CssJs.flexDirection(`rowReverse); - CssJs.flexDirection(`column); - CssJs.flexDirection(`columnReverse); - CssJs.flexWrap(`wrap); - CssJs.flexWrap(`wrapReverse); - CssJs.flexGrow(0.); - CssJs.flexGrow(5.); - CssJs.flexShrink(1.); - CssJs.flexShrink(10.); - CssJs.flexWrap(`nowrap); - CssJs.flexWrap(`wrap); - CssJs.flexWrap(`wrapReverse); - CssJs.justifyContent(`flexStart); - CssJs.justifyContent(`flexEnd); - CssJs.justifyContent(`spaceBetween); - CssJs.justifyContent(`spaceAround); - CssJs.unsafe({js|minHeight|js}, {js|auto|js}); - CssJs.unsafe({js|minWidth|js}, {js|auto|js}); - CssJs.order(0); - CssJs.order(1); + CSS.alignContent(`flexStart); + CSS.alignContent(`flexEnd); + CSS.alignContent(`spaceBetween); + CSS.alignContent(`spaceAround); + CSS.alignItems(`flexStart); + CSS.alignItems(`flexEnd); + CSS.alignSelf(`flexStart); + CSS.alignSelf(`flexEnd); + CSS.display(`flex); + CSS.display(`inlineFlex); + CSS.flex1(`none); + CSS.flex(5., 7., `percent(10.)); + CSS.flex1(`num(2.)); + CSS.flexBasis(`em(10.)); + CSS.flexBasis(`percent(30.)); + CSS.flexBasis(`minContent); + CSS.flex2(~basis=`pxFloat(30.), 1.); + CSS.flex2(~shrink=2., 2.); + CSS.flex(2., 2., `percent(10.)); + CSS.flex1(X.flex1); + CSS.flex2(~shrink=X.value, X.value); + CSS.flex(X.value, X.value, X.min); + CSS.flexBasis(`auto); + CSS.flexBasis(`content); + CSS.flexBasis(`pxFloat(1.)); + CSS.flexDirection(`row); + CSS.flexDirection(`rowReverse); + CSS.flexDirection(`column); + CSS.flexDirection(`columnReverse); + CSS.flexDirection(`row); + CSS.flexDirection(`rowReverse); + CSS.flexDirection(`column); + CSS.flexDirection(`columnReverse); + CSS.flexWrap(`wrap); + CSS.flexWrap(`wrapReverse); + CSS.flexGrow(0.); + CSS.flexGrow(5.); + CSS.flexShrink(1.); + CSS.flexShrink(10.); + CSS.flexWrap(`nowrap); + CSS.flexWrap(`wrap); + CSS.flexWrap(`wrapReverse); + CSS.justifyContent(`flexStart); + CSS.justifyContent(`flexEnd); + CSS.justifyContent(`spaceBetween); + CSS.justifyContent(`spaceAround); + CSS.unsafe({js|minHeight|js}, {js|auto|js}); + CSS.unsafe({js|minWidth|js}, {js|auto|js}); + CSS.order(0); + CSS.order(1); diff --git a/packages/ppx/test/css-support/fonts-module.t/run.t b/packages/ppx/test/css-support/fonts-module.t/run.t index 30ae50f4..2482509f 100644 --- a/packages/ppx/test/css-support/fonts-module.t/run.t +++ b/packages/ppx/test/css-support/fonts-module.t/run.t @@ -32,147 +32,141 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.fontFamilies([|{js|Inter Semi Bold|js}|]); - CssJs.fontFamilies(fonts: array(CssJs.Types.FontFamilyName.t)); - CssJs.fontFamilies([|{js|Inter|js}|]); - CssJs.fontFamilies(font: array(CssJs.Types.FontFamilyName.t)); - CssJs.fontFamilies([|{js|Inter|js}, {js|Sans|js}|]); - CssJs.fontFamilies([|{js|Inter|js}, font|]); - CssJs.fontFamilies([|{js|Gill Sans Extrabold|js}, "sans-serif"|]); - CssJs.fontSynthesisWeight(`none); - CssJs.fontSynthesisStyle(`auto); - CssJs.fontSynthesisSmallCaps(`none); - CssJs.fontSynthesisPosition(`auto); - CssJs.fontSize(`xxx_large); - CssJs.unsafe({|fontVariant|}, {|none|}); - CssJs.fontVariant(`normal); - CssJs.unsafe({js|fontVariant|js}, {js|all-petite-caps|js}); - CssJs.unsafe({js|fontVariant|js}, {js|historical-forms|js}); - CssJs.unsafe({js|fontVariant|js}, {js|super|js}); - CssJs.unsafe({js|fontVariant|js}, {js|sub lining-nums contextual ruby|js}); - CssJs.unsafe({js|fontVariant|js}, {js|annotation(circled)|js}); - CssJs.unsafe( + CSS.fontFamilies([|{js|Inter Semi Bold|js}|]); + CSS.fontFamilies(fonts: array(CSS.Types.FontFamilyName.t)); + CSS.fontFamilies([|{js|Inter|js}|]); + CSS.fontFamilies(font: array(CSS.Types.FontFamilyName.t)); + CSS.fontFamilies([|{js|Inter|js}, {js|Sans|js}|]); + CSS.fontFamilies([|{js|Inter|js}, font|]); + CSS.fontFamilies([|{js|Gill Sans Extrabold|js}, "sans-serif"|]); + CSS.fontSynthesisWeight(`none); + CSS.fontSynthesisStyle(`auto); + CSS.fontSynthesisSmallCaps(`none); + CSS.fontSynthesisPosition(`auto); + CSS.fontSize(`xxx_large); + CSS.unsafe({|fontVariant|}, {|none|}); + CSS.fontVariant(`normal); + CSS.unsafe({js|fontVariant|js}, {js|all-petite-caps|js}); + CSS.unsafe({js|fontVariant|js}, {js|historical-forms|js}); + CSS.unsafe({js|fontVariant|js}, {js|super|js}); + CSS.unsafe({js|fontVariant|js}, {js|sub lining-nums contextual ruby|js}); + CSS.unsafe({js|fontVariant|js}, {js|annotation(circled)|js}); + CSS.unsafe( {js|fontVariant|js}, {js|discretionary-ligatures character-variant(leo-B, leo-M, leo-N, leo-T, leo-U)|js}, ); - CssJs.unsafe({js|fontVariantAlternates|js}, {js|normal|js}); - CssJs.unsafe({js|fontVariantAlternates|js}, {js|historical-forms|js}); - CssJs.unsafe({js|fontVariantAlternates|js}, {js|styleset(ss01)|js}); - CssJs.unsafe( + CSS.unsafe({js|fontVariantAlternates|js}, {js|normal|js}); + CSS.unsafe({js|fontVariantAlternates|js}, {js|historical-forms|js}); + CSS.unsafe({js|fontVariantAlternates|js}, {js|styleset(ss01)|js}); + CSS.unsafe( {js|fontVariantAlternates|js}, {js|styleset(stacked-g, geometric-m)|js}, ); - CssJs.unsafe({js|fontVariantAlternates|js}, {js|character-variant(cv02)|js}); - CssJs.unsafe( + CSS.unsafe({js|fontVariantAlternates|js}, {js|character-variant(cv02)|js}); + CSS.unsafe( {js|fontVariantAlternates|js}, {js|character-variant(beta-3, gamma)|js}, ); - CssJs.unsafe({js|fontVariantAlternates|js}, {js|swash(flowing)|js}); - CssJs.unsafe({js|fontVariantAlternates|js}, {js|ornaments(leaves)|js}); - CssJs.unsafe({js|fontVariantAlternates|js}, {js|annotation(blocky)|js}); - CssJs.unsafe({js|fontFeatureSettings|js}, {js|normal|js}); - CssJs.unsafe({js|fontFeatureSettings|js}, {js|'swsh' 2|js}); - CssJs.unsafe({js|fontLanguageOverride|js}, {js|normal|js}); - CssJs.unsafe({js|fontLanguageOverride|js}, {js|'SRB'|js}); - CssJs.fontWeight(`num(1)); - CssJs.fontWeight(`num(90)); - CssJs.fontWeight(`num(750)); - CssJs.fontWeight(`num(1000)); - CssJs.unsafe({js|fontStyle|js}, {js|oblique 15deg|js}); - CssJs.unsafe({js|fontStyle|js}, {js|oblique -15deg|js}); - CssJs.unsafe({js|fontStyle|js}, {js|oblique 0deg|js}); - CssJs.fontOpticalSizing(`none); - CssJs.fontOpticalSizing(`auto); - CssJs.unsafe({js|fontPalette|js}, {js|normal|js}); - CssJs.unsafe({js|fontPalette|js}, {js|light|js}); - CssJs.unsafe({js|fontPalette|js}, {js|dark|js}); - CssJs.fontVariantEmoji(`normal); - CssJs.fontVariantEmoji(`text); - CssJs.fontVariantEmoji(`emoji); - CssJs.fontVariantEmoji(`unicode); - CssJs.unsafe({js|fontStretch|js}, {js|normal|js}); - CssJs.unsafe({js|fontStretch|js}, {js|ultra-condensed|js}); - CssJs.unsafe({js|fontStretch|js}, {js|extra-condensed|js}); - CssJs.unsafe({js|fontStretch|js}, {js|condensed|js}); - CssJs.unsafe({js|fontStretch|js}, {js|semi-condensed|js}); - CssJs.unsafe({js|fontStretch|js}, {js|semi-expanded|js}); - CssJs.unsafe({js|fontStretch|js}, {js|expanded|js}); - CssJs.unsafe({js|fontStretch|js}, {js|extra-expanded|js}); - CssJs.unsafe({js|fontStretch|js}, {js|ultra-expanded|js}); - CssJs.unsafe({js|fontSizeAdjust|js}, {js|none|js}); - CssJs.unsafe({js|fontSizeAdjust|js}, {js|.5|js}); - CssJs.unsafe({js|fontSynthesis|js}, {js|none|js}); - CssJs.unsafe({js|fontSynthesis|js}, {js|weight|js}); - CssJs.unsafe({js|fontSynthesis|js}, {js|style|js}); - CssJs.unsafe({js|fontSynthesis|js}, {js|weight style|js}); - CssJs.unsafe({js|fontSynthesis|js}, {js|style weight|js}); - CssJs.fontKerning(`auto); - CssJs.fontKerning(`normal); - CssJs.fontKerning(`none); - CssJs.fontVariantPosition(`normal); - CssJs.fontVariantPosition(`sub); - CssJs.fontVariantPosition(`super); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|normal|js}); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|none|js}); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|common-ligatures|js}); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|no-common-ligatures|js}); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|discretionary-ligatures|js}); - CssJs.unsafe( - {js|fontVariantLigatures|js}, - {js|no-discretionary-ligatures|js}, - ); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|historical-ligatures|js}); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|no-historical-ligatures|js}); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|contextual|js}); - CssJs.unsafe({js|fontVariantLigatures|js}, {js|no-contextual|js}); - CssJs.unsafe( + CSS.unsafe({js|fontVariantAlternates|js}, {js|swash(flowing)|js}); + CSS.unsafe({js|fontVariantAlternates|js}, {js|ornaments(leaves)|js}); + CSS.unsafe({js|fontVariantAlternates|js}, {js|annotation(blocky)|js}); + CSS.unsafe({js|fontFeatureSettings|js}, {js|normal|js}); + CSS.unsafe({js|fontFeatureSettings|js}, {js|'swsh' 2|js}); + CSS.unsafe({js|fontLanguageOverride|js}, {js|normal|js}); + CSS.unsafe({js|fontLanguageOverride|js}, {js|'SRB'|js}); + CSS.fontWeight(`num(1)); + CSS.fontWeight(`num(90)); + CSS.fontWeight(`num(750)); + CSS.fontWeight(`num(1000)); + CSS.unsafe({js|fontStyle|js}, {js|oblique 15deg|js}); + CSS.unsafe({js|fontStyle|js}, {js|oblique -15deg|js}); + CSS.unsafe({js|fontStyle|js}, {js|oblique 0deg|js}); + CSS.fontOpticalSizing(`none); + CSS.fontOpticalSizing(`auto); + CSS.unsafe({js|fontPalette|js}, {js|normal|js}); + CSS.unsafe({js|fontPalette|js}, {js|light|js}); + CSS.unsafe({js|fontPalette|js}, {js|dark|js}); + CSS.fontVariantEmoji(`normal); + CSS.fontVariantEmoji(`text); + CSS.fontVariantEmoji(`emoji); + CSS.fontVariantEmoji(`unicode); + CSS.unsafe({js|fontStretch|js}, {js|normal|js}); + CSS.unsafe({js|fontStretch|js}, {js|ultra-condensed|js}); + CSS.unsafe({js|fontStretch|js}, {js|extra-condensed|js}); + CSS.unsafe({js|fontStretch|js}, {js|condensed|js}); + CSS.unsafe({js|fontStretch|js}, {js|semi-condensed|js}); + CSS.unsafe({js|fontStretch|js}, {js|semi-expanded|js}); + CSS.unsafe({js|fontStretch|js}, {js|expanded|js}); + CSS.unsafe({js|fontStretch|js}, {js|extra-expanded|js}); + CSS.unsafe({js|fontStretch|js}, {js|ultra-expanded|js}); + CSS.unsafe({js|fontSizeAdjust|js}, {js|none|js}); + CSS.unsafe({js|fontSizeAdjust|js}, {js|.5|js}); + CSS.unsafe({js|fontSynthesis|js}, {js|none|js}); + CSS.unsafe({js|fontSynthesis|js}, {js|weight|js}); + CSS.unsafe({js|fontSynthesis|js}, {js|style|js}); + CSS.unsafe({js|fontSynthesis|js}, {js|weight style|js}); + CSS.unsafe({js|fontSynthesis|js}, {js|style weight|js}); + CSS.fontKerning(`auto); + CSS.fontKerning(`normal); + CSS.fontKerning(`none); + CSS.fontVariantPosition(`normal); + CSS.fontVariantPosition(`sub); + CSS.fontVariantPosition(`super); + CSS.unsafe({js|fontVariantLigatures|js}, {js|normal|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|none|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|common-ligatures|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|no-common-ligatures|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|discretionary-ligatures|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|no-discretionary-ligatures|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|historical-ligatures|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|no-historical-ligatures|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|contextual|js}); + CSS.unsafe({js|fontVariantLigatures|js}, {js|no-contextual|js}); + CSS.unsafe( {js|fontVariantLigatures|js}, {js|common-ligatures discretionary-ligatures historical-ligatures contextual|js}, ); - CssJs.fontVariantCaps(`normal); - CssJs.fontVariantCaps(`smallCaps); - CssJs.fontVariantCaps(`allSmallCaps); - CssJs.fontVariantCaps(`petiteCaps); - CssJs.fontVariantCaps(`allPetiteCaps); - CssJs.fontVariantCaps(`titlingCaps); - CssJs.fontVariantCaps(`unicase); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|normal|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|lining-nums|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|oldstyle-nums|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|proportional-nums|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|tabular-nums|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|diagonal-fractions|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|stacked-fractions|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|ordinal|js}); - CssJs.unsafe({js|fontVariantNumeric|js}, {js|slashed-zero|js}); - CssJs.unsafe( + CSS.fontVariantCaps(`normal); + CSS.fontVariantCaps(`smallCaps); + CSS.fontVariantCaps(`allSmallCaps); + CSS.fontVariantCaps(`petiteCaps); + CSS.fontVariantCaps(`allPetiteCaps); + CSS.fontVariantCaps(`titlingCaps); + CSS.fontVariantCaps(`unicase); + CSS.unsafe({js|fontVariantNumeric|js}, {js|normal|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|lining-nums|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|oldstyle-nums|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|proportional-nums|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|tabular-nums|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|diagonal-fractions|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|stacked-fractions|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|ordinal|js}); + CSS.unsafe({js|fontVariantNumeric|js}, {js|slashed-zero|js}); + CSS.unsafe( {js|fontVariantNumeric|js}, {js|lining-nums proportional-nums diagonal-fractions|js}, ); - CssJs.unsafe( + CSS.unsafe( {js|fontVariantNumeric|js}, {js|oldstyle-nums tabular-nums stacked-fractions ordinal slashed-zero|js}, ); - CssJs.unsafe( + CSS.unsafe( {js|fontVariantNumeric|js}, {js|slashed-zero ordinal tabular-nums stacked-fractions oldstyle-nums|js}, ); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|normal|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|jis78|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|jis83|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|jis90|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|jis04|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|simplified|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|traditional|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|full-width|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|proportional-width|js}); - CssJs.unsafe({js|fontVariantEastAsian|js}, {js|ruby|js}); - CssJs.unsafe( - {js|fontVariantEastAsian|js}, - {js|simplified full-width ruby|js}, - ); - CssJs.unsafe({js|fontFeatureSettings|js}, {js|normal|js}); - CssJs.unsafe({js|fontFeatureSettings|js}, {js|'c2sc'|js}); - CssJs.unsafe({js|fontFeatureSettings|js}, {js|'smcp' on|js}); - CssJs.unsafe({js|fontFeatureSettings|js}, {js|'liga' off|js}); - CssJs.unsafe({js|fontFeatureSettings|js}, {js|'smcp', 'swsh' 2|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|normal|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|jis78|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|jis83|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|jis90|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|jis04|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|simplified|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|traditional|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|full-width|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|proportional-width|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|ruby|js}); + CSS.unsafe({js|fontVariantEastAsian|js}, {js|simplified full-width ruby|js}); + CSS.unsafe({js|fontFeatureSettings|js}, {js|normal|js}); + CSS.unsafe({js|fontFeatureSettings|js}, {js|'c2sc'|js}); + CSS.unsafe({js|fontFeatureSettings|js}, {js|'smcp' on|js}); + CSS.unsafe({js|fontFeatureSettings|js}, {js|'liga' off|js}); + CSS.unsafe({js|fontFeatureSettings|js}, {js|'smcp', 'swsh' 2|js}); diff --git a/packages/ppx/test/css-support/fragmentation-module.t/run.t b/packages/ppx/test/css-support/fragmentation-module.t/run.t index 0f6c751c..2824385f 100644 --- a/packages/ppx/test/css-support/fragmentation-module.t/run.t +++ b/packages/ppx/test/css-support/fragmentation-module.t/run.t @@ -33,36 +33,36 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|breakBefore|js}, {js|auto|js}); - CssJs.unsafe({js|breakBefore|js}, {js|avoid|js}); - CssJs.unsafe({js|breakBefore|js}, {js|avoid-page|js}); - CssJs.unsafe({js|breakBefore|js}, {js|page|js}); - CssJs.unsafe({js|breakBefore|js}, {js|left|js}); - CssJs.unsafe({js|breakBefore|js}, {js|right|js}); - CssJs.unsafe({js|breakBefore|js}, {js|recto|js}); - CssJs.unsafe({js|breakBefore|js}, {js|verso|js}); - CssJs.unsafe({js|breakBefore|js}, {js|avoid-column|js}); - CssJs.unsafe({js|breakBefore|js}, {js|column|js}); - CssJs.unsafe({js|breakBefore|js}, {js|avoid-region|js}); - CssJs.unsafe({js|breakBefore|js}, {js|region|js}); - CssJs.unsafe({js|breakAfter|js}, {js|auto|js}); - CssJs.unsafe({js|breakAfter|js}, {js|avoid|js}); - CssJs.unsafe({js|breakAfter|js}, {js|avoid-page|js}); - CssJs.unsafe({js|breakAfter|js}, {js|page|js}); - CssJs.unsafe({js|breakAfter|js}, {js|left|js}); - CssJs.unsafe({js|breakAfter|js}, {js|right|js}); - CssJs.unsafe({js|breakAfter|js}, {js|recto|js}); - CssJs.unsafe({js|breakAfter|js}, {js|verso|js}); - CssJs.unsafe({js|breakAfter|js}, {js|avoid-column|js}); - CssJs.unsafe({js|breakAfter|js}, {js|column|js}); - CssJs.unsafe({js|breakAfter|js}, {js|avoid-region|js}); - CssJs.unsafe({js|breakAfter|js}, {js|region|js}); - CssJs.unsafe({js|breakInside|js}, {js|auto|js}); - CssJs.unsafe({js|breakInside|js}, {js|avoid|js}); - CssJs.unsafe({js|breakInside|js}, {js|avoid-page|js}); - CssJs.unsafe({js|breakInside|js}, {js|avoid-column|js}); - CssJs.unsafe({js|breakInside|js}, {js|avoid-region|js}); - CssJs.unsafe({js|boxDecorationBreak|js}, {js|slice|js}); - CssJs.unsafe({js|boxDecorationBreak|js}, {js|clone|js}); - CssJs.unsafe({js|orphans|js}, {js|1|js}); - CssJs.unsafe({js|orphans|js}, {js|2|js}); + CSS.unsafe({js|breakBefore|js}, {js|auto|js}); + CSS.unsafe({js|breakBefore|js}, {js|avoid|js}); + CSS.unsafe({js|breakBefore|js}, {js|avoid-page|js}); + CSS.unsafe({js|breakBefore|js}, {js|page|js}); + CSS.unsafe({js|breakBefore|js}, {js|left|js}); + CSS.unsafe({js|breakBefore|js}, {js|right|js}); + CSS.unsafe({js|breakBefore|js}, {js|recto|js}); + CSS.unsafe({js|breakBefore|js}, {js|verso|js}); + CSS.unsafe({js|breakBefore|js}, {js|avoid-column|js}); + CSS.unsafe({js|breakBefore|js}, {js|column|js}); + CSS.unsafe({js|breakBefore|js}, {js|avoid-region|js}); + CSS.unsafe({js|breakBefore|js}, {js|region|js}); + CSS.unsafe({js|breakAfter|js}, {js|auto|js}); + CSS.unsafe({js|breakAfter|js}, {js|avoid|js}); + CSS.unsafe({js|breakAfter|js}, {js|avoid-page|js}); + CSS.unsafe({js|breakAfter|js}, {js|page|js}); + CSS.unsafe({js|breakAfter|js}, {js|left|js}); + CSS.unsafe({js|breakAfter|js}, {js|right|js}); + CSS.unsafe({js|breakAfter|js}, {js|recto|js}); + CSS.unsafe({js|breakAfter|js}, {js|verso|js}); + CSS.unsafe({js|breakAfter|js}, {js|avoid-column|js}); + CSS.unsafe({js|breakAfter|js}, {js|column|js}); + CSS.unsafe({js|breakAfter|js}, {js|avoid-region|js}); + CSS.unsafe({js|breakAfter|js}, {js|region|js}); + CSS.unsafe({js|breakInside|js}, {js|auto|js}); + CSS.unsafe({js|breakInside|js}, {js|avoid|js}); + CSS.unsafe({js|breakInside|js}, {js|avoid-page|js}); + CSS.unsafe({js|breakInside|js}, {js|avoid-column|js}); + CSS.unsafe({js|breakInside|js}, {js|avoid-region|js}); + CSS.unsafe({js|boxDecorationBreak|js}, {js|slice|js}); + CSS.unsafe({js|boxDecorationBreak|js}, {js|clone|js}); + CSS.unsafe({js|orphans|js}, {js|1|js}); + CSS.unsafe({js|orphans|js}, {js|2|js}); diff --git a/packages/ppx/test/css-support/grid-layout-module.t/run.t b/packages/ppx/test/css-support/grid-layout-module.t/run.t index 77dd2a66..8f0b4538 100644 --- a/packages/ppx/test/css-support/grid-layout-module.t/run.t +++ b/packages/ppx/test/css-support/grid-layout-module.t/run.t @@ -33,17 +33,17 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.display(`grid); - CssJs.display(`inlineGrid); - CssJs.gridTemplateColumns([|`none|]); - CssJs.gridTemplateColumns([|`auto|]); - CssJs.gridTemplateColumns([|`pxFloat(100.)|]); - CssJs.gridTemplateColumns([|`fr(1.)|]); - CssJs.gridTemplateColumns([|`pxFloat(100.), `fr(1.), `auto|]); - CssJs.gridTemplateColumns([| + CSS.display(`grid); + CSS.display(`inlineGrid); + CSS.gridTemplateColumns([|`none|]); + CSS.gridTemplateColumns([|`auto|]); + CSS.gridTemplateColumns([|`pxFloat(100.)|]); + CSS.gridTemplateColumns([|`fr(1.)|]); + CSS.gridTemplateColumns([|`pxFloat(100.), `fr(1.), `auto|]); + CSS.gridTemplateColumns([| `repeat((`num(2), [|`pxFloat(100.), `fr(1.)|])), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `repeat(( `num(4), [| @@ -55,29 +55,29 @@ If this test fail means that the module is not in sync with the ppx )), `pxFloat(10.), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `pxFloat(100.), `fr(1.), `maxContent, `minmax((`minContent, `fr(1.))), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `repeat((`autoFill, [|`minmax((`ch(25.), `fr(1.)))|])), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `name({js|[col-end]|js}), `pxFloat(10.), `name({js|[col-start]|js}), `pxFloat(250.), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `name({js|[last]|js}), `name({js|[first nav-start]|js}), `pxFloat(150.), `name({js|[main-start]|js}), `fr(1.), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `pxFloat(10.), `name({js|[col-start]|js}), `pxFloat(250.), @@ -88,7 +88,7 @@ If this test fail means that the module is not in sync with the ppx `name({js|[col-end]|js}), `pxFloat(10.), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `name({js|[a]|js}), `auto, `name({js|[b]|js}), @@ -97,17 +97,17 @@ If this test fail means that the module is not in sync with the ppx `repeat((`num(2), [|`name({js|[e]|js}), `pxFloat(40.)|])), `repeat((`num(5), [|`auto|])), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `pxFloat(200.), `repeat((`autoFill, [|`pxFloat(100.)|])), `pxFloat(300.), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `minmax((`pxFloat(100.), `maxContent)), `repeat((`autoFill, [|`pxFloat(200.)|])), `percent(20.), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `name({js|[linename1]|js}), `pxFloat(100.), `name({js|[linename2]|js}), @@ -117,7 +117,7 @@ If this test fail means that the module is not in sync with the ppx )), `pxFloat(100.), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `name({js|[linename1 linename2]|js}), `pxFloat(100.), `repeat((`autoFit, [|`name({js|[linename1]|js}), `pxFloat(300.)|])), @@ -135,28 +135,28 @@ If this test fail means that the module is not in sync with the ppx )), `pxFloat(10.), |]; - (CssJs.gridTemplateColumns(value): CssJs.rule); - CssJs.gridTemplateRows([|`none|]); - CssJs.gridTemplateRows([|`auto|]); - CssJs.gridTemplateRows([|`pxFloat(100.)|]); - CssJs.gridTemplateRows([|`fr(1.)|]); - CssJs.gridTemplateRows([|`pxFloat(100.), `fr(1.), `auto|]); - CssJs.gridTemplateRows([| + (CSS.gridTemplateColumns(value): CSS.rule); + CSS.gridTemplateRows([|`none|]); + CSS.gridTemplateRows([|`auto|]); + CSS.gridTemplateRows([|`pxFloat(100.)|]); + CSS.gridTemplateRows([|`fr(1.)|]); + CSS.gridTemplateRows([|`pxFloat(100.), `fr(1.), `auto|]); + CSS.gridTemplateRows([| `repeat((`num(2), [|`pxFloat(100.), `fr(1.)|])), |]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([| `pxFloat(100.), `fr(1.), `maxContent, `minmax((`minContent, `fr(1.))), |]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([| `name({js|[row-end]|js}), `pxFloat(10.), `name({js|[row-start]|js}), `pxFloat(250.), |]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([| `name({js|[last]|js}), `name({js|[first header-start]|js}), `pxFloat(50.), @@ -165,97 +165,97 @@ If this test fail means that the module is not in sync with the ppx `name({js|[footer-start]|js}), `pxFloat(50.), |]); - CssJs.unsafe({js|gridTemplateAreas|js}, {js|none|js}); - CssJs.unsafe({js|gridTemplateAreas|js}, {js|'articles'|js}); - CssJs.unsafe({js|gridTemplateAreas|js}, {js|'head head'|js}); - CssJs.unsafe( + CSS.unsafe({js|gridTemplateAreas|js}, {js|none|js}); + CSS.unsafe({js|gridTemplateAreas|js}, {js|'articles'|js}); + CSS.unsafe({js|gridTemplateAreas|js}, {js|'head head'|js}); + CSS.unsafe( {js|gridTemplateAreas|js}, {js|'head head' 'nav main' 'foot ....'|js}, ); - CssJs.unsafe({js|gridTemplate|js}, {js|none|js}); - CssJs.unsafe({js|gridTemplate|js}, {js|auto 1fr auto / auto 1fr|js}); - CssJs.unsafe( + CSS.unsafe({js|gridTemplate|js}, {js|none|js}); + CSS.unsafe({js|gridTemplate|js}, {js|auto 1fr auto / auto 1fr|js}); + CSS.unsafe( {js|gridTemplate|js}, {js|[header-top] 'a a a' [header-bottom] [main-top] 'b b b' 1fr [main-bottom] / auto 1fr auto|js}, ); - CssJs.unsafe({js|gridAutoColumns|js}, {js|auto|js}); - CssJs.unsafe({js|gridAutoColumns|js}, {js|1fr|js}); - CssJs.unsafe({js|gridAutoColumns|js}, {js|100px|js}); - CssJs.unsafe({js|gridAutoColumns|js}, {js|max-content|js}); - CssJs.unsafe({js|gridAutoColumns|js}, {js|minmax(min-content, 1fr)|js}); - CssJs.unsafe({js|gridAutoColumns|js}, {js|min-content max-content auto|js}); - CssJs.unsafe({js|gridAutoColumns|js}, {js|100px 150px 390px|js}); - CssJs.unsafe( + CSS.unsafe({js|gridAutoColumns|js}, {js|auto|js}); + CSS.unsafe({js|gridAutoColumns|js}, {js|1fr|js}); + CSS.unsafe({js|gridAutoColumns|js}, {js|100px|js}); + CSS.unsafe({js|gridAutoColumns|js}, {js|max-content|js}); + CSS.unsafe({js|gridAutoColumns|js}, {js|minmax(min-content, 1fr)|js}); + CSS.unsafe({js|gridAutoColumns|js}, {js|min-content max-content auto|js}); + CSS.unsafe({js|gridAutoColumns|js}, {js|100px 150px 390px|js}); + CSS.unsafe( {js|gridAutoColumns|js}, {js|100px minmax(100px, auto) 10% 0.5fr fit-content(400px)|js}, ); - CssJs.unsafe({js|gridAutoRows|js}, {js|auto|js}); - CssJs.unsafe({js|gridAutoRows|js}, {js|1fr|js}); - CssJs.unsafe({js|gridAutoRows|js}, {js|100px|js}); - CssJs.unsafe({js|gridAutoRows|js}, {js|100px 30%|js}); - CssJs.unsafe({js|gridAutoRows|js}, {js|100px 30% 1em|js}); - CssJs.unsafe({js|gridAutoRows|js}, {js|min-content|js}); - CssJs.unsafe({js|gridAutoRows|js}, {js|minmax(min-content, 1fr)|js}); - CssJs.unsafe({js|gridAutoRows|js}, {js|min-content max-content auto|js}); - CssJs.unsafe( + CSS.unsafe({js|gridAutoRows|js}, {js|auto|js}); + CSS.unsafe({js|gridAutoRows|js}, {js|1fr|js}); + CSS.unsafe({js|gridAutoRows|js}, {js|100px|js}); + CSS.unsafe({js|gridAutoRows|js}, {js|100px 30%|js}); + CSS.unsafe({js|gridAutoRows|js}, {js|100px 30% 1em|js}); + CSS.unsafe({js|gridAutoRows|js}, {js|min-content|js}); + CSS.unsafe({js|gridAutoRows|js}, {js|minmax(min-content, 1fr)|js}); + CSS.unsafe({js|gridAutoRows|js}, {js|min-content max-content auto|js}); + CSS.unsafe( {js|gridAutoRows|js}, {js|100px minmax(100px, auto) 10% 0.5fr fit-content(400px)|js}, ); - CssJs.unsafe({js|gridAutoFlow|js}, {js|row|js}); - CssJs.unsafe({js|gridAutoFlow|js}, {js|column|js}); - CssJs.unsafe({js|gridAutoFlow|js}, {js|row dense|js}); - CssJs.unsafe({js|gridAutoFlow|js}, {js|column dense|js}); - CssJs.unsafe({js|gridRowStart|js}, {js|auto|js}); - CssJs.unsafe({js|gridRowStart|js}, {js|4|js}); - CssJs.unsafe({js|gridRowStart|js}, {js|C|js}); - CssJs.unsafe({js|gridRowStart|js}, {js|C 2|js}); - CssJs.unsafe({js|gridColumnStart|js}, {js|auto|js}); - CssJs.unsafe({js|gridColumnStart|js}, {js|4|js}); - CssJs.unsafe({js|gridColumnStart|js}, {js|C|js}); - CssJs.unsafe({js|gridColumnStart|js}, {js|C 2|js}); - CssJs.unsafe({js|gridRowEnd|js}, {js|auto|js}); - CssJs.unsafe({js|gridRowEnd|js}, {js|4|js}); - CssJs.unsafe({js|gridRowEnd|js}, {js|C|js}); - CssJs.unsafe({js|gridRowEnd|js}, {js|C 2|js}); - CssJs.unsafe({js|gridColumnEnd|js}, {js|auto|js}); - CssJs.unsafe({js|gridColumnEnd|js}, {js|4|js}); - CssJs.unsafe({js|gridColumnEnd|js}, {js|C|js}); - CssJs.unsafe({js|gridColumnEnd|js}, {js|C 2|js}); - CssJs.unsafe({js|gridColumn|js}, {js|auto|js}); - CssJs.unsafe({js|gridColumn|js}, {js|1|js}); - CssJs.unsafe({js|gridColumn|js}, {js|-1|js}); - CssJs.unsafe({js|gridRow|js}, {js|auto|js}); - CssJs.unsafe({js|gridRow|js}, {js|1|js}); - CssJs.unsafe({js|gridRow|js}, {js|-1|js}); - CssJs.gridColumnGap(`zero); - CssJs.gridColumnGap(`em(1.)); - CssJs.gridRowGap(`zero); - CssJs.gridRowGap(`em(1.)); - CssJs.unsafe({js|gridGap|js}, {js|0 0|js}); - CssJs.unsafe({js|gridGap|js}, {js|0 1em|js}); - CssJs.gridGap(`em(1.)); - CssJs.unsafe({js|gridGap|js}, {js|1em 1em|js}); - CssJs.gridTemplateColumns([|`subgrid|]); - CssJs.gridTemplateColumns([|`subgrid, `name({js|[sub-a]|js})|]); - CssJs.gridTemplateColumns([| + CSS.unsafe({js|gridAutoFlow|js}, {js|row|js}); + CSS.unsafe({js|gridAutoFlow|js}, {js|column|js}); + CSS.unsafe({js|gridAutoFlow|js}, {js|row dense|js}); + CSS.unsafe({js|gridAutoFlow|js}, {js|column dense|js}); + CSS.unsafe({js|gridRowStart|js}, {js|auto|js}); + CSS.unsafe({js|gridRowStart|js}, {js|4|js}); + CSS.unsafe({js|gridRowStart|js}, {js|C|js}); + CSS.unsafe({js|gridRowStart|js}, {js|C 2|js}); + CSS.unsafe({js|gridColumnStart|js}, {js|auto|js}); + CSS.unsafe({js|gridColumnStart|js}, {js|4|js}); + CSS.unsafe({js|gridColumnStart|js}, {js|C|js}); + CSS.unsafe({js|gridColumnStart|js}, {js|C 2|js}); + CSS.unsafe({js|gridRowEnd|js}, {js|auto|js}); + CSS.unsafe({js|gridRowEnd|js}, {js|4|js}); + CSS.unsafe({js|gridRowEnd|js}, {js|C|js}); + CSS.unsafe({js|gridRowEnd|js}, {js|C 2|js}); + CSS.unsafe({js|gridColumnEnd|js}, {js|auto|js}); + CSS.unsafe({js|gridColumnEnd|js}, {js|4|js}); + CSS.unsafe({js|gridColumnEnd|js}, {js|C|js}); + CSS.unsafe({js|gridColumnEnd|js}, {js|C 2|js}); + CSS.unsafe({js|gridColumn|js}, {js|auto|js}); + CSS.unsafe({js|gridColumn|js}, {js|1|js}); + CSS.unsafe({js|gridColumn|js}, {js|-1|js}); + CSS.unsafe({js|gridRow|js}, {js|auto|js}); + CSS.unsafe({js|gridRow|js}, {js|1|js}); + CSS.unsafe({js|gridRow|js}, {js|-1|js}); + CSS.gridColumnGap(`zero); + CSS.gridColumnGap(`em(1.)); + CSS.gridRowGap(`zero); + CSS.gridRowGap(`em(1.)); + CSS.unsafe({js|gridGap|js}, {js|0 0|js}); + CSS.unsafe({js|gridGap|js}, {js|0 1em|js}); + CSS.gridGap(`em(1.)); + CSS.unsafe({js|gridGap|js}, {js|1em 1em|js}); + CSS.gridTemplateColumns([|`subgrid|]); + CSS.gridTemplateColumns([|`subgrid, `name({js|[sub-a]|js})|]); + CSS.gridTemplateColumns([| `subgrid, `name({js|[sub-a]|js}), `name({js|[sub-b]|js}), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `subgrid, `repeat((`num(1), [|`name({js|[sub-a]|js})|])), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `subgrid, `repeat((`num(2), [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), `name({js|[sub-c]|js}), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `subgrid, `repeat((`autoFill, [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `subgrid, `name({js|[sub-a]|js}), `repeat(( @@ -269,27 +269,27 @@ If this test fail means that the module is not in sync with the ppx `name({js|[sub-e]|js}), `repeat((`num(1), [|`name({js|[sub-g]|js})|])), |]); - CssJs.gridTemplateRows([|`subgrid|]); - CssJs.gridTemplateRows([|`subgrid, `name({js|[sub-a]|js})|]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([|`subgrid|]); + CSS.gridTemplateRows([|`subgrid, `name({js|[sub-a]|js})|]); + CSS.gridTemplateRows([| `subgrid, `name({js|[sub-a]|js}), `name({js|[sub-b]|js}), |]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([| `subgrid, `repeat((`num(1), [|`name({js|[sub-a]|js})|])), |]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([| `subgrid, `repeat((`num(2), [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), `name({js|[sub-c]|js}), |]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([| `subgrid, `repeat((`autoFill, [|`name({js|[sub-a]|js}), `name({js|[sub-b]|js})|])), |]); - CssJs.gridTemplateRows([| + CSS.gridTemplateRows([| `subgrid, `name({js|[sub-a]|js}), `repeat(( diff --git a/packages/ppx/test/css-support/interpolation-location-error.t/run.t b/packages/ppx/test/css-support/interpolation-location-error.t/run.t index 878ade4c..a9de69a5 100644 --- a/packages/ppx/test/css-support/interpolation-location-error.t/run.t +++ b/packages/ppx/test/css-support/interpolation-location-error.t/run.t @@ -85,5 +85,4 @@ If this test fail means that the module is not in sync with the ppx } ]; let grid = `gri; - let a = - CssJs.style([|CssJs.label("a"), (CssJs.display(grid): CssJs.rule)|]); + let a = CSS.style([|CSS.label("a"), (CSS.display(grid): CSS.rule)|]); diff --git a/packages/ppx/test/css-support/lists-module.t/run.t b/packages/ppx/test/css-support/lists-module.t/run.t index 1e494890..56203a8e 100644 --- a/packages/ppx/test/css-support/lists-module.t/run.t +++ b/packages/ppx/test/css-support/lists-module.t/run.t @@ -33,73 +33,73 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|listStyleType|js}, {js|disclosure-closed|js}); - CssJs.unsafe({js|listStyleType|js}, {js|disclosure-open|js}); - CssJs.unsafe({js|listStyleType|js}, {js|hebrew|js}); - CssJs.unsafe({js|listStyleType|js}, {js|cjk-decimal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|cjk-ideographic|js}); - CssJs.unsafe({js|listStyleType|js}, {js|hiragana|js}); - CssJs.unsafe({js|listStyleType|js}, {js|katakana|js}); - CssJs.unsafe({js|listStyleType|js}, {js|hiragana-iroha|js}); - CssJs.unsafe({js|listStyleType|js}, {js|katakana-iroha|js}); - CssJs.unsafe({js|listStyleType|js}, {js|japanese-informal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|japanese-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|korean-hangul-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|korean-hanja-informal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|korean-hanja-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|simp-chinese-informal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|simp-chinese-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|trad-chinese-informal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|trad-chinese-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|cjk-heavenly-stem|js}); - CssJs.unsafe({js|listStyleType|js}, {js|cjk-earthly-branch|js}); - CssJs.unsafe({js|listStyleType|js}, {js|trad-chinese-informal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|trad-chinese-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|simp-chinese-informal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|simp-chinese-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|japanese-informal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|japanese-formal|js}); - CssJs.unsafe({js|listStyleType|js}, {js|arabic-indic|js}); - CssJs.unsafe({js|listStyleType|js}, {js|persian|js}); - CssJs.unsafe({js|listStyleType|js}, {js|urdu|js}); - CssJs.unsafe({js|listStyleType|js}, {js|devanagari|js}); - CssJs.unsafe({js|listStyleType|js}, {js|gurmukhi|js}); - CssJs.unsafe({js|listStyleType|js}, {js|gujarati|js}); - CssJs.unsafe({js|listStyleType|js}, {js|oriya|js}); - CssJs.unsafe({js|listStyleType|js}, {js|kannada|js}); - CssJs.unsafe({js|listStyleType|js}, {js|malayalam|js}); - CssJs.unsafe({js|listStyleType|js}, {js|bengali|js}); - CssJs.unsafe({js|listStyleType|js}, {js|tamil|js}); - CssJs.unsafe({js|listStyleType|js}, {js|telugu|js}); - CssJs.unsafe({js|listStyleType|js}, {js|thai|js}); - CssJs.unsafe({js|listStyleType|js}, {js|lao|js}); - CssJs.unsafe({js|listStyleType|js}, {js|myanmar|js}); - CssJs.unsafe({js|listStyleType|js}, {js|khmer|js}); - CssJs.unsafe({js|listStyleType|js}, {js|hangul|js}); - CssJs.unsafe({js|listStyleType|js}, {js|hangul-consonant|js}); - CssJs.unsafe({js|listStyleType|js}, {js|ethiopic-halehame|js}); - CssJs.unsafe({js|listStyleType|js}, {js|ethiopic-numeric|js}); - CssJs.unsafe({js|listStyleType|js}, {js|ethiopic-halehame-am|js}); - CssJs.unsafe({js|listStyleType|js}, {js|ethiopic-halehame-ti-er|js}); - CssJs.unsafe({js|listStyleType|js}, {js|ethiopic-halehame-ti-et|js}); - CssJs.unsafe({js|listStyleType|js}, {js|other-style|js}); - CssJs.unsafe({js|listStyleType|js}, {js|inside|js}); - CssJs.unsafe({js|listStyleType|js}, {js|outside|js}); - CssJs.unsafe({js|listStyleType|js}, {js|\32 style|js}); - CssJs.unsafe({js|listStyleType|js}, {js|"-"|js}); - CssJs.unsafe({js|listStyleType|js}, {js|'-'|js}); - CssJs.unsafe({js|counterReset|js}, {js|foo|js}); - CssJs.unsafe({js|counterReset|js}, {js|foo 1|js}); - CssJs.unsafe({js|counterReset|js}, {js|foo 1 bar|js}); - CssJs.unsafe({js|counterReset|js}, {js|foo 1 bar 2|js}); - CssJs.unsafe({js|counterReset|js}, {js|none|js}); - CssJs.unsafe({js|counterSet|js}, {js|foo|js}); - CssJs.unsafe({js|counterSet|js}, {js|foo 1|js}); - CssJs.unsafe({js|counterSet|js}, {js|foo 1 bar|js}); - CssJs.unsafe({js|counterSet|js}, {js|foo 1 bar 2|js}); - CssJs.unsafe({js|counterSet|js}, {js|none|js}); - CssJs.unsafe({js|counterIncrement|js}, {js|foo|js}); - CssJs.unsafe({js|counterIncrement|js}, {js|foo 1|js}); - CssJs.unsafe({js|counterIncrement|js}, {js|foo 1 bar|js}); - CssJs.unsafe({js|counterIncrement|js}, {js|foo 1 bar 2|js}); - CssJs.unsafe({js|counterIncrement|js}, {js|none|js}); + CSS.unsafe({js|listStyleType|js}, {js|disclosure-closed|js}); + CSS.unsafe({js|listStyleType|js}, {js|disclosure-open|js}); + CSS.unsafe({js|listStyleType|js}, {js|hebrew|js}); + CSS.unsafe({js|listStyleType|js}, {js|cjk-decimal|js}); + CSS.unsafe({js|listStyleType|js}, {js|cjk-ideographic|js}); + CSS.unsafe({js|listStyleType|js}, {js|hiragana|js}); + CSS.unsafe({js|listStyleType|js}, {js|katakana|js}); + CSS.unsafe({js|listStyleType|js}, {js|hiragana-iroha|js}); + CSS.unsafe({js|listStyleType|js}, {js|katakana-iroha|js}); + CSS.unsafe({js|listStyleType|js}, {js|japanese-informal|js}); + CSS.unsafe({js|listStyleType|js}, {js|japanese-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|korean-hangul-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|korean-hanja-informal|js}); + CSS.unsafe({js|listStyleType|js}, {js|korean-hanja-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|simp-chinese-informal|js}); + CSS.unsafe({js|listStyleType|js}, {js|simp-chinese-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|trad-chinese-informal|js}); + CSS.unsafe({js|listStyleType|js}, {js|trad-chinese-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|cjk-heavenly-stem|js}); + CSS.unsafe({js|listStyleType|js}, {js|cjk-earthly-branch|js}); + CSS.unsafe({js|listStyleType|js}, {js|trad-chinese-informal|js}); + CSS.unsafe({js|listStyleType|js}, {js|trad-chinese-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|simp-chinese-informal|js}); + CSS.unsafe({js|listStyleType|js}, {js|simp-chinese-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|japanese-informal|js}); + CSS.unsafe({js|listStyleType|js}, {js|japanese-formal|js}); + CSS.unsafe({js|listStyleType|js}, {js|arabic-indic|js}); + CSS.unsafe({js|listStyleType|js}, {js|persian|js}); + CSS.unsafe({js|listStyleType|js}, {js|urdu|js}); + CSS.unsafe({js|listStyleType|js}, {js|devanagari|js}); + CSS.unsafe({js|listStyleType|js}, {js|gurmukhi|js}); + CSS.unsafe({js|listStyleType|js}, {js|gujarati|js}); + CSS.unsafe({js|listStyleType|js}, {js|oriya|js}); + CSS.unsafe({js|listStyleType|js}, {js|kannada|js}); + CSS.unsafe({js|listStyleType|js}, {js|malayalam|js}); + CSS.unsafe({js|listStyleType|js}, {js|bengali|js}); + CSS.unsafe({js|listStyleType|js}, {js|tamil|js}); + CSS.unsafe({js|listStyleType|js}, {js|telugu|js}); + CSS.unsafe({js|listStyleType|js}, {js|thai|js}); + CSS.unsafe({js|listStyleType|js}, {js|lao|js}); + CSS.unsafe({js|listStyleType|js}, {js|myanmar|js}); + CSS.unsafe({js|listStyleType|js}, {js|khmer|js}); + CSS.unsafe({js|listStyleType|js}, {js|hangul|js}); + CSS.unsafe({js|listStyleType|js}, {js|hangul-consonant|js}); + CSS.unsafe({js|listStyleType|js}, {js|ethiopic-halehame|js}); + CSS.unsafe({js|listStyleType|js}, {js|ethiopic-numeric|js}); + CSS.unsafe({js|listStyleType|js}, {js|ethiopic-halehame-am|js}); + CSS.unsafe({js|listStyleType|js}, {js|ethiopic-halehame-ti-er|js}); + CSS.unsafe({js|listStyleType|js}, {js|ethiopic-halehame-ti-et|js}); + CSS.unsafe({js|listStyleType|js}, {js|other-style|js}); + CSS.unsafe({js|listStyleType|js}, {js|inside|js}); + CSS.unsafe({js|listStyleType|js}, {js|outside|js}); + CSS.unsafe({js|listStyleType|js}, {js|\32 style|js}); + CSS.unsafe({js|listStyleType|js}, {js|"-"|js}); + CSS.unsafe({js|listStyleType|js}, {js|'-'|js}); + CSS.unsafe({js|counterReset|js}, {js|foo|js}); + CSS.unsafe({js|counterReset|js}, {js|foo 1|js}); + CSS.unsafe({js|counterReset|js}, {js|foo 1 bar|js}); + CSS.unsafe({js|counterReset|js}, {js|foo 1 bar 2|js}); + CSS.unsafe({js|counterReset|js}, {js|none|js}); + CSS.unsafe({js|counterSet|js}, {js|foo|js}); + CSS.unsafe({js|counterSet|js}, {js|foo 1|js}); + CSS.unsafe({js|counterSet|js}, {js|foo 1 bar|js}); + CSS.unsafe({js|counterSet|js}, {js|foo 1 bar 2|js}); + CSS.unsafe({js|counterSet|js}, {js|none|js}); + CSS.unsafe({js|counterIncrement|js}, {js|foo|js}); + CSS.unsafe({js|counterIncrement|js}, {js|foo 1|js}); + CSS.unsafe({js|counterIncrement|js}, {js|foo 1 bar|js}); + CSS.unsafe({js|counterIncrement|js}, {js|foo 1 bar 2|js}); + CSS.unsafe({js|counterIncrement|js}, {js|none|js}); diff --git a/packages/ppx/test/css-support/logical-propertiesand-values.t/run.t b/packages/ppx/test/css-support/logical-propertiesand-values.t/run.t index 6ee99718..116b0eda 100644 --- a/packages/ppx/test/css-support/logical-propertiesand-values.t/run.t +++ b/packages/ppx/test/css-support/logical-propertiesand-values.t/run.t @@ -33,89 +33,89 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|captionSide|js}, {js|inline-start|js}); - CssJs.unsafe({js|captionSide|js}, {js|inline-end|js}); - CssJs.unsafe({js|float|js}, {js|inline-start|js}); - CssJs.unsafe({js|float|js}, {js|inline-end|js}); - CssJs.unsafe({js|clear|js}, {js|inline-start|js}); - CssJs.unsafe({js|clear|js}, {js|inline-end|js}); - CssJs.unsafe({js|resize|js}, {js|block|js}); - CssJs.unsafe({js|resize|js}, {js|inline|js}); - CssJs.unsafe({js|blockSize|js}, {js|100px|js}); - CssJs.unsafe({js|inlineSize|js}, {js|100px|js}); - CssJs.unsafe({js|minBlockSize|js}, {js|100px|js}); - CssJs.unsafe({js|minInlineSize|js}, {js|100px|js}); - CssJs.unsafe({js|maxBlockSize|js}, {js|100px|js}); - CssJs.unsafe({js|maxInlineSize|js}, {js|100px|js}); - CssJs.unsafe({js|marginBlock|js}, {js|10px|js}); - CssJs.unsafe({js|marginBlock|js}, {js|10px 10px|js}); - CssJs.unsafe({js|marginBlockStart|js}, {js|10px|js}); - CssJs.unsafe({js|marginBlockEnd|js}, {js|10px|js}); - CssJs.unsafe({js|marginInline|js}, {js|10px|js}); - CssJs.unsafe({js|marginInline|js}, {js|10px 10px|js}); - CssJs.unsafe({js|marginInlineStart|js}, {js|10px|js}); - CssJs.unsafe({js|marginInlineEnd|js}, {js|10px|js}); - CssJs.unsafe({js|inset|js}, {js|10px|js}); - CssJs.unsafe({js|inset|js}, {js|10px 10px|js}); - CssJs.unsafe({js|inset|js}, {js|10px 10px 10px|js}); - CssJs.unsafe({js|inset|js}, {js|10px 10px 10px 10px|js}); - CssJs.unsafe({js|insetBlock|js}, {js|10px|js}); - CssJs.unsafe({js|insetBlock|js}, {js|10px 10px|js}); - CssJs.unsafe({js|insetBlockStart|js}, {js|10px|js}); - CssJs.unsafe({js|insetBlockEnd|js}, {js|10px|js}); - CssJs.unsafe({js|insetInline|js}, {js|10px|js}); - CssJs.unsafe({js|insetInline|js}, {js|10px 10px|js}); - CssJs.unsafe({js|insetInlineStart|js}, {js|10px|js}); - CssJs.unsafe({js|insetInlineEnd|js}, {js|10px|js}); - CssJs.unsafe({js|paddingBlock|js}, {js|10px|js}); - CssJs.unsafe({js|paddingBlock|js}, {js|10px 10px|js}); - CssJs.unsafe({js|paddingBlockStart|js}, {js|10px|js}); - CssJs.unsafe({js|paddingBlockEnd|js}, {js|10px|js}); - CssJs.unsafe({js|paddingInline|js}, {js|10px|js}); - CssJs.unsafe({js|paddingInline|js}, {js|10px 10px|js}); - CssJs.unsafe({js|paddingInlineStart|js}, {js|10px|js}); - CssJs.unsafe({js|paddingInlineEnd|js}, {js|10px|js}); - CssJs.unsafe({js|borderBlock|js}, {js|1px|js}); - CssJs.unsafe({js|borderBlock|js}, {js|2px dotted|js}); - CssJs.unsafe({js|borderBlock|js}, {js|medium dashed green|js}); - CssJs.unsafe({js|borderBlockStart|js}, {js|1px|js}); - CssJs.unsafe({js|borderBlockStart|js}, {js|2px dotted|js}); - CssJs.unsafe({js|borderBlockStart|js}, {js|medium dashed green|js}); - CssJs.unsafe({js|borderBlockStartWidth|js}, {js|thin|js}); - CssJs.unsafe({js|borderBlockStartStyle|js}, {js|dotted|js}); - CssJs.unsafe({js|borderBlockStartColor|js}, {js|navy|js}); - CssJs.unsafe({js|borderBlockEnd|js}, {js|1px|js}); - CssJs.unsafe({js|borderBlockEnd|js}, {js|2px dotted|js}); - CssJs.unsafe({js|borderBlockEnd|js}, {js|medium dashed green|js}); - CssJs.unsafe({js|borderBlockEndWidth|js}, {js|thin|js}); - CssJs.unsafe({js|borderBlockEndStyle|js}, {js|dotted|js}); - CssJs.unsafe({js|borderBlockEndColor|js}, {js|navy|js}); - CssJs.unsafe({js|borderBlockColor|js}, {js|navy blue|js}); - CssJs.unsafe({js|borderInline|js}, {js|1px|js}); - CssJs.unsafe({js|borderInline|js}, {js|2px dotted|js}); - CssJs.unsafe({js|borderInline|js}, {js|medium dashed green|js}); - CssJs.unsafe({js|borderInlineStart|js}, {js|1px|js}); - CssJs.unsafe({js|borderInlineStart|js}, {js|2px dotted|js}); - CssJs.unsafe({js|borderInlineStart|js}, {js|medium dashed green|js}); - CssJs.unsafe({js|borderInlineStartWidth|js}, {js|thin|js}); - CssJs.unsafe({js|borderInlineStartStyle|js}, {js|dotted|js}); - CssJs.unsafe({js|borderInlineStartColor|js}, {js|navy|js}); - CssJs.unsafe({js|borderInlineEnd|js}, {js|1px|js}); - CssJs.unsafe({js|borderInlineEnd|js}, {js|2px dotted|js}); - CssJs.unsafe({js|borderInlineEnd|js}, {js|medium dashed green|js}); - CssJs.unsafe({js|borderInlineEndWidth|js}, {js|thin|js}); - CssJs.unsafe({js|borderInlineEndStyle|js}, {js|dotted|js}); - CssJs.unsafe({js|borderInlineEndColor|js}, {js|navy|js}); - CssJs.unsafe({js|borderInlineColor|js}, {js|navy blue|js}); - CssJs.unsafe({js|borderStartStartRadius|js}, {js|0|js}); - CssJs.unsafe({js|borderStartStartRadius|js}, {js|50%|js}); - CssJs.unsafe({js|borderStartStartRadius|js}, {js|250px 100px|js}); - CssJs.unsafe({js|borderStartEndRadius|js}, {js|0|js}); - CssJs.unsafe({js|borderStartEndRadius|js}, {js|50%|js}); - CssJs.unsafe({js|borderStartEndRadius|js}, {js|250px 100px|js}); - CssJs.unsafe({js|borderEndStartRadius|js}, {js|0|js}); - CssJs.unsafe({js|borderEndStartRadius|js}, {js|50%|js}); - CssJs.unsafe({js|borderEndStartRadius|js}, {js|250px 100px|js}); - CssJs.unsafe({js|borderEndEndRadius|js}, {js|0|js}); - CssJs.unsafe({js|borderEndEndRadius|js}, {js|50%|js}); - CssJs.unsafe({js|borderEndEndRadius|js}, {js|250px 100px|js}); + CSS.unsafe({js|captionSide|js}, {js|inline-start|js}); + CSS.unsafe({js|captionSide|js}, {js|inline-end|js}); + CSS.unsafe({js|float|js}, {js|inline-start|js}); + CSS.unsafe({js|float|js}, {js|inline-end|js}); + CSS.unsafe({js|clear|js}, {js|inline-start|js}); + CSS.unsafe({js|clear|js}, {js|inline-end|js}); + CSS.unsafe({js|resize|js}, {js|block|js}); + CSS.unsafe({js|resize|js}, {js|inline|js}); + CSS.unsafe({js|blockSize|js}, {js|100px|js}); + CSS.unsafe({js|inlineSize|js}, {js|100px|js}); + CSS.unsafe({js|minBlockSize|js}, {js|100px|js}); + CSS.unsafe({js|minInlineSize|js}, {js|100px|js}); + CSS.unsafe({js|maxBlockSize|js}, {js|100px|js}); + CSS.unsafe({js|maxInlineSize|js}, {js|100px|js}); + CSS.unsafe({js|marginBlock|js}, {js|10px|js}); + CSS.unsafe({js|marginBlock|js}, {js|10px 10px|js}); + CSS.unsafe({js|marginBlockStart|js}, {js|10px|js}); + CSS.unsafe({js|marginBlockEnd|js}, {js|10px|js}); + CSS.unsafe({js|marginInline|js}, {js|10px|js}); + CSS.unsafe({js|marginInline|js}, {js|10px 10px|js}); + CSS.unsafe({js|marginInlineStart|js}, {js|10px|js}); + CSS.unsafe({js|marginInlineEnd|js}, {js|10px|js}); + CSS.unsafe({js|inset|js}, {js|10px|js}); + CSS.unsafe({js|inset|js}, {js|10px 10px|js}); + CSS.unsafe({js|inset|js}, {js|10px 10px 10px|js}); + CSS.unsafe({js|inset|js}, {js|10px 10px 10px 10px|js}); + CSS.unsafe({js|insetBlock|js}, {js|10px|js}); + CSS.unsafe({js|insetBlock|js}, {js|10px 10px|js}); + CSS.unsafe({js|insetBlockStart|js}, {js|10px|js}); + CSS.unsafe({js|insetBlockEnd|js}, {js|10px|js}); + CSS.unsafe({js|insetInline|js}, {js|10px|js}); + CSS.unsafe({js|insetInline|js}, {js|10px 10px|js}); + CSS.unsafe({js|insetInlineStart|js}, {js|10px|js}); + CSS.unsafe({js|insetInlineEnd|js}, {js|10px|js}); + CSS.unsafe({js|paddingBlock|js}, {js|10px|js}); + CSS.unsafe({js|paddingBlock|js}, {js|10px 10px|js}); + CSS.unsafe({js|paddingBlockStart|js}, {js|10px|js}); + CSS.unsafe({js|paddingBlockEnd|js}, {js|10px|js}); + CSS.unsafe({js|paddingInline|js}, {js|10px|js}); + CSS.unsafe({js|paddingInline|js}, {js|10px 10px|js}); + CSS.unsafe({js|paddingInlineStart|js}, {js|10px|js}); + CSS.unsafe({js|paddingInlineEnd|js}, {js|10px|js}); + CSS.unsafe({js|borderBlock|js}, {js|1px|js}); + CSS.unsafe({js|borderBlock|js}, {js|2px dotted|js}); + CSS.unsafe({js|borderBlock|js}, {js|medium dashed green|js}); + CSS.unsafe({js|borderBlockStart|js}, {js|1px|js}); + CSS.unsafe({js|borderBlockStart|js}, {js|2px dotted|js}); + CSS.unsafe({js|borderBlockStart|js}, {js|medium dashed green|js}); + CSS.unsafe({js|borderBlockStartWidth|js}, {js|thin|js}); + CSS.unsafe({js|borderBlockStartStyle|js}, {js|dotted|js}); + CSS.unsafe({js|borderBlockStartColor|js}, {js|navy|js}); + CSS.unsafe({js|borderBlockEnd|js}, {js|1px|js}); + CSS.unsafe({js|borderBlockEnd|js}, {js|2px dotted|js}); + CSS.unsafe({js|borderBlockEnd|js}, {js|medium dashed green|js}); + CSS.unsafe({js|borderBlockEndWidth|js}, {js|thin|js}); + CSS.unsafe({js|borderBlockEndStyle|js}, {js|dotted|js}); + CSS.unsafe({js|borderBlockEndColor|js}, {js|navy|js}); + CSS.unsafe({js|borderBlockColor|js}, {js|navy blue|js}); + CSS.unsafe({js|borderInline|js}, {js|1px|js}); + CSS.unsafe({js|borderInline|js}, {js|2px dotted|js}); + CSS.unsafe({js|borderInline|js}, {js|medium dashed green|js}); + CSS.unsafe({js|borderInlineStart|js}, {js|1px|js}); + CSS.unsafe({js|borderInlineStart|js}, {js|2px dotted|js}); + CSS.unsafe({js|borderInlineStart|js}, {js|medium dashed green|js}); + CSS.unsafe({js|borderInlineStartWidth|js}, {js|thin|js}); + CSS.unsafe({js|borderInlineStartStyle|js}, {js|dotted|js}); + CSS.unsafe({js|borderInlineStartColor|js}, {js|navy|js}); + CSS.unsafe({js|borderInlineEnd|js}, {js|1px|js}); + CSS.unsafe({js|borderInlineEnd|js}, {js|2px dotted|js}); + CSS.unsafe({js|borderInlineEnd|js}, {js|medium dashed green|js}); + CSS.unsafe({js|borderInlineEndWidth|js}, {js|thin|js}); + CSS.unsafe({js|borderInlineEndStyle|js}, {js|dotted|js}); + CSS.unsafe({js|borderInlineEndColor|js}, {js|navy|js}); + CSS.unsafe({js|borderInlineColor|js}, {js|navy blue|js}); + CSS.unsafe({js|borderStartStartRadius|js}, {js|0|js}); + CSS.unsafe({js|borderStartStartRadius|js}, {js|50%|js}); + CSS.unsafe({js|borderStartStartRadius|js}, {js|250px 100px|js}); + CSS.unsafe({js|borderStartEndRadius|js}, {js|0|js}); + CSS.unsafe({js|borderStartEndRadius|js}, {js|50%|js}); + CSS.unsafe({js|borderStartEndRadius|js}, {js|250px 100px|js}); + CSS.unsafe({js|borderEndStartRadius|js}, {js|0|js}); + CSS.unsafe({js|borderEndStartRadius|js}, {js|50%|js}); + CSS.unsafe({js|borderEndStartRadius|js}, {js|250px 100px|js}); + CSS.unsafe({js|borderEndEndRadius|js}, {js|0|js}); + CSS.unsafe({js|borderEndEndRadius|js}, {js|50%|js}); + CSS.unsafe({js|borderEndEndRadius|js}, {js|250px 100px|js}); diff --git a/packages/ppx/test/css-support/masking-module.t/run.t b/packages/ppx/test/css-support/masking-module.t/run.t index 24603138..52d26c66 100644 --- a/packages/ppx/test/css-support/masking-module.t/run.t +++ b/packages/ppx/test/css-support/masking-module.t/run.t @@ -32,130 +32,130 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|clipPath|js}, {js|url('#clip')|js}); - CssJs.unsafe({js|clipPath|js}, {js|inset(50%)|js}); - CssJs.unsafe({js|clipPath|js}, {js|path('M 20 20 H 80 V 30')|js}); - CssJs.unsafe({js|clipPath|js}, {js|border-box|js}); - CssJs.unsafe({js|clipPath|js}, {js|padding-box|js}); - CssJs.unsafe({js|clipPath|js}, {js|content-box|js}); - CssJs.unsafe({js|clipPath|js}, {js|margin-box|js}); - CssJs.unsafe({js|clipPath|js}, {js|fill-box|js}); - CssJs.unsafe({js|clipPath|js}, {js|stroke-box|js}); - CssJs.unsafe({js|clipPath|js}, {js|view-box|js}); - CssJs.unsafe({js|clipPath|js}, {js|none|js}); - CssJs.unsafe({js|clipRule|js}, {js|nonzero|js}); - CssJs.unsafe({js|clipRule|js}, {js|evenodd|js}); - CssJs.maskImage(`none); - CssJs.maskImage( + CSS.unsafe({js|clipPath|js}, {js|url('#clip')|js}); + CSS.unsafe({js|clipPath|js}, {js|inset(50%)|js}); + CSS.unsafe({js|clipPath|js}, {js|path('M 20 20 H 80 V 30')|js}); + CSS.unsafe({js|clipPath|js}, {js|border-box|js}); + CSS.unsafe({js|clipPath|js}, {js|padding-box|js}); + CSS.unsafe({js|clipPath|js}, {js|content-box|js}); + CSS.unsafe({js|clipPath|js}, {js|margin-box|js}); + CSS.unsafe({js|clipPath|js}, {js|fill-box|js}); + CSS.unsafe({js|clipPath|js}, {js|stroke-box|js}); + CSS.unsafe({js|clipPath|js}, {js|view-box|js}); + CSS.unsafe({js|clipPath|js}, {js|none|js}); + CSS.unsafe({js|clipRule|js}, {js|nonzero|js}); + CSS.unsafe({js|clipRule|js}, {js|evenodd|js}); + CSS.maskImage(`none); + CSS.maskImage( `linearGradient(( Some(`deg(45.)), - [|(Some(`hex({js|333|js})), None), (Some(`hex({js|000|js})), None)|]: CssJs.Types.Gradient.color_stop_list, + [|(Some(`hex({js|333|js})), None), (Some(`hex({js|000|js})), None)|]: CSS.Types.Gradient.color_stop_list, )), ); - CssJs.unsafe({js|maskImage|js}, {js|url(image.png)|js}); - CssJs.unsafe({js|maskMode|js}, {js|alpha|js}); - CssJs.unsafe({js|maskMode|js}, {js|luminance|js}); - CssJs.unsafe({js|maskMode|js}, {js|match-source|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|repeat-x|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|repeat-y|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|space|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|round|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|no-repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|repeat repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|space repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|round repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|no-repeat repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|repeat space|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|space space|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|round space|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|no-repeat space|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|repeat round|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|space round|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|round round|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|no-repeat round|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|repeat no-repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|space no-repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|round no-repeat|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|no-repeat no-repeat|js}); - CssJs.unsafe({js|maskPosition|js}, {js|center|js}); - CssJs.unsafe({js|maskPosition|js}, {js|center center|js}); - CssJs.unsafe({js|maskPosition|js}, {js|left 50%|js}); - CssJs.unsafe({js|maskPosition|js}, {js|bottom 10px right 20px|js}); - CssJs.unsafe({js|maskClip|js}, {js|border-box|js}); - CssJs.unsafe({js|maskClip|js}, {js|padding-box|js}); - CssJs.unsafe({js|maskClip|js}, {js|content-box|js}); - CssJs.unsafe({js|maskClip|js}, {js|margin-box|js}); - CssJs.unsafe({js|maskClip|js}, {js|fill-box|js}); - CssJs.unsafe({js|maskClip|js}, {js|stroke-box|js}); - CssJs.unsafe({js|maskClip|js}, {js|view-box|js}); - CssJs.unsafe({js|maskClip|js}, {js|no-clip|js}); - CssJs.unsafe({js|maskOrigin|js}, {js|border-box|js}); - CssJs.unsafe({js|maskOrigin|js}, {js|padding-box|js}); - CssJs.unsafe({js|maskOrigin|js}, {js|content-box|js}); - CssJs.unsafe({js|maskOrigin|js}, {js|margin-box|js}); - CssJs.unsafe({js|maskOrigin|js}, {js|fill-box|js}); - CssJs.unsafe({js|maskOrigin|js}, {js|stroke-box|js}); - CssJs.unsafe({js|maskOrigin|js}, {js|view-box|js}); - CssJs.unsafe({js|maskSize|js}, {js|auto|js}); - CssJs.unsafe({js|maskSize|js}, {js|10px|js}); - CssJs.unsafe({js|maskSize|js}, {js|cover|js}); - CssJs.unsafe({js|maskSize|js}, {js|contain|js}); - CssJs.unsafe({js|maskSize|js}, {js|10px|js}); - CssJs.unsafe({js|maskSize|js}, {js|50%|js}); - CssJs.unsafe({js|maskSize|js}, {js|10px auto|js}); - CssJs.unsafe({js|maskSize|js}, {js|auto 10%|js}); - CssJs.unsafe({js|maskSize|js}, {js|50em 50%|js}); - CssJs.unsafe({js|maskComposite|js}, {js|add|js}); - CssJs.unsafe({js|maskComposite|js}, {js|subtract|js}); - CssJs.unsafe({js|maskComposite|js}, {js|intersect|js}); - CssJs.unsafe({js|maskComposite|js}, {js|exclude|js}); - CssJs.unsafe({js|mask|js}, {js|top|js}); - CssJs.unsafe({js|mask|js}, {js|space|js}); - CssJs.unsafe({js|mask|js}, {js|url(image.png)|js}); - CssJs.unsafe({js|mask|js}, {js|url(image.png) luminance|js}); - CssJs.unsafe({js|mask|js}, {js|url(image.png) luminance top space|js}); - CssJs.unsafe({js|maskBorderSource|js}, {js|none|js}); - CssJs.unsafe({js|maskBorderSource|js}, {js|url(image.png)|js}); - CssJs.unsafe({js|maskBorderSlice|js}, {js|0 fill|js}); - CssJs.unsafe({js|maskBorderSlice|js}, {js|50% fill|js}); - CssJs.unsafe({js|maskBorderSlice|js}, {js|1.1 fill|js}); - CssJs.unsafe({js|maskBorderSlice|js}, {js|0 1 fill|js}); - CssJs.unsafe({js|maskBorderSlice|js}, {js|0 1 2 fill|js}); - CssJs.unsafe({js|maskBorderSlice|js}, {js|0 1 2 3 fill|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|auto|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|10px|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|50%|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|1|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|1.0|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|auto 1|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|auto 1 50%|js}); - CssJs.unsafe({js|maskBorderWidth|js}, {js|auto 1 50% 1.1|js}); - CssJs.unsafe({js|maskBorderOutset|js}, {js|0|js}); - CssJs.unsafe({js|maskBorderOutset|js}, {js|1.1|js}); - CssJs.unsafe({js|maskBorderOutset|js}, {js|0 1|js}); - CssJs.unsafe({js|maskBorderOutset|js}, {js|0 1 2|js}); - CssJs.unsafe({js|maskBorderOutset|js}, {js|0 1 2 3|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|stretch|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|repeat|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|round|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|space|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|stretch stretch|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|repeat stretch|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|round stretch|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|space stretch|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|stretch repeat|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|repeat repeat|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|round repeat|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|space repeat|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|stretch round|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|repeat round|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|round round|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|space round|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|stretch space|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|repeat space|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|round space|js}); - CssJs.unsafe({js|maskBorderRepeat|js}, {js|space space|js}); - CssJs.unsafe({js|maskBorder|js}, {js|url(image.png)|js}); - CssJs.unsafe({js|maskType|js}, {js|luminance|js}); - CssJs.unsafe({js|maskType|js}, {js|alpha|js}); + CSS.unsafe({js|maskImage|js}, {js|url(image.png)|js}); + CSS.unsafe({js|maskMode|js}, {js|alpha|js}); + CSS.unsafe({js|maskMode|js}, {js|luminance|js}); + CSS.unsafe({js|maskMode|js}, {js|match-source|js}); + CSS.unsafe({js|maskRepeat|js}, {js|repeat-x|js}); + CSS.unsafe({js|maskRepeat|js}, {js|repeat-y|js}); + CSS.unsafe({js|maskRepeat|js}, {js|repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|space|js}); + CSS.unsafe({js|maskRepeat|js}, {js|round|js}); + CSS.unsafe({js|maskRepeat|js}, {js|no-repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|repeat repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|space repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|round repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|no-repeat repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|repeat space|js}); + CSS.unsafe({js|maskRepeat|js}, {js|space space|js}); + CSS.unsafe({js|maskRepeat|js}, {js|round space|js}); + CSS.unsafe({js|maskRepeat|js}, {js|no-repeat space|js}); + CSS.unsafe({js|maskRepeat|js}, {js|repeat round|js}); + CSS.unsafe({js|maskRepeat|js}, {js|space round|js}); + CSS.unsafe({js|maskRepeat|js}, {js|round round|js}); + CSS.unsafe({js|maskRepeat|js}, {js|no-repeat round|js}); + CSS.unsafe({js|maskRepeat|js}, {js|repeat no-repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|space no-repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|round no-repeat|js}); + CSS.unsafe({js|maskRepeat|js}, {js|no-repeat no-repeat|js}); + CSS.unsafe({js|maskPosition|js}, {js|center|js}); + CSS.unsafe({js|maskPosition|js}, {js|center center|js}); + CSS.unsafe({js|maskPosition|js}, {js|left 50%|js}); + CSS.unsafe({js|maskPosition|js}, {js|bottom 10px right 20px|js}); + CSS.unsafe({js|maskClip|js}, {js|border-box|js}); + CSS.unsafe({js|maskClip|js}, {js|padding-box|js}); + CSS.unsafe({js|maskClip|js}, {js|content-box|js}); + CSS.unsafe({js|maskClip|js}, {js|margin-box|js}); + CSS.unsafe({js|maskClip|js}, {js|fill-box|js}); + CSS.unsafe({js|maskClip|js}, {js|stroke-box|js}); + CSS.unsafe({js|maskClip|js}, {js|view-box|js}); + CSS.unsafe({js|maskClip|js}, {js|no-clip|js}); + CSS.unsafe({js|maskOrigin|js}, {js|border-box|js}); + CSS.unsafe({js|maskOrigin|js}, {js|padding-box|js}); + CSS.unsafe({js|maskOrigin|js}, {js|content-box|js}); + CSS.unsafe({js|maskOrigin|js}, {js|margin-box|js}); + CSS.unsafe({js|maskOrigin|js}, {js|fill-box|js}); + CSS.unsafe({js|maskOrigin|js}, {js|stroke-box|js}); + CSS.unsafe({js|maskOrigin|js}, {js|view-box|js}); + CSS.unsafe({js|maskSize|js}, {js|auto|js}); + CSS.unsafe({js|maskSize|js}, {js|10px|js}); + CSS.unsafe({js|maskSize|js}, {js|cover|js}); + CSS.unsafe({js|maskSize|js}, {js|contain|js}); + CSS.unsafe({js|maskSize|js}, {js|10px|js}); + CSS.unsafe({js|maskSize|js}, {js|50%|js}); + CSS.unsafe({js|maskSize|js}, {js|10px auto|js}); + CSS.unsafe({js|maskSize|js}, {js|auto 10%|js}); + CSS.unsafe({js|maskSize|js}, {js|50em 50%|js}); + CSS.unsafe({js|maskComposite|js}, {js|add|js}); + CSS.unsafe({js|maskComposite|js}, {js|subtract|js}); + CSS.unsafe({js|maskComposite|js}, {js|intersect|js}); + CSS.unsafe({js|maskComposite|js}, {js|exclude|js}); + CSS.unsafe({js|mask|js}, {js|top|js}); + CSS.unsafe({js|mask|js}, {js|space|js}); + CSS.unsafe({js|mask|js}, {js|url(image.png)|js}); + CSS.unsafe({js|mask|js}, {js|url(image.png) luminance|js}); + CSS.unsafe({js|mask|js}, {js|url(image.png) luminance top space|js}); + CSS.unsafe({js|maskBorderSource|js}, {js|none|js}); + CSS.unsafe({js|maskBorderSource|js}, {js|url(image.png)|js}); + CSS.unsafe({js|maskBorderSlice|js}, {js|0 fill|js}); + CSS.unsafe({js|maskBorderSlice|js}, {js|50% fill|js}); + CSS.unsafe({js|maskBorderSlice|js}, {js|1.1 fill|js}); + CSS.unsafe({js|maskBorderSlice|js}, {js|0 1 fill|js}); + CSS.unsafe({js|maskBorderSlice|js}, {js|0 1 2 fill|js}); + CSS.unsafe({js|maskBorderSlice|js}, {js|0 1 2 3 fill|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|auto|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|10px|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|50%|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|1|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|1.0|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|auto 1|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|auto 1 50%|js}); + CSS.unsafe({js|maskBorderWidth|js}, {js|auto 1 50% 1.1|js}); + CSS.unsafe({js|maskBorderOutset|js}, {js|0|js}); + CSS.unsafe({js|maskBorderOutset|js}, {js|1.1|js}); + CSS.unsafe({js|maskBorderOutset|js}, {js|0 1|js}); + CSS.unsafe({js|maskBorderOutset|js}, {js|0 1 2|js}); + CSS.unsafe({js|maskBorderOutset|js}, {js|0 1 2 3|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|stretch|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|repeat|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|round|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|space|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|stretch stretch|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|repeat stretch|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|round stretch|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|space stretch|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|stretch repeat|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|repeat repeat|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|round repeat|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|space repeat|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|stretch round|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|repeat round|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|round round|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|space round|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|stretch space|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|repeat space|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|round space|js}); + CSS.unsafe({js|maskBorderRepeat|js}, {js|space space|js}); + CSS.unsafe({js|maskBorder|js}, {js|url(image.png)|js}); + CSS.unsafe({js|maskType|js}, {js|luminance|js}); + CSS.unsafe({js|maskType|js}, {js|alpha|js}); diff --git a/packages/ppx/test/css-support/motion-path-module.t/run.t b/packages/ppx/test/css-support/motion-path-module.t/run.t index 7c03890d..10d54358 100644 --- a/packages/ppx/test/css-support/motion-path-module.t/run.t +++ b/packages/ppx/test/css-support/motion-path-module.t/run.t @@ -33,53 +33,53 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|offset|js}, {js|none|js}); - CssJs.unsafe({js|offset|js}, {js|auto|js}); - CssJs.unsafe({js|offset|js}, {js|center|js}); - CssJs.unsafe({js|offset|js}, {js|200px 100px|js}); - CssJs.unsafe({js|offset|js}, {js|margin-box|js}); - CssJs.unsafe({js|offset|js}, {js|border-box|js}); - CssJs.unsafe({js|offset|js}, {js|padding-box|js}); - CssJs.unsafe({js|offset|js}, {js|content-box|js}); - CssJs.unsafe({js|offset|js}, {js|fill-box|js}); - CssJs.unsafe({js|offset|js}, {js|stroke-box|js}); - CssJs.unsafe({js|offset|js}, {js|view-box|js}); - CssJs.unsafe({js|offset|js}, {js|path('M 20 20 H 80 V 30')|js}); - CssJs.unsafe({js|offset|js}, {js|url(image.png)|js}); - CssJs.unsafe({js|offset|js}, {js|ray(45deg closest-side)|js}); - CssJs.unsafe({js|offset|js}, {js|ray(45deg closest-side) 10%|js}); - CssJs.unsafe({js|offset|js}, {js|ray(45deg closest-side) 10% reverse|js}); - CssJs.unsafe({js|offset|js}, {js|ray(45deg closest-side) reverse 10%|js}); - CssJs.unsafe({js|offset|js}, {js|auto / center|js}); - CssJs.unsafe({js|offset|js}, {js|center / 200px 100px|js}); - CssJs.unsafe({js|offset|js}, {js|ray(45deg closest-side) / 200px 100px|js}); - CssJs.unsafe({js|offsetPath|js}, {js|none|js}); - CssJs.unsafe({js|offsetPath|js}, {js|ray(45deg closest-side)|js}); - CssJs.unsafe({js|offsetPath|js}, {js|ray(45deg farthest-side)|js}); - CssJs.unsafe({js|offsetPath|js}, {js|ray(45deg closest-corner)|js}); - CssJs.unsafe({js|offsetPath|js}, {js|ray(45deg farthest-corner)|js}); - CssJs.unsafe({js|offsetPath|js}, {js|ray(100grad closest-side contain)|js}); - CssJs.unsafe({js|offsetPath|js}, {js|margin-box|js}); - CssJs.unsafe({js|offsetPath|js}, {js|border-box|js}); - CssJs.unsafe({js|offsetPath|js}, {js|padding-box|js}); - CssJs.unsafe({js|offsetPath|js}, {js|content-box|js}); - CssJs.unsafe({js|offsetPath|js}, {js|fill-box|js}); - CssJs.unsafe({js|offsetPath|js}, {js|stroke-box|js}); - CssJs.unsafe({js|offsetPath|js}, {js|view-box|js}); - CssJs.unsafe({js|offsetPath|js}, {js|circle(60%) margin-box|js}); - CssJs.unsafe({js|offsetDistance|js}, {js|10%|js}); - CssJs.unsafe({js|offsetPosition|js}, {js|auto|js}); - CssJs.unsafe({js|offsetPosition|js}, {js|200px|js}); - CssJs.unsafe({js|offsetPosition|js}, {js|200px 100px|js}); - CssJs.unsafe({js|offsetPosition|js}, {js|center|js}); - CssJs.unsafe({js|offsetAnchor|js}, {js|auto|js}); - CssJs.unsafe({js|offsetAnchor|js}, {js|200px|js}); - CssJs.unsafe({js|offsetAnchor|js}, {js|200px 100px|js}); - CssJs.unsafe({js|offsetAnchor|js}, {js|center|js}); - CssJs.unsafe({js|offsetRotate|js}, {js|auto|js}); - CssJs.unsafe({js|offsetRotate|js}, {js|0deg|js}); - CssJs.unsafe({js|offsetRotate|js}, {js|reverse|js}); - CssJs.unsafe({js|offsetRotate|js}, {js|-45deg|js}); - CssJs.unsafe({js|offsetRotate|js}, {js|auto 180deg|js}); - CssJs.unsafe({js|offsetRotate|js}, {js|reverse 45deg|js}); - CssJs.unsafe({js|offsetRotate|js}, {js|2turn reverse|js}); + CSS.unsafe({js|offset|js}, {js|none|js}); + CSS.unsafe({js|offset|js}, {js|auto|js}); + CSS.unsafe({js|offset|js}, {js|center|js}); + CSS.unsafe({js|offset|js}, {js|200px 100px|js}); + CSS.unsafe({js|offset|js}, {js|margin-box|js}); + CSS.unsafe({js|offset|js}, {js|border-box|js}); + CSS.unsafe({js|offset|js}, {js|padding-box|js}); + CSS.unsafe({js|offset|js}, {js|content-box|js}); + CSS.unsafe({js|offset|js}, {js|fill-box|js}); + CSS.unsafe({js|offset|js}, {js|stroke-box|js}); + CSS.unsafe({js|offset|js}, {js|view-box|js}); + CSS.unsafe({js|offset|js}, {js|path('M 20 20 H 80 V 30')|js}); + CSS.unsafe({js|offset|js}, {js|url(image.png)|js}); + CSS.unsafe({js|offset|js}, {js|ray(45deg closest-side)|js}); + CSS.unsafe({js|offset|js}, {js|ray(45deg closest-side) 10%|js}); + CSS.unsafe({js|offset|js}, {js|ray(45deg closest-side) 10% reverse|js}); + CSS.unsafe({js|offset|js}, {js|ray(45deg closest-side) reverse 10%|js}); + CSS.unsafe({js|offset|js}, {js|auto / center|js}); + CSS.unsafe({js|offset|js}, {js|center / 200px 100px|js}); + CSS.unsafe({js|offset|js}, {js|ray(45deg closest-side) / 200px 100px|js}); + CSS.unsafe({js|offsetPath|js}, {js|none|js}); + CSS.unsafe({js|offsetPath|js}, {js|ray(45deg closest-side)|js}); + CSS.unsafe({js|offsetPath|js}, {js|ray(45deg farthest-side)|js}); + CSS.unsafe({js|offsetPath|js}, {js|ray(45deg closest-corner)|js}); + CSS.unsafe({js|offsetPath|js}, {js|ray(45deg farthest-corner)|js}); + CSS.unsafe({js|offsetPath|js}, {js|ray(100grad closest-side contain)|js}); + CSS.unsafe({js|offsetPath|js}, {js|margin-box|js}); + CSS.unsafe({js|offsetPath|js}, {js|border-box|js}); + CSS.unsafe({js|offsetPath|js}, {js|padding-box|js}); + CSS.unsafe({js|offsetPath|js}, {js|content-box|js}); + CSS.unsafe({js|offsetPath|js}, {js|fill-box|js}); + CSS.unsafe({js|offsetPath|js}, {js|stroke-box|js}); + CSS.unsafe({js|offsetPath|js}, {js|view-box|js}); + CSS.unsafe({js|offsetPath|js}, {js|circle(60%) margin-box|js}); + CSS.unsafe({js|offsetDistance|js}, {js|10%|js}); + CSS.unsafe({js|offsetPosition|js}, {js|auto|js}); + CSS.unsafe({js|offsetPosition|js}, {js|200px|js}); + CSS.unsafe({js|offsetPosition|js}, {js|200px 100px|js}); + CSS.unsafe({js|offsetPosition|js}, {js|center|js}); + CSS.unsafe({js|offsetAnchor|js}, {js|auto|js}); + CSS.unsafe({js|offsetAnchor|js}, {js|200px|js}); + CSS.unsafe({js|offsetAnchor|js}, {js|200px 100px|js}); + CSS.unsafe({js|offsetAnchor|js}, {js|center|js}); + CSS.unsafe({js|offsetRotate|js}, {js|auto|js}); + CSS.unsafe({js|offsetRotate|js}, {js|0deg|js}); + CSS.unsafe({js|offsetRotate|js}, {js|reverse|js}); + CSS.unsafe({js|offsetRotate|js}, {js|-45deg|js}); + CSS.unsafe({js|offsetRotate|js}, {js|auto 180deg|js}); + CSS.unsafe({js|offsetRotate|js}, {js|reverse 45deg|js}); + CSS.unsafe({js|offsetRotate|js}, {js|2turn reverse|js}); diff --git a/packages/ppx/test/css-support/multi-column-layout-module.t/run.t b/packages/ppx/test/css-support/multi-column-layout-module.t/run.t index 146e274b..2b6188a1 100644 --- a/packages/ppx/test/css-support/multi-column-layout-module.t/run.t +++ b/packages/ppx/test/css-support/multi-column-layout-module.t/run.t @@ -33,26 +33,26 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.columnWidth(`em(10.)); - CssJs.columnWidth(`auto); - CssJs.unsafe({js|columnCount|js}, {js|2|js}); - CssJs.unsafe({js|columnCount|js}, {js|auto|js}); - CssJs.unsafe({js|columns|js}, {js|100px|js}); - CssJs.unsafe({js|columns|js}, {js|3|js}); - CssJs.unsafe({js|columns|js}, {js|10em 2|js}); - CssJs.unsafe({js|columns|js}, {js|auto auto|js}); - CssJs.unsafe({js|columns|js}, {js|2 10em|js}); - CssJs.unsafe({js|columns|js}, {js|auto 10em|js}); - CssJs.unsafe({js|columns|js}, {js|2 auto|js}); - CssJs.unsafe({js|columnRuleColor|js}, {js|red|js}); - CssJs.unsafe({js|columnRuleStyle|js}, {js|none|js}); - CssJs.unsafe({js|columnRuleStyle|js}, {js|solid|js}); - CssJs.unsafe({js|columnRuleStyle|js}, {js|dotted|js}); - CssJs.unsafe({js|columnRuleWidth|js}, {js|1px|js}); - CssJs.unsafe({js|columnRule|js}, {js|transparent|js}); - CssJs.unsafe({js|columnRule|js}, {js|1px solid black|js}); - CssJs.unsafe({js|columnSpan|js}, {js|none|js}); - CssJs.unsafe({js|columnSpan|js}, {js|all|js}); - CssJs.unsafe({js|columnFill|js}, {js|auto|js}); - CssJs.unsafe({js|columnFill|js}, {js|balance|js}); - CssJs.unsafe({js|columnFill|js}, {js|balance-all|js}); + CSS.columnWidth(`em(10.)); + CSS.columnWidth(`auto); + CSS.unsafe({js|columnCount|js}, {js|2|js}); + CSS.unsafe({js|columnCount|js}, {js|auto|js}); + CSS.unsafe({js|columns|js}, {js|100px|js}); + CSS.unsafe({js|columns|js}, {js|3|js}); + CSS.unsafe({js|columns|js}, {js|10em 2|js}); + CSS.unsafe({js|columns|js}, {js|auto auto|js}); + CSS.unsafe({js|columns|js}, {js|2 10em|js}); + CSS.unsafe({js|columns|js}, {js|auto 10em|js}); + CSS.unsafe({js|columns|js}, {js|2 auto|js}); + CSS.unsafe({js|columnRuleColor|js}, {js|red|js}); + CSS.unsafe({js|columnRuleStyle|js}, {js|none|js}); + CSS.unsafe({js|columnRuleStyle|js}, {js|solid|js}); + CSS.unsafe({js|columnRuleStyle|js}, {js|dotted|js}); + CSS.unsafe({js|columnRuleWidth|js}, {js|1px|js}); + CSS.unsafe({js|columnRule|js}, {js|transparent|js}); + CSS.unsafe({js|columnRule|js}, {js|1px solid black|js}); + CSS.unsafe({js|columnSpan|js}, {js|none|js}); + CSS.unsafe({js|columnSpan|js}, {js|all|js}); + CSS.unsafe({js|columnFill|js}, {js|auto|js}); + CSS.unsafe({js|columnFill|js}, {js|balance|js}); + CSS.unsafe({js|columnFill|js}, {js|balance-all|js}); 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 a4100c8f..30c365d8 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 @@ -37,10 +37,10 @@ If this test fail means that the module is not in sync with the ppx } ]; let selectors = - CssJs.style([| - CssJs.label("selectors"), - CssJs.color(CssJs.white), - CssJs.selector( + CSS.style([| + CSS.label("selectors"), + CSS.color(CSS.white), + CSS.selector( {js|&:hover|js}, [|[%ocaml.error "Unknown property 'colorx'"]|], ), diff --git a/packages/ppx/test/css-support/non-valid-property-location-error.t/run.t b/packages/ppx/test/css-support/non-valid-property-location-error.t/run.t index c66ec171..dc3ef3a4 100644 --- a/packages/ppx/test/css-support/non-valid-property-location-error.t/run.t +++ b/packages/ppx/test/css-support/non-valid-property-location-error.t/run.t @@ -36,8 +36,8 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.style([| - CssJs.display(`block), + CSS.style([| + CSS.display(`block), [%ocaml.error "Unknown property 'heightx'"], |]); 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 4cde1cdf..31f5e1bc 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 @@ -37,10 +37,10 @@ If this test fail means that the module is not in sync with the ppx } ]; let selectors = - CssJs.style([| - CssJs.label("selectors"), - CssJs.color(CssJs.white), - CssJs.selector( + CSS.style([| + CSS.label("selectors"), + CSS.color(CSS.white), + CSS.selector( {js|&:hover|js}, [|[%ocaml.error "Property 'color' has an invalid value: 'cositas'"]|], ), diff --git a/packages/ppx/test/css-support/non-valid-value-location-error.t/run.t b/packages/ppx/test/css-support/non-valid-value-location-error.t/run.t index 13e376c8..56ce5d3e 100644 --- a/packages/ppx/test/css-support/non-valid-value-location-error.t/run.t +++ b/packages/ppx/test/css-support/non-valid-value-location-error.t/run.t @@ -37,11 +37,11 @@ If this test fail means that the module is not in sync with the ppx } ]; Js.log("2000"); - CssJs.style([| - CssJs.height(`percent(100.)), - CssJs.height(`percent(100.)), - CssJs.height(`percent(100.)), - CssJs.height(`percent(100.)), - CssJs.height(`percent(100.)), + CSS.style([| + CSS.height(`percent(100.)), + CSS.height(`percent(100.)), + CSS.height(`percent(100.)), + CSS.height(`percent(100.)), + CSS.height(`percent(100.)), [%ocaml.error "Property 'display' has an invalid value: 'blocki'"], |]); diff --git a/packages/ppx/test/css-support/overflow-module.t/run.t b/packages/ppx/test/css-support/overflow-module.t/run.t index 94545fb5..69e22c11 100644 --- a/packages/ppx/test/css-support/overflow-module.t/run.t +++ b/packages/ppx/test/css-support/overflow-module.t/run.t @@ -33,27 +33,27 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|lineClamp|js}, {js|none|js}); - CssJs.unsafe({js|lineClamp|js}, {js|1|js}); - CssJs.unsafe({js|maxLines|js}, {js|none|js}); - CssJs.unsafe({js|maxLines|js}, {js|1|js}); - CssJs.overflowX(`visible); - CssJs.overflowX(`hidden); - CssJs.overflowX(`clip); - CssJs.overflowX(`scroll); - CssJs.overflowX(`auto); - CssJs.overflowY(`visible); - CssJs.overflowY(`hidden); - CssJs.overflowY(`clip); - CssJs.overflowY(`scroll); - CssJs.overflowY(`auto); - CssJs.overflowInline(`visible); - CssJs.overflowInline(`hidden); - CssJs.overflowInline(`clip); - CssJs.overflowInline(`scroll); - CssJs.overflowInline(`auto); - CssJs.overflowBlock(`visible); - CssJs.overflowBlock(`hidden); - CssJs.overflowBlock(`clip); - CssJs.overflowBlock(`scroll); - CssJs.overflowBlock(`auto); + CSS.unsafe({js|lineClamp|js}, {js|none|js}); + CSS.unsafe({js|lineClamp|js}, {js|1|js}); + CSS.unsafe({js|maxLines|js}, {js|none|js}); + CSS.unsafe({js|maxLines|js}, {js|1|js}); + CSS.overflowX(`visible); + CSS.overflowX(`hidden); + CSS.overflowX(`clip); + CSS.overflowX(`scroll); + CSS.overflowX(`auto); + CSS.overflowY(`visible); + CSS.overflowY(`hidden); + CSS.overflowY(`clip); + CSS.overflowY(`scroll); + CSS.overflowY(`auto); + CSS.overflowInline(`visible); + CSS.overflowInline(`hidden); + CSS.overflowInline(`clip); + CSS.overflowInline(`scroll); + CSS.overflowInline(`auto); + CSS.overflowBlock(`visible); + CSS.overflowBlock(`hidden); + CSS.overflowBlock(`clip); + CSS.overflowBlock(`scroll); + CSS.overflowBlock(`auto); diff --git a/packages/ppx/test/css-support/overscroll-behavior-module.t/run.t b/packages/ppx/test/css-support/overscroll-behavior-module.t/run.t index 0f60cdae..d3791081 100644 --- a/packages/ppx/test/css-support/overscroll-behavior-module.t/run.t +++ b/packages/ppx/test/css-support/overscroll-behavior-module.t/run.t @@ -33,27 +33,27 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|overscrollBehavior|js}, {js|contain|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|none|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|auto|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|contain contain|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|none contain|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|auto contain|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|contain none|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|none none|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|auto none|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|contain auto|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|none auto|js}); - CssJs.unsafe({js|overscrollBehavior|js}, {js|auto auto|js}); - CssJs.unsafe({js|overscrollBehaviorX|js}, {js|contain|js}); - CssJs.unsafe({js|overscrollBehaviorX|js}, {js|none|js}); - CssJs.unsafe({js|overscrollBehaviorX|js}, {js|auto|js}); - CssJs.unsafe({js|overscrollBehaviorY|js}, {js|contain|js}); - CssJs.unsafe({js|overscrollBehaviorY|js}, {js|none|js}); - CssJs.unsafe({js|overscrollBehaviorY|js}, {js|auto|js}); - CssJs.unsafe({js|overscrollBehaviorInline|js}, {js|contain|js}); - CssJs.unsafe({js|overscrollBehaviorInline|js}, {js|none|js}); - CssJs.unsafe({js|overscrollBehaviorInline|js}, {js|auto|js}); - CssJs.unsafe({js|overscrollBehaviorBlock|js}, {js|contain|js}); - CssJs.unsafe({js|overscrollBehaviorBlock|js}, {js|none|js}); - CssJs.unsafe({js|overscrollBehaviorBlock|js}, {js|auto|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|contain|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|none|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|auto|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|contain contain|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|none contain|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|auto contain|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|contain none|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|none none|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|auto none|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|contain auto|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|none auto|js}); + CSS.unsafe({js|overscrollBehavior|js}, {js|auto auto|js}); + CSS.unsafe({js|overscrollBehaviorX|js}, {js|contain|js}); + CSS.unsafe({js|overscrollBehaviorX|js}, {js|none|js}); + CSS.unsafe({js|overscrollBehaviorX|js}, {js|auto|js}); + CSS.unsafe({js|overscrollBehaviorY|js}, {js|contain|js}); + CSS.unsafe({js|overscrollBehaviorY|js}, {js|none|js}); + CSS.unsafe({js|overscrollBehaviorY|js}, {js|auto|js}); + CSS.unsafe({js|overscrollBehaviorInline|js}, {js|contain|js}); + CSS.unsafe({js|overscrollBehaviorInline|js}, {js|none|js}); + CSS.unsafe({js|overscrollBehaviorInline|js}, {js|auto|js}); + CSS.unsafe({js|overscrollBehaviorBlock|js}, {js|contain|js}); + CSS.unsafe({js|overscrollBehaviorBlock|js}, {js|none|js}); + CSS.unsafe({js|overscrollBehaviorBlock|js}, {js|auto|js}); diff --git a/packages/ppx/test/css-support/pointer-events.t/run.t b/packages/ppx/test/css-support/pointer-events.t/run.t index 02f6ba16..2f7597c6 100644 --- a/packages/ppx/test/css-support/pointer-events.t/run.t +++ b/packages/ppx/test/css-support/pointer-events.t/run.t @@ -33,18 +33,18 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|touchAction|js}, {js|auto|js}); - CssJs.unsafe({js|touchAction|js}, {js|none|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-x|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-y|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-x pan-y|js}); - CssJs.unsafe({js|touchAction|js}, {js|manipulation|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-left|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-right|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-up|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-down|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-left pan-up|js}); - CssJs.unsafe({js|touchAction|js}, {js|pinch-zoom|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-x pinch-zoom|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-y pinch-zoom|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-x pan-y pinch-zoom|js}); + CSS.unsafe({js|touchAction|js}, {js|auto|js}); + CSS.unsafe({js|touchAction|js}, {js|none|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-x|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-y|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-x pan-y|js}); + CSS.unsafe({js|touchAction|js}, {js|manipulation|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-left|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-right|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-up|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-down|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-left pan-up|js}); + CSS.unsafe({js|touchAction|js}, {js|pinch-zoom|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-x pinch-zoom|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-y pinch-zoom|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-x pan-y pinch-zoom|js}); diff --git a/packages/ppx/test/css-support/positioned-layout-module.t/run.t b/packages/ppx/test/css-support/positioned-layout-module.t/run.t index eaf457e2..805c892f 100644 --- a/packages/ppx/test/css-support/positioned-layout-module.t/run.t +++ b/packages/ppx/test/css-support/positioned-layout-module.t/run.t @@ -33,4 +33,4 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|position|js}, {js|sticky|js}); + CSS.unsafe({js|position|js}, {js|sticky|js}); diff --git a/packages/ppx/test/css-support/random.t/input.re b/packages/ppx/test/css-support/random.t/input.re index efcd1f8a..52726515 100644 --- a/packages/ppx/test/css-support/random.t/input.re +++ b/packages/ppx/test/css-support/random.t/input.re @@ -22,9 +22,9 @@ [%css {|-webkit-box-orient: vertical;|}]; module Color = { - let text = CssJs.hex("444"); + let text = CSS.hex("444"); }; -let colorTextString = Color.text |> CssJs.Types.Color.toString; +let colorTextString = Color.text |> CSS.Types.Color.toString; [%css {|-webkit-box-shadow: inset 0 0 0 1000px $(Color.background);|}]; [%css {|-webkit-line-clamp: 2;|}]; @@ -35,7 +35,7 @@ let colorTextString = Color.text |> CssJs.Types.Color.toString; [%css {|appearance: none;|}]; [%css {|aspect-ratio: 21 / 8;|}]; -let c = CssJs.hex("e15a46"); +let c = CSS.hex("e15a46"); [%css {|background-color: $(c);|}]; [%css {|border: none;|}]; [%css {|bottom: unset;|}]; diff --git a/packages/ppx/test/css-support/random.t/run.t b/packages/ppx/test/css-support/random.t/run.t index 888a6aa7..bc59119a 100644 --- a/packages/ppx/test/css-support/random.t/run.t +++ b/packages/ppx/test/css-support/random.t/run.t @@ -31,14 +31,14 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|scrollBehavior|js}, {js|smooth|js}); - CssJs.unsafe({js|overflowAnchor|js}, {js|none|js}); - CssJs.width(`calc(`add((`percent(50.), `pxFloat(4.))))); - CssJs.width(`calc(`sub((`pxFloat(20.), `pxFloat(10.))))); - CssJs.width( + CSS.unsafe({js|scrollBehavior|js}, {js|smooth|js}); + CSS.unsafe({js|overflowAnchor|js}, {js|none|js}); + CSS.width(`calc(`add((`percent(50.), `pxFloat(4.))))); + CSS.width(`calc(`sub((`pxFloat(20.), `pxFloat(10.))))); + CSS.width( `calc(`sub((`vh(100.), `calc(`add((`rem(2.), `pxFloat(120.))))))), ); - CssJs.width( + CSS.width( `calc( `sub(( `vh(100.), @@ -61,22 +61,22 @@ If this test fail means that the module is not in sync with the ppx )), ), ); - CssJs.unsafe({js|MozAppearance|js}, {js|textfield|js}); - CssJs.unsafe({js|WebkitAppearance|js}, {js|none|js}); - CssJs.unsafe({js|WebkitBoxOrient|js}, {js|vertical|js}); + CSS.unsafe({js|MozAppearance|js}, {js|textfield|js}); + CSS.unsafe({js|WebkitAppearance|js}, {js|none|js}); + CSS.unsafe({js|WebkitBoxOrient|js}, {js|vertical|js}); module Color = { - let text = CssJs.hex("444"); + let text = CSS.hex("444"); }; - let colorTextString = Color.text |> CssJs.Types.Color.toString; - CssJs.unsafe( + let colorTextString = Color.text |> CSS.Types.Color.toString; + CSS.unsafe( {js|WebkitBoxShadow|js}, {js|inset 0 0 0 1000px $(Color.background)|js}, ); - CssJs.unsafe({js|WebkitLineClamp|js}, {js|2|js}); - CssJs.unsafe({js|WebkitOverflowScrolling|js}, {js|touch|js}); - CssJs.unsafe({js|WebkitTapHighlightColor|js}, {js|transparent|js}); - CssJs.unsafe({js|WebkitTextFillColor|js}, colorTextString); - CssJs.animation( + CSS.unsafe({js|WebkitLineClamp|js}, {js|2|js}); + CSS.unsafe({js|WebkitOverflowScrolling|js}, {js|touch|js}); + CSS.unsafe({js|WebkitTapHighlightColor|js}, {js|transparent|js}); + CSS.unsafe({js|WebkitTextFillColor|js}, colorTextString); + CSS.animation( ~duration=?None, ~delay=?None, ~direction=?None, @@ -86,96 +86,96 @@ If this test fail means that the module is not in sync with the ppx ~iterationCount=?None, {js|none|js}, ); - CssJs.unsafe({js|appearance|js}, {js|none|js}); - CssJs.aspectRatio(`ratio((21, 8))); - let c = CssJs.hex("e15a46"); - (CssJs.backgroundColor(c): CssJs.rule); - CssJs.unsafe({js|border|js}, {js|none|js}); - CssJs.unsafe({js|bottom|js}, {js|unset|js}); - CssJs.boxShadow(`none); - CssJs.unsafe({js|breakInside|js}, {js|avoid|js}); - CssJs.unsafe({js|caretColor|js}, {js|#e15a46|js}); - CssJs.unsafe({js|color|js}, {js|inherit|js}); - CssJs.color(`var({js|--color-link|js})); - CssJs.columnWidth(`pxFloat(125.)); - CssJs.columnWidth(`auto); - CssJs.display(`webkitBox); - CssJs.display(`contents); - CssJs.display(`table); - (CssJs.SVG.fill(c): CssJs.rule); - CssJs.SVG.fill(`currentColor); - CssJs.gap(`pxFloat(4.)); - CssJs.unsafe({js|gridColumn|js}, {js|unset|js}); - CssJs.unsafe({js|gridRow|js}, {js|unset|js}); - CssJs.gridTemplateColumns([|`maxContent, `maxContent|]); - CssJs.gridTemplateColumns([| + CSS.unsafe({js|appearance|js}, {js|none|js}); + CSS.aspectRatio(`ratio((21, 8))); + let c = CSS.hex("e15a46"); + (CSS.backgroundColor(c): CSS.rule); + CSS.unsafe({js|border|js}, {js|none|js}); + CSS.unsafe({js|bottom|js}, {js|unset|js}); + CSS.boxShadow(`none); + 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.columnWidth(`pxFloat(125.)); + CSS.columnWidth(`auto); + CSS.display(`webkitBox); + CSS.display(`contents); + CSS.display(`table); + (CSS.SVG.fill(c): CSS.rule); + CSS.SVG.fill(`currentColor); + CSS.gap(`pxFloat(4.)); + CSS.unsafe({js|gridColumn|js}, {js|unset|js}); + CSS.unsafe({js|gridRow|js}, {js|unset|js}); + CSS.gridTemplateColumns([|`maxContent, `maxContent|]); + CSS.gridTemplateColumns([| `minmax((`pxFloat(10.), `auto)), `fitContent(`pxFloat(20.)), `fitContent(`pxFloat(20.)), |]); - CssJs.gridTemplateColumns([| + CSS.gridTemplateColumns([| `minmax((`pxFloat(51.), `auto)), `fitContent(`pxFloat(20.)), `fitContent(`pxFloat(20.)), |]); - CssJs.gridTemplateColumns([|`repeat((`num(2), [|`auto|]))|]); - CssJs.gridTemplateColumns([|`repeat((`num(3), [|`auto|]))|]); - CssJs.unsafe({js|height|js}, {js|fit-content|js}); - CssJs.justifyItems(`start); - CssJs.unsafe({js|justifySelf|js}, {js|unset|js}); - CssJs.unsafe({js|left|js}, {js|unset|js}); + CSS.gridTemplateColumns([|`repeat((`num(2), [|`auto|]))|]); + CSS.gridTemplateColumns([|`repeat((`num(3), [|`auto|]))|]); + CSS.unsafe({js|height|js}, {js|fit-content|js}); + CSS.justifyItems(`start); + CSS.unsafe({js|justifySelf|js}, {js|unset|js}); + CSS.unsafe({js|left|js}, {js|unset|js}); let maskedImageUrl = `url("https://www.example.com/eye-uncrossed.svg"); - (CssJs.maskImage(maskedImageUrl): CssJs.rule); - CssJs.unsafe({js|maskPosition|js}, {js|center center|js}); - CssJs.unsafe({js|maskRepeat|js}, {js|no-repeat|js}); - CssJs.maxWidth(`maxContent); - CssJs.unsafe({js|outline|js}, {js|none|js}); - CssJs.unsafe({js|overflowAnchor|js}, {js|none|js}); - CssJs.unsafe({js|position|js}, {js|unset|js}); - CssJs.unsafe({js|resize|js}, {js|none|js}); - CssJs.right(`calc(`sub((`percent(50.), `pxFloat(4.))))); - CssJs.unsafe({js|scrollBehavior|js}, {js|smooth|js}); - CssJs.SVG.strokeOpacity(`num(0.)); - (CssJs.SVG.stroke(Color.text): CssJs.rule); - CssJs.top(`calc(`sub((`percent(50.), `pxFloat(1.))))); - CssJs.unsafe({js|top|js}, {js|unset|js}); - CssJs.unsafe({js|touchAction|js}, {js|none|js}); - CssJs.unsafe({js|touchAction|js}, {js|pan-x pan-y|js}); - CssJs.transformOrigin2(`center, `left); - CssJs.transformOrigin2(`center, `right); - CssJs.transformOrigin(`pxFloat(2.)); - CssJs.transformOrigin(`bottom); - CssJs.transformOrigin2(`cm(3.), `pxFloat(2.)); - CssJs.transformOrigin2(`pxFloat(2.), `left); - CssJs.transform(`none); - CssJs.unsafe({js|width|js}, {js|fit-content|js}); - CssJs.width(`maxContent); - CssJs.transitionDelay(`ms(240)); - CssJs.animationDuration(`ms(150)); - CssJs.borderWidth(`thin); - CssJs.outlineWidth(`medium); - CssJs.outline(`medium, `solid, CssJs.red); + (CSS.maskImage(maskedImageUrl): CSS.rule); + CSS.unsafe({js|maskPosition|js}, {js|center center|js}); + CSS.unsafe({js|maskRepeat|js}, {js|no-repeat|js}); + CSS.maxWidth(`maxContent); + CSS.unsafe({js|outline|js}, {js|none|js}); + CSS.unsafe({js|overflowAnchor|js}, {js|none|js}); + CSS.unsafe({js|position|js}, {js|unset|js}); + CSS.unsafe({js|resize|js}, {js|none|js}); + CSS.right(`calc(`sub((`percent(50.), `pxFloat(4.))))); + CSS.unsafe({js|scrollBehavior|js}, {js|smooth|js}); + CSS.SVG.strokeOpacity(`num(0.)); + (CSS.SVG.stroke(Color.text): CSS.rule); + CSS.top(`calc(`sub((`percent(50.), `pxFloat(1.))))); + CSS.unsafe({js|top|js}, {js|unset|js}); + CSS.unsafe({js|touchAction|js}, {js|none|js}); + CSS.unsafe({js|touchAction|js}, {js|pan-x pan-y|js}); + CSS.transformOrigin2(`center, `left); + CSS.transformOrigin2(`center, `right); + CSS.transformOrigin(`pxFloat(2.)); + CSS.transformOrigin(`bottom); + CSS.transformOrigin2(`cm(3.), `pxFloat(2.)); + CSS.transformOrigin2(`pxFloat(2.), `left); + CSS.transform(`none); + CSS.unsafe({js|width|js}, {js|fit-content|js}); + CSS.width(`maxContent); + CSS.transitionDelay(`ms(240)); + CSS.animationDuration(`ms(150)); + CSS.borderWidth(`thin); + CSS.outlineWidth(`medium); + CSS.outline(`medium, `solid, CSS.red); let lola = `hidden; - CssJs.overflow(lola); - CssJs.overflow(`hidden); - (CssJs.overflowY(lola): CssJs.rule); - CssJs.overflowX(`hidden); + CSS.overflow(lola); + CSS.overflow(`hidden); + (CSS.overflowY(lola): CSS.rule); + CSS.overflowX(`hidden); let value = `clip; - CssJs.overflowBlock(`hidden); - (CssJs.overflowBlock(value): CssJs.rule); - (CssJs.overflowInline(value): CssJs.rule); - CssJs.style([| - CssJs.backgroundImage( + CSS.overflowBlock(`hidden); + (CSS.overflowBlock(value): CSS.rule); + (CSS.overflowInline(value): CSS.rule); + CSS.style([| + CSS.backgroundImage( `linearGradient(( Some(`deg(84.)), [| (Some(`hex({js|F80|js})), Some(`percent(0.))), (Some(`rgba((255, 255, 255, `num(0.8)))), Some(`percent(50.))), (Some(`hex({js|2A97FF|js})), Some(`percent(100.))), - |]: CssJs.Types.Gradient.color_stop_list, + |]: CSS.Types.Gradient.color_stop_list, )), ), |]); - CssJs.style([|CssJs.aspectRatio(`ratio((16, 9)))|]); + CSS.style([|CSS.aspectRatio(`ratio((16, 9)))|]); $ dune build diff --git a/packages/ppx/test/css-support/ruby-layout-module.t/run.t b/packages/ppx/test/css-support/ruby-layout-module.t/run.t index 71cb69b5..ef4cb4b8 100644 --- a/packages/ppx/test/css-support/ruby-layout-module.t/run.t +++ b/packages/ppx/test/css-support/ruby-layout-module.t/run.t @@ -33,8 +33,8 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.display(`ruby); - CssJs.display(`rubyBase); - CssJs.display(`rubyText); - CssJs.display(`rubyBaseContainer); - CssJs.display(`rubyTextContainer); + CSS.display(`ruby); + CSS.display(`rubyBase); + CSS.display(`rubyText); + CSS.display(`rubyBaseContainer); + CSS.display(`rubyTextContainer); diff --git a/packages/ppx/test/css-support/scroll-snap-module.t/run.t b/packages/ppx/test/css-support/scroll-snap-module.t/run.t index 38cea174..9ef76ae4 100644 --- a/packages/ppx/test/css-support/scroll-snap-module.t/run.t +++ b/packages/ppx/test/css-support/scroll-snap-module.t/run.t @@ -33,87 +33,87 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|scrollMargin|js}, {js|0px|js}); - CssJs.unsafe({js|scrollMargin|js}, {js|6px 5px|js}); - CssJs.unsafe({js|scrollMargin|js}, {js|10px 20px 30px|js}); - CssJs.unsafe({js|scrollMargin|js}, {js|10px 20px 30px 40px|js}); - CssJs.unsafe({js|scrollMargin|js}, {js|20px 3em 1in 5rem|js}); - CssJs.unsafe({js|scrollMargin|js}, {js|calc(2px)|js}); - CssJs.unsafe({js|scrollMargin|js}, {js|calc(3 * 25px)|js}); - CssJs.unsafe( + CSS.unsafe({js|scrollMargin|js}, {js|0px|js}); + CSS.unsafe({js|scrollMargin|js}, {js|6px 5px|js}); + CSS.unsafe({js|scrollMargin|js}, {js|10px 20px 30px|js}); + CSS.unsafe({js|scrollMargin|js}, {js|10px 20px 30px 40px|js}); + CSS.unsafe({js|scrollMargin|js}, {js|20px 3em 1in 5rem|js}); + CSS.unsafe({js|scrollMargin|js}, {js|calc(2px)|js}); + CSS.unsafe({js|scrollMargin|js}, {js|calc(3 * 25px)|js}); + CSS.unsafe( {js|scrollMargin|js}, {js|calc(3 * 25px) 5px 10em calc(1vw - 5px)|js}, ); - CssJs.unsafe({js|scrollMarginBlock|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginBlock|js}, {js|10px 10px|js}); - CssJs.unsafe({js|scrollMarginBlockEnd|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginBlockStart|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginBottom|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginInline|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginInline|js}, {js|10px 10px|js}); - CssJs.unsafe({js|scrollMarginInlineStart|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginInlineEnd|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginLeft|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginRight|js}, {js|10px|js}); - CssJs.unsafe({js|scrollMarginTop|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|auto|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|0px|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|6px 5px|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|10px 20px 30px|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|10px 20px 30px 40px|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|10px auto 30px auto|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|10%|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|20% 3em 1in 5rem|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|calc(2px)|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|calc(50%)|js}); - CssJs.unsafe({js|scrollPadding|js}, {js|calc(3 * 25px)|js}); - CssJs.unsafe( + CSS.unsafe({js|scrollMarginBlock|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginBlock|js}, {js|10px 10px|js}); + CSS.unsafe({js|scrollMarginBlockEnd|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginBlockStart|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginBottom|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginInline|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginInline|js}, {js|10px 10px|js}); + CSS.unsafe({js|scrollMarginInlineStart|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginInlineEnd|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginLeft|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginRight|js}, {js|10px|js}); + CSS.unsafe({js|scrollMarginTop|js}, {js|10px|js}); + CSS.unsafe({js|scrollPadding|js}, {js|auto|js}); + CSS.unsafe({js|scrollPadding|js}, {js|0px|js}); + CSS.unsafe({js|scrollPadding|js}, {js|6px 5px|js}); + CSS.unsafe({js|scrollPadding|js}, {js|10px 20px 30px|js}); + CSS.unsafe({js|scrollPadding|js}, {js|10px 20px 30px 40px|js}); + CSS.unsafe({js|scrollPadding|js}, {js|10px auto 30px auto|js}); + CSS.unsafe({js|scrollPadding|js}, {js|10%|js}); + CSS.unsafe({js|scrollPadding|js}, {js|20% 3em 1in 5rem|js}); + CSS.unsafe({js|scrollPadding|js}, {js|calc(2px)|js}); + CSS.unsafe({js|scrollPadding|js}, {js|calc(50%)|js}); + CSS.unsafe({js|scrollPadding|js}, {js|calc(3 * 25px)|js}); + CSS.unsafe( {js|scrollPadding|js}, {js|calc(3 * 25px) 5px 10% calc(10% - 5px)|js}, ); - CssJs.unsafe({js|scrollPaddingBlock|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingBlock|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingBlock|js}, {js|10px 50%|js}); - CssJs.unsafe({js|scrollPaddingBlock|js}, {js|50% 50%|js}); - CssJs.unsafe({js|scrollPaddingBlockEnd|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingBlockEnd|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingBlockStart|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingBlockStart|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingBottom|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingBottom|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingInline|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingInline|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingInline|js}, {js|10px 50%|js}); - CssJs.unsafe({js|scrollPaddingInline|js}, {js|50% 50%|js}); - CssJs.unsafe({js|scrollPaddingInlineEnd|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingInlineEnd|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingInlineStart|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingInlineStart|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingLeft|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingLeft|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingRight|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingRight|js}, {js|50%|js}); - CssJs.unsafe({js|scrollPaddingTop|js}, {js|10px|js}); - CssJs.unsafe({js|scrollPaddingTop|js}, {js|50%|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|none|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|start|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|end|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|center|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|none start|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|end center|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|center start|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|end none|js}); - CssJs.unsafe({js|scrollSnapAlign|js}, {js|center center|js}); - CssJs.unsafe({js|scrollSnapStop|js}, {js|normal|js}); - CssJs.unsafe({js|scrollSnapStop|js}, {js|always|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|none|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|x mandatory|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|y mandatory|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|block mandatory|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|inline mandatory|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|both mandatory|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|x proximity|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|y proximity|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|block proximity|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|inline proximity|js}); - CssJs.unsafe({js|scrollSnapType|js}, {js|both proximity|js}); + CSS.unsafe({js|scrollPaddingBlock|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingBlock|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingBlock|js}, {js|10px 50%|js}); + CSS.unsafe({js|scrollPaddingBlock|js}, {js|50% 50%|js}); + CSS.unsafe({js|scrollPaddingBlockEnd|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingBlockEnd|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingBlockStart|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingBlockStart|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingBottom|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingBottom|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingInline|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingInline|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingInline|js}, {js|10px 50%|js}); + CSS.unsafe({js|scrollPaddingInline|js}, {js|50% 50%|js}); + CSS.unsafe({js|scrollPaddingInlineEnd|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingInlineEnd|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingInlineStart|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingInlineStart|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingLeft|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingLeft|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingRight|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingRight|js}, {js|50%|js}); + CSS.unsafe({js|scrollPaddingTop|js}, {js|10px|js}); + CSS.unsafe({js|scrollPaddingTop|js}, {js|50%|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|none|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|start|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|end|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|center|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|none start|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|end center|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|center start|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|end none|js}); + CSS.unsafe({js|scrollSnapAlign|js}, {js|center center|js}); + CSS.unsafe({js|scrollSnapStop|js}, {js|normal|js}); + CSS.unsafe({js|scrollSnapStop|js}, {js|always|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|none|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|x mandatory|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|y mandatory|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|block mandatory|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|inline mandatory|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|both mandatory|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|x proximity|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|y proximity|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|block proximity|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|inline proximity|js}); + CSS.unsafe({js|scrollSnapType|js}, {js|both proximity|js}); diff --git a/packages/ppx/test/css-support/scrollbars-module.t/run.t b/packages/ppx/test/css-support/scrollbars-module.t/run.t index fc672d85..476c2a35 100644 --- a/packages/ppx/test/css-support/scrollbars-module.t/run.t +++ b/packages/ppx/test/css-support/scrollbars-module.t/run.t @@ -33,11 +33,11 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|scrollbarColor|js}, {js|auto|js}); - CssJs.unsafe({js|scrollbarColor|js}, {js|dark|js}); - CssJs.unsafe({js|scrollbarColor|js}, {js|light|js}); - CssJs.unsafe({js|scrollbarColor|js}, {js|red blue|js}); - CssJs.unsafe({js|scrollbarWidth|js}, {js|auto|js}); - CssJs.unsafe({js|scrollbarWidth|js}, {js|thin|js}); - CssJs.unsafe({js|scrollbarWidth|js}, {js|none|js}); - CssJs.unsafe({js|scrollbarWidth|js}, {js|12px|js}); + CSS.unsafe({js|scrollbarColor|js}, {js|auto|js}); + CSS.unsafe({js|scrollbarColor|js}, {js|dark|js}); + CSS.unsafe({js|scrollbarColor|js}, {js|light|js}); + CSS.unsafe({js|scrollbarColor|js}, {js|red blue|js}); + CSS.unsafe({js|scrollbarWidth|js}, {js|auto|js}); + CSS.unsafe({js|scrollbarWidth|js}, {js|thin|js}); + CSS.unsafe({js|scrollbarWidth|js}, {js|none|js}); + CSS.unsafe({js|scrollbarWidth|js}, {js|12px|js}); 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 e1ae2bdd..8fdf9051 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 @@ -37,11 +37,8 @@ If this test fail means that the module is not in sync with the ppx } ]; let _className = - CssJs.style([| - CssJs.label("_className"), - CssJs.selector( - {js|.lolaso :nth-child(2n)|js}, - [|CssJs.color(CssJs.red)|], - ), + CSS.style([| + CSS.label("_className"), + CSS.selector({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 f0efb6ff..7283c345 100644 --- a/packages/ppx/test/css-support/selectors.t/run.t +++ b/packages/ppx/test/css-support/selectors.t/run.t @@ -32,28 +32,28 @@ If this test fail means that the module is not in sync with the ppx } ]; let _chart = - CssJs.style([| - CssJs.label("_chart"), - CssJs.unsafe({js|userSelect|js}, {js|none|js}), - CssJs.selector( + CSS.style([| + CSS.label("_chart"), + CSS.userSelect(`none), + CSS.selector( {js|.recharts-cartesian-grid-horizontal|js}, [| - CssJs.selector( + CSS.selector( {js|line|js}, [| - CssJs.selector( + CSS.selector( {js|:nth-last-child(1), :nth-last-child(2)|js}, - [|CssJs.SVG.strokeOpacity(`num(0.))|], + [|CSS.SVG.strokeOpacity(`num(0.))|], ), |], ), |], ), - CssJs.selector( + CSS.selector( {js|.recharts-scatter .recharts-scatter-symbol .recharts-symbols|js}, [| - CssJs.opacity(0.8), - CssJs.selector({js|:hover|js}, [|CssJs.opacity(1.)|]), + CSS.opacity(0.8), + CSS.selector({js|:hover|js}, [|CSS.opacity(1.)|]), |], ), |]); diff --git a/packages/ppx/test/css-support/svg.t/run.t b/packages/ppx/test/css-support/svg.t/run.t index cd47d29b..a3d8734e 100644 --- a/packages/ppx/test/css-support/svg.t/run.t +++ b/packages/ppx/test/css-support/svg.t/run.t @@ -33,13 +33,13 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.pointerEvents(`auto); - CssJs.pointerEvents(`visiblePainted); - CssJs.pointerEvents(`visibleFill); - CssJs.pointerEvents(`visibleStroke); - CssJs.pointerEvents(`visible); - CssJs.pointerEvents(`painted); - CssJs.pointerEvents(`fill); - CssJs.pointerEvents(`stroke); - CssJs.pointerEvents(`all); - CssJs.pointerEvents(`none); + CSS.pointerEvents(`auto); + CSS.pointerEvents(`visiblePainted); + CSS.pointerEvents(`visibleFill); + CSS.pointerEvents(`visibleStroke); + CSS.pointerEvents(`visible); + CSS.pointerEvents(`painted); + CSS.pointerEvents(`fill); + CSS.pointerEvents(`stroke); + CSS.pointerEvents(`all); + CSS.pointerEvents(`none); diff --git a/packages/ppx/test/css-support/text-decoration.t/run.t b/packages/ppx/test/css-support/text-decoration.t/run.t index 0aaccd20..a837f9b8 100644 --- a/packages/ppx/test/css-support/text-decoration.t/run.t +++ b/packages/ppx/test/css-support/text-decoration.t/run.t @@ -33,97 +33,97 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.textDecorationLine(`none); - CssJs.textDecorationLine(`underline); - CssJs.textDecorationLine(`overline); - CssJs.textDecorationLine(`lineThrough); - CssJs.unsafe({js|textDecorationLine|js}, {js|underline overline|js}); - CssJs.textDecorationColor(CssJs.white); - CssJs.textDecorationStyle(`solid); - CssJs.textDecorationStyle(`double); - CssJs.textDecorationStyle(`dotted); - CssJs.textDecorationStyle(`dashed); - CssJs.textDecorationStyle(`wavy); - CssJs.unsafe({js|textUnderlinePosition|js}, {js|auto|js}); - CssJs.unsafe({js|textUnderlinePosition|js}, {js|under|js}); - CssJs.unsafe({js|textUnderlinePosition|js}, {js|left|js}); - CssJs.unsafe({js|textUnderlinePosition|js}, {js|right|js}); - CssJs.unsafe({js|textUnderlinePosition|js}, {js|under left|js}); - CssJs.unsafe({js|textUnderlinePosition|js}, {js|under right|js}); - CssJs.textEmphasisStyle(`none); - CssJs.textEmphasisStyle(`filled); - CssJs.textEmphasisStyle(`open_); - CssJs.textEmphasisStyle(`dot); - CssJs.textEmphasisStyle(`circle); - CssJs.textEmphasisStyle(`double_circle); - CssJs.textEmphasisStyle(`triangle); - CssJs.textEmphasisStyle(`sesame); - CssJs.textEmphasisStyles(`open_, `dot); - CssJs.textEmphasisStyle(`string({js|foo|js})); - CssJs.textEmphasisColor(CssJs.green); - CssJs.unsafe({js|textEmphasis|js}, {js|open dot green|js}); - CssJs.textEmphasisPosition(`over); - CssJs.textEmphasisPosition(`under); - CssJs.textEmphasisPositions(`over, `left); - CssJs.textEmphasisPositions(`over, `right); - CssJs.textEmphasisPositions(`under, `left); - CssJs.textEmphasisPositions(`under, `left); - CssJs.textEmphasisPositions(`under, `right); - CssJs.textShadow(`none); - CssJs.textShadow( - CssJs.Shadow.text( + CSS.textDecorationLine(`none); + CSS.textDecorationLine(`underline); + CSS.textDecorationLine(`overline); + CSS.textDecorationLine(`lineThrough); + CSS.unsafe({js|textDecorationLine|js}, {js|underline overline|js}); + CSS.textDecorationColor(CSS.white); + CSS.textDecorationStyle(`solid); + CSS.textDecorationStyle(`double); + CSS.textDecorationStyle(`dotted); + CSS.textDecorationStyle(`dashed); + CSS.textDecorationStyle(`wavy); + CSS.unsafe({js|textUnderlinePosition|js}, {js|auto|js}); + CSS.unsafe({js|textUnderlinePosition|js}, {js|under|js}); + CSS.unsafe({js|textUnderlinePosition|js}, {js|left|js}); + CSS.unsafe({js|textUnderlinePosition|js}, {js|right|js}); + CSS.unsafe({js|textUnderlinePosition|js}, {js|under left|js}); + CSS.unsafe({js|textUnderlinePosition|js}, {js|under right|js}); + CSS.textEmphasisStyle(`none); + CSS.textEmphasisStyle(`filled); + CSS.textEmphasisStyle(`open_); + CSS.textEmphasisStyle(`dot); + CSS.textEmphasisStyle(`circle); + CSS.textEmphasisStyle(`double_circle); + CSS.textEmphasisStyle(`triangle); + CSS.textEmphasisStyle(`sesame); + CSS.textEmphasisStyles(`open_, `dot); + CSS.textEmphasisStyle(`string({js|foo|js})); + CSS.textEmphasisColor(CSS.green); + CSS.unsafe({js|textEmphasis|js}, {js|open dot green|js}); + CSS.textEmphasisPosition(`over); + CSS.textEmphasisPosition(`under); + CSS.textEmphasisPositions(`over, `left); + CSS.textEmphasisPositions(`over, `right); + CSS.textEmphasisPositions(`under, `left); + CSS.textEmphasisPositions(`under, `left); + CSS.textEmphasisPositions(`under, `right); + CSS.textShadow(`none); + CSS.textShadow( + CSS.Shadow.text( ~x=`pxFloat(1.), ~y=`pxFloat(2.), ~blur=`pxFloat(3.), - CssJs.black, + CSS.black, ), ); - CssJs.unsafe({js|textDecorationSkip|js}, {js|none|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|objects|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|objects spaces|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|objects leading-spaces|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|objects trailing-spaces|js}); - CssJs.unsafe( + CSS.unsafe({js|textDecorationSkip|js}, {js|none|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|objects|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|objects spaces|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|objects leading-spaces|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|objects trailing-spaces|js}); + CSS.unsafe( {js|textDecorationSkip|js}, {js|objects leading-spaces trailing-spaces|js}, ); - CssJs.unsafe( + CSS.unsafe( {js|textDecorationSkip|js}, {js|objects leading-spaces trailing-spaces edges|js}, ); - CssJs.unsafe( + CSS.unsafe( {js|textDecorationSkip|js}, {js|objects leading-spaces trailing-spaces edges box-decoration|js}, ); - CssJs.unsafe({js|textDecorationSkip|js}, {js|objects edges|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|objects box-decoration|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|spaces|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|spaces edges|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|spaces edges box-decoration|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|spaces box-decoration|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|leading-spaces|js}); - CssJs.unsafe( + CSS.unsafe({js|textDecorationSkip|js}, {js|objects edges|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|objects box-decoration|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|spaces|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|spaces edges|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|spaces edges box-decoration|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|spaces box-decoration|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|leading-spaces|js}); + CSS.unsafe( {js|textDecorationSkip|js}, {js|leading-spaces trailing-spaces edges|js}, ); - CssJs.unsafe( + CSS.unsafe( {js|textDecorationSkip|js}, {js|leading-spaces trailing-spaces edges box-decoration|js}, ); - CssJs.unsafe({js|textDecorationSkip|js}, {js|edges|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|edges box-decoration|js}); - CssJs.unsafe({js|textDecorationSkip|js}, {js|box-decoration|js}); - CssJs.textDecorationSkipInk(`none); - CssJs.textDecorationSkipInk(`auto); - CssJs.textDecorationSkipInk(`all); - CssJs.textDecorationSkipBox(`none); - CssJs.textDecorationSkipBox(`all); - CssJs.textDecorationSkipInset(`none); - CssJs.textDecorationSkipInset(`auto); - CssJs.unsafe({js|textUnderlineOffset|js}, {js|auto|js}); - CssJs.unsafe({js|textUnderlineOffset|js}, {js|3px|js}); - CssJs.unsafe({js|textUnderlineOffset|js}, {js|10%|js}); - CssJs.textDecorationThickness(`auto); - CssJs.unsafe({js|textDecorationThickness|js}, {js|from-font|js}); - CssJs.textDecorationThickness(`pxFloat(3.)); - CssJs.textDecorationThickness(`percent(10.)); + CSS.unsafe({js|textDecorationSkip|js}, {js|edges|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|edges box-decoration|js}); + CSS.unsafe({js|textDecorationSkip|js}, {js|box-decoration|js}); + CSS.textDecorationSkipInk(`none); + CSS.textDecorationSkipInk(`auto); + CSS.textDecorationSkipInk(`all); + CSS.textDecorationSkipBox(`none); + CSS.textDecorationSkipBox(`all); + CSS.textDecorationSkipInset(`none); + CSS.textDecorationSkipInset(`auto); + CSS.unsafe({js|textUnderlineOffset|js}, {js|auto|js}); + CSS.unsafe({js|textUnderlineOffset|js}, {js|3px|js}); + CSS.unsafe({js|textUnderlineOffset|js}, {js|10%|js}); + CSS.textDecorationThickness(`auto); + CSS.unsafe({js|textDecorationThickness|js}, {js|from-font|js}); + CSS.textDecorationThickness(`pxFloat(3.)); + CSS.textDecorationThickness(`percent(10.)); diff --git a/packages/ppx/test/css-support/text-module.t/run.t b/packages/ppx/test/css-support/text-module.t/run.t index 47cc8560..c82dd1a1 100644 --- a/packages/ppx/test/css-support/text-module.t/run.t +++ b/packages/ppx/test/css-support/text-module.t/run.t @@ -33,65 +33,65 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|textTransform|js}, {js|full-width|js}); - CssJs.unsafe({js|textTransform|js}, {js|full-size-kana|js}); - CssJs.tabSize(`num(4.)); - CssJs.tabSize(`em(1.)); - CssJs.lineBreak(`auto); - CssJs.lineBreak(`loose); - CssJs.lineBreak(`normal); - CssJs.lineBreak(`strict); - CssJs.lineBreak(`anywhere); - CssJs.wordBreak(`normal); - CssJs.wordBreak(`keepAll); - CssJs.wordBreak(`breakAll); - CssJs.whiteSpace(`breakSpaces); - CssJs.hyphens(`auto); - CssJs.hyphens(`manual); - CssJs.hyphens(`none); - CssJs.overflowWrap(`normal); - CssJs.unsafe({js|overflowWrap|js}, {js|break-word|js}); - CssJs.overflowWrap(`anywhere); - CssJs.wordWrap(`normal); - CssJs.unsafe({js|wordWrap|js}, {js|break-word|js}); - CssJs.wordWrap(`anywhere); - CssJs.textAlign(`start); - CssJs.textAlign(`end_); - CssJs.textAlign(`left); - CssJs.textAlign(`right); - CssJs.textAlign(`center); - CssJs.textAlign(`justify); - CssJs.textAlign(`matchParent); - CssJs.textAlign(`justifyAll); - CssJs.textAlignAll(`start); - CssJs.textAlignAll(`end_); - CssJs.textAlignAll(`left); - CssJs.textAlignAll(`right); - CssJs.textAlignAll(`center); - CssJs.textAlignAll(`justify); - CssJs.textAlignAll(`matchParent); - CssJs.textAlignLast(`auto); - CssJs.textAlignLast(`start); - CssJs.textAlignLast(`end_); - CssJs.textAlignLast(`left); - CssJs.textAlignLast(`right); - CssJs.textAlignLast(`center); - CssJs.textAlignLast(`justify); - CssJs.textAlignLast(`matchParent); - CssJs.textJustify(`auto); - CssJs.textJustify(`none); - CssJs.textJustify(`interWord); - CssJs.textJustify(`interCharacter); - CssJs.wordSpacing(`percent(50.)); - CssJs.unsafe({js|textIndent|js}, {js|1em hanging|js}); - CssJs.unsafe({js|textIndent|js}, {js|1em each-line|js}); - CssJs.unsafe({js|textIndent|js}, {js|1em hanging each-line|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|none|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|first|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|last|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|force-end|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|allow-end|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|first last|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|first force-end|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|first force-end last|js}); - CssJs.unsafe({js|hangingPunctuation|js}, {js|first allow-end last|js}); + CSS.unsafe({js|textTransform|js}, {js|full-width|js}); + CSS.unsafe({js|textTransform|js}, {js|full-size-kana|js}); + CSS.tabSize(`num(4.)); + CSS.tabSize(`em(1.)); + CSS.lineBreak(`auto); + CSS.lineBreak(`loose); + CSS.lineBreak(`normal); + CSS.lineBreak(`strict); + CSS.lineBreak(`anywhere); + CSS.wordBreak(`normal); + CSS.wordBreak(`keepAll); + CSS.wordBreak(`breakAll); + CSS.whiteSpace(`breakSpaces); + CSS.hyphens(`auto); + CSS.hyphens(`manual); + CSS.hyphens(`none); + CSS.overflowWrap(`normal); + CSS.unsafe({js|overflowWrap|js}, {js|break-word|js}); + CSS.overflowWrap(`anywhere); + CSS.wordWrap(`normal); + CSS.unsafe({js|wordWrap|js}, {js|break-word|js}); + CSS.wordWrap(`anywhere); + CSS.textAlign(`start); + CSS.textAlign(`end_); + CSS.textAlign(`left); + CSS.textAlign(`right); + CSS.textAlign(`center); + CSS.textAlign(`justify); + CSS.textAlign(`matchParent); + CSS.textAlign(`justifyAll); + CSS.textAlignAll(`start); + CSS.textAlignAll(`end_); + CSS.textAlignAll(`left); + CSS.textAlignAll(`right); + CSS.textAlignAll(`center); + CSS.textAlignAll(`justify); + CSS.textAlignAll(`matchParent); + CSS.textAlignLast(`auto); + CSS.textAlignLast(`start); + CSS.textAlignLast(`end_); + CSS.textAlignLast(`left); + CSS.textAlignLast(`right); + CSS.textAlignLast(`center); + CSS.textAlignLast(`justify); + CSS.textAlignLast(`matchParent); + CSS.textJustify(`auto); + CSS.textJustify(`none); + CSS.textJustify(`interWord); + CSS.textJustify(`interCharacter); + CSS.wordSpacing(`percent(50.)); + CSS.unsafe({js|textIndent|js}, {js|1em hanging|js}); + CSS.unsafe({js|textIndent|js}, {js|1em each-line|js}); + CSS.unsafe({js|textIndent|js}, {js|1em hanging each-line|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|none|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|first|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|last|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|force-end|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|allow-end|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|first last|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|first force-end|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|first force-end last|js}); + CSS.unsafe({js|hangingPunctuation|js}, {js|first allow-end last|js}); diff --git a/packages/ppx/test/css-support/transforms-module.t/run.t b/packages/ppx/test/css-support/transforms-module.t/run.t index b0e48e6b..7d4a6c59 100644 --- a/packages/ppx/test/css-support/transforms-module.t/run.t +++ b/packages/ppx/test/css-support/transforms-module.t/run.t @@ -32,77 +32,77 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.transform(`none); - CssJs.transform(CssJs.translate(`pxFloat(5.), `zero)); - CssJs.transform(CssJs.translate(`pxFloat(5.), `pxFloat(10.))); - CssJs.transform(CssJs.translateY(`pxFloat(5.))); - CssJs.transform(CssJs.translateX(`pxFloat(5.))); - CssJs.transform(CssJs.translateY(`percent(5.))); - CssJs.transform(CssJs.translateX(`percent(5.))); - CssJs.transform(CssJs.scale(2., 2.)); - CssJs.transform(CssJs.scale(2., -1.)); - CssJs.transform(CssJs.scaleX(2.)); - CssJs.transform(CssJs.scaleY(2.5)); - CssJs.transform(CssJs.rotate(`deg(45.))); - CssJs.transform(CssJs.skew(`deg(45.), `deg(0.))); - CssJs.transform(CssJs.skew(`deg(45.), `deg(15.))); - CssJs.transform(CssJs.skewX(`deg(45.))); - CssJs.transform(CssJs.skewY(`deg(45.))); - CssJs.transforms([| - CssJs.translate(`pxFloat(50.), `pxFloat(-24.)), - CssJs.skew(`deg(0.), `deg(22.5)), + CSS.transform(`none); + CSS.transform(CSS.translate(`pxFloat(5.), `zero)); + CSS.transform(CSS.translate(`pxFloat(5.), `pxFloat(10.))); + CSS.transform(CSS.translateY(`pxFloat(5.))); + CSS.transform(CSS.translateX(`pxFloat(5.))); + CSS.transform(CSS.translateY(`percent(5.))); + CSS.transform(CSS.translateX(`percent(5.))); + CSS.transform(CSS.scale(2., 2.)); + CSS.transform(CSS.scale(2., -1.)); + CSS.transform(CSS.scaleX(2.)); + CSS.transform(CSS.scaleY(2.5)); + CSS.transform(CSS.rotate(`deg(45.))); + CSS.transform(CSS.skew(`deg(45.), `deg(0.))); + CSS.transform(CSS.skew(`deg(45.), `deg(15.))); + CSS.transform(CSS.skewX(`deg(45.))); + CSS.transform(CSS.skewY(`deg(45.))); + CSS.transforms([| + CSS.translate(`pxFloat(50.), `pxFloat(-24.)), + CSS.skew(`deg(0.), `deg(22.5)), |]); - CssJs.transform(CssJs.translate3d(`zero, `zero, `pxFloat(5.))); - CssJs.transform(CssJs.translateZ(`pxFloat(5.))); - CssJs.transform(CssJs.scale3d(1., 0., -1.)); - CssJs.transform(CssJs.scaleZ(1.5)); - CssJs.transform(CssJs.rotate3d(1., 1., 1., `deg(45.))); - CssJs.transform(CssJs.rotateX(`deg(-45.))); - CssJs.transform(CssJs.rotateY(`deg(-45.))); - CssJs.transform(CssJs.rotateZ(`deg(-45.))); - CssJs.transforms([| - CssJs.translate3d(`pxFloat(50.), `pxFloat(-24.), `pxFloat(5.)), - CssJs.rotate3d(1., 2., 3., `deg(180.)), - CssJs.scale3d(-1., 0., 0.5), + CSS.transform(CSS.translate3d(`zero, `zero, `pxFloat(5.))); + CSS.transform(CSS.translateZ(`pxFloat(5.))); + CSS.transform(CSS.scale3d(1., 0., -1.)); + CSS.transform(CSS.scaleZ(1.5)); + CSS.transform(CSS.rotate3d(1., 1., 1., `deg(45.))); + CSS.transform(CSS.rotateX(`deg(-45.))); + CSS.transform(CSS.rotateY(`deg(-45.))); + CSS.transform(CSS.rotateZ(`deg(-45.))); + CSS.transforms([| + CSS.translate3d(`pxFloat(50.), `pxFloat(-24.), `pxFloat(5.)), + CSS.rotate3d(1., 2., 3., `deg(180.)), + CSS.scale3d(-1., 0., 0.5), |]); - CssJs.unsafe({js|transform|js}, {js|perspective(600px)|js}); - CssJs.transformOrigin(`pxFloat(10.)); - CssJs.transformOrigin(`top); - CssJs.transformOrigin2(`top, `left); - CssJs.transformOrigin2(`percent(50.), `percent(100.)); - CssJs.transformOrigin2(`percent(0.), `left); - CssJs.unsafe({js|transformOrigin|js}, {js|left 50% 0|js}); - CssJs.transformBox(`borderBox); - CssJs.transformBox(`fillBox); - CssJs.transformBox(`viewBox); - CssJs.transformBox(`contentBox); - CssJs.transformBox(`strokeBox); - CssJs.unsafe({js|translate|js}, {js|none|js}); - CssJs.unsafe({js|translate|js}, {js|50%|js}); - CssJs.unsafe({js|translate|js}, {js|50% 50%|js}); - CssJs.unsafe({js|translate|js}, {js|50% 50% 10px|js}); - CssJs.unsafe({js|scale|js}, {js|none|js}); - CssJs.unsafe({js|scale|js}, {js|2|js}); - CssJs.unsafe({js|scale|js}, {js|2 2|js}); - CssJs.unsafe({js|scale|js}, {js|2 2 2|js}); - CssJs.unsafe({js|rotate|js}, {js|none|js}); - CssJs.unsafe({js|rotate|js}, {js|45deg|js}); - CssJs.unsafe({js|rotate|js}, {js|x 45deg|js}); - CssJs.unsafe({js|rotate|js}, {js|y 45deg|js}); - CssJs.unsafe({js|rotate|js}, {js|z 45deg|js}); - CssJs.unsafe({js|rotate|js}, {js|-1 0 2 45deg|js}); - CssJs.unsafe({js|rotate|js}, {js|45deg x|js}); - CssJs.unsafe({js|rotate|js}, {js|45deg y|js}); - CssJs.unsafe({js|rotate|js}, {js|45deg z|js}); - CssJs.unsafe({js|rotate|js}, {js|45deg -1 0 2|js}); - CssJs.transformStyle(`flat); - CssJs.transformStyle(`preserve3d); - CssJs.unsafe({js|perspective|js}, {js|none|js}); - CssJs.unsafe({js|perspective|js}, {js|600px|js}); - CssJs.perspectiveOrigin2(`pxFloat(10.), `center); - CssJs.perspectiveOrigin2(`center, `top); - CssJs.perspectiveOrigin2(`left, `top); - CssJs.unsafe({js|perspectiveOrigin|js}, {js|50% 100%|js}); - CssJs.unsafe({js|perspectiveOrigin|js}, {js|left 0%|js}); - CssJs.backfaceVisibility(`visible); - CssJs.backfaceVisibility(`hidden); + CSS.unsafe({js|transform|js}, {js|perspective(600px)|js}); + CSS.transformOrigin(`pxFloat(10.)); + CSS.transformOrigin(`top); + CSS.transformOrigin2(`top, `left); + CSS.transformOrigin2(`percent(50.), `percent(100.)); + CSS.transformOrigin2(`percent(0.), `left); + CSS.unsafe({js|transformOrigin|js}, {js|left 50% 0|js}); + CSS.transformBox(`borderBox); + CSS.transformBox(`fillBox); + CSS.transformBox(`viewBox); + CSS.transformBox(`contentBox); + CSS.transformBox(`strokeBox); + CSS.unsafe({js|translate|js}, {js|none|js}); + CSS.unsafe({js|translate|js}, {js|50%|js}); + CSS.unsafe({js|translate|js}, {js|50% 50%|js}); + CSS.unsafe({js|translate|js}, {js|50% 50% 10px|js}); + CSS.unsafe({js|scale|js}, {js|none|js}); + CSS.unsafe({js|scale|js}, {js|2|js}); + CSS.unsafe({js|scale|js}, {js|2 2|js}); + CSS.unsafe({js|scale|js}, {js|2 2 2|js}); + CSS.unsafe({js|rotate|js}, {js|none|js}); + CSS.unsafe({js|rotate|js}, {js|45deg|js}); + CSS.unsafe({js|rotate|js}, {js|x 45deg|js}); + CSS.unsafe({js|rotate|js}, {js|y 45deg|js}); + CSS.unsafe({js|rotate|js}, {js|z 45deg|js}); + CSS.unsafe({js|rotate|js}, {js|-1 0 2 45deg|js}); + CSS.unsafe({js|rotate|js}, {js|45deg x|js}); + CSS.unsafe({js|rotate|js}, {js|45deg y|js}); + CSS.unsafe({js|rotate|js}, {js|45deg z|js}); + CSS.unsafe({js|rotate|js}, {js|45deg -1 0 2|js}); + CSS.transformStyle(`flat); + CSS.transformStyle(`preserve3d); + CSS.unsafe({js|perspective|js}, {js|none|js}); + CSS.unsafe({js|perspective|js}, {js|600px|js}); + CSS.perspectiveOrigin2(`pxFloat(10.), `center); + CSS.perspectiveOrigin2(`center, `top); + CSS.perspectiveOrigin2(`left, `top); + CSS.unsafe({js|perspectiveOrigin|js}, {js|50% 100%|js}); + CSS.unsafe({js|perspectiveOrigin|js}, {js|left 0%|js}); + CSS.backfaceVisibility(`visible); + CSS.backfaceVisibility(`hidden); diff --git a/packages/ppx/test/css-support/transitions.t/input.re b/packages/ppx/test/css-support/transitions.t/input.re index 809c325a..8cdeb8f1 100644 --- a/packages/ppx/test/css-support/transitions.t/input.re +++ b/packages/ppx/test/css-support/transitions.t/input.re @@ -31,8 +31,8 @@ // Interpolation let transitions = [| - CssJs.Transition.shorthand("margin-left"), - CssJs.Transition.shorthand(~duration=`s(2), "opacity"), + CSS.Transition.shorthand("margin-left"), + CSS.Transition.shorthand(~duration=`s(2), "opacity"), |]; let property = "margin-right"; let timingFunction = `easeOut; diff --git a/packages/ppx/test/css-support/transitions.t/run.t b/packages/ppx/test/css-support/transitions.t/run.t index 240b7618..15c8c14d 100644 --- a/packages/ppx/test/css-support/transitions.t/run.t +++ b/packages/ppx/test/css-support/transitions.t/run.t @@ -33,98 +33,98 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.transitionProperty({js|none|js}); - CssJs.transitionProperty({js|all|js}); - CssJs.transitionProperty({js|width|js}); - CssJs.unsafe({js|transitionProperty|js}, {js|width, height|js}); - CssJs.transitionDuration(`s(0)); - CssJs.transitionDuration(`s(1)); - CssJs.transitionDuration(`ms(100)); - CssJs.transitionTimingFunction(`ease); - CssJs.transitionTimingFunction(`linear); - CssJs.transitionTimingFunction(`easeIn); - CssJs.transitionTimingFunction(`easeOut); - CssJs.transitionTimingFunction(`easeInOut); - CssJs.transitionTimingFunction(`cubicBezier((0.5, 0.5, 0.5, 0.5))); - CssJs.transitionTimingFunction(`cubicBezier((0.5, 1.5, 0.5, (-2.5)))); - CssJs.transitionTimingFunction(`stepStart); - CssJs.transitionTimingFunction(`stepEnd); - CssJs.transitionTimingFunction(`steps((3, `start))); - CssJs.transitionTimingFunction(`steps((5, `end_))); - CssJs.transitionDelay(`s(1)); - CssJs.transitionDelay(`s(-1)); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionProperty({js|none|js}); + CSS.transitionProperty({js|all|js}); + CSS.transitionProperty({js|width|js}); + CSS.unsafe({js|transitionProperty|js}, {js|width, height|js}); + CSS.transitionDuration(`s(0)); + CSS.transitionDuration(`s(1)); + CSS.transitionDuration(`ms(100)); + CSS.transitionTimingFunction(`ease); + CSS.transitionTimingFunction(`linear); + CSS.transitionTimingFunction(`easeIn); + CSS.transitionTimingFunction(`easeOut); + CSS.transitionTimingFunction(`easeInOut); + CSS.transitionTimingFunction(`cubicBezier((0.5, 0.5, 0.5, 0.5))); + CSS.transitionTimingFunction(`cubicBezier((0.5, 1.5, 0.5, (-2.5)))); + CSS.transitionTimingFunction(`stepStart); + CSS.transitionTimingFunction(`stepEnd); + CSS.transitionTimingFunction(`steps((3, `start))); + CSS.transitionTimingFunction(`steps((5, `end_))); + CSS.transitionDelay(`s(1)); + CSS.transitionDelay(`s(-1)); + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?Some(`s(2)), ~delay=?None, ~timingFunction=?None, {js|margin-right|js}, ), - CssJs.Transition.shorthand( + CSS.Transition.shorthand( ~duration=?Some(`ms(500)), ~delay=?None, ~timingFunction=?None, {js|opacity|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?Some(`s(1)), ~delay=?Some(`s(2)), ~timingFunction=?Some(`linear), {js|width|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?None, ~delay=?None, ~timingFunction=?None, {js|none|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?None, ~delay=?None, ~timingFunction=?None, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?None, ~delay=?None, ~timingFunction=?Some(`easeIn), {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?Some(`ms(500)), ~delay=?None, ~timingFunction=?None, {js|all|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?Some(`ms(200)), ~delay=?Some(`ms(500)), ~timingFunction=?None, {js|all|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?None, ~delay=?None, ~timingFunction=?Some(`linear), {js|all|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=?Some(`s(1)), ~delay=?Some(`ms(500)), ~timingFunction=?Some(`linear), @@ -132,129 +132,129 @@ If this test fail means that the module is not in sync with the ppx ), |]); let transitions = [| - CssJs.Transition.shorthand("margin-left"), - CssJs.Transition.shorthand(~duration=`s(2), "opacity"), + CSS.Transition.shorthand("margin-left"), + CSS.Transition.shorthand(~duration=`s(2), "opacity"), |]; let property = "margin-right"; let timingFunction = `easeOut; let duration = `ms(200); let delay = `s(3); let property2 = "opacity"; - (CssJs.transitionList(transitions): CssJs.rule); - CssJs.transitionList([| - CssJs.Transition.shorthand(~duration, ~delay, ~timingFunction, property), + (CSS.transitionList(transitions): CSS.rule); + CSS.transitionList([| + CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, property), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand(~duration, ~delay, ~timingFunction, property), - CssJs.Transition.shorthand(~duration=`s(0), property2), + CSS.transitionList([| + CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, property), + CSS.Transition.shorthand(~duration=`s(0), property2), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~delay=`s(3), ~timingFunction=`easeOut, property, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~delay=`s(3), ~timingFunction, property, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration, ~delay=`s(3), ~timingFunction, property, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration, ~delay, ~timingFunction=`easeOut, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration, ~delay, ~timingFunction=`easeOut, property, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~delay=`s(3), ~timingFunction, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~delay, ~timingFunction=`easeOut, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction=`easeIn, property, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand(~duration=`ms(200), ~timingFunction, property), + CSS.transitionList([| + CSS.Transition.shorthand(~duration=`ms(200), ~timingFunction, property), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration, ~timingFunction=`easeIn, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand(~duration, ~timingFunction=`easeIn, property), + CSS.transitionList([| + CSS.Transition.shorthand(~duration, ~timingFunction=`easeIn, property), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction=`easeIn, property, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration, ~timingFunction=`easeIn, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand( + CSS.transitionList([| + CSS.Transition.shorthand( ~duration=`ms(200), ~timingFunction, {js|margin-right|js}, ), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand(~duration=`ms(200), property), + CSS.transitionList([| + CSS.Transition.shorthand(~duration=`ms(200), property), |]); - CssJs.transitionList([| - CssJs.Transition.shorthand(~duration, {js|margin-right|js}), + CSS.transitionList([| + CSS.Transition.shorthand(~duration, {js|margin-right|js}), |]); diff --git a/packages/ppx/test/css-support/values-and-units-module.t/input.re b/packages/ppx/test/css-support/values-and-units-module.t/input.re index 98bdbdde..ec4ad203 100644 --- a/packages/ppx/test/css-support/values-and-units-module.t/input.re +++ b/packages/ppx/test/css-support/values-and-units-module.t/input.re @@ -1,18 +1,18 @@ -CssJs.width(`rem(5.)); -CssJs.width(`ch(5.)); -CssJs.width(`vw(5.)); -CssJs.width(`vh(5.)); -CssJs.width(`vmin(5.)); -CssJs.width(`vmax(5.)); -CssJs.width(`calc(`add((`pxFloat(1.), `pxFloat(2.))))); -CssJs.width(`calc(`mult((`pxFloat(5.), `num(2.))))); -CssJs.width(`calc(`mult((`pxFloat(5.), `num(2.))))); -CssJs.width(`calc(`sub((`pxFloat(5.), `pxFloat(10.))))); -CssJs.width(`calc(`sub((`vw(1.), `pxFloat(1.))))); -CssJs.width(`percent(100.)); -CssJs.padding(`rem(5.)); -CssJs.padding(`ch(5.)); -CssJs.padding(`vw(5.)); -CssJs.padding(`vh(5.)); -CssJs.padding(`vmin(5.)); -CssJs.padding(`vmax(5.)); +CSS.width(`rem(5.)); +CSS.width(`ch(5.)); +CSS.width(`vw(5.)); +CSS.width(`vh(5.)); +CSS.width(`vmin(5.)); +CSS.width(`vmax(5.)); +CSS.width(`calc(`add((`pxFloat(1.), `pxFloat(2.))))); +CSS.width(`calc(`mult((`pxFloat(5.), `num(2.))))); +CSS.width(`calc(`mult((`pxFloat(5.), `num(2.))))); +CSS.width(`calc(`sub((`pxFloat(5.), `pxFloat(10.))))); +CSS.width(`calc(`sub((`vw(1.), `pxFloat(1.))))); +CSS.width(`percent(100.)); +CSS.padding(`rem(5.)); +CSS.padding(`ch(5.)); +CSS.padding(`vw(5.)); +CSS.padding(`vh(5.)); +CSS.padding(`vmin(5.)); +CSS.padding(`vmax(5.)); diff --git a/packages/ppx/test/css-support/values-and-units-module.t/run.t b/packages/ppx/test/css-support/values-and-units-module.t/run.t index 23c662b3..14f55564 100644 --- a/packages/ppx/test/css-support/values-and-units-module.t/run.t +++ b/packages/ppx/test/css-support/values-and-units-module.t/run.t @@ -33,21 +33,21 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.width(`rem(5.)); - CssJs.width(`ch(5.)); - CssJs.width(`vw(5.)); - CssJs.width(`vh(5.)); - CssJs.width(`vmin(5.)); - CssJs.width(`vmax(5.)); - CssJs.width(`calc(`add((`pxFloat(1.), `pxFloat(2.))))); - CssJs.width(`calc(`mult((`pxFloat(5.), `num(2.))))); - CssJs.width(`calc(`mult((`pxFloat(5.), `num(2.))))); - CssJs.width(`calc(`sub((`pxFloat(5.), `pxFloat(10.))))); - CssJs.width(`calc(`sub((`vw(1.), `pxFloat(1.))))); - CssJs.width(`percent(100.)); - CssJs.padding(`rem(5.)); - CssJs.padding(`ch(5.)); - CssJs.padding(`vw(5.)); - CssJs.padding(`vh(5.)); - CssJs.padding(`vmin(5.)); - CssJs.padding(`vmax(5.)); + CSS.width(`rem(5.)); + CSS.width(`ch(5.)); + CSS.width(`vw(5.)); + CSS.width(`vh(5.)); + CSS.width(`vmin(5.)); + CSS.width(`vmax(5.)); + CSS.width(`calc(`add((`pxFloat(1.), `pxFloat(2.))))); + CSS.width(`calc(`mult((`pxFloat(5.), `num(2.))))); + CSS.width(`calc(`mult((`pxFloat(5.), `num(2.))))); + CSS.width(`calc(`sub((`pxFloat(5.), `pxFloat(10.))))); + CSS.width(`calc(`sub((`vw(1.), `pxFloat(1.))))); + CSS.width(`percent(100.)); + CSS.padding(`rem(5.)); + CSS.padding(`ch(5.)); + CSS.padding(`vw(5.)); + CSS.padding(`vh(5.)); + CSS.padding(`vmin(5.)); + CSS.padding(`vmax(5.)); diff --git a/packages/ppx/test/css-support/vertical-align.t/run.t b/packages/ppx/test/css-support/vertical-align.t/run.t index 540ba2f6..c204ae09 100644 --- a/packages/ppx/test/css-support/vertical-align.t/run.t +++ b/packages/ppx/test/css-support/vertical-align.t/run.t @@ -33,11 +33,11 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.verticalAlign(`baseline); - CssJs.verticalAlign(`sub); - CssJs.verticalAlign(`super); - CssJs.verticalAlign(`top); - CssJs.verticalAlign(`textTop); - CssJs.verticalAlign(`middle); - CssJs.verticalAlign(`bottom); - CssJs.verticalAlign(`textBottom); + CSS.verticalAlign(`baseline); + CSS.verticalAlign(`sub); + CSS.verticalAlign(`super); + CSS.verticalAlign(`top); + CSS.verticalAlign(`textTop); + CSS.verticalAlign(`middle); + CSS.verticalAlign(`bottom); + CSS.verticalAlign(`textBottom); diff --git a/packages/ppx/test/css-support/will-change-module.t/run.t b/packages/ppx/test/css-support/will-change-module.t/run.t index 799e1e55..618e2235 100644 --- a/packages/ppx/test/css-support/will-change-module.t/run.t +++ b/packages/ppx/test/css-support/will-change-module.t/run.t @@ -33,7 +33,7 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|willChange|js}, {js|scroll-position|js}); - CssJs.unsafe({js|willChange|js}, {js|contents|js}); - CssJs.unsafe({js|willChange|js}, {js|transform|js}); - CssJs.unsafe({js|willChange|js}, {js|top, left|js}); + CSS.unsafe({js|willChange|js}, {js|scroll-position|js}); + CSS.unsafe({js|willChange|js}, {js|contents|js}); + CSS.unsafe({js|willChange|js}, {js|transform|js}); + CSS.unsafe({js|willChange|js}, {js|top, left|js}); diff --git a/packages/ppx/test/css-support/writing-modes.t/run.t b/packages/ppx/test/css-support/writing-modes.t/run.t index 80270899..76fe6224 100644 --- a/packages/ppx/test/css-support/writing-modes.t/run.t +++ b/packages/ppx/test/css-support/writing-modes.t/run.t @@ -33,22 +33,22 @@ If this test fail means that the module is not in sync with the ppx cookies: [], } ]; - CssJs.unsafe({js|direction|js}, {js|ltr|js}); - CssJs.unsafe({js|direction|js}, {js|rtl|js}); - CssJs.unsafe({js|unicodeBidi|js}, {js|normal|js}); - CssJs.unsafe({js|unicodeBidi|js}, {js|embed|js}); - CssJs.unsafe({js|unicodeBidi|js}, {js|isolate|js}); - CssJs.unsafe({js|unicodeBidi|js}, {js|bidi-override|js}); - CssJs.unsafe({js|unicodeBidi|js}, {js|isolate-override|js}); - CssJs.unsafe({js|unicodeBidi|js}, {js|plaintext|js}); - CssJs.unsafe({js|writingMode|js}, {js|horizontal-tb|js}); - CssJs.unsafe({js|writingMode|js}, {js|vertical-rl|js}); - CssJs.unsafe({js|writingMode|js}, {js|vertical-lr|js}); - CssJs.unsafe({js|textOrientation|js}, {js|mixed|js}); - CssJs.unsafe({js|textOrientation|js}, {js|upright|js}); - CssJs.unsafe({js|textOrientation|js}, {js|sideways|js}); - CssJs.unsafe({js|textCombineUpright|js}, {js|none|js}); - CssJs.unsafe({js|textCombineUpright|js}, {js|all|js}); - CssJs.unsafe({js|writingMode|js}, {js|sideways-rl|js}); - CssJs.unsafe({js|writingMode|js}, {js|sideways-lr|js}); - CssJs.unsafe({js|textCombineUpright|js}, {js|digits 2|js}); + CSS.unsafe({js|direction|js}, {js|ltr|js}); + CSS.unsafe({js|direction|js}, {js|rtl|js}); + CSS.unsafe({js|unicodeBidi|js}, {js|normal|js}); + CSS.unsafe({js|unicodeBidi|js}, {js|embed|js}); + CSS.unsafe({js|unicodeBidi|js}, {js|isolate|js}); + CSS.unsafe({js|unicodeBidi|js}, {js|bidi-override|js}); + CSS.unsafe({js|unicodeBidi|js}, {js|isolate-override|js}); + CSS.unsafe({js|unicodeBidi|js}, {js|plaintext|js}); + CSS.unsafe({js|writingMode|js}, {js|horizontal-tb|js}); + CSS.unsafe({js|writingMode|js}, {js|vertical-rl|js}); + CSS.unsafe({js|writingMode|js}, {js|vertical-lr|js}); + CSS.unsafe({js|textOrientation|js}, {js|mixed|js}); + CSS.unsafe({js|textOrientation|js}, {js|upright|js}); + CSS.unsafe({js|textOrientation|js}, {js|sideways|js}); + CSS.unsafe({js|textCombineUpright|js}, {js|none|js}); + CSS.unsafe({js|textCombineUpright|js}, {js|all|js}); + CSS.unsafe({js|writingMode|js}, {js|sideways-rl|js}); + CSS.unsafe({js|writingMode|js}, {js|sideways-lr|js}); + CSS.unsafe({js|textCombineUpright|js}, {js|digits 2|js}); diff --git a/packages/ppx/test/native/At_rule_test.re b/packages/ppx/test/native/At_rule_test.re index 457ad919..86a348f0 100644 --- a/packages/ppx/test/native/At_rule_test.re +++ b/packages/ppx/test/native/At_rule_test.re @@ -11,119 +11,111 @@ let media_query_tests = [ ( "(min-width: 33px)", [%expr [%cx "@media (min-width: 33px) {}"]], - [%expr CssJs.style([|CssJs.media({js|(min-width: 33px)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(min-width: 33px)|js}, [||])|])], ), ( "(min-width: 33px)", [%expr [%cx "@media (min-width: 33px), (min-width: 13px) {}"]], [%expr - CssJs.style([| - CssJs.media({js|(min-width: 33px), (min-width: 13px)|js}, [||]), + CSS.style([| + CSS.media({js|(min-width: 33px), (min-width: 13px)|js}, [||]), |]) ], ), ( "(width >= 33px)", [%expr [%cx "@media (width >= 33px) {}"]], - [%expr CssJs.style([|CssJs.media({js|(width >= 33px)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(width >= 33px)|js}, [||])|])], ), ( "(width <= 33px)", [%expr [%cx "@media (width <= 33px) {}"]], - [%expr CssJs.style([|CssJs.media({js|(width <= 33px)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(width <= 33px)|js}, [||])|])], ), ( "(width < 33px)", [%expr [%cx "@media (width < 33px) {}"]], - [%expr CssJs.style([|CssJs.media({js|(width < 33px)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(width < 33px)|js}, [||])|])], ), ( "(width > 33px)", [%expr [%cx "@media (width > 33px) {}"]], - [%expr CssJs.style([|CssJs.media({js|(width > 33px)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(width > 33px)|js}, [||])|])], ), ( "(30em <= width <= 50em)", [%expr [%cx "@media (30em <= width <= 50em) {}"]], - [%expr - CssJs.style([|CssJs.media({js|(30em <= width <= 50em)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.media({js|(30em <= width <= 50em)|js}, [||])|])], ), ( "(30em < width < 50em)", [%expr [%cx "@media (30em < width < 50em) {}"]], - [%expr - CssJs.style([|CssJs.media({js|(30em < width < 50em)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.media({js|(30em < width < 50em)|js}, [||])|])], ), ( "(hover: hover)", [%expr [%cx "@media (hover: hover) {}"]], - [%expr CssJs.style([|CssJs.media({js|(hover: hover)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(hover: hover)|js}, [||])|])], ), ( "print", [%expr [%cx "@media print {}"]], - [%expr CssJs.style([|CssJs.media({js|print|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|print|js}, [||])|])], ), ( "not print", [%expr [%cx "@media not print {}"]], - [%expr CssJs.style([|CssJs.media({js|not print|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|not print|js}, [||])|])], ), ( "screen and (color))", [%expr [%cx "@media screen and (color) {}"]], - [%expr CssJs.style([|CssJs.media({js|screen and (color)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|screen and (color)|js}, [||])|])], ), ( "(screen)", [%expr [%cx "@media (screen) {}"]], - [%expr CssJs.style([|CssJs.media({js|(screen)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(screen)|js}, [||])|])], ), ( "screen, print", [%expr [%cx "@media screen, print {}"]], - [%expr CssJs.style([|CssJs.media({js|screen, print|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|screen, print|js}, [||])|])], ), ( "(screen, print)", [%expr [%cx "@media (screen, print) {}"]], - [%expr CssJs.style([|CssJs.media({js|(screen, print)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(screen, print)|js}, [||])|])], ), ( "(screen and (color))", [%expr [%cx "@media (screen and (color)) {}"]], - [%expr CssJs.style([|CssJs.media({js|(screen and (color))|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(screen and (color))|js}, [||])|])], ), ( "not screen and (color)", [%expr [%cx "@media not screen and (color) {}"]], - [%expr - CssJs.style([|CssJs.media({js|not screen and (color)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.media({js|not screen and (color)|js}, [||])|])], ), ( "(not (screen and (color))))", [%expr [%cx "@media (not (screen and (color))) {}"]], [%expr - CssJs.style([|CssJs.media({js|(not (screen and (color)))|js}, [||])|]) + CSS.style([|CSS.media({js|(not (screen and (color)))|js}, [||])|]) ], ), ( "(hover: hover) and (color)", [%expr [%cx "@media (hover: hover) and (color) {}"]], [%expr - CssJs.style([|CssJs.media({js|(hover: hover) and (color)|js}, [||])|]) + CSS.style([|CSS.media({js|(hover: hover) and (color)|js}, [||])|]) ], ), ( "(not (color)) and (not (hover))", [%expr [%cx "@media (not (color)) and (not (hover)) {}"]], [%expr - CssJs.style([| - CssJs.media({js|(not (color)) and (not (hover))|js}, [||]), - |]) + CSS.style([|CSS.media({js|(not (color)) and (not (hover))|js}, [||])|]) ], ), ( @@ -132,8 +124,8 @@ let media_query_tests = [ [%cx "@media screen and (min-width: 33px) and (max-height: 15rem) {}"] ], [%expr - CssJs.style([| - CssJs.media( + CSS.style([| + CSS.media( {js|screen and (min-width: 33px) and (max-height: 15rem)|js}, [||], ), @@ -143,27 +135,23 @@ let media_query_tests = [ ( "(all)", [%expr [%cx "@media (all) {}"]], - [%expr CssJs.style([|CssJs.media({js|(all)|js}, [||])|])], + [%expr CSS.style([|CSS.media({js|(all)|js}, [||])|])], ), ( "all and (not (hover))", [%expr [%cx "@media all and (not (hover)){}"]], - [%expr - CssJs.style([|CssJs.media({js|all and (not (hover))|js}, [||])|]) - ], + [%expr CSS.style([|CSS.media({js|all and (not (hover))|js}, [||])|])], ), ( "not all and (monochrome)", [%expr [%cx "@media not all and (monochrome) {}"]], - [%expr - CssJs.style([|CssJs.media({js|not all and (monochrome)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.media({js|not all and (monochrome)|js}, [||])|])], ), ( "screen, print and (color)", [%expr [%cx "@media screen, print and (color) {}"]], [%expr - CssJs.style([|CssJs.media({js|screen, print and (color)|js}, [||])|]) + CSS.style([|CSS.media({js|screen, print and (color)|js}, [||])|]) ], ), ( @@ -172,8 +160,8 @@ let media_query_tests = [ [%cx "@media (min-height: 680px), screen and (orientation: portrait) {}"] ], [%expr - CssJs.style([| - CssJs.media( + CSS.style([| + CSS.media( {js|(min-height: 680px), screen and (orientation: portrait)|js}, [||], ), @@ -183,33 +171,28 @@ let media_query_tests = [ ( "(not (color)) or (hover)", [%expr [%cx "@media (not (color)) or (hover) {}"]], - [%expr - CssJs.style([|CssJs.media({js|(not (color)) or (hover)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.media({js|(not (color)) or (hover)|js}, [||])|])], ), ( "(max-height: $(wat)", [%expr [%cx "@media (max-height: $(wat)) {}"]], [%expr - CssJs.style([| - CssJs.media({js|(max-height: |js} ++ wat ++ {js|)|js}, [||]), + CSS.style([| + CSS.media({js|(max-height: |js} ++ wat ++ {js|)|js}, [||]), |]) ], ), ( "$(wat)", [%expr [%cx "@media $(wat) {}"]], - [%expr CssJs.style([|CssJs.media(wat, [||])|])], + [%expr CSS.style([|CSS.media(wat, [||])|])], ), ( "@media $(Media.tabletUp) and $(largeDesktopDown)", [%expr [%cx "@media $(Media.tabletUp) and $(largeDesktopDown){}"]], [%expr - CssJs.style([| - CssJs.media( - Media.tabletUp ++ {js| and |js} ++ largeDesktopDown, - [||], - ), + CSS.style([| + CSS.media(Media.tabletUp ++ {js| and |js} ++ largeDesktopDown, [||]), |]) ], ), @@ -218,7 +201,7 @@ let media_query_tests = [ "@media (width: calc( 1px + 2px ))", [%expr [%cx "@media (width: calc( 1px + 2px )) {}"]], [%expr - CssJs.style([|CssJs.media({js|(width: calc( 1px + 2px ))|js}, [||])|]) + CSS.style([|CSS.media({js|(width: calc( 1px + 2px ))|js}, [||])|]) ], ), ]; @@ -228,9 +211,9 @@ let keyframe_tests = [ {|%keyframe "0% { color: red } 100% { color: green }"|}, [%expr [%keyframe "0% { color: red } 100% { color: green }"]], [%expr - CssJs.keyframes([| - (0, [|CssJs.color(CssJs.red)|]), - (100, [|CssJs.color(CssJs.green)|]), + CSS.keyframes([| + (0, [|CSS.color(CSS.red)|]), + (100, [|CSS.color(CSS.green)|]), |]) ], ), @@ -238,11 +221,11 @@ let keyframe_tests = [ {|%keyframe "0%, 50%, 3% { color: red } 100% { color: green }"|}, [%expr [%keyframe "0%, 50%, 3% { color: red } 100% { color: green }"]], [%expr - CssJs.keyframes([| - (0, [|CssJs.color(CssJs.red)|]), - (50, [|CssJs.color(CssJs.red)|]), - (3, [|CssJs.color(CssJs.red)|]), - (100, [|CssJs.color(CssJs.green)|]), + CSS.keyframes([| + (0, [|CSS.color(CSS.red)|]), + (50, [|CSS.color(CSS.red)|]), + (3, [|CSS.color(CSS.red)|]), + (100, [|CSS.color(CSS.green)|]), |]) ], ), @@ -250,9 +233,9 @@ let keyframe_tests = [ {|%keyframe "0% { color: red } 100% { color: green }"|}, [%expr [%keyframe "{ 0% { color: red } 100% { color: green }}"]], [%expr - CssJs.keyframes([| - (0, [|CssJs.color(CssJs.red)|]), - (100, [|CssJs.color(CssJs.green)|]), + CSS.keyframes([| + (0, [|CSS.color(CSS.red)|]), + (100, [|CSS.color(CSS.green)|]), |]) ], ), @@ -260,9 +243,9 @@ let keyframe_tests = [ {|%keyframe "from { color: red } to { color: green }"|}, [%expr [%keyframe "{ from { color: red } to { color: green }}"]], [%expr - CssJs.keyframes([| - (0, [|CssJs.color(CssJs.red)|]), - (100, [|CssJs.color(CssJs.green)|]), + CSS.keyframes([| + (0, [|CSS.color(CSS.red)|]), + (100, [|CSS.color(CSS.green)|]), |]) ], ), @@ -273,8 +256,8 @@ let container_query_tests = [ "(min-width: 150px)", [%expr [%cx "@container (min-width: 150px) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container (min-width: 150px)|js}, [||]), + CSS.style([| + CSS.selector({js|@container (min-width: 150px)|js}, [||]), |]) ], ), @@ -282,8 +265,8 @@ let container_query_tests = [ "(max-width: 1000px)", [%expr [%cx "@container (max-width: 1000px) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container (max-width: 1000px)|js}, [||]), + CSS.style([| + CSS.selector({js|@container (max-width: 1000px)|js}, [||]), |]) ], ), @@ -291,8 +274,8 @@ let container_query_tests = [ "name (width >= 150px)", [%expr [%cx "@container name (width >= 150px) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container name (width >= 150px)|js}, [||]), + CSS.style([| + CSS.selector({js|@container name (width >= 150px)|js}, [||]), |]) ], ), @@ -300,17 +283,15 @@ let container_query_tests = [ "(height >= 150px)", [%expr [%cx "@container (height >= 150px) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container (height >= 150px)|js}, [||]), - |]) + CSS.style([|CSS.selector({js|@container (height >= 150px)|js}, [||])|]) ], ), ( "(inline-size >= 150px)", [%expr [%cx "@container (inline-size >= 150px) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container (inline-size >= 150px)|js}, [||]), + CSS.style([| + CSS.selector({js|@container (inline-size >= 150px)|js}, [||]), |]) ], ), @@ -318,8 +299,8 @@ let container_query_tests = [ "(block-size >= 150px)", [%expr [%cx "@container (block-size >= 150px) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container (block-size >= 150px)|js}, [||]), + CSS.style([| + CSS.selector({js|@container (block-size >= 150px)|js}, [||]), |]) ], ), @@ -327,8 +308,8 @@ let container_query_tests = [ "(aspect-ratio: 1 / 1)", [%expr [%cx "@container (aspect-ratio: 1 / 1) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container (aspect-ratio: 1 / 1)|js}, [||]), + CSS.style([| + CSS.selector({js|@container (aspect-ratio: 1 / 1)|js}, [||]), |]) ], ), @@ -336,8 +317,8 @@ let container_query_tests = [ "(orientation: portrait)", [%expr [%cx "@container (orientation: portrait) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container (orientation: portrait)|js}, [||]), + CSS.style([| + CSS.selector({js|@container (orientation: portrait)|js}, [||]), |]) ], ), @@ -345,8 +326,8 @@ let container_query_tests = [ "(width >= 150px) and (orientation: portrait)", [%expr [%cx "@container (width >= 150px) and (orientation: portrait) {}"]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|@container (width >= 150px) and (orientation: portrait)|js}, [||], ), @@ -357,8 +338,8 @@ let container_query_tests = [ "name not (width < 150px)", [%expr [%cx "@container name not (width < 150px) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|@container name not (width < 150px)|js}, [||]), + CSS.style([| + CSS.selector({js|@container name not (width < 150px)|js}, [||]), |]) ], ), @@ -366,8 +347,8 @@ let container_query_tests = [ "(width >= 150px) or (orientation: portrait)", [%expr [%cx "@container (width >= 150px) or (orientation: portrait) {}"]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|@container (width >= 150px) or (orientation: portrait)|js}, [||], ), diff --git a/packages/ppx/test/native/Interpolation_test.re b/packages/ppx/test/native/Interpolation_test.re index f05db9e7..6251d293 100644 --- a/packages/ppx/test/native/Interpolation_test.re +++ b/packages/ppx/test/native/Interpolation_test.re @@ -8,124 +8,122 @@ let tests = ( "color: $(mono100)", [%expr [%css "color: $(mono100)"]], - [%expr (CssJs.color(mono100): CssJs.rule)], + [%expr (CSS.color(mono100): CSS.rule)], ), ( "margin: $(Size.big) $(Size.small)", [%expr [%css "margin: $(Size.big) $(Size.small)"]], - [%expr CssJs.margin2(~v=Size.big, ~h=Size.small)], + [%expr CSS.margin2(~v=Size.big, ~h=Size.small)], ), ( "color: $(mono100)", [%expr [%css "color: $(mono100)"]], - [%expr (CssJs.color(mono100): CssJs.rule)], + [%expr (CSS.color(mono100): CSS.rule)], ), ( "padding: $(Size.small) 0px;", [%expr [%css "padding: $(Size.small) 0px"]], - [%expr CssJs.padding2(~v=Size.small, ~h=`pxFloat(0.))], + [%expr CSS.padding2(~v=Size.small, ~h=`pxFloat(0.))], ), ( "border: 1px solid $(Color.Border.alpha)", [%expr [%css "border: 1px solid $(Color.Border.alpha)"]], - [%expr CssJs.border(`pxFloat(1.), `solid, Color.Border.alpha)], + [%expr CSS.border(`pxFloat(1.), `solid, Color.Border.alpha)], ), ( "outline: 1px solid $(Color.Border.alpha)", [%expr [%css "outline: 1px solid $(Color.Border.alpha)"]], - [%expr CssJs.outline(`pxFloat(1.), `solid, Color.Border.alpha)], + [%expr CSS.outline(`pxFloat(1.), `solid, Color.Border.alpha)], ), ( "border-bottom: 0px solid $(Color.Border.alpha)", [%expr [%css "border-bottom: 0px solid $(Color.Border.alpha)"]], - [%expr CssJs.borderBottom(`pxFloat(0.), `solid, Color.Border.alpha)], + [%expr CSS.borderBottom(`pxFloat(0.), `solid, Color.Border.alpha)], ), ( "width: $(width)", [%expr [%css "width: $(width)"]], - [%expr (CssJs.width(width): CssJs.rule)], + [%expr (CSS.width(width): CSS.rule)], ), ( "max-width: $(max)", [%expr [%css "max-width: $(max)"]], - [%expr (CssJs.maxWidth(max): CssJs.rule)], + [%expr (CSS.maxWidth(max): CSS.rule)], ), ( "height: $(height)", [%expr [%css "height: $(height)"]], - [%expr (CssJs.height(height): CssJs.rule)], + [%expr (CSS.height(height): CSS.rule)], ), ( "border-radius: $(border)", [%expr [%css "border-radius: $(border)"]], - [%expr (CssJs.borderRadius(border): CssJs.rule)], + [%expr (CSS.borderRadius(border): CSS.rule)], ), ( "font-size: $(font)", [%expr [%css "font-size: $(font)"]], - [%expr (CssJs.fontSize(font): CssJs.rule)], + [%expr (CSS.fontSize(font): CSS.rule)], ), ( "font-family: $(mono)", [%expr [%css "font-family: $(mono)"]], - [%expr CssJs.fontFamilies(mono: array(CssJs.Types.FontFamilyName.t))], + [%expr CSS.fontFamilies(mono: array(CSS.Types.FontFamilyName.t))], ), ( "line-height: $(lh)", [%expr [%css "line-height: $(lh)"]], - [%expr (CssJs.lineHeight(lh): CssJs.rule)], + [%expr (CSS.lineHeight(lh): CSS.rule)], ), ( "z-index: $(zLevel)", [%expr [%css "z-index: $(zLevel)"]], - [%expr (CssJs.zIndex(zLevel): CssJs.rule)], + [%expr (CSS.zIndex(zLevel): CSS.rule)], ), ( "left: $(left)", [%expr [%css "left: $(left)"]], - [%expr (CssJs.left(left): CssJs.rule)], + [%expr (CSS.left(left): CSS.rule)], ), ( "text-decoration-color: $(decorationColor)", [%expr [%css "text-decoration-color: $(decorationColor)"]], - [%expr (CssJs.textDecorationColor(decorationColor): CssJs.rule)], + [%expr (CSS.textDecorationColor(decorationColor): CSS.rule)], ), ( "background-image: $(wat);", [%expr [%css "background-image: $(wat);"]], - [%expr CssJs.backgroundImage(wat)], + [%expr CSS.backgroundImage(wat)], ), ( "mask-image: $(externalImageUrl);", [%expr [%css "mask-image: $(externalImageUrl);"]], - [%expr (CssJs.maskImage(externalImageUrl): CssJs.rule)], + [%expr (CSS.maskImage(externalImageUrl): CSS.rule)], ), ( "text-shadow: $(h) $(v) $(blur) $(color)", [%expr [%css "text-shadow: $(h) $(v) $(blur) $(color)"]], - [%expr CssJs.textShadow(CssJs.Shadow.text(~x=h, ~y=v, ~blur, color))], + [%expr CSS.textShadow(CSS.Shadow.text(~x=h, ~y=v, ~blur, color))], ), ( "color: $(Theme.blue)", [%expr [%css "color: $(Theme.blue)"]], - [%expr (CssJs.color(Theme.blue): CssJs.rule)], + [%expr (CSS.color(Theme.blue): CSS.rule)], ), /* Changed properties */ ( "box-shadow: $(h) $(v) $(blur) $(spread) $(color)", [%expr [%css "box-shadow: $(h) $(v) $(blur) $(spread) $(color)"]], [%expr - CssJs.boxShadows([| - CssJs.Shadow.box(~x=h, ~y=v, ~blur, ~spread, color), - |]) + CSS.boxShadows([|CSS.Shadow.box(~x=h, ~y=v, ~blur, ~spread, color)|]) ], ), ( "box-shadow: 10px 10px 0px $(spread) $(color)", [%expr [%css "box-shadow: 10px 10px 0px $(spread) $(color)"]], [%expr - CssJs.boxShadows([| - CssJs.Shadow.box( + CSS.boxShadows([| + CSS.Shadow.box( ~x=`pxFloat(10.), ~y=`pxFloat(10.), ~blur=`pxFloat(0.), @@ -138,48 +136,48 @@ let tests = ( "box-shadow: $(BoxShadow.elevation)", [%expr [%css "box-shadow: $(BoxShadow.elevation)"]], - [%expr CssJs.boxShadows(BoxShadow.elevation)], + [%expr CSS.boxShadows(BoxShadow.elevation)], ), ( "box-shadow: none", [%expr [%css "box-shadow: none"]], - [%expr CssJs.boxShadow(`none)], + [%expr CSS.boxShadow(`none)], ), ( "text-overflow: $(clip)", [%expr [%css "text-overflow: $(clip)"]], - [%expr (CssJs.textOverflow(clip): CssJs.rule)], + [%expr (CSS.textOverflow(clip): CSS.rule)], ), ( "transition-duration: 500ms;", [%expr [%css "transition-duration: 500ms"]], - [%expr CssJs.transitionDuration(`ms(500))], + [%expr CSS.transitionDuration(`ms(500))], ), ( "transition-duration: $(duration)", [%expr [%css "transition-duration: $(duration)"]], - [%expr (CssJs.transitionDuration(duration): CssJs.rule)], + [%expr (CSS.transitionDuration(duration): CSS.rule)], ), ( "animation-play-state: $(state)", [%expr [%css "animation-play-state: $(state)"]], - [%expr (CssJs.animationPlayState(state): CssJs.rule)], + [%expr (CSS.animationPlayState(state): CSS.rule)], ), ( "animation-play-state: paused;", [%expr [%css "animation-play-state: paused"]], - [%expr CssJs.animationPlayState(`paused)], + [%expr CSS.animationPlayState(`paused)], ), ( "column-gap: $(Size.px30);", [%expr [%css "column-gap: $(Size.px30)"]], - [%expr (CssJs.columnGap(Size.px30): CssJs.rule)], + [%expr (CSS.columnGap(Size.px30): CSS.rule)], ), // Test for property not inside properties list on declarations_to_emotion.re, should trigger unsafe interpolation ( "-webkit-text-fill-color: $(Color.red);", [%expr [%css "-webkit-text-fill-color: $(Color.red)"]], - [%expr CssJs.unsafe({js|WebkitTextFillColor|js}, Color.red)], + [%expr CSS.unsafe({js|WebkitTextFillColor|js}, Color.red)], ), ] |> List.map(item => { diff --git a/packages/ppx/test/native/Selector_test.re b/packages/ppx/test/native/Selector_test.re index 0d3ebb57..fe459f83 100644 --- a/packages/ppx/test/native/Selector_test.re +++ b/packages/ppx/test/native/Selector_test.re @@ -8,10 +8,10 @@ let simple_tests = [ ":before { content: '点'; }", [%expr [%cx ":before { content: '点'; }"]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|:before|js}, - [|CssJs.unsafe({js|content|js}, {js|'点'|js})|], + [|CSS.unsafe({js|content|js}, {js|'点'|js})|], ), |]) ], @@ -20,10 +20,10 @@ let simple_tests = [ ":before { content: '•'; }", [%expr [%cx ":before { content: '•'; }"]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|:before|js}, - [|CssJs.unsafe({js|content|js}, {js|'•'|js})|], + [|CSS.unsafe({js|content|js}, {js|'•'|js})|], ), |]) ], @@ -31,96 +31,92 @@ let simple_tests = [ ( ".a", [%expr [%cx ".a {}"]], - [%expr CssJs.style([|CssJs.selector({js|.a|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|.a|js}, [||])|])], ), ( ".bar", [%expr [%cx ".bar {}"]], - [%expr CssJs.style([|CssJs.selector({js|.bar|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|.bar|js}, [||])|])], ), ( "#bar", [%expr [%cx "#bar {}"]], - [%expr CssJs.style([|CssJs.selector({js|#bar|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|#bar|js}, [||])|])], ), ( "div", [%expr [%cx "div {}"]], - [%expr CssJs.style([|CssJs.selector({js|div|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|div|js}, [||])|])], ), ( "[id=baz]", [%expr [%cx {js|[id=baz] {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|[id=baz]|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|[id=baz]|js}, [||])|])], ), ( "[id=\"baz\"]", [%expr [%cx {js|[id="baz"] {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|[id="baz"]|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|[id="baz"]|js}, [||])|])], ), ( "[title=baz]", [%expr [%cx {js|[title=baz] {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|[title=baz]|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|[title=baz]|js}, [||])|])], ), ( "[title=\"baz\"]", [%expr [%cx {js|[title="baz"] {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|[title="baz"]|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|[title="baz"]|js}, [||])|])], ), ( "nth-child(even)", [%expr [%cx "&:nth-child(even) {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:nth-child(even)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:nth-child(even)|js}, [||])|])], ), ( "nth-child(odd)", [%expr [%cx "&:nth-child(odd) {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:nth-child(odd)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:nth-child(odd)|js}, [||])|])], ), ( "nth-child(3n+1)", [%expr [%cx "&:nth-child(3n+1) {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:nth-child(3n+1)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:nth-child(3n+1)|js}, [||])|])], ), ( ":nth-child(2n)", [%expr [%cx "&:nth-child(2n) {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:nth-child(2n)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:nth-child(2n)|js}, [||])|])], ), ( ":nth-child(n)", [%expr [%cx "&:nth-child(n) {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:nth-child(n)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:nth-child(n)|js}, [||])|])], ), ( ":nth-child(10n-1)", [%expr [%cx "&:nth-child(10n-1) {}"]], - [%expr - CssJs.style([|CssJs.selector({js|&:nth-child(10n-1)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.selector({js|&:nth-child(10n-1)|js}, [||])|])], ), ( ":nth-child(-n+3)", [%expr [%cx "&:nth-child(-n+3) {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:nth-child(-n+3)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:nth-child(-n+3)|js}, [||])|])], ), ( ":nth-child( 10n -1 )", [%expr [%cx "&:nth-child(10n-1) {}"]], - [%expr - CssJs.style([|CssJs.selector({js|&:nth-child(10n-1)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.selector({js|&:nth-child(10n-1)|js}, [||])|])], ), ( ".a, .b {}", [%expr [%cx ".a, .b {}"]], - [%expr CssJs.style([|CssJs.selector({js|.a, .b|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|.a, .b|js}, [||])|])], ), ( ":nth-child(-n+2)", [%expr [%cx "&:nth-child(-n+2) {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:nth-child(-n+2)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:nth-child(-n+2)|js}, [||])|])], ), ]; @@ -128,34 +124,34 @@ let compound_tests = [ ( "&.bar", [%expr [%cx {js|&.bar {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|&.bar|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&.bar|js}, [||])|])], ), ( "&.bar,&.foo", [%expr [%cx {js|&.bar,&.foo {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|&.bar, &.foo|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&.bar, &.foo|js}, [||])|])], ), ( "&.bar , &.foo", [%expr [%cx {js|&.bar , &.foo {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|&.bar, &.foo|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&.bar, &.foo|js}, [||])|])], ), ( "p:first-child", [%expr [%cx {js|p:first-child {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|p:first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|p:first-child|js}, [||])|])], ), ( ".p.p.p.p {}", [%expr [%cx {js|&.p.p.p.p {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|&.p.p.p.p|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&.p.p.p.p|js}, [||])|])], ), ( "&.$(canvasWithTwoColumns):first-child", [%expr [%cx {js|&.$(canvasWithTwoColumns):first-child {}|js}]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|&.|js} ++ canvasWithTwoColumns ++ {js|:first-child|js}, [||], ), @@ -165,42 +161,38 @@ let compound_tests = [ ( "p#first-child", [%expr [%cx {js|& p#first-child {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|& p#first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& p#first-child|js}, [||])|])], ), ( "#first-child", [%expr [%cx {js|& #first-child {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|& #first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& #first-child|js}, [||])|])], ), ( ":active", [%expr [%cx "&:active {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:active|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:active|js}, [||])|])], ), ( ":hover", [%expr [%cx "&:hover {}"]], - [%expr CssJs.style([|CssJs.selector({js|&:hover|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|&:hover|js}, [||])|])], ), ( "#first-child", [%expr [%cx {js|#first-child {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|#first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|#first-child|js}, [||])|])], ), ( "#first-child::before", [%expr [%cx {js|#first-child::before {}|js}]], - [%expr - CssJs.style([|CssJs.selector({js|#first-child::before|js}, [||])|]) - ], + [%expr CSS.style([|CSS.selector({js|#first-child::before|js}, [||])|])], ), ( "#first-child::before:hover", [%expr [%cx {js|#first-child::before:hover {}|js}]], [%expr - CssJs.style([| - CssJs.selector({js|#first-child::before:hover|js}, [||]), - |]) + CSS.style([|CSS.selector({js|#first-child::before:hover|js}, [||])|]) ], ), ]; @@ -209,138 +201,132 @@ let complex_tests = [ ( "&>a", [%expr [%cx "&>a { }"]], - [%expr CssJs.style([|CssJs.selector({js|& > a|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& > a|js}, [||])|])], ), ( "& > a", [%expr [%cx "& > a {}"]], - [%expr CssJs.style([|CssJs.selector({js|& > a|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& > a|js}, [||])|])], ), ( "& > a > b", [%expr [%cx "& > a > b {}"]], - [%expr CssJs.style([|CssJs.selector({js|& > a > b|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& > a > b|js}, [||])|])], ), ( "& a b", [%expr [%cx "& a b {}"]], - [%expr CssJs.style([|CssJs.selector({js|& a b|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& a b|js}, [||])|])], ), ( "& #first-child", [%expr [%cx {js|& #first-child {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|& #first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& #first-child|js}, [||])|])], ), ( "& .bar", [%expr [%cx {js|& .bar {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|& .bar|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& .bar|js}, [||])|])], ), ( "& div", [%expr [%cx {js|& div {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|& div|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& div|js}, [||])|])], ), ( "& :first-child", [%expr [%cx {js|& :first-child {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|& :first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& :first-child|js}, [||])|])], ), ( "& > div > div > div > div", [%expr [%cx "& > div > div > div > div { }"]], [%expr - CssJs.style([| - CssJs.selector({js|& > div > div > div > div|js}, [||]), - |]) + CSS.style([|CSS.selector({js|& > div > div > div > div|js}, [||])|]) ], ), ( "& div > .class", [%expr [%cx "& div > .class {}"]], - [%expr CssJs.style([|CssJs.selector({js|& div > .class|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& div > .class|js}, [||])|])], ), /* #foo > .bar + div.k1.k2 [id='baz']:hello(2):not(:where(#yolo))::before */ ( "& + &", [%expr [%cx "& + & {}"]], - [%expr CssJs.style([|CssJs.selector({js|& + &|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& + &|js}, [||])|])], ), ( "& span", [%expr [%cx "& span {}"]], - [%expr CssJs.style([|CssJs.selector({js|& span|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& span|js}, [||])|])], ), ( "& span, & + &", [%expr [%cx "& span, & + & {}"]], - [%expr CssJs.style([|CssJs.selector({js|& span, & + &|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& span, & + &|js}, [||])|])], ), ( "& p:not(.active)", [%expr [%cx "& p:not(.active) {}"]], - [%expr CssJs.style([|CssJs.selector({js|& p:not(.active)|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& p:not(.active)|js}, [||])|])], ), ( "& #first-child", [%expr [%cx {js|& #first-child {}|js}]], - [%expr CssJs.style([|CssJs.selector({js|& #first-child|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& #first-child|js}, [||])|])], ), ( "& #first-child #second", [%expr [%cx {js|& #first-child #second {}|js}]], [%expr - CssJs.style([|CssJs.selector({js|& #first-child #second|js}, [||])|]) + CSS.style([|CSS.selector({js|& #first-child #second|js}, [||])|]) ], ), ( "& #first-child::before", [%expr [%cx {js|& #first-child::before {}|js}]], [%expr - CssJs.style([|CssJs.selector({js|& #first-child::before|js}, [||])|]) + CSS.style([|CSS.selector({js|& #first-child::before|js}, [||])|]) ], ), ( "& #first-child::before:hover", [%expr [%cx {js|& #first-child::before:hover {}|js}]], [%expr - CssJs.style([| - CssJs.selector({js|& #first-child::before:hover|js}, [||]), - |]) + CSS.style([|CSS.selector({js|& #first-child::before:hover|js}, [||])|]) ], ), ( ".foo:is(.bar, #baz)", [%expr [%cx ".foo:is(.bar, #baz) {}"]], - [%expr - CssJs.style([|CssJs.selector({js|.foo:is(.bar, #baz)|js}, [||])|]) - ], + [%expr CSS.style([|CSS.selector({js|.foo:is(.bar, #baz)|js}, [||])|])], ), ( "& input[type=\"password\"]", [%expr [%cx "& input[type=\"password\"]{} "]], [%expr - CssJs.style([|CssJs.selector({js|& input[type="password"]|js}, [||])|]) + CSS.style([|CSS.selector({js|& input[type="password"]|js}, [||])|]) ], ), ( {|& div[id$="thumbnail"] { }|}, [%expr [%cx {|& div[id$="thumbnail"] {}|}]], [%expr - CssJs.style([|CssJs.selector({js|& div[id$="thumbnail"]|js}, [||])|]) + CSS.style([|CSS.selector({js|& div[id$="thumbnail"]|js}, [||])|]) ], ), ( "& button:hover", [%expr [%cx "& button:hover{} "]], - [%expr CssJs.style([|CssJs.selector({js|& button:hover|js}, [||])|])], + [%expr CSS.style([|CSS.selector({js|& button:hover|js}, [||])|])], ), ( "& $(Variables.selector_query)", [%expr [%cx "& $(Variables.selector_query) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|& |js} ++ Variables.selector_query, [||]), + CSS.style([| + CSS.selector({js|& |js} ++ Variables.selector_query, [||]), |]) ], ), @@ -348,8 +334,8 @@ let complex_tests = [ "& .$(Variables.selector_query)", [%expr [%cx "& .$(Variables.selector_query) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|& .|js} ++ Variables.selector_query, [||]), + CSS.style([| + CSS.selector({js|& .|js} ++ Variables.selector_query, [||]), |]) ], ), @@ -357,36 +343,32 @@ let complex_tests = [ "&.$(Variables.selector_query)", [%expr [%cx "&.$(Variables.selector_query) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|&.|js} ++ Variables.selector_query, [||]), + CSS.style([| + CSS.selector({js|&.|js} ++ Variables.selector_query, [||]), |]) ], ), ( "& a[target=\"_blank\"]", [%expr [%cx {|& a[target="_blank"] {}|}]], - [%expr - CssJs.style([|CssJs.selector({js|& a[target="_blank"]|js}, [||])|]) - ], + [%expr CSS.style([|CSS.selector({js|& a[target="_blank"]|js}, [||])|])], ), ( "& a[target=\"_blank\"]", [%expr [%cx {|& a[ target = "_blank" ] {}|}]], - [%expr - CssJs.style([|CssJs.selector({js|& a[target="_blank"]|js}, [||])|]) - ], + [%expr CSS.style([|CSS.selector({js|& a[target="_blank"]|js}, [||])|])], ), ( "$(pseudo)", [%expr [%cx "$(pseudo) {}"]], - [%expr CssJs.style([|CssJs.selector(pseudo, [||])|])], + [%expr CSS.style([|CSS.selector(pseudo, [||])|])], ), ( "div > $(Variables.element)", [%expr [%cx "& div > $(Variables.element) {}"]], [%expr - CssJs.style([| - CssJs.selector({js|& div > |js} ++ Variables.element, [||]), + CSS.style([| + CSS.selector({js|& div > |js} ++ Variables.element, [||]), |]) ], ), @@ -394,24 +376,22 @@ let complex_tests = [ "*:not(:last-child)", [%expr [%cx "& > *:not(:last-child) {}"]], [%expr - CssJs.style([|CssJs.selector({js|& > *:not(:last-child)|js}, [||])|]) + CSS.style([|CSS.selector({js|& > *:not(:last-child)|js}, [||])|]) ], ), ( "&:has(.$(gap))", [%expr [%cx {| &:has(.$(gap)) {} |}]], [%expr - CssJs.style([| - CssJs.selector({js|&:has(.|js} ++ gap ++ {js|)|js}, [||]), - |]) + CSS.style([|CSS.selector({js|&:has(.|js} ++ gap ++ {js|)|js}, [||])|]) ], ), ( "&:has(+ .$(gap))", [%expr [%cx {| &:has(+ .$(gap)) {} |}]], [%expr - CssJs.style([| - CssJs.selector({js|&:has(+ .|js} ++ gap ++ {js|)|js}, [||]), + CSS.style([| + CSS.selector({js|&:has(+ .|js} ++ gap ++ {js|)|js}, [||]), |]) ], ), @@ -419,8 +399,8 @@ let complex_tests = [ ":is(h1, $(gap), h3):has(+ :is(h2, h3, h4))", [%expr [%cx {| :is(h1, $(gap), h3):has(+ :is(h2, h3, h4)) {} |}]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|:is(h1, |js} ++ gap ++ {js|, h3):has(+ :is(h2, h3, h4))|js}, [||], ), @@ -433,24 +413,20 @@ let stylesheet_tests = [ ( "html, body", [%expr [%styled.global {js|html, body {}|js}]], - [%expr - ignore(CssJs.global([|CssJs.selector({js|html, body|js}, [||])|])) - ], + [%expr ignore(CSS.global([|CSS.selector({js|html, body|js}, [||])|]))], ), ( "html body", [%expr [%styled.global {js|html body {}|js}]], - [%expr - ignore(CssJs.global([|CssJs.selector({js|html body|js}, [||])|])) - ], + [%expr ignore(CSS.global([|CSS.selector({js|html body|js}, [||])|]))], ), ( "html, body, #root, .class", [%expr [%styled.global {js|html, body, #root, .class {}|js}]], [%expr ignore( - CssJs.global([| - CssJs.selector({js|html, body, #root, .class|js}, [||]), + CSS.global([| + CSS.selector({js|html, body, #root, .class|js}, [||]), |]), ) ], @@ -458,17 +434,13 @@ let stylesheet_tests = [ ( "div > span", [%expr [%styled.global {js|div > span {}|js}]], - [%expr - ignore(CssJs.global([|CssJs.selector({js|div > span|js}, [||])|])) - ], + [%expr ignore(CSS.global([|CSS.selector({js|div > span|js}, [||])|]))], ), ( "html div > span", [%expr [%styled.global {js|html div > span {}|js}]], [%expr - ignore( - CssJs.global([|CssJs.selector({js|html div > span|js}, [||])|]), - ) + ignore(CSS.global([|CSS.selector({js|html div > span|js}, [||])|])) ], ), ( @@ -476,9 +448,9 @@ let stylesheet_tests = [ [%expr [%styled.global {js|html div > span {} html, body {}|js}]], [%expr ignore( - CssJs.global([| - CssJs.selector({js|html div > span|js}, [||]), - CssJs.selector({js|html, body|js}, [||]), + CSS.global([| + CSS.selector({js|html div > span|js}, [||]), + CSS.selector({js|html, body|js}, [||]), |]), ) ], @@ -490,8 +462,8 @@ let nested_tests = [ ".a", [%expr [%cx ".a { .b {} }"]], [%expr - CssJs.style([| - CssJs.selector({js|.a|js}, [|CssJs.selector({js|.b|js}, [||])|]), + CSS.style([| + CSS.selector({js|.a|js}, [|CSS.selector({js|.b|js}, [||])|]), |]) ], ), @@ -499,19 +471,16 @@ let nested_tests = [ ".a .b", [%expr [%cx "display: block; .a .b {}"]], [%expr - CssJs.style([| - CssJs.display(`block), - CssJs.selector({js|.a .b|js}, [||]), - |]) + CSS.style([|CSS.display(`block), CSS.selector({js|.a .b|js}, [||])|]) ], ), ( "& .a .b", [%expr [%cx "display: block; & .a .b {}"]], [%expr - CssJs.style([| - CssJs.display(`block), - CssJs.selector({js|& .a .b|js}, [||]), + CSS.style([| + CSS.display(`block), + CSS.selector({js|& .a .b|js}, [||]), |]) ], ), @@ -519,10 +488,10 @@ let nested_tests = [ ".$(aaa) { .$(bbb) { } }", [%expr [%cx ".$(aaa) { .$(bbb) {} }"]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|.|js} ++ aaa, - [|CssJs.selector({js|.|js} ++ bbb, [||])|], + [|CSS.selector({js|.|js} ++ bbb, [||])|], ), |]) ], @@ -531,10 +500,10 @@ let nested_tests = [ "&.$(button_active):hover { top: 50px; }", [%expr [%cx "&.$(button_active):hover { top: 50px; }"]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|&.|js} ++ button_active ++ {js|:hover|js}, - [|CssJs.top(`pxFloat(50.))|], + [|CSS.top(`pxFloat(50.))|], ), |]) ], @@ -543,10 +512,10 @@ let nested_tests = [ "&.$(button_active)::before { top: 50px; }", [%expr [%cx "&.$(button_active)::before { top: 50px; }"]], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|&.|js} ++ button_active ++ {js|::before|js}, - [|CssJs.top(`pxFloat(50.))|], + [|CSS.top(`pxFloat(50.))|], ), |]) ], @@ -571,8 +540,8 @@ let comments_tests = [ ] ], [%expr - CssJs.style([| - CssJs.selector({js|.a|js}, [|CssJs.selector({js|.b|js}, [||])|]), + CSS.style([| + CSS.selector({js|.a|js}, [|CSS.selector({js|.b|js}, [||])|]), |]) ], ), @@ -587,19 +556,16 @@ let comments_tests = [ ] ], [%expr - CssJs.style([| - CssJs.display(`block), - CssJs.selector({js|.a .b|js}, [||]), - |]) + CSS.style([|CSS.display(`block), CSS.selector({js|.a .b|js}, [||])|]) ], ), ( "& .a .b", [%expr [%cx "display: block; /*c*/& /*c*/.a /*c*//*c*/.b /*c*/{}"]], [%expr - CssJs.style([| - CssJs.display(`block), - CssJs.selector({js|& .a .b|js}, [||]), + CSS.style([| + CSS.display(`block), + CSS.selector({js|& .a .b|js}, [||]), |]) ], ), @@ -615,10 +581,10 @@ let comments_tests = [ ] ], [%expr - CssJs.style([| - CssJs.selector( + CSS.style([| + CSS.selector( {js|.|js} ++ aaa, - [|CssJs.selector({js|.|js} ++ bbb, [||])|], + [|CSS.selector({js|.|js} ++ bbb, [||])|], ), |]) ], diff --git a/packages/ppx/test/native/Static_test.re b/packages/ppx/test/native/Static_test.re index a4503b2f..3fc6c12d 100644 --- a/packages/ppx/test/native/Static_test.re +++ b/packages/ppx/test/native/Static_test.re @@ -3,161 +3,157 @@ open Ppxlib; let loc = Location.none; -let label: CssJs.rule = CssJs.label("asdf"); -let block: CssJs.rule = CssJs.display(`block); -let c = CssJs.style([|block, label|]); +let label: CSS.rule = CSS.label("asdf"); +let block: CSS.rule = CSS.display(`block); +let c = CSS.style([|block, label|]); /* The tests that are commented, means that we don't support them safely */ let properties_static_css_tests = [ ( [%css "display: block;"], [%expr [%css "display: block;"]], - [%expr CssJs.display(`block)], + [%expr CSS.display(`block)], ), ( [%css "box-sizing: border-box"], [%expr [%css "box-sizing: border-box"]], - [%expr CssJs.boxSizing(`borderBox)], + [%expr CSS.boxSizing(`borderBox)], ), ( [%css "box-sizing: content-box"], [%expr [%css "box-sizing: content-box"]], - [%expr CssJs.boxSizing(`contentBox)], + [%expr CSS.boxSizing(`contentBox)], ), ( [%css "color: #454545"], [%expr [%css "color: #454545"]], - [%expr CssJs.color(`hex({js|454545|js}))], + [%expr CSS.color(`hex({js|454545|js}))], ), ( [%css "color: red"], [%expr [%css "color: red"]], - [%expr CssJs.color(CssJs.red)], + [%expr CSS.color(CSS.red)], ), ( [%css "display: flex"], [%expr [%css "display: flex"]], - [%expr CssJs.display(`flex)], + [%expr CSS.display(`flex)], ), ( [%css "flex-direction: column"], [%expr [%css "flex-direction: column"]], - [%expr CssJs.flexDirection(`column)], + [%expr CSS.flexDirection(`column)], ), ( [%css "font-size: 30px"], [%expr [%css "font-size: 30px"]], - [%expr CssJs.fontSize(`pxFloat(30.))], + [%expr CSS.fontSize(`pxFloat(30.))], ), ( [%css "height: 100vh"], [%expr [%css "height: 100vh"]], - [%expr CssJs.height(`vh(100.))], + [%expr CSS.height(`vh(100.))], ), ( [%css "margin: 0"], [%expr [%css "margin: 0"]], - [%expr CssJs.margin(`zero)], + [%expr CSS.margin(`zero)], ), ( [%css "margin: 5px"], [%expr [%css "margin: 5px"]], - [%expr CssJs.margin(`pxFloat(5.))], + [%expr CSS.margin(`pxFloat(5.))], ), ( [%css "opacity: 0.9"], [%expr [%css "opacity: 0.9"]], - [%expr CssJs.opacity(0.9)], + [%expr CSS.opacity(0.9)], ), ( [%css "width: 100vw"], [%expr [%css "width: 100vw"]], - [%expr CssJs.width(`vw(100.))], + [%expr CSS.width(`vw(100.))], ), // css-sizing-3 ( [%css "width: auto"], [%expr [%css "width: auto"]], - [%expr CssJs.width(`auto)], + [%expr CSS.width(`auto)], ), - ([%css "width: 0"], [%expr [%css "width: 0"]], [%expr CssJs.width(`zero)]), + ([%css "width: 0"], [%expr [%css "width: 0"]], [%expr CSS.width(`zero)]), ( [%css "height: 5px"], [%expr [%css "height: 5px"]], - [%expr CssJs.height(`pxFloat(5.))], + [%expr CSS.height(`pxFloat(5.))], ), ( [%css "min-width: 5%"], [%expr [%css "min-width: 5%"]], - [%expr CssJs.minWidth(`percent(5.))], + [%expr CSS.minWidth(`percent(5.))], ), ( [%css "min-height: 5em"], [%expr [%css "min-height: 5em"]], - [%expr CssJs.minHeight(`em(5.))], + [%expr CSS.minHeight(`em(5.))], ), ( [%css "max-width: 3em"], [%expr [%css "max-width: 3em"]], - [%expr CssJs.maxWidth(`em(3.))], + [%expr CSS.maxWidth(`em(3.))], ), ( [%css "max-height: 3vh"], [%expr [%css "max-height: 3vh"]], - [%expr CssJs.maxHeight(`vh(3.))], + [%expr CSS.maxHeight(`vh(3.))], ), ( [%css "box-sizing: border-box"], [%expr [%css "box-sizing: border-box"]], - [%expr CssJs.boxSizing(`borderBox)], + [%expr CSS.boxSizing(`borderBox)], ), // css-box-3 ( [%css "margin-top: auto"], [%expr [%css "margin-top: auto"]], - [%expr CssJs.marginTop(`auto)], + [%expr CSS.marginTop(`auto)], ), ( [%css "margin-right: 1px"], [%expr [%css "margin-right: 1px"]], - [%expr CssJs.marginRight(`pxFloat(1.))], + [%expr CSS.marginRight(`pxFloat(1.))], ), ( [%css "margin-bottom: 2px"], [%expr [%css "margin-bottom: 2px"]], - [%expr CssJs.marginBottom(`pxFloat(2.))], + [%expr CSS.marginBottom(`pxFloat(2.))], ), ( [%css "margin-left: 3px"], [%expr [%css "margin-left: 3px"]], - [%expr CssJs.marginLeft(`pxFloat(3.))], + [%expr CSS.marginLeft(`pxFloat(3.))], ), ( [%css "margin: 1px"], [%expr [%css "margin: 1px"]], - [%expr CssJs.margin(`pxFloat(1.))], + [%expr CSS.margin(`pxFloat(1.))], ), ( [%css "margin: 1px 2px"], [%expr [%css "margin: 1px 2px"]], - [%expr CssJs.margin2(~v=`pxFloat(1.), ~h=`pxFloat(2.))], + [%expr CSS.margin2(~v=`pxFloat(1.), ~h=`pxFloat(2.))], ), ( [%css "margin: 1px 2px 3px"], [%expr [%css "margin: 1px 2px 3px"]], [%expr - CssJs.margin3( - ~top=`pxFloat(1.), - ~h=`pxFloat(2.), - ~bottom=`pxFloat(3.), - ) + CSS.margin3(~top=`pxFloat(1.), ~h=`pxFloat(2.), ~bottom=`pxFloat(3.)) ], ), ( [%css "margin: 1px 2px 3px 4px"], [%expr [%css "margin: 1px 2px 3px 4px"]], [%expr - CssJs.margin4( + CSS.margin4( ~top=`pxFloat(1.), ~right=`pxFloat(2.), ~bottom=`pxFloat(3.), @@ -168,48 +164,48 @@ let properties_static_css_tests = [ ( [%css "padding-top: 0"], [%expr [%css "padding-top: 0"]], - [%expr CssJs.paddingTop(`zero)], + [%expr CSS.paddingTop(`zero)], ), ( [%css "padding-right: 1px"], [%expr [%css "padding-right: 1px"]], - [%expr CssJs.paddingRight(`pxFloat(1.))], + [%expr CSS.paddingRight(`pxFloat(1.))], ), ( [%css "padding-right: min(1px, 2%)"], [%expr [%css "padding-right: min(1px, 2%)"]], - [%expr CssJs.paddingRight(`min([|`pxFloat(1.), `percent(2.)|]))], + [%expr CSS.paddingRight(`min([|`pxFloat(1.), `percent(2.)|]))], ), ( [%css "padding-bottom: 2px"], [%expr [%css "padding-bottom: 2px"]], - [%expr CssJs.paddingBottom(`pxFloat(2.))], + [%expr CSS.paddingBottom(`pxFloat(2.))], ), ( [%css "padding-left: 3px"], [%expr [%css "padding-left: 3px"]], - [%expr CssJs.paddingLeft(`pxFloat(3.))], + [%expr CSS.paddingLeft(`pxFloat(3.))], ), ( [%css "padding: 1px"], [%expr [%css "padding: 1px"]], - [%expr CssJs.padding(`pxFloat(1.))], + [%expr CSS.padding(`pxFloat(1.))], ), ( [%css "padding: min(1px, 2%)"], [%expr [%css "padding: min(1px, 2%)"]], - [%expr CssJs.padding(`min([|`pxFloat(1.), `percent(2.)|]))], + [%expr CSS.padding(`min([|`pxFloat(1.), `percent(2.)|]))], ), ( [%css "padding: 1px 2px"], [%expr [%css "padding: 1px 2px"]], - [%expr CssJs.padding2(~v=`pxFloat(1.), ~h=`pxFloat(2.))], + [%expr CSS.padding2(~v=`pxFloat(1.), ~h=`pxFloat(2.))], ), ( [%css "padding: 1px 2px 3px"], [%expr [%css "padding: 1px 2px 3px"]], [%expr - CssJs.padding3( + CSS.padding3( ~top=`pxFloat(1.), ~h=`pxFloat(2.), ~bottom=`pxFloat(3.), @@ -220,7 +216,7 @@ let properties_static_css_tests = [ [%css "padding: 1px 2px 3px 4px"], [%expr [%css "padding: 1px 2px 3px 4px"]], [%expr - CssJs.padding4( + CSS.padding4( ~top=`pxFloat(1.), ~right=`pxFloat(2.), ~bottom=`pxFloat(3.), @@ -231,68 +227,68 @@ let properties_static_css_tests = [ ( [%css "color: #012"], [%expr [%css "color: #012"]], - [%expr CssJs.color(`hex({js|012|js}))], + [%expr CSS.color(`hex({js|012|js}))], ), ( [%css "color: #0123"], [%expr [%css "color: #0123"]], - [%expr CssJs.color(`hex({js|0123|js}))], + [%expr CSS.color(`hex({js|0123|js}))], ), ( [%css "color: #012345"], [%expr [%css "color: #012345"]], - [%expr CssJs.color(`hex({js|012345|js}))], + [%expr CSS.color(`hex({js|012345|js}))], ), ( [%css "color: #01234567"], [%expr [%css "color: #01234567"]], - [%expr CssJs.color(`hex({js|01234567|js}))], + [%expr CSS.color(`hex({js|01234567|js}))], ), ( [%css "color: blue"], [%expr [%css "color: blue"]], - [%expr CssJs.color(CssJs.blue)], + [%expr CSS.color(CSS.blue)], ), ( [%css "color: currentColor"], [%expr [%css "color: currentColor"]], - [%expr CssJs.color(`currentColor)], + [%expr CSS.color(`currentColor)], ), ( [%css "color: transparent"], [%expr [%css "color: transparent"]], - [%expr CssJs.color(`transparent)], + [%expr CSS.color(`transparent)], ), ( [%css "color: rgb(1 2 3)"], [%expr [%css "color: rgb(1 2 3)"]], - [%expr CssJs.color(`rgb((1, 2, 3)))], + [%expr CSS.color(`rgb((1, 2, 3)))], ), ( [%css "color: rgb(1 2 3 / .4)"], [%expr [%css "color: rgb(1 2 3 / .4)"]], - [%expr CssJs.color(`rgba((1, 2, 3, `num(0.4))))], + [%expr CSS.color(`rgba((1, 2, 3, `num(0.4))))], ), ( [%css "color: rgba(1, 2, 3)"], [%expr [%css "color: rgba(1, 2, 3)"]], - [%expr CssJs.color(`rgb((1, 2, 3)))], + [%expr CSS.color(`rgb((1, 2, 3)))], ), ( [%css "color: rgba(1, 2, 3, .4)"], [%expr [%css "color: rgba(1, 2, 3, .4)"]], - [%expr CssJs.color(`rgba((1, 2, 3, `num(0.4))))], + [%expr CSS.color(`rgba((1, 2, 3, `num(0.4))))], ), ( [%css "color: rgba(1, 2, 3, 50%)"], [%expr [%css "color: rgba(1, 2, 3, 50%)"]], - [%expr CssJs.color(`rgba((1, 2, 3, `percent(0.5))))], + [%expr CSS.color(`rgba((1, 2, 3, `percent(0.5))))], ), ( [%css "color: rgba(1, 2, 3, calc(50% + 10%))"], [%expr [%css "color: rgba(1, 2, 3, calc(50% + 10%))"]], [%expr - CssJs.color( + CSS.color( `rgba((1, 2, 3, `calc(`add((`percent(50.), `percent(10.)))))), ) ], @@ -301,16 +297,14 @@ let properties_static_css_tests = [ [%css "color: rgba(1, 2, 3, min(50%, 10%))"], [%expr [%css "color: rgba(1, 2, 3, min(50%, 10%))"]], [%expr - CssJs.color( - `rgba((1, 2, 3, `min([|`percent(50.), `percent(10.)|]))), - ) + CSS.color(`rgba((1, 2, 3, `min([|`percent(50.), `percent(10.)|])))) ], ), ( [%css "color: hsl(calc(120deg + 10deg) 100% 50%)"], [%expr [%css "color: hsl(calc(120deg + 10deg) 100% 50%)"]], [%expr - CssJs.color( + CSS.color( `hsl(( `calc(`add((`deg(120.), `deg(10.)))), `percent(100.), @@ -323,7 +317,7 @@ let properties_static_css_tests = [ [%css "color: hsl(min(120deg, 10deg) 100% 50%)"], [%expr [%css "color: hsl(min(120deg, 10deg) 100% 50%)"]], [%expr - CssJs.color( + CSS.color( `hsl(( `min([|`deg(120.), `deg(10.)|]), `percent(100.), @@ -336,7 +330,7 @@ let properties_static_css_tests = [ [%css "color: hsl(max(120deg) 100% 50%)"], [%expr [%css "color: hsl(max(120deg) 100% 50%)"]], [%expr - CssJs.color( + CSS.color( `hsl((`max([|`deg(120.)|]), `percent(100.), `percent(50.))), ) ], @@ -344,15 +338,13 @@ let properties_static_css_tests = [ ( [%css "color: hsl(120deg 100% 50%)"], [%expr [%css "color: hsl(120deg 100% 50%)"]], - [%expr - CssJs.color(`hsl((`deg(120.), `percent(100.), `percent(50.)))) - ], + [%expr CSS.color(`hsl((`deg(120.), `percent(100.), `percent(50.))))], ), ( [%css "color: hsl(120deg 100% calc(50% + 10%))"], [%expr [%css "color: hsl(120deg 100% calc(50% + 10%))"]], [%expr - CssJs.color( + CSS.color( `hsl(( `deg(120.), `percent(100.), @@ -365,7 +357,7 @@ let properties_static_css_tests = [ [%css "color: hsl(120deg calc(50% + 10%) max(50%, 10%))"], [%expr [%css "color: hsl(120deg calc(50% + 10%) max(50%, 10%))"]], [%expr - CssJs.color( + CSS.color( `hsl(( `deg(120.), `calc(`add((`percent(50.), `percent(10.)))), @@ -377,33 +369,33 @@ let properties_static_css_tests = [ ( [%css "opacity: 0.5"], [%expr [%css "opacity: 0.5"]], - [%expr CssJs.opacity(0.5)], + [%expr CSS.opacity(0.5)], ), ( [%css "opacity: 60%"], [%expr [%css "opacity: 60%"]], - [%expr CssJs.opacity(0.6)], + [%expr CSS.opacity(0.6)], ), // css-images-4 ( [%css "object-fit: fill"], [%expr [%css "object-fit: fill"]], - [%expr CssJs.objectFit(`fill)], + [%expr CSS.objectFit(`fill)], ), ( [%css "background-color: red"], [%expr [%css "background-color: red"]], - [%expr CssJs.backgroundColor(CssJs.red)], + [%expr CSS.backgroundColor(CSS.red)], ), ( [%css "background-color: color-mix(in srgb, white 10%, red)"], [%expr [%css "background-color: color-mix(in srgb, white 10%, red)"]], [%expr - CssJs.backgroundColor( + CSS.backgroundColor( `colorMix(( `in1(`srgb), - (CssJs.white, `percent(10.)), - (CssJs.red, `percent(90.)), + (CSS.white, `percent(10.)), + (CSS.red, `percent(90.)), )), ) ], @@ -412,11 +404,11 @@ let properties_static_css_tests = [ [%css "background-color: color-mix(in srgb, white 10%, red 10%)"], [%expr [%css "background-color: color-mix(in srgb, white 10%, red 10%)"]], [%expr - CssJs.backgroundColor( + CSS.backgroundColor( `colorMix(( `in1(`srgb), - (CssJs.white, `percent(0.5)), - (CssJs.red, `percent(0.5)), + (CSS.white, `percent(0.5)), + (CSS.red, `percent(0.5)), )), ) ], @@ -425,11 +417,11 @@ let properties_static_css_tests = [ [%css "background-color: color-mix(in srgb, white, red)"], [%expr [%css "background-color: color-mix(in srgb, white, red)"]], [%expr - CssJs.backgroundColor( + CSS.backgroundColor( `colorMix(( `in1(`srgb), - (CssJs.white, `percent(50.)), - (CssJs.red, `percent(50.)), + (CSS.white, `percent(50.)), + (CSS.red, `percent(50.)), )), ) ], @@ -438,11 +430,11 @@ let properties_static_css_tests = [ [%css "background-color: color-mix(in srgb, white, red 10%)"], [%expr [%css "background-color: color-mix(in srgb, white, red 10%)"]], [%expr - CssJs.backgroundColor( + CSS.backgroundColor( `colorMix(( `in1(`srgb), - (CssJs.white, `percent(90.)), - (CssJs.red, `percent(10.)), + (CSS.white, `percent(90.)), + (CSS.red, `percent(10.)), )), ) ], @@ -453,11 +445,11 @@ let properties_static_css_tests = [ [%css "background-color: color-mix(in srgb, white 100%, red 100%)"] ], [%expr - CssJs.backgroundColor( + CSS.backgroundColor( `colorMix(( `in1(`srgb), - (CssJs.white, `percent(0.5)), - (CssJs.red, `percent(0.5)), + (CSS.white, `percent(0.5)), + (CSS.red, `percent(0.5)), )), ) ], @@ -466,11 +458,11 @@ let properties_static_css_tests = [ [%css "background-color: color-mix(in srgb-linear, white, red)"], [%expr [%css "background-color: color-mix(in srgb-linear, white, red)"]], [%expr - CssJs.backgroundColor( + CSS.backgroundColor( `colorMix(( `in1(`srgbLinear), - (CssJs.white, `percent(50.)), - (CssJs.red, `percent(50.)), + (CSS.white, `percent(50.)), + (CSS.red, `percent(50.)), )), ) ], @@ -485,7 +477,7 @@ let properties_static_css_tests = [ ] ], [%expr - CssJs.backgroundColor( + CSS.backgroundColor( `colorMix(( `in2((`hsl, `longer)), (`hex({js|34c9eb|js}), `percent(50.)), @@ -500,259 +492,259 @@ let properties_static_css_tests = [ ( [%css "border-top-color: blue"], [%expr [%css "border-top-color: blue"]], - [%expr CssJs.borderTopColor(CssJs.blue)], + [%expr CSS.borderTopColor(CSS.blue)], ), ( [%css "border-right-color: green"], [%expr [%css "border-right-color: green"]], - [%expr CssJs.borderRightColor(CssJs.green)], + [%expr CSS.borderRightColor(CSS.green)], ), ( [%css "border-left-color: #fff"], [%expr [%css "border-left-color: #fff"]], - [%expr CssJs.borderLeftColor(`hex({js|fff|js}))], + [%expr CSS.borderLeftColor(`hex({js|fff|js}))], ), ( [%css "border-top-width: 15px"], [%expr [%css "border-top-width: 15px"]], - [%expr CssJs.borderTopWidth(`pxFloat(15.))], + [%expr CSS.borderTopWidth(`pxFloat(15.))], ), ( [%css "border-right-width: 16px"], [%expr [%css "border-right-width: 16px"]], - [%expr CssJs.borderRightWidth(`pxFloat(16.))], + [%expr CSS.borderRightWidth(`pxFloat(16.))], ), ( [%css "border-bottom-width: 17px"], [%expr [%css "border-bottom-width: 17px"]], - [%expr CssJs.borderBottomWidth(`pxFloat(17.))], + [%expr CSS.borderBottomWidth(`pxFloat(17.))], ), ( [%css "border-left-width: 18px"], [%expr [%css "border-left-width: 18px"]], - [%expr CssJs.borderLeftWidth(`pxFloat(18.))], + [%expr CSS.borderLeftWidth(`pxFloat(18.))], ), ( [%css "border-top-left-radius: 12%"], [%expr [%css "border-top-left-radius: 12%"]], - [%expr CssJs.borderTopLeftRadius(`percent(12.))], + [%expr CSS.borderTopLeftRadius(`percent(12.))], ), ( [%css "border-top-right-radius: 15%"], [%expr [%css "border-top-right-radius: 15%"]], - [%expr CssJs.borderTopRightRadius(`percent(15.))], + [%expr CSS.borderTopRightRadius(`percent(15.))], ), ( [%css "border-bottom-left-radius: 14%"], [%expr [%css "border-bottom-left-radius: 14%"]], - [%expr CssJs.borderBottomLeftRadius(`percent(14.))], + [%expr CSS.borderBottomLeftRadius(`percent(14.))], ), ( [%css "border-bottom-right-radius: 13%"], [%expr [%css "border-bottom-right-radius: 13%"]], - [%expr CssJs.borderBottomRightRadius(`percent(13.))], + [%expr CSS.borderBottomRightRadius(`percent(13.))], ), ( [%css "overflow-x: auto"], [%expr [%css "overflow-x: auto"]], - [%expr CssJs.overflowX(`auto)], + [%expr CSS.overflowX(`auto)], ), ( [%css "overflow-y: hidden"], [%expr [%css "overflow-y: hidden"]], - [%expr CssJs.overflowY(`hidden)], + [%expr CSS.overflowY(`hidden)], ), ( [%css "overflow: scroll"], [%expr [%css "overflow: scroll"]], - [%expr CssJs.overflow(`scroll)], + [%expr CSS.overflow(`scroll)], ), /* ( [%css "overflow: scroll visible"], [%expr [%css "overflow: scroll visible"]], - [%expr CssJs.overflowX(`scroll), CssJs.overflowY(`visible)], + [%expr CSS.overflowX(`scroll), CSS.overflowY(`visible)], ), */ /* ( [%css "text-overflow: clip"], [%expr [%css "text-overflow: clip"]], - [%expr CssJs.textOverflow(`clip)], + [%expr CSS.textOverflow(`clip)], ), */ /* ( [%css "text-overflow: ellipsis"], [%expr [%css "text-overflow: ellipsis"]], - [%expr CssJs.textOverflow(`ellipsis)], + [%expr CSS.textOverflow(`ellipsis)], ), */ ( [%css "text-transform: capitalize"], [%expr [%css "text-transform: capitalize"]], - [%expr CssJs.textTransform(`capitalize)], + [%expr CSS.textTransform(`capitalize)], ), ( [%css "white-space: break-spaces"], [%expr [%css "white-space: break-spaces"]], - [%expr CssJs.whiteSpace(`breakSpaces)], + [%expr CSS.whiteSpace(`breakSpaces)], ), ( [%css "word-break: keep-all"], [%expr [%css "word-break: keep-all"]], - [%expr CssJs.wordBreak(`keepAll)], + [%expr CSS.wordBreak(`keepAll)], ), ( [%css "overflow-wrap: anywhere"], [%expr [%css "overflow-wrap: anywhere"]], - [%expr CssJs.overflowWrap(`anywhere)], + [%expr CSS.overflowWrap(`anywhere)], ), ( [%css "word-wrap: normal"], [%expr [%css "word-wrap: normal"]], - [%expr CssJs.wordWrap(`normal)], + [%expr CSS.wordWrap(`normal)], ), ( [%css "text-align: start"], [%expr [%css "text-align: start"]], - [%expr CssJs.textAlign(`start)], + [%expr CSS.textAlign(`start)], ), ( [%css "text-align: left"], [%expr [%css "text-align: left"]], - [%expr CssJs.textAlign(`left)], + [%expr CSS.textAlign(`left)], ), ( [%css "text-align: end"], [%expr [%css "text-align: end"]], - [%expr CssJs.textAlign(`end_)], + [%expr CSS.textAlign(`end_)], ), ( [%css "text-align: match-parent"], [%expr [%css "text-align: match-parent"]], - [%expr CssJs.textAlign(`matchParent)], + [%expr CSS.textAlign(`matchParent)], ), ( [%css "text-align: justify-all"], [%expr [%css "text-align: justify-all"]], - [%expr CssJs.textAlign(`justifyAll)], + [%expr CSS.textAlign(`justifyAll)], ), ( [%css "text-align-all: start"], [%expr [%css "text-align-all: start"]], - [%expr CssJs.textAlignAll(`start)], + [%expr CSS.textAlignAll(`start)], ), ( [%css "text-align-all: left"], [%expr [%css "text-align-all: left"]], - [%expr CssJs.textAlignAll(`left)], + [%expr CSS.textAlignAll(`left)], ), ( [%css "text-align-all: end"], [%expr [%css "text-align-all: end"]], - [%expr CssJs.textAlignAll(`end_)], + [%expr CSS.textAlignAll(`end_)], ), ( [%css "text-align-all: match-parent"], [%expr [%css "text-align-all: match-parent"]], - [%expr CssJs.textAlignAll(`matchParent)], + [%expr CSS.textAlignAll(`matchParent)], ), ( [%css "text-align-last: center"], [%expr [%css "text-align-last: center"]], - [%expr CssJs.textAlignLast(`center)], + [%expr CSS.textAlignLast(`center)], ), ( [%css "text-align-last: match-parent"], [%expr [%css "text-align-last: match-parent"]], - [%expr CssJs.textAlignLast(`matchParent)], + [%expr CSS.textAlignLast(`matchParent)], ), ( [%css "word-spacing: normal"], [%expr [%css "word-spacing: normal"]], - [%expr CssJs.wordSpacing(`normal)], + [%expr CSS.wordSpacing(`normal)], ), ( [%css "word-spacing: 5px"], [%expr [%css "word-spacing: 5px"]], - [%expr CssJs.wordSpacing(`pxFloat(5.))], + [%expr CSS.wordSpacing(`pxFloat(5.))], ), ( [%css "letter-spacing: normal"], [%expr [%css "letter-spacing: normal"]], - [%expr CssJs.letterSpacing(`normal)], + [%expr CSS.letterSpacing(`normal)], ), ( [%css "letter-spacing: 5px"], [%expr [%css "letter-spacing: 5px"]], - [%expr CssJs.letterSpacing(`pxFloat(5.))], + [%expr CSS.letterSpacing(`pxFloat(5.))], ), ( [%css "text-indent: 5%"], [%expr [%css "text-indent: 5%"]], - [%expr CssJs.textIndent(`percent(5.))], + [%expr CSS.textIndent(`percent(5.))], ), ( [%css "flex-wrap: wrap"], [%expr [%css "flex-wrap: wrap"]], - [%expr CssJs.flexWrap(`wrap)], + [%expr CSS.flexWrap(`wrap)], ), /* not supported on bs-css ( [%css "flex-flow: row nowrap"], [%expr [%css "flex-flow: row nowrap"]], - [|CssJs.flexDirection(`row), CssJs.flexWrap(`nowrap)|], + [|CSS.flexDirection(`row), CSS.flexWrap(`nowrap)|], ), */ - ([%css "order: 5"], [%expr [%css "order: 5"]], [%expr CssJs.order(5)]), + ([%css "order: 5"], [%expr [%css "order: 5"]], [%expr CSS.order(5)]), ( [%css "flex-grow: 2"], [%expr [%css "flex-grow: 2"]], - [%expr CssJs.flexGrow(2.)], + [%expr CSS.flexGrow(2.)], ), ( [%css "flex-grow: 2.5"], [%expr [%css "flex-grow: 2.5"]], - [%expr CssJs.flexGrow(2.5)], + [%expr CSS.flexGrow(2.5)], ), ( [%css "flex-shrink: 2"], [%expr [%css "flex-shrink: 2"]], - [%expr CssJs.flexShrink(2.)], + [%expr CSS.flexShrink(2.)], ), ( [%css "flex-shrink: 2.5"], [%expr [%css "flex-shrink: 2.5"]], - [%expr CssJs.flexShrink(2.5)], + [%expr CSS.flexShrink(2.5)], ), ( [%css "flex-basis: content"], [%expr [%css "flex-basis: content"]], - [%expr CssJs.flexBasis(`content)], + [%expr CSS.flexBasis(`content)], ), ( [%css "flex: none"], [%expr [%css "flex: none"]], - [%expr CssJs.flex1(`none)], + [%expr CSS.flex1(`none)], ), /* Since calc(x) -> x */ ( [%css "width: calc(100px)"], [%expr [%css "width: calc(100px)"]], - [%expr CssJs.width(`pxFloat(100.))], + [%expr CSS.width(`pxFloat(100.))], ), ( [%css "width: calc(100% + 32px)"], [%expr [%css "width: calc(100% + 32px)"]], - [%expr CssJs.width(`calc(`add((`percent(100.), `pxFloat(32.)))))], + [%expr CSS.width(`calc(`add((`percent(100.), `pxFloat(32.)))))], ), ( [%css "width: calc(100% + min(32px))"], [%expr [%css "width: calc(100% + min(32px))"]], [%expr - CssJs.width(`calc(`add((`percent(100.), `min([|`pxFloat(32.)|]))))) + CSS.width(`calc(`add((`percent(100.), `min([|`pxFloat(32.)|]))))) ], ), ( [%css "width: calc(100% + min(32px, 100%))"], [%expr [%css "width: calc(100% + min(32px, 100%))"]], [%expr - CssJs.width( + CSS.width( `calc( `add((`percent(100.), `min([|`pxFloat(32.), `percent(100.)|]))), ), @@ -762,23 +754,23 @@ let properties_static_css_tests = [ ( [%css "width: min(100%)"], [%expr [%css "width: min(100%)"]], - [%expr CssJs.width(`min([|`percent(100.)|]))], + [%expr CSS.width(`min([|`percent(100.)|]))], ), ( [%css "width: min(100%, 30%)"], [%expr [%css "width: min(100%, 30%)"]], - [%expr CssJs.width(`min([|`percent(100.), `percent(30.)|]))], + [%expr CSS.width(`min([|`percent(100.), `percent(30.)|]))], ), ( [%css "width: min(100em, 30px)"], [%expr [%css "width: min(100em, 30px)"]], - [%expr CssJs.width(`min([|`em(100.), `pxFloat(30.)|]))], + [%expr CSS.width(`min([|`em(100.), `pxFloat(30.)|]))], ), ( [%css "width: min(100%, calc(100% + 32px))"], [%expr [%css "width: min(100%, calc(100% + 32px))"]], [%expr - CssJs.width( + CSS.width( `min([| `percent(100.), `calc(`add((`percent(100.), `pxFloat(32.)))), @@ -789,22 +781,20 @@ let properties_static_css_tests = [ ( [%css "width: min(100em, 30px, 10%)"], [%expr [%css "width: min(100em, 30px, 10%)"]], - [%expr - CssJs.width(`min([|`em(100.), `pxFloat(30.), `percent(10.)|])) - ], + [%expr CSS.width(`min([|`em(100.), `pxFloat(30.), `percent(10.)|]))], ), ( [%css "width: calc(100% + max(32px))"], [%expr [%css "width: calc(100% + max(32px))"]], [%expr - CssJs.width(`calc(`add((`percent(100.), `max([|`pxFloat(32.)|]))))) + CSS.width(`calc(`add((`percent(100.), `max([|`pxFloat(32.)|]))))) ], ), ( [%css "width: calc(100% + max(32px, 100%))"], [%expr [%css "width: calc(100% + max(32px, 100%))"]], [%expr - CssJs.width( + CSS.width( `calc( `add((`percent(100.), `max([|`pxFloat(32.), `percent(100.)|]))), ), @@ -814,23 +804,23 @@ let properties_static_css_tests = [ ( [%css "width: max(100%)"], [%expr [%css "width: max(100%)"]], - [%expr CssJs.width(`max([|`percent(100.)|]))], + [%expr CSS.width(`max([|`percent(100.)|]))], ), ( [%css "width: max(100%, 30%)"], [%expr [%css "width: max(100%, 30%)"]], - [%expr CssJs.width(`max([|`percent(100.), `percent(30.)|]))], + [%expr CSS.width(`max([|`percent(100.), `percent(30.)|]))], ), ( [%css "width: max(100em, 30px)"], [%expr [%css "width: max(100em, 30px)"]], - [%expr CssJs.width(`max([|`em(100.), `pxFloat(30.)|]))], + [%expr CSS.width(`max([|`em(100.), `pxFloat(30.)|]))], ), ( [%css "width: max(100%, calc(100% + 32px))"], [%expr [%css "width: max(100%, calc(100% + 32px))"]], [%expr - CssJs.width( + CSS.width( `max([| `percent(100.), `calc(`add((`percent(100.), `pxFloat(32.)))), @@ -841,26 +831,24 @@ let properties_static_css_tests = [ ( [%css "width: max(100em, 30px, 10%)"], [%expr [%css "width: max(100em, 30px, 10%)"]], - [%expr - CssJs.width(`max([|`em(100.), `pxFloat(30.), `percent(10.)|])) - ], + [%expr CSS.width(`max([|`em(100.), `pxFloat(30.), `percent(10.)|]))], ), ( [%css "width: calc(100vh - 120px)"], [%expr [%css "width: calc(100vh - 120px)"]], - [%expr CssJs.width(`calc(`sub((`vh(100.), `pxFloat(120.)))))], + [%expr CSS.width(`calc(`sub((`vh(100.), `pxFloat(120.)))))], ), ( [%css "color: var(--main-c)"], [%expr [%css "color: var(--main-c)"]], - [%expr CssJs.color(`var({js|--main-c|js}))], + [%expr CSS.color(`var({js|--main-c|js}))], ), ( [%css "box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2)"], [%expr [%css "box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2)"]], [%expr - CssJs.boxShadows([| - CssJs.Shadow.box( + CSS.boxShadows([| + CSS.Shadow.box( ~x=`pxFloat(12.), ~y=`pxFloat(12.), ~blur=`pxFloat(2.), @@ -873,301 +861,301 @@ let properties_static_css_tests = [ /* ( [%css "color: var(--main-c, #fff)"], [%expr [%css "color: var(--main-c, #fff)"]], - [%expr CssJs.color(`var({js|--main-c|js}, `hex({js|fff|js})))] + [%expr CSS.color(`var({js|--main-c|js}, `hex({js|fff|js})))] ), */ ( [%css "background-image: url('img_tree.gif')"], [%expr [%css "background-image: url('img_tree.gif')"]], - [%expr CssJs.backgroundImage(`url({js|img_tree.gif|js}))], + [%expr CSS.backgroundImage(`url({js|img_tree.gif|js}))], ), ( [%css "flex: 1 2 content"], [%expr [%css "flex: 1 2 content"]], - [%expr CssJs.flex(1., 2., `content)], + [%expr CSS.flex(1., 2., `content)], ), ( [%css "align-items: center"], [%expr [%css "align-items: center"]], - [%expr CssJs.alignItems(`center)], + [%expr CSS.alignItems(`center)], ), ( [%css "align-self: stretch"], [%expr [%css "align-self: stretch"]], - [%expr CssJs.alignSelf(`stretch)], + [%expr CSS.alignSelf(`stretch)], ), ( [%css "align-content: space-around"], [%expr [%css "align-content: space-around"]], - [%expr CssJs.alignContent(`spaceAround)], + [%expr CSS.alignContent(`spaceAround)], ), ( [%css "justify-content: center"], [%expr [%css "justify-content: center"]], - [%expr CssJs.justifyContent(`center)], + [%expr CSS.justifyContent(`center)], ), ( [%css "text-emphasis-color: #555;"], [%expr [%css "text-emphasis-color: #555;"]], - [%expr CssJs.textEmphasisColor(`hex({js|555|js}))], + [%expr CSS.textEmphasisColor(`hex({js|555|js}))], ), ( [%css "text-emphasis-color: blue;"], [%expr [%css "text-emphasis-color: blue;"]], - [%expr CssJs.textEmphasisColor(CssJs.blue)], + [%expr CSS.textEmphasisColor(CSS.blue)], ), ( [%css "text-emphasis-color: rgba(90, 200, 160, 0.8);"], [%expr [%css "text-emphasis-color: rgba(90, 200, 160, 0.8);"]], - [%expr CssJs.textEmphasisColor(`rgba((90, 200, 160, `num(0.8))))], + [%expr CSS.textEmphasisColor(`rgba((90, 200, 160, `num(0.8))))], ), ( [%css "text-emphasis-color: transparent"], [%expr [%css "text-emphasis-color: transparent"]], - [%expr CssJs.textEmphasisColor(`transparent)], + [%expr CSS.textEmphasisColor(`transparent)], ), ( [%css "text-emphasis-style: 'foo'"], [%expr [%css "text-emphasis-style: 'foo'"]], - [%expr CssJs.textEmphasisStyle(`string({js|foo|js}))], + [%expr CSS.textEmphasisStyle(`string({js|foo|js}))], ), ( [%css "text-emphasis-style: open"], [%expr [%css "text-emphasis-style: open"]], - [%expr CssJs.textEmphasisStyle(`open_)], + [%expr CSS.textEmphasisStyle(`open_)], ), ( [%css "text-emphasis-style: filled double-circle"], [%expr [%css "text-emphasis-style: filled double-circle"]], - [%expr CssJs.textEmphasisStyles(`filled, `double_circle)], + [%expr CSS.textEmphasisStyles(`filled, `double_circle)], ), ( [%css "text-emphasis-style: sesame open"], [%expr [%css "text-emphasis-style: sesame open"]], - [%expr CssJs.textEmphasisStyles(`open_, `sesame)], + [%expr CSS.textEmphasisStyles(`open_, `sesame)], ), ( [%css "text-emphasis-position: over"], [%expr [%css "text-emphasis-position: over"]], - [%expr CssJs.textEmphasisPosition(`over)], + [%expr CSS.textEmphasisPosition(`over)], ), ( [%css "text-emphasis-position: under"], [%expr [%css "text-emphasis-position: under"]], - [%expr CssJs.textEmphasisPosition(`under)], + [%expr CSS.textEmphasisPosition(`under)], ), ( [%css "text-emphasis-position: over left"], [%expr [%css "text-emphasis-position: over left"]], - [%expr CssJs.textEmphasisPositions(`over, `left)], + [%expr CSS.textEmphasisPositions(`over, `left)], ), ( [%css "text-emphasis-position: left over"], [%expr [%css "text-emphasis-position: left over"]], - [%expr CssJs.textEmphasisPositions(`over, `left)], + [%expr CSS.textEmphasisPositions(`over, `left)], ), ( [%css "line-break: auto"], [%expr [%css "line-break: auto"]], - [%expr CssJs.lineBreak(`auto)], + [%expr CSS.lineBreak(`auto)], ), ( [%css "hyphens: none"], [%expr [%css "hyphens: none"]], - [%expr CssJs.hyphens(`none)], + [%expr CSS.hyphens(`none)], ), ( [%css "text-justify: none"], [%expr [%css "text-justify: none"]], - [%expr CssJs.textJustify(`none)], + [%expr CSS.textJustify(`none)], ), ( [%css "text-justify: inter-word"], [%expr [%css "text-justify: inter-word"]], - [%expr CssJs.textJustify(`interWord)], + [%expr CSS.textJustify(`interWord)], ), ( [%css "overflow-inline: visible"], [%expr [%css "overflow-inline: visible"]], - [%expr CssJs.overflowInline(`visible)], + [%expr CSS.overflowInline(`visible)], ), ( [%css "font-synthesis-weight: none"], [%expr [%css "font-synthesis-weight: none"]], - [%expr CssJs.fontSynthesisWeight(`none)], + [%expr CSS.fontSynthesisWeight(`none)], ), ( [%css "font-synthesis-style: auto"], [%expr [%css "font-synthesis-style: auto"]], - [%expr CssJs.fontSynthesisStyle(`auto)], + [%expr CSS.fontSynthesisStyle(`auto)], ), ( [%css "font-synthesis-small-caps: none"], [%expr [%css "font-synthesis-small-caps: none"]], - [%expr CssJs.fontSynthesisSmallCaps(`none)], + [%expr CSS.fontSynthesisSmallCaps(`none)], ), ( [%css "font-synthesis-position: auto"], [%expr [%css "font-synthesis-position: auto"]], - [%expr CssJs.fontSynthesisPosition(`auto)], + [%expr CSS.fontSynthesisPosition(`auto)], ), ( [%css "font-kerning: normal"], [%expr [%css "font-kerning: normal"]], - [%expr CssJs.fontKerning(`normal)], + [%expr CSS.fontKerning(`normal)], ), ( [%css "font-variant-position: sub"], [%expr [%css "font-variant-position: sub"]], - [%expr CssJs.fontVariantPosition(`sub)], + [%expr CSS.fontVariantPosition(`sub)], ), ( [%css "font-variant-position: super"], [%expr [%css "font-variant-position: super"]], - [%expr CssJs.fontVariantPosition(`super)], + [%expr CSS.fontVariantPosition(`super)], ), ( [%css "font-variant-caps: normal"], [%expr [%css "font-variant-caps: normal"]], - [%expr CssJs.fontVariantCaps(`normal)], + [%expr CSS.fontVariantCaps(`normal)], ), ( [%css "font-variant-caps: small-caps"], [%expr [%css "font-variant-caps: small-caps"]], - [%expr CssJs.fontVariantCaps(`smallCaps)], + [%expr CSS.fontVariantCaps(`smallCaps)], ), ( [%css "font-variant-caps: all-small-caps"], [%expr [%css "font-variant-caps: all-small-caps"]], - [%expr CssJs.fontVariantCaps(`allSmallCaps)], + [%expr CSS.fontVariantCaps(`allSmallCaps)], ), ( [%css "font-variant-caps: petite-caps"], [%expr [%css "font-variant-caps: petite-caps"]], - [%expr CssJs.fontVariantCaps(`petiteCaps)], + [%expr CSS.fontVariantCaps(`petiteCaps)], ), ( [%css "font-variant-caps: all-petite-caps"], [%expr [%css "font-variant-caps: all-petite-caps"]], - [%expr CssJs.fontVariantCaps(`allPetiteCaps)], + [%expr CSS.fontVariantCaps(`allPetiteCaps)], ), ( [%css "font-variant-caps: titling-caps"], [%expr [%css "font-variant-caps: titling-caps"]], - [%expr CssJs.fontVariantCaps(`titlingCaps)], + [%expr CSS.fontVariantCaps(`titlingCaps)], ), ( [%css "font-variant-caps: unicase"], [%expr [%css "font-variant-caps: unicase"]], - [%expr CssJs.fontVariantCaps(`unicase)], + [%expr CSS.fontVariantCaps(`unicase)], ), ( [%css "font-optical-sizing: none"], [%expr [%css "font-optical-sizing: none"]], - [%expr CssJs.fontOpticalSizing(`none)], + [%expr CSS.fontOpticalSizing(`none)], ), ( [%css "font-optical-sizing: auto"], [%expr [%css "font-optical-sizing: auto"]], - [%expr CssJs.fontOpticalSizing(`auto)], + [%expr CSS.fontOpticalSizing(`auto)], ), ( [%css "font-variant-emoji: normal"], [%expr [%css "font-variant-emoji: normal"]], - [%expr CssJs.fontVariantEmoji(`normal)], + [%expr CSS.fontVariantEmoji(`normal)], ), ( [%css "font-variant-emoji: text"], [%expr [%css "font-variant-emoji: text"]], - [%expr CssJs.fontVariantEmoji(`text)], + [%expr CSS.fontVariantEmoji(`text)], ), ( [%css "font-variant-emoji: emoji"], [%expr [%css "font-variant-emoji: emoji"]], - [%expr CssJs.fontVariantEmoji(`emoji)], + [%expr CSS.fontVariantEmoji(`emoji)], ), ( [%css "font-variant-emoji: unicode"], [%expr [%css "font-variant-emoji: unicode"]], - [%expr CssJs.fontVariantEmoji(`unicode)], + [%expr CSS.fontVariantEmoji(`unicode)], ), ( [%css "text-decoration-skip-ink: auto"], [%expr [%css "text-decoration-skip-ink: auto"]], - [%expr CssJs.textDecorationSkipInk(`auto)], + [%expr CSS.textDecorationSkipInk(`auto)], ), ( [%css "text-decoration-skip-ink: none"], [%expr [%css "text-decoration-skip-ink: none"]], - [%expr CssJs.textDecorationSkipInk(`none)], + [%expr CSS.textDecorationSkipInk(`none)], ), ( [%css "text-decoration-skip-ink: all"], [%expr [%css "text-decoration-skip-ink: all"]], - [%expr CssJs.textDecorationSkipInk(`all)], + [%expr CSS.textDecorationSkipInk(`all)], ), ( [%css "text-decoration-skip-box: none"], [%expr [%css "text-decoration-skip-box: none"]], - [%expr CssJs.textDecorationSkipBox(`none)], + [%expr CSS.textDecorationSkipBox(`none)], ), ( [%css "text-decoration-skip-box: all"], [%expr [%css "text-decoration-skip-box: all"]], - [%expr CssJs.textDecorationSkipBox(`all)], + [%expr CSS.textDecorationSkipBox(`all)], ), ( [%css "text-decoration-skip-inset: none"], [%expr [%css "text-decoration-skip-inset: none"]], - [%expr CssJs.textDecorationSkipInset(`none)], + [%expr CSS.textDecorationSkipInset(`none)], ), ( [%css "text-decoration-skip-inset: auto"], [%expr [%css "text-decoration-skip-inset: auto"]], - [%expr CssJs.textDecorationSkipInset(`auto)], + [%expr CSS.textDecorationSkipInset(`auto)], ), ( [%css "transform-box: content-box"], [%expr [%css "transform-box: content-box"]], - [%expr CssJs.transformBox(`contentBox)], + [%expr CSS.transformBox(`contentBox)], ), ( [%css "transform-box: border-box"], [%expr [%css "transform-box: border-box"]], - [%expr CssJs.transformBox(`borderBox)], + [%expr CSS.transformBox(`borderBox)], ), ( [%css "transform-box: fill-box"], [%expr [%css "transform-box: fill-box"]], - [%expr CssJs.transformBox(`fillBox)], + [%expr CSS.transformBox(`fillBox)], ), ( [%css "transform-box: stroke-box"], [%expr [%css "transform-box: stroke-box"]], - [%expr CssJs.transformBox(`strokeBox)], + [%expr CSS.transformBox(`strokeBox)], ), ( [%css "transform-box: view-box"], [%expr [%css "transform-box: view-box"]], - [%expr CssJs.transformBox(`viewBox)], + [%expr CSS.transformBox(`viewBox)], ), ( [%css "border-image-source: url('img_tree.gif')"], [%expr [%css "border-image-source: url('img_tree.gif')"]], - [%expr CssJs.borderImageSource(`url({js|img_tree.gif|js}))], + [%expr CSS.borderImageSource(`url({js|img_tree.gif|js}))], ), ( [%css "border-image-source: none"], [%expr [%css "border-image-source: none"]], - [%expr CssJs.borderImageSource(`none)], + [%expr CSS.borderImageSource(`none)], ), /* ( [%css "border-image-source: linear-gradient(to top, red, yellow)"], [%expr [%css "border-image-source: linear-gradient(to top, red, yellow)"]], [%expr - CssJs.borderImageSource( + CSS.borderImageSource( `linearGradient(( Some(`SideOrCorner(`Top)), - [|(CssJs.red, None), (CssJs.yellow, None)|], + [|(CSS.red, None), (CSS.yellow, None)|], )), ) ], @@ -1175,73 +1163,73 @@ let properties_static_css_tests = [ ( [%css "image-rendering: smooth"], [%expr [%css "image-rendering: smooth"]], - [%expr CssJs.imageRendering(`smooth)], + [%expr CSS.imageRendering(`smooth)], ), ( [%css "image-rendering: high-quality"], [%expr [%css "image-rendering: high-quality"]], - [%expr CssJs.imageRendering(`highQuality)], + [%expr CSS.imageRendering(`highQuality)], ), ( [%css {|color: red !important|}], [%expr [%css {|color: red !important|}]], - [%expr CssJs.important(CssJs.color(CssJs.red))], + [%expr CSS.important(CSS.color(CSS.red))], ), ( [%css "tab-size: 0"], [%expr [%css "tab-size: 0"]], - [%expr CssJs.tabSize(`zero)], + [%expr CSS.tabSize(`zero)], ), ( [%css "tab-size: 4"], [%expr [%css "tab-size: 4"]], - [%expr CssJs.tabSize(`num(4.))], + [%expr CSS.tabSize(`num(4.))], ), ( [%css "tab-size: 10px"], [%expr [%css "tab-size: 10px"]], - [%expr CssJs.tabSize(`pxFloat(10.))], + [%expr CSS.tabSize(`pxFloat(10.))], ), ( [%css "tab-size: calc(10px + 10px)"], [%expr [%css "tab-size: calc(10px + 10px)"]], - [%expr CssJs.tabSize(`calc(`add((`pxFloat(10.), `pxFloat(10.)))))], + [%expr CSS.tabSize(`calc(`add((`pxFloat(10.), `pxFloat(10.)))))], ), ( [%css "tab-size: calc(10px + 10pt)"], [%expr [%css "tab-size: calc(10px + 10pt)"]], - [%expr CssJs.tabSize(`calc(`add((`pxFloat(10.), `pt(10)))))], + [%expr CSS.tabSize(`calc(`add((`pxFloat(10.), `pt(10)))))], ), ( [%css "transition-duration: 3s"], [%expr [%css "transition-duration: 3s"]], - [%expr CssJs.transitionDuration(`s(3))], + [%expr CSS.transitionDuration(`s(3))], ), ( [%css "transition-duration: calc(3s + 1ms)"], [%expr [%css "transition-duration: calc(3s + 1ms)"]], - [%expr CssJs.transitionDuration(`calc(`add((`s(3), `ms(1)))))], + [%expr CSS.transitionDuration(`calc(`add((`s(3), `ms(1)))))], ), ( [%css "transition-duration: min(3s)"], [%expr [%css "transition-duration: min(3s)"]], - [%expr CssJs.transitionDuration(`min([|`s(3)|]))], + [%expr CSS.transitionDuration(`min([|`s(3)|]))], ), ( [%css "transition-duration: max(3s, calc(1ms))"], [%expr [%css "transition-duration: max(3s, calc(1ms))"]], - [%expr CssJs.transitionDuration(`max([|`s(3), `ms(1)|]))], + [%expr CSS.transitionDuration(`max([|`s(3), `ms(1)|]))], ), ( [%css "transition-duration: max(+3s, calc(-0ms))"], [%expr [%css "transition-duration: max(+3s, calc(-0ms))"]], - [%expr CssJs.transitionDuration(`max([|`s(3), `ms(0)|]))], + [%expr CSS.transitionDuration(`max([|`s(3), `ms(0)|]))], ), ( [%css "animation: 3s"], [%expr [%css "animation: 3s"]], [%expr - CssJs.animation( + CSS.animation( ~duration=?Some(`s(3)), ~delay=?None, ~direction=?None, @@ -1257,7 +1245,7 @@ let properties_static_css_tests = [ [%css "animation: calc(3s + 1ms)"], [%expr [%css "animation: calc(3s + 1ms)"]], [%expr - CssJs.animation( + CSS.animation( ~duration=?Some(`calc(`add((`s(3), `ms(1))))), ~delay=?None, ~direction=?None, @@ -1273,7 +1261,7 @@ let properties_static_css_tests = [ [%css "animation: calc(3 + 1)"], [%expr [%css "animation: calc(3 + 1)"]], [%expr - CssJs.animation( + CSS.animation( ~duration=?Some(`calc(`add((`num(3.), `num(1.))))), ~delay=?None, ~direction=?None, @@ -1289,7 +1277,7 @@ let properties_static_css_tests = [ [%css "animation: max(3s, 1ms)"], [%expr [%css "animation: max(3s, 1ms)"]], [%expr - CssJs.animation( + CSS.animation( ~duration=?Some(`max([|`s(3), `ms(1)|])), ~delay=?None, ~direction=?None, @@ -1304,7 +1292,7 @@ let properties_static_css_tests = [ ( [%css "tab-size: calc(10 + 10)"], [%expr [%css "tab-size: calc(10 + 10)"]], - [%expr CssJs.tabSize(`calc(`add((`num(10.), `num(10.)))))], + [%expr CSS.tabSize(`calc(`add((`num(10.), `num(10.)))))], ), // unsupported /* @@ -1312,7 +1300,7 @@ let properties_static_css_tests = [ [%css "color: hsl(calc(120 + 10) 100% 50%)"], [%expr [%css "color: hsl(calc(120 + 10) 100% 50%)"]], [%expr - CssJs.color( + CSS.color( `hsl(( `calc(`add((`deg(120.), `deg(10.)))), `percent(100.), @@ -1330,18 +1318,18 @@ let properties_static_css_tests = [ "border-image-source: repeating-linear-gradient(45deg, transparent, #4d9f0c 20px);" ] ], - [%expr CssJs.borderImageSource(`none)], + [%expr CSS.borderImageSource(`none)], ), */ /* ( [%css "-moz-text-blink: blink"], [%expr [%css "-moz-text-blink: blink"]], - [%expr CssJs.unsafe("MozTextBlink", "blink")], + [%expr CSS.unsafe("MozTextBlink", "blink")], ), */ /* ( [%css "display: -webkit-inline-box"], [%expr [%css "display: -webkit-inline-box"]], - [%expr CssJs.unsafe("display", "-webkit-inline-box")], + [%expr CSS.unsafe("display", "-webkit-inline-box")], ), */ ]; diff --git a/packages/ppx/test/native/Whitespace_test.re b/packages/ppx/test/native/Whitespace_test.re index 4b04b639..652cd420 100644 --- a/packages/ppx/test/native/Whitespace_test.re +++ b/packages/ppx/test/native/Whitespace_test.re @@ -118,9 +118,9 @@ let tests = ], [%expr ignore( - CssJs.global(. + CSS.global(. {js|html, body, #root, .class|js}, - [|CssJs.margin(`zero)|], + [|CSS.margin(`zero)|], ), ) ], @@ -135,9 +135,9 @@ let tests = ], [%expr ignore( - CssJs.global(. + CSS.global(. {js|html, body, #root, .class|js}, - [|CssJs.margin(`zero)|], + [|CSS.margin(`zero)|], ), ) ], 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 eb5b28cd..e94b698c 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 @@ -972,12 +972,12 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = (~var, _) => - CssJs.style([| - CssJs.label("ArrayDynamicComponent"), - CssJs.display(`block), + CSS.style([| + CSS.label("ArrayDynamicComponent"), + CSS.display(`block), switch (var) { - | `Black => CssJs.color(`hex({js|999999|js})) - | `White => CssJs.color(`hex({js|FAFAFA|js})) + | `Black => CSS.color(`hex({js|999999|js})) + | `White => CSS.color(`hex({js|FAFAFA|js})) }, |]); let make = (props: makeProps('var)) => { diff --git a/packages/ppx/test/snapshot/reason/reason-classname-cx.t/run.t b/packages/ppx/test/snapshot/reason/reason-classname-cx.t/run.t index dff83626..948543a4 100644 --- a/packages/ppx/test/snapshot/reason/reason-classname-cx.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-classname-cx.t/run.t @@ -2,18 +2,18 @@ $ standalone --impl output.ml -o output.ml $ refmt --parse ml --print re output.ml let className = - CssJs.style([|CssJs.label("className"), CssJs.display(`block)|]); + CSS.style([|CSS.label("className"), CSS.display(`block)|]); let classNameWithMultiLine = - CssJs.style([| - CssJs.label("classNameWithMultiLine"), - CssJs.display(`block), + CSS.style([| + CSS.label("classNameWithMultiLine"), + CSS.display(`block), |]); let classNameWithArray = - CssJs.style([|CssJs.label("classNameWithArray"), cssProperty|]); - let cssRule = CssJs.color(CssJs.blue); + CSS.style([|CSS.label("classNameWithArray"), cssProperty|]); + let cssRule = CSS.color(CSS.blue); let classNameWithCss = - CssJs.style([| - CssJs.label("classNameWithCss"), + CSS.style([| + CSS.label("classNameWithCss"), cssRule, - CssJs.backgroundColor(CssJs.green), + CSS.backgroundColor(CSS.green), |]); 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 3eb9b866..10e5c79e 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 @@ -964,12 +964,12 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = (~var, _) => - CssJs.style([| - CssJs.label("ArrayDynamicComponent"), - CssJs.display(`block), + CSS.style([| + CSS.label("ArrayDynamicComponent"), + CSS.display(`block), switch (var) { - | `Black => CssJs.color(`hex({js|999999|js})) - | `White => CssJs.color(`hex({js|FAFAFA|js})) + | `Black => CSS.color(`hex({js|999999|js})) + | `White => CSS.color(`hex({js|FAFAFA|js})) }, |]); let make = (props: makeProps('var)) => { diff --git a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/input.re b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/input.re index de80b803..aba47e6b 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/input.re +++ b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/input.re @@ -1,5 +1,5 @@ module DynamicComponentWithDefaultValue = [%styled.div - (~var=CssJs.hex("333")) => [| + (~var=CSS.hex("333")) => [| [%css "color: $(var);"], [%css "display: block;"], |] 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 3b07bc66..a21c6ac9 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 @@ -964,11 +964,11 @@ }; external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; - let styles = (~var=CssJs.hex("333"), _) => - CssJs.style([| - CssJs.label("DynamicComponentWithDefaultValue"), - CssJs.display(`block), - (CssJs.color(var): CssJs.rule), + let styles = (~var=CSS.hex("333"), _) => + CSS.style([| + CSS.label("DynamicComponentWithDefaultValue"), + CSS.display(`block), + (CSS.color(var): CSS.rule), |]); let make = (props: makeProps('var)) => { let className = 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 adfa2bfa..b05097a6 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 @@ -964,10 +964,10 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = (~var, _) => - CssJs.style([| - CssJs.label("DynamicComponent"), - (CssJs.color(var): CssJs.rule), - CssJs.display(`block), + CSS.style([| + CSS.label("DynamicComponent"), + (CSS.color(var): CSS.rule), + CSS.display(`block), |]); let make = (props: makeProps('var)) => { let className = 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 88cfdca8..5111e645 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 @@ -963,7 +963,7 @@ "Object.assign"; let styles = (~size, _) => { Js.log("Logging when render"); - CssJs.style([|(CssJs.width(size): CssJs.rule), CssJs.display(`block)|]); + CSS.style([|(CSS.width(size): CSS.rule), CSS.display(`block)|]); }; let make = (props: makeProps('size)) => { let className = @@ -1947,10 +1947,10 @@ "Object.assign"; let styles = (~variant, _) => { let color = Theme.button(variant); - CssJs.style([| - CssJs.display(`inlineFlex), - (CssJs.color(color): CssJs.rule), - CssJs.width(`percent(100.)), + CSS.style([| + CSS.display(`inlineFlex), + (CSS.color(color): CSS.rule), + CSS.width(`percent(100.)), |]); }; let make = (props: makeProps('variant)) => { 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 b978a1a0..d4d1cc2a 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 @@ -963,12 +963,12 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = (~size, ~color, _) => - CssJs.style([| - CssJs.label("DynamicComponentWithArray"), - CssJs.width(`percent(100.)), - CssJs.display(`block), - (CssJs.color(color): CssJs.rule), - (CssJs.width(size): CssJs.rule), + CSS.style([| + CSS.label("DynamicComponentWithArray"), + CSS.width(`percent(100.)), + CSS.display(`block), + (CSS.color(color): CSS.rule), + (CSS.width(size): CSS.rule), |]); let make = (props: makeProps('color, 'size)) => { let className = 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 af2d54f8..586e3caf 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 @@ -963,7 +963,7 @@ }; external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; - let styles = (~a as _, _) => CssJs.style(cssRule); + let styles = (~a as _, _) => CSS.style(cssRule); let make = (props: makeProps('a)) => { let className = styles(~a=aGet(props), ()) ++ getOrEmpty(classNameGet(props)); 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 7edaa017..0d8146ba 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 @@ -1,8 +1,8 @@ $ refmt --parse re --print ml input.re > output.ml $ standalone --impl output.ml -o output.ml $ refmt --parse ml --print re output.ml - let sharedStylesBetweenDynamicComponents = (color): CssJs.rule => - CssJs.color(color); + let sharedStylesBetweenDynamicComponents = (color): CSS.rule => + CSS.color(color); module DynamicCompnentWithLetIn = { [@deriving (jsProperties, getSet)] type makeProps('color) = { @@ -967,7 +967,7 @@ "Object.assign"; let styles = (~color, _) => { let styles = sharedStylesBetweenDynamicComponents(color); - CssJs.style(styles); + CSS.style(styles); }; let make = (props: makeProps('color)) => { let className = 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 5ad301a4..5ccf03d7 100644 --- a/packages/ppx/test/snapshot/reason/reason-dynamic.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-dynamic.t/run.t @@ -963,11 +963,11 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = (~var, ~id, _) => - CssJs.style([| - CssJs.label("DynamicComponent"), - (CssJs.color(var): CssJs.rule), - CssJs.display(`flex), - (CssJs.backgroundColor(id): CssJs.rule), + CSS.style([| + CSS.label("DynamicComponent"), + (CSS.color(var): CSS.rule), + CSS.display(`flex), + (CSS.backgroundColor(id): CSS.rule), |]); let make = (props: makeProps('id, 'var)) => { let className = 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 4fad72d1..013aad19 100644 --- a/packages/ppx/test/snapshot/reason/reason-keyframes.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-keyframes.t/run.t @@ -2,9 +2,9 @@ $ standalone --impl output.ml -o output.ml $ refmt --parse ml --print re output.ml let animation = - CssJs.keyframes([| - (0, [|CssJs.opacity(0.)|]), - (100, [|CssJs.opacity(1.)|]), + CSS.keyframes([| + (0, [|CSS.opacity(0.)|]), + (100, [|CSS.opacity(1.)|]), |]); module FadeIn = { [@deriving (jsProperties, getSet)] @@ -968,9 +968,9 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("FadeIn"), - (CssJs.animationName(animation): CssJs.rule), + CSS.style([| + CSS.label("FadeIn"), + (CSS.animationName(animation): CSS.rule), |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(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 262585f1..1eb09100 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 @@ -965,17 +965,17 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("SelectorWithInterpolation"), - CssJs.media( + CSS.style([| + CSS.label("SelectorWithInterpolation"), + CSS.media( {js|only screen and (min-width: |js} ++ width ++ {js|)|js}, - [|CssJs.color(CssJs.blue)|], + [|CSS.color(CSS.blue)|], ), - CssJs.media( + CSS.media( {js|(min-width: 700px) and (orientation: |js} ++ orientation ++ {js|)|js}, - [|CssJs.display(`none)|], + [|CSS.display(`none)|], ), |]); let make = (props: makeProps) => { 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 6b84588d..fe40051a 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 @@ -963,19 +963,19 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("SelectorsMediaQueries"), - CssJs.media( + CSS.style([| + CSS.label("SelectorsMediaQueries"), + CSS.media( {js|(min-width: 600px)|js}, - [|CssJs.backgroundColor(CssJs.blue)|], + [|CSS.backgroundColor(CSS.blue)|], ), - CssJs.selector( + CSS.selector( {js|&:hover|js}, - [|CssJs.backgroundColor(CssJs.green)|], + [|CSS.backgroundColor(CSS.green)|], ), - CssJs.selector( + CSS.selector( {js|& > p|js}, - [|CssJs.color(CssJs.pink), CssJs.fontSize(`pxFloat(24.))|], + [|CSS.color(CSS.pink), CSS.fontSize(`pxFloat(24.))|], ), |]); let make = (props: makeProps) => { 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 d2f87e2b..97756d1a 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 @@ -963,15 +963,15 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("MediaQueryCalc"), - CssJs.media( + CSS.style([| + CSS.label("MediaQueryCalc"), + CSS.media( {js|(min-width: calc(2px + 1px))|js}, - [|CssJs.color(CssJs.red)|], + [|CSS.color(CSS.red)|], ), - CssJs.media( + CSS.media( {js|(min-width: calc(1000px - 2%))|js}, - [|CssJs.color(CssJs.red)|], + [|CSS.color(CSS.red)|], ), |]); let make = (props: makeProps) => { diff --git a/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/input.re b/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/input.re index de80b803..aba47e6b 100644 --- a/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/input.re +++ b/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/input.re @@ -1,5 +1,5 @@ module DynamicComponentWithDefaultValue = [%styled.div - (~var=CssJs.hex("333")) => [| + (~var=CSS.hex("333")) => [| [%css "color: $(var);"], [%css "display: block;"], |] diff --git a/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/run.t b/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/run.t index 57039ca8..2a92f397 100644 --- a/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-native-dynamic-interpolation-default-value.t/run.t @@ -7,11 +7,11 @@ | Some(str) => " " ++ str | None => "" }; - let styles = (~var=CssJs.hex("333"), _) => - CssJs.style([| - CssJs.label("DynamicComponentWithDefaultValue"), - CssJs.display(`block), - (CssJs.color(var): CssJs.rule), + let styles = (~var=CSS.hex("333"), _) => + CSS.style([| + CSS.label("DynamicComponentWithDefaultValue"), + CSS.display(`block), + (CSS.color(var): CSS.rule), |]); let make = ( diff --git a/packages/ppx/test/snapshot/reason/reason-native-dynamic.t/run.t b/packages/ppx/test/snapshot/reason/reason-native-dynamic.t/run.t index b063ac99..4dea6e90 100644 --- a/packages/ppx/test/snapshot/reason/reason-native-dynamic.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-native-dynamic.t/run.t @@ -8,11 +8,11 @@ | None => "" }; let styles = (~var, ~id, _) => - CssJs.style([| - CssJs.label("DynamicComponent"), - (CssJs.color(var): CssJs.rule), - CssJs.display(`flex), - (CssJs.backgroundColor(id): CssJs.rule), + CSS.style([| + CSS.label("DynamicComponent"), + (CSS.color(var): CSS.rule), + CSS.display(`flex), + (CSS.backgroundColor(id): CSS.rule), |]); let make = ( diff --git a/packages/ppx/test/snapshot/reason/reason-native-static-multi-line-string.t/run.t b/packages/ppx/test/snapshot/reason/reason-native-static-multi-line-string.t/run.t index e6a64e42..90da40a6 100644 --- a/packages/ppx/test/snapshot/reason/reason-native-static-multi-line-string.t/run.t +++ b/packages/ppx/test/snapshot/reason/reason-native-static-multi-line-string.t/run.t @@ -8,10 +8,10 @@ | None => "" }; let styles = - CssJs.style([| - CssJs.label("MultiLineStrings"), - CssJs.display(`flex), - CssJs.justifyContent(`center), + CSS.style([| + CSS.label("MultiLineStrings"), + CSS.display(`flex), + CSS.justifyContent(`center), |]); let make = ( 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 384ad102..e308343e 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 @@ -963,10 +963,10 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("ArrayStatic"), - CssJs.display(`flex), - CssJs.justifyContent(`center), + CSS.style([| + CSS.label("ArrayStatic"), + CSS.display(`flex), + CSS.justifyContent(`center), |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(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 cea318e0..73c9ff2b 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 @@ -963,10 +963,10 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("SingleQuoteStrings"), - CssJs.display(`flex), - CssJs.justifyContent(`center), + CSS.style([| + CSS.label("SingleQuoteStrings"), + CSS.display(`flex), + CSS.justifyContent(`center), |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); diff --git a/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/input.re b/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/input.re index bca13779..414e35c8 100644 --- a/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/input.re +++ b/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/input.re @@ -1,10 +1,10 @@ module Theme = { - let var = CssJs.hex("333333"); + let var = CSS.hex("333333"); module Border = { - let black = CssJs.hex("222222"); + let black = CSS.hex("222222"); }; }; -let black = CssJs.hex("000"); +let black = CSS.hex("000"); module StringInterpolation = [%styled.div {j| 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 8debfaac..24342d1b 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 @@ -2,12 +2,12 @@ $ standalone --impl output.ml -o output.ml $ refmt --parse ml --print re output.ml module Theme = { - let var = CssJs.hex("333333"); + let var = CSS.hex("333333"); module Border = { - let black = CssJs.hex("222222"); + let black = CSS.hex("222222"); }; }; - let black = CssJs.hex("000"); + let black = CSS.hex("000"); module StringInterpolation = { [@deriving (jsProperties, getSet)] type makeProps = { @@ -970,12 +970,12 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("StringInterpolation"), - (CssJs.color(Theme.var): CssJs.rule), - (CssJs.backgroundColor(black): CssJs.rule), - (CssJs.borderColor(Theme.Border.black): CssJs.rule), - CssJs.display(`block), + CSS.style([| + CSS.label("StringInterpolation"), + (CSS.color(Theme.var): CSS.rule), + (CSS.backgroundColor(black): CSS.rule), + (CSS.borderColor(Theme.Border.black): CSS.rule), + CSS.display(`block), |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(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 a395ab68..171745e7 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 @@ -963,10 +963,10 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("MultiLineStrings"), - CssJs.display(`flex), - CssJs.justifyContent(`center), + CSS.style([| + CSS.label("MultiLineStrings"), + CSS.display(`flex), + CSS.justifyContent(`center), |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(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 3efebbe9..fa897800 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 @@ -963,9 +963,9 @@ external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; let styles = - CssJs.style([| - CssJs.label("OneSingleProperty"), - CssJs.display(`block), + CSS.style([| + CSS.label("OneSingleProperty"), + CSS.display(`block), |]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(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 948d5361..12a31ca0 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 @@ -962,7 +962,7 @@ let deleteProp = [%mel.raw "(newProps, key) => delete newProps[key]"]; external assign2: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) = "Object.assign"; - let styles = CssJs.style([|CssJs.label("SelfClosingElement")|]); + let styles = CSS.style([|CSS.label("SelfClosingElement")|]); let make = (props: makeProps) => { let className = styles ++ getOrEmpty(classNameGet(props)); let stylesObject = {"className": className, "ref": innerRefGet(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 925e6ac6..8fa789bf 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 @@ -2,136 +2,136 @@ $ standalone --impl output.ml -o output.ml $ refmt --parse ml --print re output.ml ignore( - CssJs.global([| - CssJs.selector( + CSS.global([| + CSS.selector( {js|html|js}, [| - CssJs.lineHeight(`abs(1.15)), - CssJs.unsafe({js|textSizeAdjust|js}, {js|100%|js}), + CSS.lineHeight(`abs(1.15)), + CSS.unsafe({js|textSizeAdjust|js}, {js|100%|js}), |], ), - CssJs.selector({js|body|js}, [|CssJs.margin(`zero)|]), - CssJs.selector({js|main|js}, [|CssJs.display(`block)|]), - CssJs.selector( + CSS.selector({js|body|js}, [|CSS.margin(`zero)|]), + CSS.selector({js|main|js}, [|CSS.display(`block)|]), + CSS.selector( {js|h1|js}, - [|CssJs.fontSize(`em(2.)), CssJs.margin2(~v=`em(0.67), ~h=`zero)|], + [|CSS.fontSize(`em(2.)), CSS.margin2(~v=`em(0.67), ~h=`zero)|], ), - CssJs.selector( + CSS.selector( {js|hr|js}, [| - CssJs.boxSizing(`contentBox), - CssJs.height(`zero), - CssJs.overflow(`visible), + CSS.boxSizing(`contentBox), + CSS.height(`zero), + CSS.overflow(`visible), |], ), - CssJs.selector( + CSS.selector( {js|pre|js}, [| - CssJs.fontFamilies([|`monospace, `monospace|]), - CssJs.fontSize(`em(1.)), + CSS.fontFamilies([|`monospace, `monospace|]), + CSS.fontSize(`em(1.)), |], ), - CssJs.selector({js|a|js}, [|CssJs.backgroundColor(`transparent)|]), - CssJs.selector( + CSS.selector({js|a|js}, [|CSS.backgroundColor(`transparent)|]), + CSS.selector( {js|abbr[title]|js}, [| - CssJs.unsafe({js|borderBottom|js}, {js|none|js}), - CssJs.textDecoration(`underline), - CssJs.unsafe({js|textDecoration|js}, {js|underline dotted|js}), + CSS.unsafe({js|borderBottom|js}, {js|none|js}), + CSS.textDecoration(`underline), + CSS.unsafe({js|textDecoration|js}, {js|underline dotted|js}), |], ), - CssJs.selector({js|b, strong|js}, [|CssJs.fontWeight(`bolder)|]), - CssJs.selector( + CSS.selector({js|b, strong|js}, [|CSS.fontWeight(`bolder)|]), + CSS.selector( {js|code, kbd, samp|js}, [| - CssJs.fontFamilies([|`monospace, `monospace|]), - CssJs.fontSize(`em(1.)), + CSS.fontFamilies([|`monospace, `monospace|]), + CSS.fontSize(`em(1.)), |], ), - CssJs.selector({js|small|js}, [|CssJs.fontSize(`percent(80.))|]), - CssJs.selector( + CSS.selector({js|small|js}, [|CSS.fontSize(`percent(80.))|]), + CSS.selector( {js|sub, sup|js}, [| - CssJs.fontSize(`percent(75.)), - CssJs.lineHeight(`zero), - CssJs.unsafe({js|position|js}, {js|relative|js}), - CssJs.verticalAlign(`baseline), + CSS.fontSize(`percent(75.)), + CSS.lineHeight(`zero), + CSS.unsafe({js|position|js}, {js|relative|js}), + CSS.verticalAlign(`baseline), |], ), - CssJs.selector({js|sub|js}, [|CssJs.bottom(`em(-0.25))|]), - CssJs.selector({js|sup|js}, [|CssJs.top(`em(-0.5))|]), - CssJs.selector({js|img|js}, [|CssJs.borderStyle(`none)|]), - CssJs.selector( + 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}, [| - CssJs.unsafe({js|font-family|js}, {js|inherit|js}), - CssJs.fontSize(`percent(100.)), - CssJs.lineHeight(`abs(1.15)), - CssJs.margin(`zero), + CSS.unsafe({js|font-family|js}, {js|inherit|js}), + CSS.fontSize(`percent(100.)), + CSS.lineHeight(`abs(1.15)), + CSS.margin(`zero), |], ), - CssJs.selector({js|button, input|js}, [|CssJs.overflow(`visible)|]), - CssJs.selector({js|button, select|js}, [|CssJs.textTransform(`none)|]), - CssJs.selector( + 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}, - [|CssJs.unsafe({js|WebkitAppearance|js}, {js|button|js})|], + [|CSS.unsafe({js|WebkitAppearance|js}, {js|button|js})|], ), - CssJs.selector( + CSS.selector( {js|button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner|js}, - [|CssJs.borderStyle(`none), CssJs.padding(`zero)|], + [|CSS.borderStyle(`none), CSS.padding(`zero)|], ), - CssJs.selector( + CSS.selector( {js|button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring|js}, - [|CssJs.unsafe({js|outline|js}, {js|1px dotted ButtonText|js})|], + [|CSS.unsafe({js|outline|js}, {js|1px dotted ButtonText|js})|], ), - CssJs.selector( + CSS.selector( {js|fieldset|js}, [| - CssJs.padding3(~top=`em(0.35), ~h=`em(0.75), ~bottom=`em(0.625)), + CSS.padding3(~top=`em(0.35), ~h=`em(0.75), ~bottom=`em(0.625)), |], ), - CssJs.selector( + CSS.selector( {js|legend|js}, [| - CssJs.boxSizing(`borderBox), - CssJs.unsafe({js|color|js}, {js|inherit|js}), - CssJs.display(`table), - CssJs.maxWidth(`percent(100.)), - CssJs.padding(`zero), - CssJs.whiteSpace(`normal), + CSS.boxSizing(`borderBox), + CSS.unsafe({js|color|js}, {js|inherit|js}), + CSS.display(`table), + CSS.maxWidth(`percent(100.)), + CSS.padding(`zero), + CSS.whiteSpace(`normal), |], ), - CssJs.selector({js|progress|js}, [|CssJs.verticalAlign(`baseline)|]), - CssJs.selector({js|textarea|js}, [|CssJs.overflow(`auto)|]), - CssJs.selector( + CSS.selector({js|progress|js}, [|CSS.verticalAlign(`baseline)|]), + CSS.selector({js|textarea|js}, [|CSS.overflow(`auto)|]), + CSS.selector( {js|[type="checkbox"], [type="radio"]|js}, - [|CssJs.boxSizing(`borderBox), CssJs.padding(`zero)|], + [|CSS.boxSizing(`borderBox), CSS.padding(`zero)|], ), - CssJs.selector( + CSS.selector( {js|[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button|js}, - [|CssJs.height(`auto)|], + [|CSS.height(`auto)|], ), - CssJs.selector( + CSS.selector( {js|[type="search"]|js}, [| - CssJs.unsafe({js|WebkitAppearance|js}, {js|textfield|js}), - CssJs.outlineOffset(`pxFloat(-2.)), + CSS.unsafe({js|WebkitAppearance|js}, {js|textfield|js}), + CSS.outlineOffset(`pxFloat(-2.)), |], ), - CssJs.selector( + CSS.selector( {js|[type="search"]::-webkit-search-decoration|js}, - [|CssJs.unsafe({js|WebkitAppearance|js}, {js|none|js})|], + [|CSS.unsafe({js|WebkitAppearance|js}, {js|none|js})|], ), - CssJs.selector( + CSS.selector( {js|::-webkit-file-upload-button|js}, [| - CssJs.unsafe({js|WebkitAppearance|js}, {js|button|js}), - CssJs.unsafe({js|font|js}, {js|inherit|js}), + CSS.unsafe({js|WebkitAppearance|js}, {js|button|js}), + CSS.unsafe({js|font|js}, {js|inherit|js}), |], ), - CssJs.selector({js|details|js}, [|CssJs.display(`block)|]), - CssJs.selector({js|summary|js}, [|CssJs.display(`listItem)|]), - CssJs.selector({js|template|js}, [|CssJs.display(`none)|]), - CssJs.selector({js|[hidden]|js}, [|CssJs.display(`none)|]), + 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)|]), |]), ); diff --git a/packages/ppx/test/snapshot/rescript/rescript-bs-config-missing-jsx-version.t/run.t b/packages/ppx/test/snapshot/rescript/rescript-bs-config-missing-jsx-version.t/run.t index c2dd8676..891f00ec 100644 --- a/packages/ppx/test/snapshot/rescript/rescript-bs-config-missing-jsx-version.t/run.t +++ b/packages/ppx/test/snapshot/rescript/rescript-bs-config-missing-jsx-version.t/run.t @@ -492,11 +492,11 @@ < .. > Js.t -> < .. > Js.t -> < .. > Js.t -> < .. > Js.t = "Object.assign"[@@bs.val ] let styles ~var:((var)[@ns.namedArgLoc ]) _ = - CssJs.style - [|(CssJs.label "ArrayDynamicComponent");(CssJs.display `block);(( + CSS.style + [|(CSS.label "ArrayDynamicComponent");(CSS.display `block);(( match var with - | `Black -> CssJs.color (`hex {js|999999|js}) - | `White -> CssJs.color (`hex {js|FAFAFA|js})))|] + | `Black -> CSS.color (`hex {js|999999|js}) + | `White -> CSS.color (`hex {js|FAFAFA|js})))|] let make (props : 'var makeProps) = let className = (styles ~var:(varGet props) ()) ^ (getOrEmpty (classNameGet props)) in diff --git a/packages/ppx/test/snapshot/rescript/rescript-compatible-with-bs-emotion.t/run.t b/packages/ppx/test/snapshot/rescript/rescript-compatible-with-bs-emotion.t/run.t index f220eb75..a3fe3277 100644 --- a/packages/ppx/test/snapshot/rescript/rescript-compatible-with-bs-emotion.t/run.t +++ b/packages/ppx/test/snapshot/rescript/rescript-compatible-with-bs-emotion.t/run.t @@ -1,2 +1,2 @@ $ npx bsc -ppx "rewriter" -only-parse -bs-ast -bs-jsx 4 -bs-loc -bs-diagnose -bs-no-version-header -bs-ml-out -bs-no-builtin-ppx -bs-super-errors -color never -dsource input.res - let styledPpxCss_ShouldTransform = CssJs.display `block + let styledPpxCss_ShouldTransform = CSS.display `block diff --git a/packages/ppx/test/snapshot/rescript/rescript-dynamic-interpolation-default-value.t/input.res b/packages/ppx/test/snapshot/rescript/rescript-dynamic-interpolation-default-value.t/input.res index beec531f..097d9ef4 100644 --- a/packages/ppx/test/snapshot/rescript/rescript-dynamic-interpolation-default-value.t/input.res +++ b/packages/ppx/test/snapshot/rescript/rescript-dynamic-interpolation-default-value.t/input.res @@ -1,3 +1,3 @@ module DynamicComponentWithDefaultValue = %styled.div( - (~var=CssJs.hex("333")) => [%css("color: $(var);"), %css("display: block;")] + (~var=CSS.hex("333")) => [%css("color: $(var);"), %css("display: block;")] ) diff --git a/packages/ppx/test/snapshot/rescript/rescript-static-interpolation.t/input.res b/packages/ppx/test/snapshot/rescript/rescript-static-interpolation.t/input.res index 3b599ccb..90ad9bef 100644 --- a/packages/ppx/test/snapshot/rescript/rescript-static-interpolation.t/input.res +++ b/packages/ppx/test/snapshot/rescript/rescript-static-interpolation.t/input.res @@ -1,10 +1,10 @@ module Theme = { - let var = CssJs.hex("333333") + let var = CSS.hex("333333") module Border = { - let black = CssJs.hex("222222") + let black = CSS.hex("222222") } } -let black = CssJs.hex("000") +let black = CSS.hex("000") module StringInterpolation = %styled.div(j` color: $(Theme.var); diff --git a/packages/ppx/test/snapshot/rescript/rescript-static.t/run.t b/packages/ppx/test/snapshot/rescript/rescript-static.t/run.t index bafd5b69..7f493499 100644 --- a/packages/ppx/test/snapshot/rescript/rescript-static.t/run.t +++ b/packages/ppx/test/snapshot/rescript/rescript-static.t/run.t @@ -493,7 +493,7 @@ external assign2 : < .. > Js.t -> < .. > Js.t -> < .. > Js.t -> < .. > Js.t = "Object.assign"[@@bs.val ] - let styles = CssJs.style [|(CssJs.label "Input");(CssJs.display `flex)|] + let styles = CSS.style [|(CSS.label "Input");(CSS.display `flex)|] let make (props : makeProps) = let className = styles ^ (getOrEmpty (classNameGet props)) in let stylesObject = [%bs.obj { className; ref = (innerRefGet props) }] in diff --git a/packages/runtime/melange/CssJs.ml b/packages/runtime/melange/CSS.ml similarity index 85% rename from packages/runtime/melange/CssJs.ml rename to packages/runtime/melange/CSS.ml index 7687d108..0ba9ee38 100644 --- a/packages/runtime/melange/CssJs.ml +++ b/packages/runtime/melange/CSS.ml @@ -2,7 +2,7 @@ include Properties include Colors include Alias include Rule -include Emotion +include Emotion_bindings module Types = Css_types (* alias for backwards compatibility *) diff --git a/packages/runtime/melange/Emotion.ml b/packages/runtime/melange/Emotion_bindings.ml similarity index 100% rename from packages/runtime/melange/Emotion.ml rename to packages/runtime/melange/Emotion_bindings.ml diff --git a/packages/runtime/native/Emotion.ml b/packages/runtime/native/CSS.ml similarity index 99% rename from packages/runtime/native/Emotion.ml rename to packages/runtime/native/CSS.ml index 4d6edded..0a387768 100644 --- a/packages/runtime/native/Emotion.ml +++ b/packages/runtime/native/CSS.ml @@ -1,3 +1,12 @@ +include Properties +include Colors +include Alias +include Rule +module Types = Css_types + +(* alias for backwards compatibility *) +type rule = Rule.t + module Array = struct include Kloth.Array include Stdlib.ArrayLabels diff --git a/packages/runtime/native/CssJs.ml b/packages/runtime/native/CssJs.ml deleted file mode 100644 index 7687d108..00000000 --- a/packages/runtime/native/CssJs.ml +++ /dev/null @@ -1,9 +0,0 @@ -include Properties -include Colors -include Alias -include Rule -include Emotion -module Types = Css_types - -(* alias for backwards compatibility *) -type rule = Rule.t diff --git a/packages/runtime/rescript/CssJs.ml b/packages/runtime/rescript/CssJs.ml deleted file mode 100644 index 7687d108..00000000 --- a/packages/runtime/rescript/CssJs.ml +++ /dev/null @@ -1,9 +0,0 @@ -include Properties -include Colors -include Alias -include Rule -include Emotion -module Types = Css_types - -(* alias for backwards compatibility *) -type rule = Rule.t diff --git a/packages/runtime/rescript/Emotion.ml b/packages/runtime/rescript/Emotion_bindings.ml similarity index 100% rename from packages/runtime/rescript/Emotion.ml rename to packages/runtime/rescript/Emotion_bindings.ml diff --git a/packages/runtime/rescript/dune b/packages/runtime/rescript/dune index 6130d3b3..b2bbdb3c 100644 --- a/packages/runtime/rescript/dune +++ b/packages/runtime/rescript/dune @@ -16,11 +16,11 @@ (copy_files# (files ../native/shared/Colors.ml)) -; Copy files into the root of the folder (which collides with Kloth.ml) -; but later on the actions, we remove the ml file, using the Kloth.res file +(copy_files# + (files ../melange/CSS.ml)) (rule - (deps Kloth.ml CssJs.ml Emotion.ml) + (deps Kloth.ml Emotion_bindings.ml) (action (progn (with-stdout-to diff --git a/packages/runtime/test/test_autoprefixer.ml b/packages/runtime/test/test_autoprefixer.ml index f9b6a56e..da011771 100644 --- a/packages/runtime/test/test_autoprefixer.ml +++ b/packages/runtime/test/test_autoprefixer.ml @@ -1,30 +1,30 @@ let prefix_one_declaration declaration output = - let hash = CssJs.style [| declaration |] in - let css = CssJs.get_stylesheet () in - let _ = CssJs.flush () in + let hash = CSS.style [| declaration |] in + let css = CSS.get_stylesheet () in + let _ = CSS.flush () in assert_string css (Printf.sprintf ".%s { %s }" hash output) let text_size_adjust = test "text_size_adjust" (fun () -> prefix_one_declaration - (CssJs.unsafe "text-size-adjust" "none") + (CSS.unsafe "text-size-adjust" "none") "-webkit-text-size-adjust: none; -moz-text-size-adjust: none; \ -ms-text-size-adjust: none; text-size-adjust: none;") let text_decoration = test "text_decoration" (fun () -> prefix_one_declaration - (CssJs.textDecoration `lineThrough) + (CSS.textDecoration `lineThrough) "-webkit-text-decoration: line-through; text-decoration: line-through;") let display_grid = test "display_grid" (fun () -> - prefix_one_declaration (CssJs.display `grid) "display: grid;") + prefix_one_declaration (CSS.display `grid) "display: grid;") let animation_duration = test "animation_duration" (fun () -> prefix_one_declaration - (CssJs.animationIterationCount `infinite) + (CSS.animationIterationCount `infinite) "-webkit-animation-iteration-count: infinite; \ animation-iteration-count: infinite;") diff --git a/packages/runtime/test/test_styles.ml b/packages/runtime/test/test_styles.ml index 96df82f3..29d730cd 100644 --- a/packages/runtime/test/test_styles.ml +++ b/packages/runtime/test/test_styles.ml @@ -1,31 +1,25 @@ let get_string_style_rules () = - let content = CssJs.get_stylesheet () in - let _ = CssJs.flush () in + let content = CSS.get_stylesheet () in + let _ = CSS.flush () in content let one_property = test "one_property" @@ fun () -> - let classname = CssJs.style [| CssJs.display `block |] in + let classname = CSS.style [| CSS.display `block |] in let css = get_string_style_rules () in assert_string css (Printf.sprintf ".%s { display: block; }" classname) let multiple_properties = test "multiple_properties" @@ fun () -> - let classname = - CssJs.style [| CssJs.display `block; CssJs.fontSize (`px 10) |] - in + let classname = CSS.style [| CSS.display `block; CSS.fontSize (`px 10) |] in let css = get_string_style_rules () in assert_string css (Printf.sprintf ".%s { display: block; font-size: 10px; }" classname) let multiple_declarations = test "multiple_declarations" @@ fun () -> - let classname1 = - CssJs.style [| CssJs.display `block; CssJs.fontSize (`px 10) |] - in - let classname2 = - CssJs.style [| CssJs.display `block; CssJs.fontSize (`px 99) |] - in + let classname1 = CSS.style [| CSS.display `block; CSS.fontSize (`px 10) |] in + let classname2 = CSS.style [| CSS.display `block; CSS.fontSize (`px 99) |] in let css = get_string_style_rules () in assert_string css (Printf.sprintf @@ -35,9 +29,7 @@ let multiple_declarations = let label_should_not_be_rendered = test "label_should_not_be_rendered" @@ fun () -> - let classname = - CssJs.style [| CssJs.label "classname"; CssJs.display `block |] - in + let classname = CSS.style [| CSS.label "classname"; CSS.display `block |] in let css = get_string_style_rules () in assert_string css (Printf.sprintf ".%s { display: block; }" classname) @@ -128,17 +120,16 @@ let avoid_hash_collision = let float_values = test "float_values" @@ fun () -> - let classname = CssJs.style [| CssJs.padding (`rem 10.) |] in + let classname = CSS.style [| CSS.padding (`rem 10.) |] in let css = get_string_style_rules () in assert_string css (Printf.sprintf ".%s { padding: 10rem; }" classname) let simple_selector = test "simple_selector" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.margin @@ CssJs.px 10; - CssJs.selector "a" [| CssJs.margin @@ CssJs.px 60 |]; + CSS.margin @@ CSS.px 10; CSS.selector "a" [| CSS.margin @@ CSS.px 60 |]; |] in let css = get_string_style_rules () in @@ -149,13 +140,11 @@ let simple_selector = let selector_nested = test "selector_nested" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.margin @@ CssJs.px 10; - CssJs.selector "a" - [| - CssJs.display `block; CssJs.selector "div" [| CssJs.display `none |]; - |]; + CSS.margin @@ CSS.px 10; + CSS.selector "a" + [| CSS.display `block; CSS.selector "div" [| CSS.display `none |] |]; |] in let css = get_string_style_rules () in @@ -168,13 +157,13 @@ let selector_nested = let selector_nested_with_ampersand = test "selector_nested_with_ampersand" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.margin @@ CssJs.px 10; - CssJs.selector "& > a" + CSS.margin @@ CSS.px 10; + CSS.selector "& > a" [| - CssJs.margin @@ CssJs.px 11; - CssJs.selector "& > div" [| CssJs.margin @@ CssJs.px 12 |]; + CSS.margin @@ CSS.px 11; + CSS.selector "& > div" [| CSS.margin @@ CSS.px 12 |]; |]; |] in @@ -188,22 +177,22 @@ let selector_nested_with_ampersand = let selector_nested_x10 = test "selector_nested_x10" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.display `flex; - CssJs.selector "a" + CSS.display `flex; + CSS.selector "a" [| - CssJs.display `block; - CssJs.selector "div" + CSS.display `block; + CSS.selector "div" [| - CssJs.display `none; - CssJs.selector "span" + CSS.display `none; + CSS.selector "span" [| - CssJs.display `none; - CssJs.selector "hr" + CSS.display `none; + CSS.selector "hr" [| - CssJs.display `none; - CssJs.selector "code" [| CssJs.display `none |]; + CSS.display `none; + CSS.selector "code" [| CSS.display `none |]; |]; |]; |]; @@ -221,10 +210,9 @@ let selector_nested_x10 = let selector_ampersand_with_space = test "selector_ampersand_with_space" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.fontSize (`px 42); - CssJs.selector "& .div" [| CssJs.fontSize (`px 24) |]; + CSS.fontSize (`px 42); CSS.selector "& .div" [| CSS.fontSize (`px 24) |]; |] in let css = get_string_style_rules () in @@ -308,10 +296,9 @@ let pseudo_selectors_everywhere = let selector_ampersand_with_no_space = test "selector_ampersand_with_space" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.fontSize (`px 42); - CssJs.selector "&.div" [| CssJs.fontSize (`px 24) |]; + CSS.fontSize (`px 42); CSS.selector "&.div" [| CSS.fontSize (`px 24) |]; |] in let css = get_string_style_rules () in @@ -322,10 +309,10 @@ let selector_ampersand_with_no_space = let selector_ampersand_at_the_middle = test "selector_ampersand_at_the_middle" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.fontSize (`px 42); - CssJs.selector "& div &" [| CssJs.fontSize (`px 24) |]; + CSS.fontSize (`px 42); + CSS.selector "& div &" [| CSS.fontSize (`px 24) |]; |] in let css = get_string_style_rules () in @@ -365,10 +352,10 @@ let selector_nested_with_mq_and_declarations = let mq = test "mq" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.maxWidth (`px 800); - CssJs.media "(max-width: 768px)" [| CssJs.width (`px 300) |]; + CSS.maxWidth (`px 800); + CSS.media "(max-width: 768px)" [| CSS.width (`px 300) |]; |] in let css = get_string_style_rules () in @@ -381,10 +368,10 @@ let mq = let selector_params = test "selector_params" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.maxWidth (`px 800); - CssJs.selector {js|:first-child|js} [| CssJs.width (`px 300) |]; + CSS.maxWidth (`px 800); + CSS.selector {js|:first-child|js} [| CSS.width (`px 300) |]; |] in let css = get_string_style_rules () in @@ -396,13 +383,13 @@ let selector_params = let keyframe = test "keyframe" @@ fun () -> let animationName = - CssJs.keyframes + CSS.keyframes [| - 0, [| CssJs.transform (`rotate (`deg 0.)) |]; - 100, [| CssJs.transform (`rotate (`deg (-360.))) |]; + 0, [| CSS.transform (`rotate (`deg 0.)) |]; + 100, [| CSS.transform (`rotate (`deg (-360.))) |]; |] in - let classname = CssJs.style [| CssJs.animationName animationName |] in + let classname = CSS.style [| CSS.animationName animationName |] in let css = get_string_style_rules () in assert_string css (Printf.sprintf @@ -416,14 +403,14 @@ let keyframe = let global = test "global" @@ fun () -> - CssJs.global [| CssJs.selector "html" [| CssJs.lineHeight (`abs 1.15) |] |]; + CSS.global [| CSS.selector "html" [| CSS.lineHeight (`abs 1.15) |] |]; let css = get_string_style_rules () in assert_string css (Printf.sprintf "html{line-height:1.15;}") let duplicated_styles_unique = test "duplicated_styles_unique" @@ fun () -> - let classname1 = CssJs.style [| CssJs.flexGrow 1. |] in - let classname2 = CssJs.style [| CssJs.flexGrow 1. |] in + let classname1 = CSS.style [| CSS.flexGrow 1. |] in + let classname2 = CSS.style [| CSS.flexGrow 1. |] in let css = get_string_style_rules () in assert_string classname1 classname2; assert_string css (Printf.sprintf ".%s { flex-grow: 1; }" classname1) @@ -432,13 +419,13 @@ let hover_selector = test "hover_selector" @@ fun () -> let rules = [| - CssJs.color `currentColor; - CssJs.selector ":hover" [| CssJs.color `transparent |]; - CssJs.selector "&:hover" [| CssJs.color `transparent |]; - CssJs.selector " :hover" [| CssJs.color `transparent |]; + CSS.color `currentColor; + CSS.selector ":hover" [| CSS.color `transparent |]; + CSS.selector "&:hover" [| CSS.color `transparent |]; + CSS.selector " :hover" [| CSS.color `transparent |]; |] in - let classname = CssJs.style rules in + let classname = CSS.style rules in let css = get_string_style_rules () in assert_string css (Printf.sprintf @@ -611,13 +598,13 @@ let selector_with_interp_and_pseudo = let button_active = [%cx "position: absolute;"] in let rules = [| - CssJs.cursor `pointer; - CssJs.selector + CSS.cursor `pointer; + CSS.selector ({js|&.|js} ^ button_active ^ {js|::before|js}) - [| CssJs.top (`pxFloat 50.) |]; + [| CSS.top (`pxFloat 50.) |]; |] in - let classname = CssJs.style rules in + let classname = CSS.style rules in let css = get_string_style_rules () in assert_string css (Printf.sprintf @@ -645,21 +632,21 @@ let selector_with_empty_interp = let style_tag = test "style_tag" @@ fun () -> - CssJs.global [| CssJs.selector "html" [| CssJs.lineHeight (`abs 1.15) |] |]; + CSS.global [| CSS.selector "html" [| CSS.lineHeight (`abs 1.15) |] |]; let animationName = - CssJs.keyframes + CSS.keyframes [| - 0, [| CssJs.transform (`rotate (`deg 0.)) |]; - 100, [| CssJs.transform (`rotate (`deg (-360.))) |]; + 0, [| CSS.transform (`rotate (`deg 0.)) |]; + 100, [| CSS.transform (`rotate (`deg (-360.))) |]; |] in let animationNameHash = String.sub animationName 10 (String.length animationName - 10) in - let classname = CssJs.style [| CssJs.display `block |] in + let classname = CSS.style [| CSS.display `block |] in let classname_hash = String.sub classname 4 (String.length classname - 4) in - let css = CssJs.style_tag () |> ReactDOM.renderToString in - let _ = CssJs.flush () in + let css = CSS.style_tag () |> ReactDOM.renderToString in + let _ = CSS.flush () in (* This is the hash of the global styles, since we don't capture it with global, we inline it for the test *) let global_hash = "18zdck7" in assert_string css @@ -760,16 +747,16 @@ let selector_nested_interpolation_with_multiple = let selector_with_classname_and_mq = test "selector_with_classname_and_mq" @@ fun () -> - let nested_classname = CssJs.style [||] in + let nested_classname = CSS.style [||] in let rules = [| - CssJs.display `block; - CssJs.selector + CSS.display `block; + CSS.selector (".lola ." ^ nested_classname) - [| CssJs.media "(min-width: 768px)" [| CssJs.height `auto |] |]; + [| CSS.media "(min-width: 768px)" [| CSS.height `auto |] |]; |] in - let classname = CssJs.style rules in + let classname = CSS.style rules in let css = get_string_style_rules () in assert_string css (Printf.sprintf @@ -781,15 +768,14 @@ let mq_with_selectors = test "mq_with_selectors" @@ fun () -> let rules = [| - CssJs.display `block; - CssJs.media "(min-width: 768px)" + CSS.display `block; + CSS.media "(min-width: 768px)" [| - CssJs.height `auto; - CssJs.selector ".lola" [| CssJs.color `transparent |]; + CSS.height `auto; CSS.selector ".lola" [| CSS.color `transparent |]; |]; |] in - let classname = CssJs.style rules in + let classname = CSS.style rules in let css = get_string_style_rules () in assert_string css (Printf.sprintf @@ -800,11 +786,11 @@ let mq_with_selectors = let mq_nested = test "mq_nested" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.maxWidth (`px 800); - CssJs.media "(min-width: 300px)" - [| CssJs.media "(max-width: 768px)" [| CssJs.display `flex |] |]; + CSS.maxWidth (`px 800); + CSS.media "(min-width: 300px)" + [| CSS.media "(max-width: 768px)" [| CSS.display `flex |] |]; |] in let css = get_string_style_rules () in @@ -817,13 +803,13 @@ let mq_nested = let mq_nested_2 = test "mq_nested_2" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.maxWidth (`px 800); - CssJs.media "(min-width: 300px)" + CSS.maxWidth (`px 800); + CSS.media "(min-width: 300px)" [| - CssJs.position `fixed; - CssJs.media "(max-width: 768px)" [| CssJs.display `flex |]; + CSS.position `fixed; + CSS.media "(max-width: 768px)" [| CSS.display `flex |]; |]; |] in @@ -908,10 +894,10 @@ let mq_nested_10 = let mq_nested_without_declarations = test "mq_nested_without_declarations" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.media "(min-width: 300px)" - [| CssJs.media "(max-width: 500px)" [| CssJs.display `flex |] |]; + CSS.media "(min-width: 300px)" + [| CSS.media "(max-width: 500px)" [| CSS.display `flex |] |]; |] in let css = get_string_style_rules () in @@ -924,13 +910,13 @@ let mq_nested_without_declarations = let mq_nested_with_declarations = test "mq_nested_with_declarations" @@ fun () -> let classname = - CssJs.style + CSS.style [| - CssJs.color `transparent; - CssJs.media "(min-width: 300px)" + CSS.color `transparent; + CSS.media "(min-width: 300px)" [| - CssJs.margin (`px 10); - CssJs.media "(max-width: 400px)" [| CssJs.borderRadius (`px 10) |]; + CSS.margin (`px 10); + CSS.media "(max-width: 400px)" [| CSS.borderRadius (`px 10) |]; |]; |] in @@ -1049,7 +1035,7 @@ let global_with_selector = (Printf.sprintf "html{line-height:1.15;}a{}a:hover{padding:0;}") let tests = - ( "CssJs", + ( "CSS", [ one_property; multiple_properties; diff --git a/packages/website/site/pages/about.mdx b/packages/website/site/pages/about.mdx index e0ae9449..6e3273cd 100644 --- a/packages/website/site/pages/about.mdx +++ b/packages/website/site/pages/about.mdx @@ -16,7 +16,7 @@ There are a few reasons why this project exists and why it came to live. In my experience, writing React with a CSS-in-JS library is one of the best combos for writing scalable design systems, UI libraries and applications. When I discovered Reason back in the day (around 2018), it wasn't possible to bind to styled-components or emotion. Even ([a](https://reasonml.chat/t/idiomatic-way-to-bind-to-styled-components/886) [f](https://reasonml.chat/t/styled-components-possible/554)[e](https://reasonml.chat/t/styling-solutions-reasonreact-as-of-aug-18/958)[w](https://reasonml.chat/t/options-and-best-practices-for-styling-in-reasonreact/261) [p](https://twitter.com/lyovson/status/1233397294311100417)[e](https://discord.gg/byjdYFH)[o](https://discord.gg/byjdYFH)[p](https://discord.gg/byjdYFH)[l](https://discord.gg/byjdYFH)[e](https://forum.rescript-lang.org/t/how-to-create-bindings-for-emotion-styled/2995) were asking for it. During that time, there were a few efforts to bring type-safety to CSS with [bs-css](https://github.com/giraud/bs-css) and [bs-emotion](https://github.com/ahrefs/bs-emotion). Even though I liked that approach, it had a few drawbacks: -- The need for learning a new DSL on top of CSS was tedious. Very fancy for simple properties, but almost impossible for more complex ones (a classic example `width: calc(100% - 20px){:styled-ppx-css}` became `CssJs.width(calc(min, percent(100.), px(20))){:rescript}` `CssJs.width(calc(min, percent(100.), px(20)));{:reason}`). In real world usage I would end up using `CssJs.unsafe`. +- The need for learning a new DSL on top of CSS was tedious. Very fancy for simple properties, but almost impossible for more complex ones (a classic example `width: calc(100% - 20px){:styled-ppx-css}` became `CSS.width(calc(min, percent(100.), px(20))){:rescript}` `CSS.width(calc(min, percent(100.), px(20)));{:reason}`). In real world usage I would end up using `CSS.unsafe`. - The runtime was huge. The bundle-size of bs-css starts with 64kb and goes up considerably with the usage, even with ReScripts dead code elimination. - The fact of having a runtime involved to only write safe CSS doesn't seem like a nice trade-off. diff --git a/packages/website/site/pages/getting-started/melange.mdx b/packages/website/site/pages/getting-started/melange.mdx index be882879..f630df5b 100644 --- a/packages/website/site/pages/getting-started/melange.mdx +++ b/packages/website/site/pages/getting-started/melange.mdx @@ -59,7 +59,7 @@ Note: `reason-react` and `reason-react-ppx` are optional, and only needed if you ```reason /* This is a ReasonReact module with those styles encoded as a unique className */ -module Link = [%styled.a (~color=CssJs.hex("4299E1")) => {| +module Link = [%styled.a (~color=CSS.hex("4299E1")) => {| font-size: 1.875rem; line-height: 1.5; text-decoration: none; @@ -80,7 +80,7 @@ let layout = [%cx {| /* Later in a component */
    {React.string("sancho.dev")} diff --git a/packages/website/site/pages/getting-started/native.mdx b/packages/website/site/pages/getting-started/native.mdx index 1ff98a9f..e133ffa8 100644 --- a/packages/website/site/pages/getting-started/native.mdx +++ b/packages/website/site/pages/getting-started/native.mdx @@ -55,8 +55,8 @@ Note: `server-reason-react` and `server-reason-react-ppx` are optional, and only ### API -- `CssJs.get_stylesheet` returns a string with all styles -- `CssJs.style_tag` returns a `