Add Melange and native instructions (#465)

README.md

@@ -1,6 +1,6 @@
 ![styled-ppx-header-light](./.github/header-light.png#gh-dark-mode-only)![styled-ppx-header-dark](./.github/header-dark.png#gh-light-mode-only)
 
-### Typed styled components for ReScript and Melange
+### Typed styled components for ReScript, Melange and Native
 
 ![demo](./.github/demo-dark.png#gh-dark-mode-only)![styled-ppx-demo-dark](./.github/demo-light.png#gh-light-mode-only)
 
@@ -12,7 +12,7 @@ Built on top of [emotion](https://emotion.sh), it allows you to style apps safel
 
 For the entire documentation, visit [styled-ppx.vercel.app](https://styled-ppx.vercel.app)
 
-### Editor Support
+## [Editor Support](https://styled-ppx.vercel.app/editor-support)
 
 We provide an editor extension that brings syntax highlighting:
 

packages/website/site/next.config.mjs

@@ -1,7 +1,7 @@
 import Path from "node:path";
 import URL from "node:url";
 import Fs from "node:fs";
-import nextra from "nextra";
+import Nextra from "nextra";
 import * as Shiki from "shiki";
 import { bundledLanguages } from "shiki/langs";
 
@@ -68,7 +68,7 @@ const duneGrammar = {
   name: "dune",
 };
 
-const withNextra = nextra({
+const withNextra = Nextra({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.tsx",
   mdxOptions: {

packages/website/site/pages/_meta.json

@@ -7,6 +7,7 @@
     }
   },
   "getting-started": "Getting Started",
+  "editor-support": "Editor Support",
   "reference": "API Reference",
   "about": {
     "title": "About",

packages/website/site/pages/getting-started/editor-support.mdx → packages/website/site/pages/editor-support.mdx

@@ -1,4 +1,9 @@
+---
+title: Editor Support
+---
+
 # Editor Support
+
 One of the downsides of embedding a language (CSS) into another language (ReScript/Reason/OCaml) is the limited editor support. Because of that, we provide an editor extension that brings syntax highlighting for the CSS inside the styled-ppx notation.
 
 ## VSCode Extension
@@ -24,4 +29,4 @@ Add `Plugin 'ahrefs/vim-styled-ppx'` to your `~/.vimrc` and run PluginInstall.
 $ git clone https://github.com/ahrefs/vim-styled-ppx ~/.vim/bundle/vim-log-highlighting
 ```
 
-> If you are interested on another editor, please [file an issue](https://github.com/davesnx/styled-ppx/issues/new).
+> If you are interested on another editor, please [file an issue](https://github.com/davesnx/styled-ppx/issues/new).

packages/website/site/pages/getting-started/_meta.json

@@ -1,4 +1,5 @@
 {
   "rescript": "ReScript",
-  "editor-support": "Editor Support"
+  "melange": "Melange",
+  "native": "Native"
 }

packages/website/site/pages/getting-started/melange.mdx

@@ -0,0 +1,92 @@
+---
+title: Getting Started - Melange
+showAllLanguage: false
+---
+
+import { Callout } from "nextra/components";
+import Link from "next/link";
+
+# Melange
+
+Ensure that you have set up a Melange project beforehand. If you haven't done so yet, refer to the Melange getting started [documentation](https://melange.re/v3.0.0/getting-started.html).
+
+This guide assumes that you'll use opam and dune.
+
+### Install
+
+```bash
+opam install styled-ppx
+```
+
+### Packages available
+
+- `styled-ppx` is the ppx
+- `styled-ppx.css` are the CSS bindings
+- `styled-ppx.emotion` are the `emotion.sh` bindings
+
+### Usage
+
+Add `styled-ppx` under dune's preprocess pps for library with `(modes melange)` or `melange.emit`. Add `styled-ppx.css` and `styled-ppx.emotion` as libraries.
+
+```diff
+(library
+  (name ...)
+  (modes melange)
+  (libraries
++   styled-ppx.css
++   styled-ppx.emotion
+    reason-react)
+  (preprocess
+    (pps
++     styled-ppx
+      melange.ppx
+      reason-react-ppx)))
+```
+
+```diff
+(melange.emit
+  (libraries
++   styled-ppx.css
++   styled-ppx.emotion
+    reason-react)
+  (preprocess
+    (pps
++     styled-ppx
+      melange.ppx
+      reason-react-ppx)))
+```
+
+Note: `reason-react` and `reason-react-ppx` are optional, and only needed if you use styled components (`[%styled.div {||}]`).
+
+### Example
+
+```reason
+/* This is a ReasonReact module with those styles encoded as a unique className */
+module Link = [%styled.a (~color=CssJs.hex("4299E1")) => {|
+  font-size: 1.875rem;
+  line-height: 1.5;
+  text-decoration: none;
+  margin: 0px;
+  padding: 10px 0px;
+  color: $(color);
+|}];
+
+/* This is a unique className pointing to those styles */
+let layout = [%cx {|
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center
+|}];
+
+/* Later in a component */
+<div className=layout>
+  <Link
+    color={CssJs.hex("333333")}
+    href="https://sancho.dev"
+    rel="noopener noreferrer">
+    {React.string("sancho.dev")}
+  </Link>
+</div>;
+```

packages/website/site/pages/getting-started/native.mdx

@@ -0,0 +1,93 @@
+---
+title: Getting Started - Native
+showAllLanguage: false
+---
+
+import { Callout } from "nextra/components";
+import Link from "next/link";
+
+# Native
+
+This guide assumes that you'll use opam and dune.
+
+### Install
+
+```bash
+opam install styled-ppx
+```
+
+### Packages available
+
+- `styled-ppx` is the ppx
+- `styled-ppx.css_native` are the CSS bindings
+- `styled-ppx.emotion_native` is a native implementaiton of `emotion.sh` capable of storing CSS, hashing it and generating a unique className, autoprefixing, etc.
+
+### Usage
+
+Add `styled-ppx` under dune's preprocess pps for any library or executable. Add `styled-ppx.css_native` and `styled-ppx.emotion_emotion` as libraries.
+
+```diff
+(library
+  (name ...)
+  (libraries
++  styled-ppx.css
++  styled-ppx.emotion
+   server-reason-react)
+  (preprocess
+   (pps
++   styled-ppx
+    melange.ppx
+    server-reason-react-ppx)))
+```
+
+```diff
+(melange.emit
+  (target ...)
+  (libraries
++  styled-ppx.css
++  styled-ppx.emotion
+   server-reason-react)
+  (preprocess
+   (pps
++   styled-ppx
+    melange.ppx
+    server-reason-react-ppx)))
+```
+
+Note: `server-reason-react` and `server-reason-react-ppx` are optional, and only needed if you use styled components (`[%styled.div {||}]`).
+
+### Example
+
+```reason
+/* This is a server-reason-react module with those styles encoded as a unique className */
+module Link = [%styled.a (~color=CssJs.hex("4299E1")) => {|
+  font-size: 1.875rem;
+  line-height: 1.5;
+  text-decoration: none;
+  margin: 0px;
+  padding: 10px 0px;
+  color: $(color);
+|}];
+
+/* This is a unique className pointing to those styles */
+let layout = [%cx {|
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center
+|}];
+
+/* Later in a component */
+let app =
+  <div className=layout>
+    <Link
+      color={CssJs.hex("333333")}
+      href="https://sancho.dev"
+      rel="noopener noreferrer">
+      {React.string("sancho.dev")}
+    </Link>
+  </div>;
+
+let stylesheet = CssJs.render_style_tag(); /* This will render the stylesheet to be present in the head of the document */
+```