Getting Started

Getting Started

Depends on rescript-react (opens in a new tab). Please make sure you have it installed first.

Install

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

Update bsconfig.json

Add "@davesnx/styled-ppx/ppx" under bsconfig "ppx-flags". The diff on bsconfig.json should contain the following:

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

(Added in v0.40.0)

  • @davesnx/styled-ppx/css are the CSS bindings.
  • @davesnx/styled-ppx/emotion are the bindings to emotion.sh.

Example

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);
`)
 
module Layout = %styled.div([|
  %css("display: flex"),
  %css("width: 100%;"),
  %css("height: 100%;"),
  %css("justify-content: center;"),
  %css("align-items: center"),
|])
 
/* Later in a component */
<Layout>
  <Link
    color=CssJs.hex("333333")
    href="https://sancho.dev"
    rel="noopener noreferrer"
  />
  <span className={%cx(`color: black; position: absolute; left: 0px;`)}>
    {React.string("sancho.dev")}
  </span>
</Layout>
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);
|}];
 
module Layout = [%styled.div [|
  [%css "display: flex"],
  [%css "width: 100%;"],
  [%css "height: 100%;"],
  [%css "justify-content: center;"],
  [%css "align-items: center"],
|]];
 
/* Later in a component */
<Layout>
  <Link
    color={CssJs.hex("333333")}
    href="https://sancho.dev"
    rel="noopener noreferrer"
  />
  <span className=[%cx {|color: black; position: absolute; left: 0px;|}]>
    {React.string("sancho.dev")}
  </span>
</Layout>;

Playground

If you want to try it out, just fork https://github.com/davesnx/try-styled-ppx (opens in a new tab) and follow the installation instructions there.

Editor Support

One of the downsides of embedding a language (CSS) into another language (ReScript) 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

Install the VSCode Extension (opens in a new tab) via the marketplace or via the command line:

ext install davesnx.vscode-styled-ppx

vim plugin

Install the vim plugin with VimPlug, Vundle or Pathogen:

with VimPlug

Add Plug 'ahrefs/vim-styled-ppx' to your ~/.vimrc and run PlugInstall.

with Vundle

Add Plugin 'ahrefs/vim-styled-ppx' to your ~/.vimrc and run PluginInstall.

with Pathogen
$ 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 (opens in a new tab).