diff --git a/e2e/melange/debug.re b/e2e/melange/debug.re
index 53af10ede..18b549cad 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(<CssJs.style_tag />));
+print_endline(ReactDOM.renderToStaticMarkup(<CSS.style_tag />));
diff --git a/e2e/melange/src/native/ui.re b/e2e/melange/src/native/ui.re
index 11d57f4e7..a18cb2902 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 = {
           <p> {React.string("Card content")} </p>
         </div>
       </div>
-      <Cositas as_="section" lola={CssJs.px(10)}>
+      <Cositas as_="section" lola={CSS.px(10)}>
         <div className=clx> {React.string("code everywhere!")} </div>
         <div className=selectors> {React.string("Red text")} </div>
       </Cositas>
diff --git a/e2e/melange/src/ui/ui.re b/e2e/melange/src/ui/ui.re
index a78928057..31d129214 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 = {
           <p className="my-content"> {React.string("Card content")} </p>
         </div>
       </div>
-      <Cositas as_="section" lola={CssJs.px(10)}>
+      <Cositas as_="section" lola={CSS.px(10)}>
         <div className=clx> {React.string("code everywhere!")} </div>
         <div className=selectors> {React.string("Red text")} </div>
       </Cositas>
diff --git a/e2e/rescript-v10-JSX4/src/content_test.res b/e2e/rescript-v10-JSX4/src/content_test.res
index 612770001..130952f7b 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 3a19117fa..3cd112483 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 e53f0b3a4..8b3919595 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 = {
         <li> {React.string("emotion/css")} </li>
       </ul>
       <Wat \"as"="section" className="more-classes">
-        <DynamicComponent var={CssJs.hex("516CF0")}> {React.string("Halo :)")} </DynamicComponent>
+        <DynamicComponent var={CSS.hex("516CF0")}> {React.string("Halo :)")} </DynamicComponent>
         <Button color={Theme.Main}> {React.string("CLICK ME!")} </Button>
       </Wat>
       <TextInput />
diff --git a/e2e/rescript-v9-JSX3/src/content_test.res b/e2e/rescript-v9-JSX3/src/content_test.res
index 612770001..130952f7b 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 d1ec5c1e0..67fd8dcf3 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 5bbd4af0e..cd86edf66 100644
--- a/packages/css-property-parser/lib/Parser.re
+++ b/packages/css-property-parser/lib/Parser.re
@@ -1006,7 +1006,6 @@ and property_color_interpolation_filters = [%value.rec
   "'auto' | 'sRGB' | 'linearRGB'"
 ]
 and property_color_interpolation = [%value.rec "'auto' | 'sRGB' | 'linearRGB'"]
-
 and property_color_adjust = [%value.rec "'economy' | 'exact'"]
 and property_column_count = [%value.rec "<integer> | 'auto'"]
 and property_column_fill = [%value.rec "'auto' | 'balance' | 'balance-all'"]
diff --git a/packages/ppx/src/Css_to_runtime.re b/packages/ppx/src/Css_to_runtime.re
index 1cfb3cbd8..2025f5bcb 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 44a7e98ab..ae38dac9c 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,14 +2306,14 @@ 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,
   );
 
@@ -2330,38 +2322,38 @@ let 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,17 +3935,17 @@ 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 =
@@ -3967,13 +3955,13 @@ let 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 +3971,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 +3980,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 +4032,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 +4049,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 +4068,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 +4139,7 @@ let render_display = (~loc) =>
 let display =
   monomorphic(
     Property_parser.property_display,
-    (~loc) => [%expr CssJs.display],
+    (~loc) => [%expr CSS.display],
     render_display,
   );
 
@@ -4164,7 +4152,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 +4173,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 +4194,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 +4238,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 +4318,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 +4388,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 +4401,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 +4426,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 +4451,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,10 +4801,10 @@ 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(
@@ -4825,10 +4813,7 @@ let will_change =
     (~loc, value: Types.property_will_change) => {
       switch (value) {
       | `Auto => [%expr `auto]
-      | _ =>
-        raise(
-          Unsupported_feature
-        )
+      | _ => raise(Unsupported_feature)
       }
     },
   );
@@ -4869,7 +4854,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 +5255,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 +5271,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 4f6c55c0b..8ce3f9957 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 54f8ca52f..7829fc6d7 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 0b64fad30..25019faf6 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 afedb7fe2..38091b971 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/box-alignment-module.t/run.t b/packages/ppx/test/css-support/box-alignment-module.t/run.t
index b4dca48aa..5f4086eeb 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 4d2e1e78e..280f5b3e0 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 7ef7baa82..056dabd97 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 ff7cf9d11..78c48bd26 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 677193c30..39894c1a7 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 021a21fce..902d73c37 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 300d0e4ed..34533335e 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 8b1e838a6..bb8e430ed 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 811c3f9cf..5a0b29786 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 11ba8037c..b8d1b0690 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 634a16ff9..68337a3b2 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 59bf119cb..53500e641 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 5997e475a..312eab4ee 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 7c868b40c..f9e240833 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 02854ed1d..33037a16d 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 30ae50f4c..2482509fe 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 0f6c751c3..2824385f9 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 77dd2a66d..8f0b45386 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 878ade4cd..a9de69a5d 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 1e4948900..56203a8ed 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 6ee99718a..116b0eda2 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 246031389..52d26c66c 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 7c03890d7..10d543588 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 146e274b1..2b6188a1f 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 a4100c8f5..30c365d87 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 c66ec1715..dc3ef3a47 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 4cde1cdf6..31f5e1bcb 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 13e376c8b..56ce5d3e9 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 94545fb5e..69e22c11d 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 0f60cdae6..d3791081c 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 02f6ba168..2f7597c69 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 eaf457e20..805c892f9 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 efcd1f8a7..527265153 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 888a6aa76..bc59119ad 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 71cb69b5f..ef4cb4b82 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 38cea174f..9ef76ae43 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 fc672d856..476c2a350 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 e1ae2bddc..8fdf9051a 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 b6519eee9..3df8e8840 100644
--- a/packages/ppx/test/css-support/selectors.t/run.t
+++ b/packages/ppx/test/css-support/selectors.t/run.t
@@ -38,22 +38,22 @@ If this test fail means that the module is not in sync with the ppx
       CssJs.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 cd47d29ba..a3d8734e1 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 0aaccd201..a837f9b85 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 47cc8560d..c82dd1a15 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 b0e48e6bd..7d4a6c599 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 809c325ab..8cdeb8f16 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 240b76181..15c8c14da 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 98bdbdde2..ec4ad203d 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 23c662b37..14f555640 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 540ba2f68..c204ae095 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 799e1e552..618e22358 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 80270899c..76fe62241 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 457ad9190..86a348f02 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 f05db9e77..6251d293b 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 0d3ebb570..fe459f83f 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 a4503b2f4..3fc6c12d9 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 4b04b6398..652cd4201 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 eb5b28cd0..e94b698c1 100644
--- a/packages/ppx/test/snapshot/reason/reason-bs-config-missing-jsx.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-bs-config-missing-jsx.t/run.t
@@ -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 dff83626a..948543a43 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 3eb9b866b..10e5c79e4 100644
--- a/packages/ppx/test/snapshot/reason/reason-dynamic-array.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-dynamic-array.t/run.t
@@ -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 de80b803c..aba47e6be 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 3b07bc66c..a21c6ac9d 100644
--- a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation-default-value.t/run.t
@@ -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 adfa2bfa4..b05097a67 100644
--- a/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-dynamic-interpolation.t/run.t
@@ -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 88cfdca80..5111e645d 100644
--- a/packages/ppx/test/snapshot/reason/reason-dynamic-sequence.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-dynamic-sequence.t/run.t
@@ -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 b978a1a01..d4d1cc2aa 100644
--- a/packages/ppx/test/snapshot/reason/reason-dynamic-with-array.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-dynamic-with-array.t/run.t
@@ -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 af2d54f86..586e3caf1 100644
--- a/packages/ppx/test/snapshot/reason/reason-dynamic-with-ident.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-dynamic-with-ident.t/run.t
@@ -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 7edaa0171..0d8146ba2 100644
--- a/packages/ppx/test/snapshot/reason/reason-dynamic-with-sequence-out-scope.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-dynamic-with-sequence-out-scope.t/run.t
@@ -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 5ad301a41..5ccf03d72 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 4fad72d13..013aad19a 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 262585f13..1eb09100f 100644
--- a/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors-interpolation.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-media-queries-and-selectors-interpolation.t/run.t
@@ -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 6b84588d4..fe40051ad 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 d2f87e2be..97756d1ac 100644
--- a/packages/ppx/test/snapshot/reason/reason-media-queries-with-calc.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-media-queries-with-calc.t/run.t
@@ -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 de80b803c..aba47e6be 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 57039ca8a..2a92f397a 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 b063ac99d..4dea6e902 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 e6a64e421..90da40a60 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 384ad1023..e308343e8 100644
--- a/packages/ppx/test/snapshot/reason/reason-static-array.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-static-array.t/run.t
@@ -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 cea318e04..73c9ff2b0 100644
--- a/packages/ppx/test/snapshot/reason/reason-static-doble-quotes-string.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-static-doble-quotes-string.t/run.t
@@ -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 bca137795..414e35c83 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 8debfaace..24342d1b5 100644
--- a/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-static-interpolation.t/run.t
@@ -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 a395ab683..171745e77 100644
--- a/packages/ppx/test/snapshot/reason/reason-static-multi-line-string.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-static-multi-line-string.t/run.t
@@ -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 3efebbe92..fa8978002 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 948d5361c..12a31ca01 100644
--- a/packages/ppx/test/snapshot/reason/reason-static-self-closing-element.t/run.t
+++ b/packages/ppx/test/snapshot/reason/reason-static-self-closing-element.t/run.t
@@ -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 0a40ce35e..0fb9b9f06 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,66 +2,66 @@
   $ 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.)),
         |],
       ),
