46
58%
ISC
BuckleScript 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:

open Glamor;
  • Simple styling:

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

    css [
        color "red",
        Selector "@media (min-width: 300px)" [
            color "green"
        ]
    ]
    
  • Selectors can be nested:

    css [
        color "red",
        Selector "@media (min-width: 300px)" [
            color "green",
            Selector "& .foo" [
                color "blue"
            ]
        ]
    ]
    

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

Glamor.(css [color "red"])

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

<div className=(css [color "red"]) />

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.