https://github.com/hyper-systems/rescript-sx

Styling extension for ReScript.
https://github.com/hyper-systems/rescript-sx

Last synced: about 1 month ago
JSON representation

Styling extension for ReScript.

• Host: GitHub
• URL: https://github.com/hyper-systems/rescript-sx
• Owner: hyper-systems
• License: mit
• Created: 2021-10-04T14:30:47.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-22T12:19:02.000Z (over 3 years ago)
• Last Synced: 2025-04-06T06:12:14.549Z (about 2 months ago)
• Language: OCaml
• Size: 141 KB
• Stars: 38
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sx - styling extensions

[![npm version](https://img.shields.io/npm/v/@hyper-systems/rescript-sx.svg)](https://www.npmjs.com/package/@hyper-systems/rescript-sx)

[![license](https://img.shields.io/npm/l/@hyper-systems/rescript-sx.svg)](https://www.npmjs.com/package/@hyper-systems/rescript-sx)

Sx is a just-in-time CSS generator based on the Tailwind API.

```rescript

module Button = {

  @react.component

  let make = () => {

    

      {React.string("Click!")}

    

  }

}

```

The `%sx(...)` ppx will generate a static CSS file during the build phase with the following content:

```css

.bg-white {

  background-color: #fff;

}

.border-1 {

  border-width: 1px;

}

.border-purple-700 {

  border-color: #6b46c1;

}

.hover\:bg-purple-700:hover {

  background-color: #6b46c1;

}

.hover\:text-white:hover {

  color: #fff;

}

.p-2 {

  padding: 0.5rem;

}

.text-black {

  color: #000;

}

.text-center {

  text-align: center;

}

.text-lg {

  font-size: 1.125rem;

}

```

## Installation

Install the package:

```

$ npm i @hyper-systems/rescript-sx@nightly

```

Enable the ppx in `bsconfig.json`:

```json

  "ppx-flags": [

    "sx_ppx --output=sx.gen.css"

  ]

```

This will generate a static CSS file called `sx.gen.css` that can be loaded directly in your HTML.