-      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.)),
         |],
       ),
-      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|fontFamily|js}, {js|inherit|js}),
@@ -70,68 +70,68 @@
           CssJs.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 c2dd8676d..891f00ecf 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 f220eb75c..a3fe3277b 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 beec531fc..097d9ef43 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 3b599ccb0..90ad9befe 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 bafd5b69a..7f493499b 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 7687d1080..0ba9ee38c 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 4d6edded0..0a3877686 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 7687d1080..000000000
--- 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 7687d1080..000000000
--- 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 6130d3b33..b2bbdb3c8 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 f9b6a56e5..da011771a 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 96df82f3d..29d730cda 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 e0ae9449c..6e3273cda 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 be8828791..f630df5be 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 */
 <div className=layout>
   <Link
-    color={CssJs.hex("333333")}
+    color={CSS.hex("333333")}
     href="https://sancho.dev"
     rel="noopener noreferrer">
     {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 1ff98a9f4..e133ffa82 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 `<style />` React element, with all styles. This is designed to be used with server-reason-react.
+- `CSS.get_stylesheet` returns a string with all styles
+- `CSS.style_tag` returns a `<style />` React element, with all styles. This is designed to be used with server-reason-react.
 
 ### Example
 
@@ -69,7 +69,7 @@ let className = [%cx {|
   align-items: center
 |}];
 
-let stylesheet: string = CssJs.get_stylesheet();
+let stylesheet: string = CSS.get_stylesheet();
 
 print_endline(className);
 /* .css-1xuw4bg */
@@ -89,7 +89,7 @@ print_endline(stylesheet);
 
 ```reasonml
 /* This is a server-reason-react 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;
@@ -111,7 +111,7 @@ let layout = [%cx {|
 let app =
   <div className=layout>
     <Link
-      color={CssJs.hex("333333")}
+      color={CSS.hex("333333")}
       href="https://sancho.dev"
       rel="noopener noreferrer">
       {React.string("sancho.dev")}
@@ -119,7 +119,7 @@ let app =
   </div>;
 ```
 
-To generate the CSS on the server, you would need to use `<CssJs.style_tag />`. This component will render a `<style>` with all generated stylesheet.
+To generate the CSS on the server, you would need to use `<CSS.style_tag />`. This component will render a `<style>` with all generated stylesheet.
 
 Given a `Page` component to simulate a real-world scenario:
 
@@ -129,7 +129,7 @@ module Page = {
   let make = () => {
     <html>
       <head>
-        <CssJs.style_tag />
+        <CSS.style_tag />
       </head>
     </html>
   }
@@ -151,7 +151,7 @@ module Component = {
 };
 ```
 
-This component needs to be rendered before the `CssJs.style_tag` otherwise the `[%cx]` calls won't be added to the stylesheet, since they aren't being executed yet.
+This component needs to be rendered before the `CSS.style_tag` otherwise the `[%cx]` calls won't be added to the stylesheet, since they aren't being executed yet.
 
 To solve this, we recommend: render the React application first, and then inject the result as `dangerouslySetInnerHTML`.
 
@@ -164,7 +164,7 @@ module Document = {
 
     <html>
       <head>
-        <CssJs.style_tag />
+        <CSS.style_tag />
       </head>
       <body>
         <div id="#root" dangerouslySetInnerHTML={"__html": app} />
@@ -182,7 +182,7 @@ let some_server_side_handler = _request => {
 
 ### Advanced
 
-If you don't want to render the stylesheet directly, you can use `CssJs.get_stylesheet` to obtain the `stylesheet` as a `string`. In this case, the hydration with the client won't be supported.
+If you don't want to render the stylesheet directly, you can use `CSS.get_stylesheet` to obtain the `stylesheet` as a `string`. In this case, the hydration with the client won't be supported.
 
 To make sure hydration works, you would need the following `<style/>` tag
 
@@ -190,8 +190,8 @@ To make sure hydration works, you would need the following `<style/>` tag
 React.createElement "style"
   [
     Bool ("data-s", true);
-    String ("data-emotion", "css " ^ CssJs.get_string_style_hashes ());
-    DangerouslyInnerHtml (CssJs.get_stylesheet ());
+    String ("data-emotion", "css " ^ CSS.get_string_style_hashes ());
+    DangerouslyInnerHtml (CSS.get_stylesheet ());
   ]
   []
 ```
diff --git a/packages/website/site/pages/getting-started/rescript.mdx b/packages/website/site/pages/getting-started/rescript.mdx
index 43afb5489..97cd81dda 100644
--- a/packages/website/site/pages/getting-started/rescript.mdx
+++ b/packages/website/site/pages/getting-started/rescript.mdx
@@ -21,7 +21,7 @@ npm install @davesnx/styled-ppx
 ### Packages available
 
 - `@davesnx/styled-ppx/ppx` is the ppx as a binary, transforms `%styled.div("")`, `%cx("")` and `%css("")`
-- `@davesnx/styled-ppx/rescript` is library with the runtime (expose CssJs)
+- `@davesnx/styled-ppx/rescript` is library with the runtime (expose CSS)
 
 ### Update `bsconfig.json`
 
@@ -43,7 +43,7 @@ Note: `@rescript/react` is optional, and only needed if you use styled component
 ### Example
 
 ```rescript
-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;
@@ -64,7 +64,7 @@ let layout = %cx(`
 /* Later in a component */
 <div className=layout>
   <Link
-    color={CssJs.hex("333333")}
+    color={CSS.hex("333333")}
     href="https://sancho.dev"
     rel="noopener noreferrer">
     {React.string("sancho.dev")}
diff --git a/packages/website/site/pages/reference/_meta.json b/packages/website/site/pages/reference/_meta.json
index 5ca463e3e..b5dd901ff 100644
--- a/packages/website/site/pages/reference/_meta.json
+++ b/packages/website/site/pages/reference/_meta.json
@@ -10,5 +10,5 @@
   "react-ref": "React's Ref",
   "media-queries": "Media queries",
   "selectors": "Selectors",
-  "runtime": "Runtime: Css/CssJs"
+  "runtime": "Runtime: Css/CSS"
 }
diff --git a/packages/website/site/pages/reference/array.mdx b/packages/website/site/pages/reference/array.mdx
index 43d3dd50c..72cbb337f 100644
--- a/packages/website/site/pages/reference/array.mdx
+++ b/packages/website/site/pages/reference/array.mdx
@@ -6,7 +6,7 @@ title: Array API
 
 `%styled.{{tag}}{:rescript}` `[%styled.{{tag}}]{:reason}` and `%cx{:rescript}` `[%cx]{:reason}` support an alternative to the string-based API. It's the **Array API**, where the rules can be defined as an array of `Css.rules{:rescript}` `Css.rules{:reason}`.
 
-A `Css.rule{:rescript}` `Css.rule{:reason}` can be created with [`%css`](./css) or [`CssJs`](./runtime) calls.
+A `Css.rule{:rescript}` `Css.rule{:reason}` can be created with [`%css`](./css) or [`CSS`](./runtime) calls.
 
 ## Example
 
diff --git a/packages/website/site/pages/reference/dynamic-components.mdx b/packages/website/site/pages/reference/dynamic-components.mdx
index 2fe104638..7feb0aa0a 100644
--- a/packages/website/site/pages/reference/dynamic-components.mdx
+++ b/packages/website/site/pages/reference/dynamic-components.mdx
@@ -14,7 +14,7 @@ module Dynamic = %styled.div( (~color, ~background) => `
   background-color: $(background);
 `)
 
-<Dynamic color=CssJs.hex("#EB5757") background=CssJs.hex("#516CF0")>
+<Dynamic color=CSS.hex("#EB5757") background=CSS.hex("#516CF0")>
   {React.string("Hello!")}
 </Dynamic>
 ```
@@ -24,14 +24,14 @@ module Dynamic = [%styled.div (~color, ~background) => {|
   background-color: $(background);
 |}];
 
-<Dynamic color={CssJs.hex("#EB5757")} background={CssJs.hex("#516CF0")}>
+<Dynamic color={CSS.hex("#EB5757")} background={CSS.hex("#516CF0")}>
   {React.string("Hello!")}
 </Dynamic>;
 ```
 
 Note: The returned expression (the last expression of the function) needs to be an string (it can't be a reference or a function call). This is a limitation of ppxes where it needs to check the current AST to know which type it is.
 
-All the rules from [Interpolation](./interpolation) are applied here. In the example, `color` and `background` are `CssJs.Color.t{:rescript}` `CssJs.Color.t{:reason}`  since it gets inferred from the CSS property. It's called type holes https://twitter.com/davesnx/status/1552305210558742528
+All the rules from [Interpolation](./interpolation) are applied here. In the example, `color` and `background` are `CSS.Color.t{:rescript}` `CSS.Color.t{:reason}`  since it gets inferred from the CSS property. It's called type holes https://twitter.com/davesnx/status/1552305210558742528
 
 ### Name collision
 
diff --git a/packages/website/site/pages/reference/interpolation.mdx b/packages/website/site/pages/reference/interpolation.mdx
index cd1f1a5a1..ecf577481 100644
--- a/packages/website/site/pages/reference/interpolation.mdx
+++ b/packages/website/site/pages/reference/interpolation.mdx
@@ -71,7 +71,7 @@ Any value from any property can be interpolated. It relies on the position of th
 
 ```rescript
 module Size = {
-  let small = CssJs.px(10)
+  let small = CSS.px(10)
 }
 
 %cx("margin: $(Size.small)") // -> margin: 10px;
@@ -80,7 +80,7 @@ module Size = {
 ```
 ```reason
 module Size = {
-  let small = CssJs.px(10);
+  let small = CSS.px(10);
 };
 
 [%cx "margin: $(Size.small)"]; // -> margin: 10px;
@@ -95,7 +95,7 @@ module Size = {
 
 ## Type-safety
 
-The example above introduces the API from [`CssJs`](./runtime) to define the value of `margin`. We expect you to use it to make sure the values are interpoilated with the right type. In the example above `margin` expects one of:
+The example above introduces the API from [`CSS`](./runtime) to define the value of `margin`. We expect you to use it to make sure the values are interpoilated with the right type. In the example above `margin` expects one of:
 
 ```rescript
 type length = [
@@ -168,25 +168,25 @@ 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("-webkit-invented-property", "10px");
+let randomProperty = CSS.unsafe("-webkit-invented-property", "10px");
 let picture = %cx([block, randomProperty]);
 ```
 ```reason
 let block: Css.Rule.t = [%css "display: block"];
-let randomProperty = CssJs.unsafe("-webkit-invented-property", "10px");
+let randomProperty = CSS.unsafe("-webkit-invented-property", "10px");
 let picture = [%cx [|block, randomProperty|]];
 ```
 
 ```rescript
-let randomProperty = CssJs.unsafe("-webkit-invented-property", "10px");
+let randomProperty = CSS.unsafe("-webkit-invented-property", "10px");
 let picture = %styled.div([randomProperty]);
 ```
 ```reason
-let randomProperty = CssJs.unsafe("-webkit-invented-property", "10px");
+let randomProperty = CSS.unsafe("-webkit-invented-property", "10px");
 let picture = [%styled.div [|randomProperty|]];
 ```
 
-Here the safety will rely on your usage of `CssJs.unsafe{:rescript}` `CssJs.unsafe{:reason}` correctly.
+Here the safety will rely on your usage of `CSS.unsafe{:rescript}` `CSS.unsafe{:reason}` correctly.
 
 For a general overview of the list take a look at [support for CSS](https://styled-ppx.vercel.app/css-support).
 
diff --git a/packages/website/site/pages/reference/runtime.mdx b/packages/website/site/pages/reference/runtime.mdx
index f07d9caa1..e3e35d3d4 100644
--- a/packages/website/site/pages/reference/runtime.mdx
+++ b/packages/website/site/pages/reference/runtime.mdx
@@ -2,7 +2,7 @@
 title: Runtime
 ---
 
-# Runtime Css & CssJs
+# Runtime Css & CSS
 
 > This page is a work in progress