Bs-css release for better rescript/js integration

1

Hi,

I released a new version of bs-css (13.1.0) and bs-css-emotion (2.1.0) that are more friendly to js and rescript.

For that, I added a new module named CssJs that can be used as a replacement of Css. If you don’t use it, it has no impact on current code.

This new module is using arrays instead of list for the rules and definitions, and the style function is uncurried.

before you would write (reason code) :

open Css;
let rowLayout = style([display(`flex), flexDirection(`row), flexWrap(`wrap)]);

and you get :

'use strict';

var Css = require("../src/Css.js");
var Curry = require("bs-platform/lib/js/curry.js");

var rowLayout = Curry._1(Css.style, {
      hd: Css.display("flex"),
      tl: {
        hd: Css.flexDirection("row"),
        tl: {
          hd: Css.flexWrap("wrap"),
          tl: /* [] */0
        }
      }
    });

exports.rowLayout = rowLayout;

with the new module, you can write (rescript code):

open CssJs;
let rowLayout = style(. [display(#flex), flexDirection(#row), flexWrap(#wrap)])

and you get a much better output:

'use strict';

var CssJs = require("../src/CssJs.js");

var rowLayout = CssJs.style([
      CssJs.display("flex"),
      CssJs.flexDirection("row"),
      CssJs.flexWrap("wrap")
    ]);

exports.rowLayout = rowLayout;
13 Likes
2

Hi @hgiraud

I’m currently using bs-css-emotion@2.1.0 and bs-css@13.1.0 in rescript.

When I enter this code:

open CssJs;
let rowLayout = style(. [display(#flex), flexDirection(#row), flexWrap(#wrap)])

It generates:

var CssJs = require("bs-css-emotion/src/CssJs.bs.js");

var rowLayout = CssJs.style([
      CssJs.display("flex"),
      CssJs.flexDirection("row"),
      CssJs.flexWrap("wrap")
    ]);

When I execute this code, I get an error:

Cannot find module 'bs-css/src/Css_Colors.bs.js'

I’m wondering if you have any suggestions about what I might need to do to fix this?

Thanks

3

I just tried installing bss-css as an explicit dependency and that seems to have resolved the problem :+1:

4

Hi @hgiraud

I’m currently using ReactDOMServer.renderToString() to render on the server.

I have given one component a simple style.

I am seeing a generated class being added to the component, but I was also expecting to see a <style> tag added to the output containing the CSS, but that does not seem to be present.

Do you have any thoughts on why it might not be appearing?

Thanks