https://github.com/MinimaHQ/rescript-linaria
ReScript bindings to Linaria
https://github.com/MinimaHQ/rescript-linaria
Last synced: 10 months ago
JSON representation
ReScript bindings to Linaria
- Host: GitHub
- URL: https://github.com/MinimaHQ/rescript-linaria
- Owner: MinimaHQ
- Created: 2020-11-23T11:11:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T19:28:38.000Z (about 4 years ago)
- Last Synced: 2024-10-30T20:03:50.190Z (over 1 year ago)
- Language: Reason
- Size: 214 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
Awesome Lists containing this project
- awesome-list - rescript-linaria
README
# rescript-linaria
[ReScript](https://rescript-lang.org) bindings to [Linaria](https://github.com/callstack/linaria).
## Should I use it?
Most likely, no. After using it on my personal site, I wouldn't recommend it for something more or less critical. This PPX is a big fat hack and it shows.
## About
These bindings are unsafe. It means you won't get typed CSS.
What you'll get:
- Type-safe and auto-completable classnames
- Everything Linaria offers, such as:
- Static extraction
- Functions / variables sharing between ReScript and CSS
It works only with ReScript syntax.
## Installation
You need to install and configure Linaria. Please, refer to [their docs](https://github.com/callstack/linaria#installation).
Install these bindings:
```sh
# yarn
yarn add rescript-linaria
# or npm
npm install --save rescript-linaria
```
As it's implemented as PPX, you need to add this to your `bsconfig.json`:
```json
"ppx-flags": [
"rescript-linaria/ppx"
],
```
See [example](./examples) of its usage with Webpack.
## Usage
### Basic
```rescript
moodule Css = %css(
let cn = css`
display: flex;
position: relative;
`
)
@react.component
let make = () =>
```
⚠️⚠️⚠️ Everything inside `css` tagged template **is unsound**, including interpolations. It is 100% unsafe territory. What you type inside this tag goes directly to JS without any background checks. You basically write `%raw` JS, which gets slightly modified by PPX so Linaria can pick it up.
### Interpolations
```rescript
moodule Css = %css(
let pad = 5
let cn = css`
padding: ${pad}px;
color: ${Color.text};
`
)
```
You can interpolate:
- everything that Linaria accepts for interpolation:
- primitives, such as strings, numbers, etc
- applications of general functions
- applications of functions with pipes are also supported
You can't interpolate:
- applications of functions with labeled/optional arguments
- applications of functions with placeholder arguments
- externals (you must bind external to a variable first)
- other ReScript-only things, such as variants
### Placement
It is required to have exactly 1 `%css` module within 1 ReScript file.
You can place `%css` module either:
- in `.res` module as a submodule, as shown in the examples above
- or in its own file using `include`:
```rescript
// AppStyles.res
include %css(
// your css...
)
```
---
You can find more examples [here](./examples).