psb/styled-ppx

Type-safe styled components for ReScript and Melange with type-safe CSS

Typed styled components for ReScript

styled-ppx is the ppx that brings styled components to 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 language (DSL) than CSS

Usage

npm install @davesnx/styled-ppx

Update bsconfig.json

Add "@davesnx/styled-ppx/ppx" under bsconfig "ppx-flags":

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

Read more about getting started

Documentation

For the entire documentation, visit styled-ppx.vercel.app

Editor Support

We provide editor extensions that brings syntax highlight, for now. (It will include IntelliSense or other CSS-related features).

VSCode Extension

Install the VSCode Extension

vim plugin

Install the vim plugin

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.

License

This project is licensed under the Simplified BSD License (BSD 2-Clause License).

CI