Getting Started

Depends on bs-css with bs-css-emotion and rescript-react, make sure you have them installed first.

Install

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

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

Update `bsconfig.json`

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

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

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

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 and follow the installation instructions there.

Editor Support

One of the downsides of embedding a language (CSS) into another (ReScript) is the limited editor support. Because of that, we provide editor extensions that bring syntax highlighting for the CSS inside the styled-ppx notation.

VSCode Extension

Install the VSCode Extension via the marketplace or via the command line:

ext install davesnx.vscode-styled-ppx

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

$ git clone https://github.com/ahrefs/vim-styled-ppx ~/.vim/bundle/vim-log-highlighting

If you are interested on another editor, please fill an issue.