- Notifications
You must be signed in to change notification settings - Fork101
Statically typed DSL for writing css in reason.
License
giraud/bs-css
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Statically typed DSL for writing css in reason and rescript.
The bs-css library contains type css core definitions, it has different implementations:
- bs-css-emotion is a typed interface toEmotion
- bs-css-fela is a typed interface toFela (react)
- bs-css-dom is a typed interface to
ReactDOMRe.Style.t(reason-react)
If you know another implementation that can be added, send a link in an issue or create a PR.
npm install --save bs-css bs-css-emotionoryarn add bs-css bs-css-emotion
In yourbsconfig.json, include"bs-css" and"bs-css-emotion" in thebs-dependencies.
You can replacebs-css-emotion withbs-css-dom in the above instructions if you preferto use React styles, orbs-css-fela for a different runtime.
moduleTheme= {letbasePadding=CssJs.px(5)lettextColor=CssJs.black}moduleStyles= {/* 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 */openCssJsletcard=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 argumentsunsafe("-webkit-overflow-scrolling","touch"),// You can place all your theme styles in Theme.re and access as normal modulepadding(Theme.basePadding), ])lettitle=style(. [fontSize(rem(1.5)),lineHeight(#abs(1.25)),color(Theme.textColor),marginBottom(Theme.basePadding), ])letactionButton=disabled=>style(. [background(disabled ?darkgray :white),color(black),border(px(1),solid,black),borderRadius(px(3)), ])}@react.componentletmake= ()=> <divclassName=Styles.card> <h1className=Styles.title> {React.string("Hello")} </h1> <buttonclassName={Styles.actionButton(false)} /> </div>
Global css
You can define global css rules withglobal
openCssJsglobal(."body", [margin(px(0))])global(."h1, h2, h3", [color(rgb(33,33,33))])
Keyframes
Define animation keyframes;
openCssJsletbounce=keyframes(. [ (0, [transform(scale(0.1,0.1)),opacity(0.0)]), (60, [transform(scale(1.2,1.2)),opacity(1.0)]), (100, [transform(scale(1.0,1.0)),opacity(1.0)]),])letstyles=style(. [animationName(bounce),animationDuration(2000),width(px(50)),height(px(50)),backgroundColor(rgb(255,0,0)),])// ...<divclassName=styles> {React.string("bounce!")} </div>
Css attributes
For some CSS parameters (like setting padding on an input field), one needs to use CSS attributes like so:
input[type="text"] {padding:20px;}
Theselector function can be used:
openCssJsletstyles=style(. [selector("input[type='text']", [padding(px(20))])])
You should avoid trying to merge styles in the same list of rules or by concatinating lists. A list of rules is converted into a JS object before being passed to Emotion where every property becomes a key in the object. This means you lose any earlier rule if you have another rule with the same property later in the list. This is especially noticablewhen writing sub-selectors and media queries
Trying to merge styles by just using concatenation can result in unexpected results.
This example:
openCssJsletbase= [padding(px(0)),fontSize(px(1))]letoverrides= [padding(px(20)),fontSize(px(24)),color(blue)]letmedia1= [media("(max-width: 768px)", [padding(px(10)) ])]letmedia2= [media("(max-width: 768px)", [fontSize(px(16)),color(red) ])]letmergedStyles=style(.Belt.Array.concatMany([base,overrides,media1,media2]))
generates the following:
.css-1nuk4bg {padding:20px;font-size:24px;color:#0000ff;}@media (max-width:768px) { .css-1nuk4bg {font-size:16px;color:#ff0000; }}
As you can see both properties frombase are overwritten (as opposed to overridden in css) and the media query inmedia1 is also lost because the media query frommedia2 overwrites it.
merge safely merges styles by name. UsesEmotion’scx method.
openCssJsletmergedStyles= merge(.[ style(.[padding(px(0)), fontSize(px(1))]), style(.[padding(px(20)), fontSize(px(24)), color(blue)]), style(.[media("(max-width: 768px)",[padding(px(10))])]), style(.[media("(max-width: 768px)",[fontSize(px(16)), color(red)])]),])
Generates the following:
.css-q0lkhz {padding:0px;font-size:1px;padding:20px;font-size:24px;color:#0000ff;}@media (max-width:768px) { .css-q0lkhz {padding:10px; }}@media (max-width:768px) { .css-q0lkhz {font-size:16px;color:#ff0000; }}
Nothing is lost and everything ends up in the final stylesheet where normal overrides apply.
First you need to use a provider in your Jsx:
letrenderer=createRenderer()switchReactDOM.querySelector("#app") {|None=> ()|Some(dom)=>ReactDOM.render(<CssReact.RendererProviderrenderer>... </CssReact.RendererProvider>,dom)}
Then, you need to use the useFela hook in your Jsx:
moduleStyles= {/* 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 */openCssJsletcard=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 argumentsunsafe("-webkit-overflow-scrolling","touch"),// You can place all your theme styles in Theme.re and access as normal Reason modulepadding(Theme.basePadding), ])lettitle=style(. [fontSize(rem(1.5)),lineHeight(#abs(1.25)),color(Theme.textColor),marginBottom(Theme.basePadding), ])letactionButton=disabled=>style(. [background(disabled ?darkgray :white),color(black),border(px(1),solid,black),borderRadius(px(3)), ])}@react.componentletmake= ()=> {let {css,_}=CssReact.useFela() <divclassName={css(.Styles.card)}> <h1className={css(.Styles.title)}> {React.string("Hello")} </h1> <buttonclassName={css(.Styles.actionButton(false))} /> </div>}
Global css
You can define global css rules withglobal
openCssJsletrenderer=createRenderer()renderGlobal(.renderer,"body", [margin(px(0))])renderGlobal(.renderer,"h1, h2, h3", [color(rgb(33,33,33))])
Use style instead of classname, for example:
moduleStyles= {// Open the Css module, so we can access the style properties below without prefixing them with CssopenCssJsletcard=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 argumentsunsafe("-webkit-overflow-scrolling","touch"),// You can place all your theme styles in Theme.re and access as normal Reason modulepadding(Theme.basePadding), ])lettitle=style(. [fontSize(rem(1.5)),color(Theme.textColor),marginBottom(Theme.basePadding)])letactionButton=disabled=>style(. [background(disabled ?darkgray :white),color(black),border(px(1),solid,black),borderRadius(px(3)), ])}@react.componentletmake= ()=> <divstyle=Styles.card> <h1style=Styles.title> {React.string("Hello")} </h1> <buttonstyle={Styles.actionButton(false)} /> </div>
You can check outCss_Js_Core.rei andCss_Legacy_Core.rei.
Thanks toemotion which is doing all the heavy lifting.
Thanks tobs-glamor which this repo was forked from.
Thanks toelm-css for dsl design inspiration.
About
Statically typed DSL for writing css in reason.