rescript-linaria

    0.2.0 • Public • Published

    rescript-linaria

    ReScript bindings to Linaria.

    About

    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.

    Installation

    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": [
      "rescript-linaria/ppx"
    ],

    See example of its usage with Webpack.

    Usage

    Basic

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

    ⚠️⚠️⚠️ 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.

    Interpolations

    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

    Placement

    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.

    Install

    npm i rescript-linaria

    DownloadsWeekly Downloads

    38

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    38 MB

    Total Files

    6

    Last publish

    Collaborators

    • alex.fedoseev