height(100.->pct),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"none"->React.string}
height(100.->pct),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"normal"->React.string}
- px)])}>
+
px),
after([
@@ -784,11 +800,12 @@ let make = () =>
height(100.->pct),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"empty content"->React.string}
px),
paddingLeft(20->px),
@@ -801,42 +818,44 @@ let make = () =>
height(18->px),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"url"->React.string}
px),
counterReset(Types.CounterReset.reset /* for test */("foo", ~value=1)),
before([contentRule(Types.Counter.counter("foo")), border(1->px, solid, black)]),
- ])}>
+ ])}
+ >
{"counter"->React.string}
px),
- ])}>
+ style={style([counterReset(Types.CounterReset.reset("foo", ~value=1)), marginLeft(20->px)])}
+ >
px, solid, black),
]),
- ])}>
+ ])}
+ >
{"counters"->React.string}
px),
before([contentRule(#attr("class")), border(1->px, solid, black)]),
- ])}>
+ ])}
+ >
{"attr"->React.string}
px),
before([
contentRule(linearGradient(45.->deg, [(zero, red), (100.->pct, blue)])),
@@ -845,21 +864,25 @@ let make = () =>
height(18->px),
width(18->px),
]),
- ])}>
+ ])}
+ >
{"linear gradient"->React.string}
px),
before([
contentRules([#openQuote, #text("foo"), #closeQuote]),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"contents (quotes)"->React.string}
-
+
@@ -883,14 +906,16 @@ let make = () =>
]),
]
/>
-
-
+
+
+
-
+
{"1"->React.string}
{"2"->React.string}
{"3"->React.string}
@@ -898,7 +923,7 @@ let make = () =>
-
+
{"1"->React.string}
{"2"->React.string}
{"3"->React.string}
@@ -906,7 +931,7 @@ let make = () =>
-
+
diff --git a/dev-server-emotion/bsconfig.json b/dev-server-emotion/bsconfig.json
deleted file mode 100644
index 46b099c..0000000
--- a/dev-server-emotion/bsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "dev-server-emotion",
- "reason": {
- "react-jsx": 3
- },
- "warnings": {
- "number": "+A-32-34-44",
- "error": "+A-32-34-44"
- },
- "sources": [
- "src"
- ],
- "bs-dependencies": [
- "bs-css",
- "bs-css-emotion",
- "@rescript/react"
- ]
-}
diff --git a/dev-server-emotion/package.json b/dev-server-emotion/package.json
index f85f77a..4fa7cb9 100644
--- a/dev-server-emotion/package.json
+++ b/dev-server-emotion/package.json
@@ -2,31 +2,32 @@
"name": "dev-server-emotion",
"version": "1.0.0",
"description": "Dev server",
+ "type": "module",
"private": true,
"scripts": {
"re:clean": "rescript clean",
- "re:build": "rescript build",
- "re:watch": "rescript build -w",
+ "re:build": "rescript",
+ "re:watch": "rescript watch",
"dev": "rspack dev"
},
"author": "Hervé Giraud
",
"license": "ISC",
"repository": {
"type": "git",
- "url": "git+https://github.com/reasonml-labs/bs-css.git"
+ "url": "git+https://github.com/giraud/bs-css.git"
},
"dependencies": {
"bs-css": "^18.0.0",
"bs-css-emotion": "^7.0.0"
},
"devDependencies": {
- "@rescript/react": "^0.10.0",
+ "@rescript/react": "^0.14.0",
"@rspack/cli": "^1.4.0",
"@rspack/core": "^1.4.0",
"@rspack/plugin-react-refresh": "^1.4.0",
- "react": "^17.0.0",
- "react-dom": "^17.0.0",
- "react-refresh": "^0.17.0",
- "rescript": "^9.0.0"
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "react-refresh": "^0.18.0",
+ "rescript": "^12.0.0"
}
}
diff --git a/dev-server-emotion/rescript.json b/dev-server-emotion/rescript.json
new file mode 100644
index 0000000..749e91f
--- /dev/null
+++ b/dev-server-emotion/rescript.json
@@ -0,0 +1,17 @@
+{
+ "name": "dev-server-emotion",
+ "jsx": { "version": 4 },
+ "warnings": {
+ "number": "+A-32-34-44",
+ "error": "+A-32-34-44"
+ },
+ "suffix": ".mjs",
+ "sources": ["src"],
+ "dependencies": ["bs-css", "bs-css-emotion", "@rescript/react"],
+ "package-specs": [
+ {
+ "module": "esmodule",
+ "in-source": false
+ }
+ ]
+}
diff --git a/dev-server-emotion/src/App.res b/dev-server-emotion/src/App.res
index f5008c1..c4fd639 100644
--- a/dev-server-emotion/src/App.res
+++ b/dev-server-emotion/src/App.res
@@ -1,8 +1,8 @@
open CssJs
-global(. "html, body", [margin(zero), padding(zero), backgroundColor(lavender)])
+global("html, body", [margin(zero), padding(zero), backgroundColor(lavender)])
switch ReactDOM.querySelector("#app") {
| None => ()
-| Some(dom) => ReactDOM.render(
- {name->React.string} children
+ {name->React.string}
+ children
}
@@ -44,10 +45,7 @@ let redBox = [
module RedBox = {
@react.component
let make = (~rules=?, ~children=?) =>
- Belt.Option.mapWithDefaultU(redBox, (. r) => redBox->Belt.Array.concat(r)),
- )}>
+
Option.mapOr(redBox, r => redBox->Array.concat(r)))}>
{switch children {
| None => React.null
| Some(c) => c
diff --git a/dev-server-emotion/src/Demo.res b/dev-server-emotion/src/Demo.res
index 1c0451d..74e2b46 100644
--- a/dev-server-emotion/src/Demo.res
+++ b/dev-server-emotion/src/Demo.res
@@ -1,30 +1,30 @@
open CssJs
-insertRule(. ".raw-css { display:block; background-color: green; width: 50px; height: 50px; }")
+insertRule(".raw-css { display:block; background-color: green; width: 50px; height: 50px; }")
module Section = Comp.Section
module RedBox = Comp.RedBox
-let concat = Belt.Array.concat
+let concat = Array.concat
let redBox = Comp.redBox
let addToRedBox = rules => redBox->concat(rules)
let fontItem = [marginLeft(10->px), paddingRight(10->px), borderRight(1->px, solid, black)]
-let spin = keyframes(. [(0, [transform(rotate(deg(0.)))]), (100, [transform(rotate(deg(360.)))])])
+let spin = keyframes([(0, [transform(rotate(deg(0.)))]), (100, [transform(rotate(deg(360.)))])])
-let scaleAnimation = keyframes(. [
+let scaleAnimation = keyframes([
(0, [transform(scale(0.3, 0.3))]),
(100, [transform(scale(1.0, 1.0))]),
])
let miniBox = [border(2->px, solid, black), width(15->px), height(15->px), margin(1->px)]
-let mergedStyles = merge(. [
- style(. [padding(0->px), fontSize(1->px)]),
- style(. [padding(20->px), fontSize(24->px), color(blue)]),
- style(. [media(. "(max-width: 768px)", [padding(10->px)])]),
- style(. [media(. "(max-width: 768px)", [fontSize(16->px), color(red)])]),
+let mergedStyles = merge([
+ style([padding(0->px), fontSize(1->px)]),
+ style([padding(20->px), fontSize(24->px), color(blue)]),
+ style([media("(max-width: 768px)", [padding(10->px)])]),
+ style([media("(max-width: 768px)", [fontSize(16->px), color(red)])]),
])
let differentHeightLengths =
@@ -43,8 +43,8 @@ let differentHeightLengths =
vmin(1.0),
zero,
]
- ->Belt.Array.map(x => {
- let className = style(. addToRedBox([height(x)]))
+ ->Array.map(x => {
+ let className = style(addToRedBox([height(x)]))
})
->React.array
@@ -69,11 +69,11 @@ let make = () =>
-
-
+
+
{"color-scheme: light"->React.string}
])}
/>
-
+
{"color-scheme: dark"->React.string}
("whitesmoke", whitesmoke),
("yellow", yellow),
("yellowgreen", yellowgreen),
- ]->Belt.Array.map(((name, value)) =>
-
concat(miniBox))} />
+ ]->Array.map(((name, value)) =>
+
concat(miniBox))} />
),
)}
@@ -325,15 +325,16 @@ let make = () =>
px),
display(grid),
gridTemplateColumns([150->px, auto, 150->px]),
gridTemplateRows([60->px, auto]),
- ])}>
+ ])}
+ >
gridRowEnd(1),
])}
/>
-
+
px, auto]),
gridTemplateRows([40->px, auto]),
- ])}>
-
-
-
+ ])}
+ >
+
+
+
])}
/>
-
-
+
+
{"grid auto direction row 1"->React.string}
-
+
{"grid auto direction row 2"->React.string}
px, #repeat(#num(2), 60->px)]),
- ])}>
-
{"Grid track repeat"->React.string}
-
{"two times"->React.string}
-
{"three times"->React.string}
+ ])}
+ >
+
{"Grid track repeat"->React.string}
+
{"two times"->React.string}
+
{"three times"->React.string}
-
px)])}>
-
+
px)])}>
+
{"Grid auto columns (100px)"->React.string}
-
{"100px"->React.string}
-
{"100px"->React.string}
+
{"100px"->React.string}
+
{"100px"->React.string}
*", [marginBottom(10->px), width(pct(100.))]),
- ])}>
+ selector("& > *", [marginBottom(10->px), width(pct(100.))]),
+ ])}
+ >
+ ])}
+ >
px)] />
@@ -413,54 +418,69 @@ let make = () =>
-
- px), width(50->px)] /> px), width(50->px)] />
+
- px), width(50->px)] /> px), width(50->px)] />
+
- px), width(50->px)] /> px), width(50->px)] />
+
- px), width(50->px)] /> px), width(50->px)] />
+
@@ -583,19 +603,19 @@ let make = () =>
-
wordBreak(breakAll),
wordSpacing(20->px),
wordWrap(breakWord),
- ])}>
+ ])}
+ >
{"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."->React.string}
- {"Named Font weights"->React.string}
+ {"Named Font weights"->React.string}
px),
borderRight(1->px, solid, black),
- ])}>
+ ])}
+ >
{"thin"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"extra light"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"light"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"normal"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"medium"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"semiBold"->React.string}
- concat(fontItem))}>
- {"bold"->React.string}
-
- concat(fontItem))}>
+ concat(fontItem))}> {"bold"->React.string}
+ concat(fontItem))}>
{"extra bold"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"black"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"lighter"->React.string}
- concat(fontItem))}>
+ concat(fontItem))}>
{"bolder"->React.string}
@@ -749,7 +769,7 @@ let make = () =>
{"inherit"->React.string}
/>
{"unset"->React.string}
/>
-
+
{"This is a bunch of text split into columns
using the CSS `column-count` property. The text
is equally distributed over the columns."->React.string}
-
- px), overflow(scroll), resize(horizontal)])}>
+
+
px), overflow(scroll), resize(horizontal)])}>
{"Resizable div (horizontal)"->React.string}
-
px), overflow(scroll), resize(vertical)])}>
+
px), overflow(scroll), resize(vertical)])}>
{"Resizable div (vertical)"->React.string}
height(pct(100.)),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"none"->React.string}
height(pct(100.)),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"normal"->React.string}
- px)])}>
+
px),
after([
@@ -842,11 +865,12 @@ let make = () =>
height(pct(100.)),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"empty content"->React.string}
px),
paddingLeft(20->px),
@@ -859,45 +883,50 @@ let make = () =>
height(18->px),
border(1->px, solid, black),
]),
- ])}>
+ ])}
+ >
{"url"->React.string}
px),
counterReset(Types.CounterReset.reset("foo", ~value=1)),
before([
contentRule(Types.Counter.counter("foo")),
border(px /* for test */(1), solid, black),
]),
- ])}>
+ ])}
+ >
{"counter"->React.string}
px),
- ])}>
+ ])}
+ >
px, solid, black),
]),
- ])}>
+ ])}
+ >
{"counters"->React.string}
px),
before([contentRule(#attr("class")), border(1->px, solid, black)]),
- ])}>
+ ])}
+ >
{"attr"->React.string}
px),
before([
contentRule(Types.Gradient.linearGradient(deg(45.), [(zero, red), (pct(100.), blue)])),
@@ -906,21 +935,25 @@ let make = () =>
height(18->px),
width(18->px),
]),
- ])}>
+ ])}
+ >
{"linear gradient"->React.string}
px),
before([
contentRules([#openQuote, #text("foo"), #closeQuote]),
border(px(1), solid, black),
]),
- ])}>
+ ])}
+ >
{"contents (quotes)"->React.string}
-
+
@@ -944,14 +977,16 @@ let make = () =>
]),
]
/>
-
-
+
+
+
-
+
{"1"->React.string}
{"2"->React.string}
{"3"->React.string}
@@ -959,7 +994,7 @@ let make = () =>
-
+
{"1"->React.string}
{"2"->React.string}
{"3"->React.string}
@@ -967,7 +1002,7 @@ let make = () =>
-
+
diff --git a/dev-server-fela/bsconfig.json b/dev-server-fela/bsconfig.json
deleted file mode 100644
index 5099506..0000000
--- a/dev-server-fela/bsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "name": "dev-server-fela",
- "reason": {
- "react-jsx": 3
- },
- "refmt": 3,
- "warnings": {
- "number": "+A-32-34-44",
- "error": "+A-32-34-44"
- },
- "sources": [
- {
- "dir": "src"
- }
- ],
- "bs-dependencies": [
- "bs-css",
- "bs-css-fela",
- "@rescript/react"
- ]
-}
diff --git a/dev-server-fela/package.json b/dev-server-fela/package.json
index 7aec116..57bb722 100644
--- a/dev-server-fela/package.json
+++ b/dev-server-fela/package.json
@@ -2,30 +2,31 @@
"name": "dev-server-fela",
"version": "1.0.0",
"description": "Dev server",
+ "type": "module",
"private": true,
"scripts": {
"re:clean": "rescript clean",
- "re:build": "rescript build",
- "re:watch": "rescript build -w",
+ "re:build": "rescript",
+ "re:watch": "rescript watch",
"serve": "../node_modules/.bin/esbuild ./lib/js/src/App.js --servedir=../www --outdir=../www/js --bundle --loader:.js=jsx --define:process.env.NODE_ENV=\\\"development\\\""
},
"author": "Hervé Giraud
",
"license": "ISC",
"repository": {
"type": "git",
- "url": "git+https://github.com/reasonml-labs/bs-css.git"
+ "url": "git+https://github.com/giraud/bs-css.git"
},
"dependencies": {
"bs-css": "^18.0.0",
"bs-css-fela": "^5.0.0",
- "fela": "^11.0.0",
- "react-fela": "^11.0.0"
+ "fela": "^12.2.0",
+ "react-fela": "^12.2.0"
},
"devDependencies": {
- "@rescript/react": "^0.10.0",
+ "@rescript/react": "^0.14.0",
"esbuild": "^0.9.0",
- "react": "^17.0.0",
- "react-dom": "^17.0.0",
- "rescript": "^9.0.0"
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "rescript": "^12.0.0"
}
}
diff --git a/dev-server-fela/rescript.json b/dev-server-fela/rescript.json
new file mode 100644
index 0000000..bd1d9cc
--- /dev/null
+++ b/dev-server-fela/rescript.json
@@ -0,0 +1,17 @@
+{
+ "name": "dev-server-fela",
+ "jsx": { "version": 4 },
+ "warnings": {
+ "number": "+A-32-34-44",
+ "error": "+A-32-34-44"
+ },
+ "suffix": ".mjs",
+ "sources": ["src"],
+ "dependencies": ["bs-css", "bs-css-fela", "@rescript/react"],
+ "package-specs": [
+ {
+ "module": "esmodule",
+ "in-source": false
+ }
+ ]
+}
diff --git a/dev-server-fela/src/App.res b/dev-server-fela/src/App.res
index 5192f11..2b2c058 100644
--- a/dev-server-fela/src/App.res
+++ b/dev-server-fela/src/App.res
@@ -1,8 +1,8 @@
open Css
let renderer = createRenderer()
-renderGlobal(. renderer, "html, body", [margin(#zero), padding(#zero), backgroundColor(lavender)])
-renderRule(.
+renderGlobal(renderer, "html, body", [margin(#zero), padding(#zero), backgroundColor(lavender)])
+renderRule(
renderer,
".raw-css { display:block; background-color: green; width: 50px; height: 50px; }",
)
@@ -10,5 +10,11 @@ renderRule(.
switch ReactDOM.querySelector("#app") {
| None => ()
| Some(dom) =>
- ReactDOM.render( , dom)
+ dom
+ ->ReactDOM.Client.createRoot
+ ->ReactDOM.Client.Root.render(
+
+ ,
+ )
}
diff --git a/dev-server-fela/src/Demo.res b/dev-server-fela/src/Demo.res
index ca28cd0..a6925e7 100644
--- a/dev-server-fela/src/Demo.res
+++ b/dev-server-fela/src/Demo.res
@@ -1,20 +1,20 @@
open Css
-let fontItem = style(. [marginLeft(10->px), paddingRight(10->px), borderRight(1->px, solid, black)])
+let fontItem = style([marginLeft(10->px), paddingRight(10->px), borderRight(1->px, solid, black)])
let spin = renderer =>
- renderKeyframes(.
+ renderKeyframes(
renderer,
[(0, [transform(rotate(deg(0.)))]), (100, [transform(rotate(deg(360.)))])],
)
let scaleAnimation = renderer =>
- renderKeyframes(.
+ renderKeyframes(
renderer,
[(0, [transform(scale(0.3, 0.3))]), (100, [transform(scale(1.0, 1.0))])],
)
-let redBox = style(. [
+let redBox = style([
background(red),
borderBottom(5->px, solid, black),
width(50->px),
@@ -22,13 +22,13 @@ let redBox = style(. [
margin(10->px),
])
-let miniBox = style(. [border(2->px, solid, black), width(15->px), height(15->px), margin(1->px)])
+let miniBox = style([border(2->px, solid, black), width(15->px), height(15->px), margin(1->px)])
-let mergedStyles = merge(. [
- style(. [padding(0->px), fontSize(1->px)]),
- style(. [padding(20->px), fontSize(24->px), color(blue)]),
- style(. [media(. "(max-width: 768px)", [padding(10->px)])]),
- style(. [media(. "(max-width: 768px)", [fontSize(16->px), color(red)])]),
+let mergedStyles = merge([
+ style([padding(0->px), fontSize(1->px)]),
+ style([padding(20->px), fontSize(24->px), color(blue)]),
+ style([media("(max-width: 768px)", [padding(10->px)])]),
+ style([media("(max-width: 768px)", [fontSize(16->px), color(red)])]),
])
let differentHeightLengths = css =>
@@ -46,15 +46,15 @@ let differentHeightLengths = css =>
1.0->vmax,
1.0->vmin,
zero,
- ]->Belt.Array.map(x => {
- let className = css(. merge2(. redBox, style(. [height(x)])))
+ ]->Array.map(x => {
+ let className = css(merge2(redBox, style([height(x)])))
})
@react.component
let make = () => {
let {css, renderer, _} = CssReact.useFela()
- let cx = (baseStyle, rules) => css(. merge2(. baseStyle, style(. rules)))
+ let cx = (baseStyle, rules) => css(merge2(baseStyle, style(rules)))
let spinAnimationName = spin(renderer)
@@ -227,7 +227,7 @@ let make = () => {
("whitesmoke", whitesmoke),
("yellow", yellow),
("yellowgreen", yellowgreen),
- ]->Belt.Array.map(((name, value)) =>
+ ]->Array.map(((name, value)) =>
),
)}
@@ -346,18 +346,19 @@ let make = () => {
pct),
height(500->px),
display(grid),
gridTemplateColumns([150->px, auto, 150->px]),
gridTemplateRows([60->px, auto]),
]),
- )}>
+ )}
+ >
{
]),
)}
/>
-
+
{
gridTemplateColumns([50->px, auto]),
gridTemplateRows([40->px, auto]),
]),
- )}>
-
-
-
+ )}
+ >
+
+
+
{
)}
/>
-
-
+
+
{"grid auto direction row 1"->React.string}
-
+
{"grid auto direction row 2"->React.string}
px, #repeat(#num(2), 60->px)])]),
- )}>
-
+ className={css(
+ style([display(#grid), gridTemplateColumns([100->px, #repeat(#num(2), 60->px)])]),
+ )}
+ >
+
{"Grid track repeat"->React.string}
-
{"two times"->React.string}
-
{"three times"->React.string}
+
{"two times"->React.string}
+
{"three times"->React.string}
-
px)]))}>
-
+
px)]))}>
+
{"Grid auto columns (100px)"->React.string}
-
{"100px"->React.string}
-
{"100px"->React.string}
+
{"100px"->React.string}
+
{"100px"->React.string}
*", [marginBottom(10->px), width(100.->pct)]),
+ selector("& > *", [marginBottom(10->px), width(100.->pct)]),
]),
- )}>
+ )}
+ >
+ )}
+ >
-
+ )}
+ >
+
px), width(50->px)])} />
-
+
-
+ )}
+ >
+
px), width(50->px)])} />
-
+
-
+ )}
+ >
+
px), width(50->px)])} />
-
+
-
+ )}
+ >
+
px), width(50->px)])} />
-
+
@@ -672,20 +682,20 @@ let make = () => {
- {
pt),
@@ -785,14 +795,16 @@ let make = () => {
wordSpacing(20->px),
wordWrap(breakWord),
]),
- )}>
+ )}
+ >
{"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."->React.string}
- pct)]))}> {"Named Font weights"->React.string}
+ pct)]))}> {"Named Font weights"->React.string}
px), borderRight(1->px, solid, black)]),
- )}>
+ className={css(
+ style([fontWeight(thin), paddingRight(10->px), borderRight(1->px, solid, black)]),
+ )}
+ >
{"thin"->React.string}
@@ -860,8 +872,8 @@ let make = () => {
{"inherit"->React.string}
{
/>
{"unset"->React.string}
{
/>
-
+
{"This is a bunch of text split into columns
using the CSS `column-count` property. The text
is equally distributed over the columns."->React.string}
@@ -892,19 +904,19 @@ let make = () => {
- px), overflow(scroll), resize(horizontal)]))}>
+
px), overflow(scroll), resize(horizontal)]))}>
{"Resizable div (horizontal)"->React.string}
-
px), overflow(scroll), resize(vertical)]))}>
+
px), overflow(scroll), resize(vertical)]))}>
{"Resizable div (vertical)"->React.string}
{
border(1->px, solid, black),
]),
]),
- )}>
+ )}
+ >
{"none"->React.string}
{
border(1->px, solid, black),
]),
]),
- )}>
+ )}
+ >
{"normal"->React.string}
- px)]))}>
+
px),
after([
@@ -967,12 +982,13 @@ let make = () => {
border(1->px, solid, black),
]),
]),
- )}>
+ )}
+ >
{"empty content"->React.string}
px),
paddingLeft(20->px),
@@ -986,48 +1002,53 @@ let make = () => {
border(1->px, solid, black),
]),
]),
- )}>
+ )}
+ >
{"external "->React.string}
px /* for test */),
counterReset(Types.CounterReset.reset("foo", ~value=1)),
before([contentRule(Types.Counter.counter("foo")), border(1->px, solid, black)]),
]),
- )}>
+ )}
+ >
{"counter"->React.string}
px)]),
- )}>
+ className={css(
+ style([counterReset(Types.CounterReset.reset("foo", ~value=1)), marginLeft(20->px)]),
+ )}
+ >
px, solid, black),
]),
]),
- )}>
+ )}
+ >
{"counters"->React.string}
px),
before([contentRule(#attr("class")), border(1->px, solid, black)]),
]),
- )}>
+ )}
+ >
{"attr"->React.string}
px),
before([
contentRule(linearGradient(deg(45.), [(zero, red), (100.->pct, blue)])),
@@ -1037,27 +1058,30 @@ let make = () => {
width(18->px),
]),
]),
- )}>
+ )}
+ >
{"linear gradient"->React.string}
px),
before([
contentRules([#openQuote, #text("foo"), #closeQuote]),
border(1->px, solid, black),
]),
]),
- )}>
+ )}
+ >
{"contents (quotes)"->React.string}
- {"Render a green square --> "->React.string}
+ {"Render a green square --> "->React.string}
+
- {"Merged"->React.string}
+ {"Merged"->React.string}
px)])])} />
@@ -1084,34 +1108,36 @@ let make = () => {
],
)}
/>
-
-
+
+
+
-
-
{"1"->React.string}
-
{"2"->React.string}
-
{"3"->React.string}
-
{"4"->React.string}
+
+
{"1"->React.string}
+
{"2"->React.string}
+
{"3"->React.string}
+
{"4"->React.string}
-
-
{"1"->React.string}
-
{"2"->React.string}
-
{"3"->React.string}
-
{"4"->React.string}
+
+
{"1"->React.string}
+
{"2"->React.string}
+
{"3"->React.string}
+
{"4"->React.string}
-
-
{"1"->React.string}
-
{"2"->React.string}
-
{"3"->React.string}
-
{"4"->React.string}
+
+
{"1"->React.string}
+
{"2"->React.string}
+
{"3"->React.string}
+
{"4"->React.string}
diff --git a/dev-server-fela/src/Section.res b/dev-server-fela/src/Section.res
index 04b282e..db0fd34 100644
--- a/dev-server-fela/src/Section.res
+++ b/dev-server-fela/src/Section.res
@@ -9,11 +9,8 @@ module Styles = {
(),
)
- let section = style(. [
- selector(.
- "& > h1",
- [fontFamily(#custom(arialNarrow)), fontWeight(#num(300)), marginTop(#zero)],
- ),
+ let section = style([
+ selector("& > h1", [fontFamily(#custom(arialNarrow)), fontWeight(#num(300)), marginTop(#zero)]),
position(#relative),
background(hex("f5f5f5")),
margin(px(20)),
@@ -25,14 +22,15 @@ module Styles = {
]),
])
- let rowLayout = style(. [display(#flex), flexDirection(#row), flexWrap(#wrap)])
+ let rowLayout = style([display(#flex), flexDirection(#row), flexWrap(#wrap)])
}
@react.component
let make = (~name, ~children) => {
let {css, _} = CssReact.useFela()
-
- {name->React.string} children
+
+ {name->React.string}
+ children
}
diff --git a/yarn.lock b/yarn.lock
index 3c721d8..7e71eec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1025,13 +1025,55 @@ __metadata:
languageName: node
linkType: hard
-"@rescript/react@npm:^0.10.0":
- version: 0.10.3
- resolution: "@rescript/react@npm:0.10.3"
+"@rescript/darwin-arm64@npm:12.2.0":
+ version: 12.2.0
+ resolution: "@rescript/darwin-arm64@npm:12.2.0"
+ conditions: os=darwin & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@rescript/darwin-x64@npm:12.2.0":
+ version: 12.2.0
+ resolution: "@rescript/darwin-x64@npm:12.2.0"
+ conditions: os=darwin & cpu=x64
+ languageName: node
+ linkType: hard
+
+"@rescript/linux-arm64@npm:12.2.0":
+ version: 12.2.0
+ resolution: "@rescript/linux-arm64@npm:12.2.0"
+ conditions: os=linux & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@rescript/linux-x64@npm:12.2.0":
+ version: 12.2.0
+ resolution: "@rescript/linux-x64@npm:12.2.0"
+ conditions: os=linux & cpu=x64
+ languageName: node
+ linkType: hard
+
+"@rescript/react@npm:^0.14.0":
+ version: 0.14.1
+ resolution: "@rescript/react@npm:0.14.1"
peerDependencies:
- react: ">=16.8.1"
- react-dom: ">=16.8.1"
- checksum: 10/feb9ab6114bcc6ea3a8e0893cfb7685455c3cff01e86b527396ad37696a42d93760a96eb501525389004b4dbad429d3376f5bafa4301d463689f5d01dc436b92
+ react: ">=19.1.0"
+ react-dom: ">=19.1.0"
+ checksum: 10/071053c681913a78e93c1985ab94bb27dc9ebb71b7dada61286ae48ae2d922b23e6d8f5366002ce60df7e05b6e6305e0ac038108620ee1c6e6770a00b88c42db
+ languageName: node
+ linkType: hard
+
+"@rescript/runtime@npm:12.2.0":
+ version: 12.2.0
+ resolution: "@rescript/runtime@npm:12.2.0"
+ checksum: 10/285c40966d7b4c38e9cc3a4e0752e0e1d0c5558e6a3593248516523a7b2fb608f27f87bf7523062d098422f03c7a7c4d257985a31093a44993628e894ea96521
+ languageName: node
+ linkType: hard
+
+"@rescript/win32-x64@npm:12.2.0":
+ version: 12.2.0
+ resolution: "@rescript/win32-x64@npm:12.2.0"
+ conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
@@ -2041,11 +2083,11 @@ __metadata:
resolution: "bs-css-dom@workspace:bs-css-dom"
dependencies:
bs-css: "npm:18.1.1"
- rescript: "npm:^9.0.0"
+ rescript: "npm:^12.0.0"
peerDependencies:
- "@rescript/react": ^0.10.0
- react: ^17.0.0
- react-dom: ^17.0.0
+ "@rescript/react": ^0.14.0
+ react: ^19.0.0
+ react-dom: ^19.0.0
languageName: unknown
linkType: soft
@@ -2056,7 +2098,7 @@ __metadata:
"@emotion/cache": "npm:^11.0.0"
"@emotion/css": "npm:^11.0.0"
bs-css: "npm:18.1.1"
- rescript: "npm:^9.0.0"
+ rescript: "npm:^12.0.0"
languageName: unknown
linkType: soft
@@ -2065,10 +2107,10 @@ __metadata:
resolution: "bs-css-fela@workspace:bs-css-fela"
dependencies:
bs-css: "npm:18.1.1"
- fela: "npm:^11.0.0"
- react: "npm:^17.0.0"
- react-fela: "npm:^11.0.0"
- rescript: "npm:^9.0.0"
+ fela: "npm:^12.2.0"
+ react: "npm:^19.0.0"
+ react-fela: "npm:^12.2.0"
+ rescript: "npm:^12.0.0"
languageName: unknown
linkType: soft
@@ -2077,7 +2119,7 @@ __metadata:
resolution: "bs-css@workspace:bs-css"
dependencies:
jest: "npm:^30.0.0"
- rescript: "npm:^9.0.0"
+ rescript: "npm:^12.0.0"
languageName: unknown
linkType: soft
@@ -2532,16 +2574,16 @@ __metadata:
version: 0.0.0-use.local
resolution: "dev-server-dom@workspace:dev-server-dom"
dependencies:
- "@rescript/react": "npm:^0.10.0"
+ "@rescript/react": "npm:^0.14.0"
"@rspack/cli": "npm:^1.4.0"
"@rspack/core": "npm:^1.4.0"
"@rspack/plugin-react-refresh": "npm:^1.4.0"
bs-css: "npm:^18.0.0"
bs-css-dom: "npm:^6.0.0"
- react: "npm:^17.0.0"
- react-dom: "npm:^17.0.0"
- react-refresh: "npm:^0.17.0"
- rescript: "npm:^9.0.0"
+ react: "npm:^19.0.0"
+ react-dom: "npm:^19.0.0"
+ react-refresh: "npm:^0.18.0"
+ rescript: "npm:^12.0.0"
languageName: unknown
linkType: soft
@@ -2549,16 +2591,16 @@ __metadata:
version: 0.0.0-use.local
resolution: "dev-server-emotion@workspace:dev-server-emotion"
dependencies:
- "@rescript/react": "npm:^0.10.0"
+ "@rescript/react": "npm:^0.14.0"
"@rspack/cli": "npm:^1.4.0"
"@rspack/core": "npm:^1.4.0"
"@rspack/plugin-react-refresh": "npm:^1.4.0"
bs-css: "npm:^18.0.0"
bs-css-emotion: "npm:^7.0.0"
- react: "npm:^17.0.0"
- react-dom: "npm:^17.0.0"
- react-refresh: "npm:^0.17.0"
- rescript: "npm:^9.0.0"
+ react: "npm:^19.0.0"
+ react-dom: "npm:^19.0.0"
+ react-refresh: "npm:^0.18.0"
+ rescript: "npm:^12.0.0"
languageName: unknown
linkType: soft
@@ -2566,15 +2608,15 @@ __metadata:
version: 0.0.0-use.local
resolution: "dev-server-fela@workspace:dev-server-fela"
dependencies:
- "@rescript/react": "npm:^0.10.0"
+ "@rescript/react": "npm:^0.14.0"
bs-css: "npm:^18.0.0"
bs-css-fela: "npm:^5.0.0"
esbuild: "npm:^0.9.0"
- fela: "npm:^11.0.0"
- react: "npm:^17.0.0"
- react-dom: "npm:^17.0.0"
- react-fela: "npm:^11.0.0"
- rescript: "npm:^9.0.0"
+ fela: "npm:^12.2.0"
+ react: "npm:^19.0.0"
+ react-dom: "npm:^19.0.0"
+ react-fela: "npm:^12.2.0"
+ rescript: "npm:^12.0.0"
languageName: unknown
linkType: soft
@@ -2935,67 +2977,67 @@ __metadata:
languageName: node
linkType: hard
-"fela-bindings@npm:^11.7.0":
- version: 11.7.0
- resolution: "fela-bindings@npm:11.7.0"
+"fela-bindings@npm:^12.2.1":
+ version: 12.2.1
+ resolution: "fela-bindings@npm:12.2.1"
dependencies:
fast-loops: "npm:^1.0.0"
- fela-dom: "npm:^11.7.0"
- fela-tools: "npm:^11.7.0"
- react-addons-shallow-compare: "npm:^15.6.2"
+ fela-dom: "npm:^12.2.1"
+ fela-tools: "npm:^12.2.1"
+ react-addons-shallow-compare: "npm:^15.6.3"
shallow-equal: "npm:^1.0.0"
peerDependencies:
fela: "*"
- checksum: 10/eeb538370ff2e34e7f023bc0d5adc20ac10db03fed5d223a9ba2f02a8d27faa4a2c298c39058e449d13e4ada6cd1b85de74ce050c15b35921f9493017f6353e0
+ checksum: 10/950598a3cc4db84e12b6f5dfbb544b7b508b3e1ac7fa379b83d4878067b0fd10793d3405d069e1e32646887dec0016a2e77d2a373af186d0af93cb86152d27a3
languageName: node
linkType: hard
-"fela-dom@npm:^11.7.0":
- version: 11.7.0
- resolution: "fela-dom@npm:11.7.0"
+"fela-dom@npm:^12.2.1":
+ version: 12.2.1
+ resolution: "fela-dom@npm:12.2.1"
dependencies:
css-in-js-utils: "npm:^3.0.0"
fast-loops: "npm:^1.0.1"
- fela-utils: "npm:^11.7.0"
+ fela-utils: "npm:^12.2.1"
sort-css-media-queries: "npm:^1.4.3"
- checksum: 10/ea5668c7b05878e5346a7a904ea4458e8d24841bcf55fb3bac79cde6808ed5dde4c34dce61ef6c92ccf015a23e007289ea9dbca01e118d190b72f720551ac26c
+ checksum: 10/f6ffc67c1213fefb5560337c44d16afdb337890310cf36e2e4c215b85f0c6abc9979e668713eb4c8048168b6d4c8e676e3a28f9f13f5b2c3312156baccf2f5c2
languageName: node
linkType: hard
-"fela-tools@npm:^11.7.0":
- version: 11.7.0
- resolution: "fela-tools@npm:11.7.0"
+"fela-tools@npm:^12.2.1":
+ version: 12.2.1
+ resolution: "fela-tools@npm:12.2.1"
dependencies:
css-in-js-utils: "npm:^3.0.0"
fast-loops: "npm:^1.0.0"
- fela: "npm:^11.7.0"
- fela-utils: "npm:^11.7.0"
+ fela: "npm:^12.2.1"
+ fela-utils: "npm:^12.2.1"
peerDependencies:
- fela: ^11.2.0
- checksum: 10/311afc8133f9dec18705f202c1c390ec1d2d3a172443196e598f954d2aa734c7713d691182fe9e72366f65185ae7e9ca443aa2d8dfc7cf80fe689b26b805fb09
+ fela: ">=11"
+ checksum: 10/9d65dc39c1cae0d3bb3b51d3b7096e40f48bc1120440cc0cac51db401ad7c00ab2f38e6069fb57aeab8478647c9f7175cde51de8e61df1adbeadd3a1deb6aa2e
languageName: node
linkType: hard
-"fela-utils@npm:^11.7.0":
- version: 11.7.0
- resolution: "fela-utils@npm:11.7.0"
+"fela-utils@npm:^12.2.1":
+ version: 12.2.1
+ resolution: "fela-utils@npm:12.2.1"
dependencies:
css-in-js-utils: "npm:^3.0.0"
fast-loops: "npm:^1.0.0"
- checksum: 10/2a29397d9cc804269f1b21b50d5465e9027e6cc2176ff3583d9839eb5580b0878ea3af0f3f2e9e5a59fb70c0318f72c3c44d1878b313b4358724495976f7558c
+ checksum: 10/dbea11d9c10d899cc78057875cb7b6cb6db986b19577768b6839b276c38fd396d3987d59f488df21d16b9b6c3fd6ce8c55e173b2025a9b53d1eb96569e6e9bbb
languageName: node
linkType: hard
-"fela@npm:^11.0.0, fela@npm:^11.7.0":
- version: 11.7.0
- resolution: "fela@npm:11.7.0"
+"fela@npm:^12.2.0, fela@npm:^12.2.1":
+ version: 12.2.1
+ resolution: "fela@npm:12.2.1"
dependencies:
css-in-js-utils: "npm:^3.0.0"
csstype: "npm:^3.0.5"
fast-loops: "npm:^1.0.0"
- fela-utils: "npm:^11.7.0"
+ fela-utils: "npm:^12.2.1"
isobject: "npm:^3.0.1"
- checksum: 10/a5fa9f9b8c19768d61e0ab10628665f26067c9a41c5751c0652be8467b1a5c93512f7de2289ecdfbf172216b23f3bac6a24eb9a7d32a08566547cc987faf166f
+ checksum: 10/945e285cf561b878beea8dddd993144ba8b719a6c6db05d148a87f533dcea6103021a2e8e6190d124f5f52039fe3dc208b1d8bcdcdcf6e67ee5701a1a59e5111
languageName: node
linkType: hard
@@ -4249,7 +4291,7 @@ __metadata:
languageName: node
linkType: hard
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.4.0":
version: 1.4.0
resolution: "loose-envify@npm:1.4.0"
dependencies:
@@ -5000,7 +5042,7 @@ __metadata:
languageName: node
linkType: hard
-"react-addons-shallow-compare@npm:^15.6.2":
+"react-addons-shallow-compare@npm:^15.6.3":
version: 15.6.3
resolution: "react-addons-shallow-compare@npm:15.6.3"
dependencies:
@@ -5009,30 +5051,28 @@ __metadata:
languageName: node
linkType: hard
-"react-dom@npm:^17.0.0":
- version: 17.0.2
- resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^19.0.0":
+ version: 19.2.4
+ resolution: "react-dom@npm:19.2.4"
dependencies:
- loose-envify: "npm:^1.1.0"
- object-assign: "npm:^4.1.1"
- scheduler: "npm:^0.20.2"
+ scheduler: "npm:^0.27.0"
peerDependencies:
- react: 17.0.2
- checksum: 10/0b3836131a64da8b1c2c852cc28b09c21a738c33c7a8d6021ac20d5619d753c8ee5fff8f97c95f2fc33053e44c2cbce9657453e21c55900164e6e0c3e955e826
+ react: ^19.2.4
+ checksum: 10/ec17721a8cb131bc33480a9f738bc5bbfe4bd11b11cf69f3f473605346578a329ad26ceef6ef0761ea67a4b455803407dd7ed4ba3d8a5abd2cee8c32d221e498
languageName: node
linkType: hard
-"react-fela@npm:^11.0.0":
- version: 11.7.0
- resolution: "react-fela@npm:11.7.0"
+"react-fela@npm:^12.2.0":
+ version: 12.2.1
+ resolution: "react-fela@npm:12.2.1"
dependencies:
- fela-bindings: "npm:^11.7.0"
- fela-dom: "npm:^11.7.0"
+ fela-bindings: "npm:^12.2.1"
+ fela-dom: "npm:^12.2.1"
prop-types: "npm:^15.5.8"
peerDependencies:
- fela: ">= 11.3.1"
- react: ">= 16.3.0"
- checksum: 10/7135e2f17aa1f1c8a18b36b0b0ffd41ae82f8697aadfac1abcfbaf104bb35858bacd411b5f7ec6dd1d6d5d90dcdc8df4bab2d096eecbf6f0262d27f103df9e1b
+ fela: ">=11.3"
+ react: "*"
+ checksum: 10/a5542617959f7c6646ae58066010eeff709a0ac595b399d16b65b2592bb9d8a313e4152a896d4cd94dee8bf6c04a6762208883cd1a56490d3819224951fd8649
languageName: node
linkType: hard
@@ -5050,20 +5090,17 @@ __metadata:
languageName: node
linkType: hard
-"react-refresh@npm:^0.17.0":
- version: 0.17.0
- resolution: "react-refresh@npm:0.17.0"
- checksum: 10/5e94f07d43bb1cfdc9b0c6e0c8c73e754005489950dcff1edb53aa8451d1d69a47b740b195c7c80fb4eb511c56a3585dc55eddd83f0097fb5e015116a1460467
+"react-refresh@npm:^0.18.0":
+ version: 0.18.0
+ resolution: "react-refresh@npm:0.18.0"
+ checksum: 10/504c331c19776bf8320c23bad7f80b3a28de03301ed7523b0dd21d3f02bf2b53bbdd5aa52469b187bc90f358614b2ba303c088a0765c95f4f0a68c43a7d67b1d
languageName: node
linkType: hard
-"react@npm:^17.0.0":
- version: 17.0.2
- resolution: "react@npm:17.0.2"
- dependencies:
- loose-envify: "npm:^1.1.0"
- object-assign: "npm:^4.1.1"
- checksum: 10/ece60c31c1d266d132783aaaffa185d2e4c9b4db144f853933ec690cee1e0600c8929a1dd0a9e79323eea8e2df636c9a06d40f6cfdc9f797f65225433e67f707
+"react@npm:^19.0.0":
+ version: 19.2.4
+ resolution: "react@npm:19.2.4"
+ checksum: 10/18179fe217f67eb2d0bc61cd04e7ad3c282ea09a1dface7eacd71816f62609f4bbf566c447c704335284deb8397b00bca084e0cd60e6f437279a7498e2d0bfe0
languageName: node
linkType: hard
@@ -5132,15 +5169,34 @@ __metadata:
languageName: node
linkType: hard
-"rescript@npm:^9.0.0":
- version: 9.1.4
- resolution: "rescript@npm:9.1.4"
+"rescript@npm:^12.0.0":
+ version: 12.2.0
+ resolution: "rescript@npm:12.2.0"
+ dependencies:
+ "@rescript/darwin-arm64": "npm:12.2.0"
+ "@rescript/darwin-x64": "npm:12.2.0"
+ "@rescript/linux-arm64": "npm:12.2.0"
+ "@rescript/linux-x64": "npm:12.2.0"
+ "@rescript/runtime": "npm:12.2.0"
+ "@rescript/win32-x64": "npm:12.2.0"
+ dependenciesMeta:
+ "@rescript/darwin-arm64":
+ optional: true
+ "@rescript/darwin-x64":
+ optional: true
+ "@rescript/linux-arm64":
+ optional: true
+ "@rescript/linux-x64":
+ optional: true
+ "@rescript/win32-x64":
+ optional: true
bin:
- bsc: bsc
- bsrefmt: bsrefmt
- bstracing: lib/bstracing
- rescript: rescript
- checksum: 10/6db107c46be77368c99561d904791ced0b2e1dcf58110455314531e66f3ae6a96e157e4d7fc844ae5293735ab9cba9af8ab3351e2bdf0525693ace7a566acb14
+ bsc: cli/bsc.js
+ bstracing: cli/bstracing.js
+ rescript: cli/rescript.js
+ rescript-legacy: cli/rescript-legacy.js
+ rescript-tools: cli/rescript-tools.js
+ checksum: 10/cf2d1646c1b0fb9d34b4d2cfc2a9180c506829a35bf9b7bdabc129844461decad71723759d1753eebf4bdb8fc92c0f90ce1c62114c6ae7aa8a16c589454c0b25
languageName: node
linkType: hard
@@ -5241,13 +5297,10 @@ __metadata:
languageName: node
linkType: hard
-"scheduler@npm:^0.20.2":
- version: 0.20.2
- resolution: "scheduler@npm:0.20.2"
- dependencies:
- loose-envify: "npm:^1.1.0"
- object-assign: "npm:^4.1.1"
- checksum: 10/898917fa475386953d998add9107c04bf2c335eee86172833995dee126d12a68bee3c29edbd61fa0bcbcb8ee511c422eaab23b86b02f95aab26ecfaed8df5e64
+"scheduler@npm:^0.27.0":
+ version: 0.27.0
+ resolution: "scheduler@npm:0.27.0"
+ checksum: 10/eab3c3a8373195173e59c147224fc30dabe6dd453f248f5e610e8458512a5a2ee3a06465dc400ebfe6d35c9f5b7f3bb6b2e41c88c86fd177c25a73e7286a1e06
languageName: node
linkType: hard