@shriyans/ppx_bs_css

ppx\_bs\_css
============

A ppx rewriter for CSS expressions.

Parses a CSS string and produces a declaration block compatible with
bs-css, and
typed-css-core.

$3

``
yarn add -D @shriyans/ppx_bs_css
`

or

`
npm i -D @shriyans/ppx_bs_css
`

$3

Add the PPX to your bsconfig.json:

`json
{
"ppx-flags": [
"@shriyans/ppx_bs_css/ppx"
]
}
`

$3

Basic bs-css rules (ReasonML syntax):

`reason
/ rules has type list(Css.rule) /
let rules =
let open Css;
[%style
{|
color: red;
background-color: white;
margin: auto 0 10px 1em;
border-bottom: thin dashed #eee;
border-right-color: rgb(1, 0, 1);
width: 70%;
background: url(http://example.com/test.jpg)
|}
];
`

bs-css rules with selectors (ReasonML syntax):

`reason
/ rules has type list(Css.rule) /
let css =
let open Css;
[%css
{|
{
color: red;
}

:hover {
color: blue;
}
|}
];
`

bs-css keyframes (ReasonML syntax):

`reason
let bounces =
let open Css;
[%style
{|
@keyframes {
from { transform: scale(0.1, 0.1); opacity: 0.0; }
60% { transform: scale(1.2, 1.2); opacity: 1.0; }
to { transform: scale(1.0, 1.0); opacity: 1.0; }
}
|}
];
let bounce = List.hd(bounces);
let stylesWithAnimation =
let open Css;
[%style
{|
animation-name: bounce;
animation-duration: 2000;
width: 50px;
height: 50px;
background-color: rgb(255, 0, 0)
|}
];
`

Basic typed-glamor declaration block (ReasonML syntax):

`reason
/ declarations has type list(TypedGlamor.Core.declaration) /
let declarations =
let open TypedGlamor;
[%style
{typed|
color: red;
background-color: white;
margin: auto 0 10px 1em;
border-bottom: thin dashed #eee;
border-right-color: rgb(1, 0, 1);
width: 70%;
background: url(http://example.com/test.jpg)
|typed}
];
`

Selectors also work with typed-glamor. They need the [%css] extension instead of [%style]:

`reason
/ Selectors /
let _ = {
let open TypedGlamor;
[%css
{typed|
{
color: red;
}

:hover {
color: blue;
}
|typed}
];
};
``

See also:
ppx_bs_css-examples.

$3

* Errors at compile time:

!Color typo

* Merlin support:

!Merlin type error

!Merlin function info

$3

* Autocomplete

$3

npm install -g esy
esy install
esy build
# to build tests
esy dune build test/test_suite.exe
# to run tests
esy ./_esy/default/build/default/test/test_suite.exe
# to build test_bs
cd test_bs && yarn install
# to run test_bs
yarn build