@davesnx/styled-ppx

Typed styled components in Reason, OCaml and ReScript

Usage no npm install needed!

<script type="module">
  import davesnxStyledPpx from 'https://cdn.skypack.dev/@davesnx/styled-ppx';
</script>

README

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