Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Rename to CSS #491

Merged
merged 10 commits into from
Jul 9, 2024
Merged

Rename to CSS #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d4ac3e9
Fix makefile
davesnx Jul 9, 2024
e03dac9
Allow interpolation in align
davesnx Jul 9, 2024
843967e
Fix unbound Fun in rescript
davesnx Jul 9, 2024
931263e
Improve docs for interpolation
davesnx Jul 9, 2024
3a35947
Make unsafe be camelCase
davesnx Jul 9, 2024
840f481
Push changes for 0.58.1
davesnx Jul 9, 2024
fd65372
Push all properties
davesnx Jul 9, 2024
afe7fd9
Merge branch 'main' of github.com:/davesnx/styled-ppx into Add-all-CS…
davesnx Jul 9, 2024
3973132
Rename CssJs to CSS
davesnx Jul 9, 2024
4070993
Merge branch 'main' of github.com:/davesnx/styled-ppx into Rename-Css…
davesnx Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion e2e/melange/debug.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />));
4 changes: 2 additions & 2 deletions e2e/melange/src/native/ui.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions e2e/melange/src/ui/ui.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
18 changes: 9 additions & 9 deletions e2e/rescript-v10-JSX4/src/content_test.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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("")), "''"),
Expand All @@ -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", () => {
Expand Down
4 changes: 2 additions & 2 deletions e2e/rescript-v10-JSX4/src/cx_support_test.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)])]),
),
}

Expand Down
18 changes: 9 additions & 9 deletions e2e/rescript-v10-JSX4/src/index.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
])

Expand All @@ -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 = {
Expand All @@ -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 />
Expand Down
18 changes: 9 additions & 9 deletions e2e/rescript-v9-JSX3/src/content_test.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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("")), "''"),
Expand All @@ -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", () => {
Expand Down
14 changes: 7 additions & 7 deletions e2e/rescript-v9-JSX3/src/cx_support_test.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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", () => {
Expand Down
1 change: 0 additions & 1 deletion packages/css-property-parser/lib/Parser.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'"]
Expand Down
18 changes: 9 additions & 9 deletions packages/ppx/src/Css_to_runtime.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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)],
);
};
Expand Down Expand Up @@ -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)],
);
};
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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],
);
};
Expand Down Expand Up @@ -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])];
Expand Down
Loading
Loading