@davesnx/styled-ppx

    0.26.0 • Public • Published

    styled-ppx

    styled-ppx is the ppx that brings typed styled components to Reason, OCaml and ReScript.

    Build on top of emotion, it allows you to style apps safe, quickly, performant and as you always done it.

    Allows you to create React Components with type-safe style definitions that don't rely on a different DSL than CSS.

    Documentation

    Check our website: styled-ppx.vercel.app

    Getting started

    Depends on bs-css with bs-css-emotion, ReasonReact or rescript-react, make sure you have them installed first.

    Install

    yarn add @davesnx/styled-ppx
    # Or
    npm install @davesnx/styled-ppx

    Update bsconfig.json

    Add the PPX in your bsconfig.json file under "ppx-flags"

    {
      "bs-dependencies": [
        "reason-react",
        "bs-css",
        "bs-css-emotion"
      ],
    +  "ppx-flags": ["@davesnx/styled-ppx/ppx"]
    }

    Use

    module Link = [%styled.a (~color="#4299E1") => {|
      font-size: 1.875rem;
      line-height: 1.5;
      text-decoration: none;
      margin: 0px;
      padding: 10px 0px;
      color: $(color);
    |}];
    
    module Layout = [%styled.div [|
      [%css "display: flex"],
      [%css "width: 100%;"],
      [%css "height: 100%;"],
      [%css "justify-content: center;"],
      [%css "align-items: center"],
    |]];
    
    /* Later on a component */
    <Layout>
      <Link
        color="#333333"
        href="https://sancho.dev"
        rel="noopener noreferrer"
      />
      <span className={[%cx "color: black; position: absolute; left: 0px;"]}>
        {React.string("sancho.dev")}
      </span>
    </Layout>

    Playground

    If you want to try it out, fork github.com/davesnx/try-styled-ppx and follow the instalation process there.

    Editor Support

    One of the downsites of using a ppx is their editor support, we provide a VSCode extension that brings syntax highlight. This can include in the future, CSS autocomplete and other CSS-related extensions.

    Install the VSCode extension: VSCode Extension

    If you are interested on another editor, please fill an issue.

    Contributing

    We would love your help improving styled-ppx. Please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process: CONTRIBUTING.md.

    Credits

    • Javier Chávarri: to introduce me to Reason, teach me all his knowledge about OCaml, AST, ppx rewritters and for the help me boostrapping the project.
    • Alessandro Strada: this project started with inspiration in bs-css-ppx and forked his implementation of their CSS Parser.
    • Eduardo Rafael: to teach me how to write a compiler and a type-checker and his implementation of the CSS Value definition and the new CSS Parser.
    • Rizo: to help with the API design, discussions and great conversations about styling and CSS.
    • Max Lantas: to implement the VSCode extension.
    • This project builds on a long line of earlier work by clever folks in the JavaScript community from around the world. People from styled-components, emotion, compiledcssinjs, linaria, and many more.

    License

    TDB


    CI npm version

    Keywords

    none

    Install

    npm i @davesnx/styled-ppx

    DownloadsWeekly Downloads

    245

    Version

    0.26.0

    License

    MIT

    Unpacked Size

    35.9 MB

    Total Files

    7

    Last publish

    Collaborators

    • davesnx