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
289 Stars 18 Forks MIT License 889 Commits 14 Opened issues

Description

Typed styled components in Reason, OCaml and ReScript

Services available

!
?

Need anything else?

Contributors list

# 99,823
buckles...
reasonm...
Node.js
Sass
614 commits
# 110,639
OCaml
buckles...
functio...
reasonm...
190 commits
# 518,106
OCaml
C
Emacs
Atom
7 commits
# 118,486
OCaml
React
Shell
buckles...
4 commits
# 194,296
curl
curl-co...
reasonm...
node
2 commits
# 204,474
OCaml
Shell
css-in-...
buckles...
2 commits
# 192,086
React
repl
Clojure...
documen...
1 commit
# 438,563
OCaml
Shell
f-sharp
smt
1 commit
# 199,831
OCaml
buckles...
twitter...
Twitter
1 commit
# 96,993
Elixir
absinth...
gui-fra...
reasonm...
1 commit
# 692,095
OCaml
Webpack
webpack...
buckles...
1 commit

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 */ {React.string("sancho.dev")}

Playground

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

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.