Rename to CSS (#491)

davesnx · Jul 9, 2024 · df9fd7f · df9fd7f
1 parent 1951658
commit df9fd7f
Show file tree

Hide file tree

Showing 121 changed files with 3,497 additions and 3,626 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -5,9 +5,10 @@ module Builder = Ppxlib.Ast_builder.Default;
 
 exception Empty_buffer(string);
 
-module CssJs = {
+module CSS = {
+  /* This is the public API of the CSS module */
   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 +147,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 +186,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 +416,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 +503,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 +531,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])];