CSS Variables

[Pet3ris]

Hi There,

Thanks for building the library!

Wanted to check if CSS variables (e.g., var(--background-color)) are already supported?

[giraud]

I don't know how useful it is, the goal of using a css-in-js lib is to use the language variables.

[Pet3ris]

@giraud Thanks for the response.

You're absolutely right, but the thing I would like to map my Reason color template variable to would be the corresponding CSS variable. That way I still retain all the readability/fixability benefits when editing the website in the browser.

This is what I get right now in Chrome: (built using unsafe)

Also in dev tools, when looking at a specific element:

It's definitely not a big pain point at all though, I could define my own function for it.

[giraud]

I understand, PR is welcome. I don't have time to work on it.

[Pet3ris]

Of course. I'm probably too early into Reason right now to manage it. Seems to require an overhaul of the types, because vars can annoyingly serve both as properties and values. Could be undesirable from the perspective that it would affect type-checking for everything else.

[natserract]

Hello @Pet3ris, I also have the same case, but i got some idea, my solution is creating reason module (global) which contains a global style. Here's my ex:

/* expect */ 
:root {
    /* Colors */
    --opacity: 0.7;
    --primary-color: rgba(0, 0, 0, .97);
    --secondary-color: rgba(0, 0, 0, .64);
}

/* rootStyles.re */

module Style = {
    type generic0('a) = ('a);
    type generic2('a, 'b) = ('a, 'a, 'a, 'b);

    type bg = 
      | RGBA
      | RGB;

    type rgbColor = {
        rgb0: int,
        rgb1: int,
        rgb2: int,
    }

    type rgbaColor = {
        rgba0: int,
        rgba1: int,
        rgba2: int,
        rgba3: float,
    }

    /* give a string because array can't -> 'a 'b  */
    let variantColor = (bg_type, context:array(string)) => {
        switch bg_type {
            | RGBA => [| context[0], context[1], context[2], context[3] |]
            | RGB => [| context[0], context[1], context[2] |];
        };
    } 

    let root__background: generic0(float) = 0.7;
    
    let valprimaryColor = variantColor(RGB, [| "0", "0", "3" |]);
    let root__primaryColor = {
        rgb0: int_of_string(valprimaryColor[0]),
        rgb1: int_of_string(valprimaryColor[1]),
        rgb2: int_of_string(valprimaryColor[2]),
    }

}

/* 
style.re
And i import this module in my component */

open RootStyles.Style;

module Styles = {
    open Css;

    let someComponent = style([
        opacity(root__background),
        background(
            rgba(
                root__secondaryColor.rgba0, 
                root__secondaryColor.rgba1, 
                root__secondaryColor.rgba2,
                root__secondaryColor.rgba3
            )
        ),
    ])
}