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.

Check our website: styled-ppx.vercel.app

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

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

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"]
}

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 "position: absolute; left: 0px;"]}>
    {React.string("sancho.dev")}
  </span>
</Layout>

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

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.

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.

• 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.

TDB