davesnx / styled-ppx

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

Home Page:https://styled-ppx.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

styled-ppx-header-lightstyled-ppx-header-dark

demostyled-ppx-demo-dark

Typed styled components for ReScript

styled-ppx is a ppx that brings styled components to ReScript. Built on top of emotion, it allows you to style apps safely, quickly, and performantly - just as you have always done it. styled-ppx allows you to create React Components with type-safe style definitions that don't rely on a different language (DSL) except 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

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

Editor Support

We provide an editor extension that brings syntax highlighting:

If you are interested on another editor, please file 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)

About

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

https://styled-ppx.vercel.app

License:BSD 2-Clause "Simplified" License


Languages

Language:Reason 36.9%Language:Raku 27.3%Language:OCaml 18.2%Language:JavaScript 8.7%Language:Perl 6.2%Language:MDX 1.6%Language:ReScript 0.7%Language:Makefile 0.2%Language:CSS 0.1%Language:Shell 0.1%Language:HTML 0.0%