Nicely Pruned Marigolds


    0.3.0 • Public • Published


    ReScript bindings to Linaria.

    Should I use it?

    Most likely, no. After using it on my personal site, I wouldn't recommend it for something more or less critical. This PPX is a big fat hack and it shows.


    These bindings are unsafe. It means you won't get typed CSS.

    What you'll get:

    • Type-safe and auto-completable classnames
    • Everything Linaria offers, such as:
      • Static extraction
      • Functions / variables sharing between ReScript and CSS

    It works only with ReScript syntax.


    You need to install and configure Linaria. Please, refer to their docs.

    Install these bindings:

    # yarn
    yarn add rescript-linaria
    # or npm
    npm install --save rescript-linaria

    As it's implemented as PPX, you need to add this to your bsconfig.json:

    "ppx-flags": [

    See example of its usage with Webpack.



    moodule Css = %css(
      let cn = css`
        display: flex;
        position: relative;
    let make = () => <div />

    ⚠️⚠️⚠️ Everything inside css tagged template is unsound, including interpolations. It is 100% unsafe territory. What you type inside this tag goes directly to JS without any background checks. You basically write %raw JS, which gets slightly modified by PPX so Linaria can pick it up.


    moodule Css = %css(
      let pad = 5
      let cn = css`
        padding: ${pad}px;
        color: ${Color.text};

    You can interpolate:

    • everything that Linaria accepts for interpolation:
      • primitives, such as strings, numbers, etc
      • applications of general functions
      • applications of functions with pipes are also supported

    You can't interpolate:

    • applications of functions with labeled/optional arguments
    • applications of functions with placeholder arguments
    • externals (you must bind external to a variable first)
    • other ReScript-only things, such as variants


    It is required to have exactly 1 %css module within 1 ReScript file.

    You can place %css module either:

    • in .res module as a submodule, as shown in the examples above
    • or in its own file using include:
    // AppStyles.res
    include %css(
      // your css...

    You can find more examples here.


    npm i rescript-linaria

    DownloadsWeekly Downloads






    Unpacked Size

    49.6 MB

    Total Files


    Last publish


    • alex.fedoseev