Statically typed DSL for writing css in ReScript.
The rescript-css library contains type css core definitions, it has different implementations:
- rescript-css-emotion is a typed interface to Emotion
- rescript-css-fela is a typed interface to Fela (react)
- rescript-css-dom is a typed interface to
ReactDOM.Style.t(rescript-react)
It is a fork from bs-css to ensure the project can still be used with latest React and ReScript requirements.
If you know another implementation that can be added, send a link in an issue or create a PR.
Installation
npm install --save rescript-css rescript-css-emotion or yarn add rescript-css rescript-css-emotion
In your rescript.json, include "rescript-css" and "rescript-css-emotion" in the dependencies.
You can replace rescript-css-emotion with rescript-css-dom in the above instructions if you prefer
to use React styles, or rescript-css-fela for a different runtime.
Migration from bs-css*
Package names were renamed for the 1.0.0 release line:
bs-css->rescript-cssbs-css-dom->rescript-css-dombs-css-emotion->rescript-css-emotionbs-css-fela->rescript-css-fela
If you are upgrading:
- Replace old package names in your package manager dependencies and update the version of the package if needed.
- Replace old names in your
rescript.jsondependencies. - Keep source imports unless your build config references old package names.
Usage for rescript-css-emotion
"module Theme = {
let basePadding = CssJs.px(5)
let textColor = CssJs.black
}
module Styles = {
/*
Open the Css module, so we can access the style properties below without prefixing them with Css.
You can use either Css or CssJs: Css module is using lists, CssJs is using arrays.
If you're targeting js and/or using Rescript, prefer CssJs
*/
open CssJs
let card = style(. [
display(flexBox),
flexDirection(column),
alignItems(stretch),
backgroundColor(white),
boxShadow(Shadow.box(~y=px(3), ~blur=px(5), rgba(0, 0, 0, #num(0.3)))),
// You can add non-standard and other unsafe style declarations using the `unsafe` function, with strings as the two arguments
unsafe("-webkit-overflow-scrolling", "touch"),
// You can place all your theme styles in Theme.re and access as normal module
padding(Theme.basePadding),
])
let title = style(. [
fontSize(rem(1.5)),
lineHeight(#abs(1.25)),
color(Theme.textColor),
marginBottom(Theme.basePadding),
])
let actionButton = disabled =>
style([
background(disabled ? darkgray : white),
color(black),
border(px(1), solid, black),
borderRadius(px(3)),
])
}
@react.component
let make = () =>