Need help with styled-ppx?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

davesnx
250 Stars 18 Forks MIT License 578 Commits 37 Opened issues

Description

Typed styled components in Reason, OCaml and ReScript

Services available

!
?

Need anything else?

Contributors list

# 94,963
Shell
buckles...
reasonm...
jq
335 commits
# 116,501
OCaml
Shell
buckles...
functio...
190 commits
# 114,246
OCaml
React
Shell
buckles...
4 commits
# 204,537
curl
Elixir
curl-co...
reactjs
2 commits
# 213,649
OCaml
Shell
css-in-...
buckles...
2 commits
# 188,935
React
repl
Clojure...
documen...
1 commit
# 567,208
OCaml
Shell
f-sharp
theorem...
1 commit
# 203,179
OCaml
buckles...
twitter...
Twitter
1 commit
# 95,564
Elixir
absinth...
gui-fra...
reasonm...
1 commit
# 561,000
OCaml
C
Emacs
Atom
1 commit

styled-ppx

styled-ppx is the ppx that enables css-in-reason. 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 CSS style definitions that don't rely on a specific DSL and great error messages:

BETA: This ppx is in an early stage ⚠️. Meaning that it doesn't support full functionality as emotion or styled-components. But you can safely use it, as it would respect Compatible Versioning. In case you want to know more, take a look at the ROADMAP, or feel free to chat on Discord: @davesnx#5641

Usage

styled-ppx
implements a ppx that transforms

[%styled]
extensions points into
[@react.component]
modules with the additional styles converted to emotion.

This is how you can write components in ReasonML/OCaml/ReScript with this ppx:

Standard styled component

module StyledComponent = [%styled.div
  {|
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
|}
];

ReactDOMRe.renderToElementWithId( {React.string("- Middle -")} , "app", );

Dynamic styled component

module Dynamic = [%styled (~color, ~background) => {j|
  color: $color;
  background-color: $background;
|j}
];

ReactDOMRe.renderToElementWithId( {React.string("Hello!")} , "app", );

Dynamic components are somehow not fully supported, and it's the reason why the project is still in BETA.

Inline css function

ReactDOMRe.renderToElementWithId(
   {React.string("Hello!")} ,
  "app",
);

For further detail, take a look in here.

Motivation

I love CSS and coming from the JavaScript world, writing React with styled-components. I found to be one of the best combos for writting scalable frontend UIs. When I arrived to Reason, it wasn't a thing, many people have been asking for it (a few times).

So I took the time to create it with help from @jchavarri 🙌.

If you want to know more about how it works or what are the benefits I recommend to watch my talk at ReasonSTHLM Meetup

Installation

The installation process refers to the stable NPM published version (v0.20) which differs from master (v1.x). In master we won't rely on bs-emotion, so this installation will be different.

This package depends on bs-emotion, ReasonReact and BuckleScript, make sure you follow their installations.

With
esy
on native projects

esy add davesnx/styled-ppx

With
npm
or
yarn
on BuckleScript projects

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

Add the PPX in your

bsconfig.json
file:
{
  "bs-dependencies": [
    "reason-react",
    "@ahrefs/bs-emotion"
  ],
  "ppx-flags": ["@davesnx/styled-ppx/styled-ppx"]
}

Add the PPX in your

bsconfig.json
file under
"ppx-flags"
{
  "ppx-flags": ["esy x styled-ppx.exe"]
}

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

Editor Support

One of the fears of using a ppx is editor support, we belive that having compiling errors and syntax highlight would be an amazing experience. Install the VSCode extension:

VSCode Extension

  • If you are interested on another editor, please fill an issue and we would consider.

Acknowledgement

Thanks to Javier Chávarri, for helping me understand all the world of OCaml and his knowledge about ppx's. It has been a great experience. Inspired by @astrada

bs-css-ppx
and his implementation of CSS Parser in OCaml.

Contributing

We would love your help improving styled-ppx, there's still a lot to do. The roadmap lives under the Projects in GitHub. Take a look, the tasks are well organized and clear for everybody to pick any!

You would need

esy
, you can install the latest version from npm:
yarn global add [email protected]
# Or
npm install -g [email protected]

Then run the

esy
command from this project root to install and build depenencies.
esy

Now you can run your editor within the environment (which also includes merlin):

esy $EDITOR
esy vim

After you make some changes to source code, you can re-run project's build again with the same simple

esy
command and run the native tests with
esy test

This project uses Dune as a build system, if you add a dependency in your

package.json
file, don't forget to add it to your
dune
.

Running Tests

You can test compiled executable (runs

scripts.tests
specified in
esy.json
):

This will run the native unit test.

bash
esy test

This tests only ensures that the output looks exactly as a snapshot, so their mission are to ensure the ppx transforms to a valid OCaml syntax.

If you want to run Bucklescript's integration test instead, you can do:

bash
esy
cd packages/ppx/test/bucklescript
yarn install
yarn build
yarn test

This tests are more like an end to end tests, that ensures that emotion have the correct methods for each CSS property.


Happy reasoning!

CIComVer

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.