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.

Quick start

yarn add -D @shriyans/ppx_bs_css

or

npm i -D @shriyans/ppx_bs_css

Usage

Add the PPX to your bsconfig.json:

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

Examples

Basic bs-css rules (ReasonML syntax):

/* 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):

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

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

bs-css keyframes (ReasonML syntax):

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):

/* 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]:

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

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

See also: ppx_bs_css-examples.

What you get

• Errors at compile time:

• Merlin support:

What you don't get

• Autocomplete

Development

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