68
55%
ISC
neglectedBuckleScript bindings for glamor

bs-glamor – BuckleScript bindings for glamor

The API is still experimental. Only the css function from glamor is exposed (with its result slightly incorrectly typed as a string); no other functions such as renderStatic are supported yet.

Installation

npm install --save bs-glamor

In your bsconfig.json, include "bs-glamor" in the bs-dependencies.

Usage

The following examples (in Reason syntax) assume that Glamor is included in the namespace:

  • RE
  • ML
open Glamor;
open Glamor
  • Simple styling:

    • RE
    • ML
    css([
        color("red"),
        border("1px solid black")
    ])
    let _ = css [color "red"; border "1px solid black"]
  • Styling with selectors (@media, :hover, &, etc.):

    • RE
    • ML
    css([
        color("red"),
        Selector("@media (min-width: 300px)", [
            color("green")
        ])
    ])
    let _ =
      css
        [color "red";
        ((Selector ("@media (min-width: 300px)", [color "green"]))[@explicit_arity
                                                                    ])]
  • Selectors can be nested:

    • RE
    • ML
    css([
        color("red"),
        Selector("@media (min-width: 300px)", [
            color("green"),
            Selector("& .foo", [
                color("blue")
            ])
        ])
    ])
    let _ =
      css
        [color "red";
        ((Selector
            ("@media (min-width: 300px)",
              [color "green";
              ((Selector ("& .foo", [color "blue"]))[@explicit_arity ])]))
        [@explicit_arity ])]

You can isolate inclusion of the Glamor namespace in the following way:

  • RE
  • ML
Glamor.(css([color("red")]))
let _ = let open Glamor in css [color "red"]

The result of the css function can be assigned to a class name, e.g. in JSX:

  • RE
  • ML
<div className=(css([color("red")])) />
let _ = ((div ~className:(css [color "red"]) ~children:[] ())[@JSX ])

You can also combine stylings with a class names. For example, if you want to use some classes from third-party libraries (e.g. Bootstrap), or just to add a class name for testing purposes along with glamor styles:

  • RE
  • ML
<div className=("btn " ^ css([color("red")])) />
967: syntax error, consider adding a `;' before

### Merging css rules

You can merge css rules using merge:

  • RE
  • ML
let text_primary = css([color("indigo")]);
let small = css([fontSize("10px")]);

<p className=(merge([text_primary, small])) />
let text_primary = css [color "indigo"]
let small = css [fontSize "10px"]
let _ = ((p ~className:(merge [text_primary; small]) ~children:[] ())[@JSX ])

glamor will make sure that rules are merged in the correct order, managing nesting and precedence for you.

Global CSS

You can define global CSS rules with global:

  • RE
  • ML
Glamor.(global("body", [margin("0px")]));
Glamor.(global("h1, h2, h3", [color("palegoldenrod")]));
let _ = let open Glamor in global "body" [margin "0px"]
let _ = let open Glamor in global "h1, h2, h3" [color "palegoldenrod"]

## Keyframes

Define animation keyframes:

let bounce = Glamor.keyframes([
  ("0%": [transform("scale(0.1)"), opacity("0")]),
  ("60%": [transform("scale(1.2)"), opacity("1")]),
  ("100%": [transform("scale(1)")])
]);
let styles = css([
    animationName(bounce),
    animationDuration("2s"),
    width("50px"),
    height("50px"),
    backgroundColor("red")
]);

<div className=styles>bounce!</div>

Example

See reason-react-tictactoe for a live example.

Development

npm run start

Tests

There are some simplistic tests using bs-jest.

npm run test

Thanks

Thanks to reason-react-example, reason-react, and bs-jest for inspiration how to create a Reason library, and of course, thanks to glamor.