styled-ppx
styled-ppx is the ppx that enables CSS-in-Reason.
Allows you to create React Components with style definitions with CSS that don't rely on a specific DSL and keeps type-safety with great error messages. Build on top of bs-emotion, it allows you to style apps quickly, performant and as you always done it.
⚠️ Early stage This ppx is in a early stage. Meaning that it doesn't support full functionality as emotion or styled-components. But you can safely use it, as it would respect Compatible Versioning. In case you want to know more, take a look at the ROADMAP, or feel free to chat on Discord: @davesnx#5641
Usage
styled-ppx
implements a ppx that transforms [%styled]
extensions points into [@react.components]
modules with bs-emotion as styles, which does all the CSS-in-JS under the hood thanks to emotion.
This is how you can write components in ReasonML or OCaml with this ppx:
Standard styled component
module StyledComponent = [%styled.div {|
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
|}];
ReactDOMRe.renderToElementWithId(
<StyledComponent>
{React.string("- Middle -")}
</StyledComponent>,
"app"
);
Dynamic styled component
module Dynamic = [%styled (~content, ~background) => {j|
color: $(content);
background-color: $(background);
|j}];
ReactDOMRe.renderToElementWithId(
<Dynamic content="#EB5757" background="#516CF0" />
{React.string("Hello!")}
</Dynamic>,
"app"
);
Inline css function
ReactDOMRe.renderToElementWithId(
<span className=[%css "font-size: 34px"]/>
{React.string("Hello!")}
</span>,
"app"
);
For further detail, take a look in here.
Motivation
I love CSS and I'm coming from the JavaScript world: writing React with styled-components mostly. I found it, one of the best combos to write scalable frontend applications and wasn't a reality in ReasonML/OCaml.
As well, saw a few people asking for it (a few times). So I took the time to create it with help from @jchavarri
If you want to know more, I really do recommend watching my talk at WFH 2020.
Installation
This package depends on bs-emotion, ReasonReact and BuckleScript, make sure you follow their instalations.
esy
on native projects
With esy add davesnx/styled-ppx
npm
or yarn
on BuckleScript projects
With yarn add @davesnx/styled-ppx @ahrefs/bs-emotion
# Or
npm install @davesnx/styled-ppx @ahrefs/bs-emotion
And add the PPX in your bsconfig.json
file:
{
"bs-dependencies": [
"reason-react",
"@ahrefs/bs-emotion"
],
"ppx-flags": ["@davesnx/styled-ppx/styled-ppx"]
}
However, if you want to use esy
in BuckleScript:
Create an esy.json
file with the content:
{
"dependencies": {
"styled-ppx": "*",
"ocaml": "~4.6.1000"
},
"resolutions": {
"styled-ppx": "davesnx/styled-ppx"
}
}
And add the PPX in your bsconfig.json
file:
{
"ppx-flags": ["esy x styled-ppx.exe"]
}
If you want to try out of the box a project, just visit https://github.com/davesnx/try-styled-ppx and follow the instalation process there.
Thanks to
Thanks to Javier Chávarri, for helping me understand all the world of OCaml and his knowledge about ppx's. It has been a great experience.
Inspired by @astrada bs-css-ppx
and his CSS Parser.
Thanks to ahrefs/bs-emotion and emotion.
Contributing
We would love your help improving styled-ppx, there's still a lot to do. The roadmap lives under the Projects in GitHub. Take a look, the tasks are well organized and clear for everybody to pick any!
You need esy
, you can install the latest version from npm:
yarn global add esy@latest
# Or
npm install -g esy@latest
NOTE: Make sure
esy --version
returns at least0.5.8
for this project to build.
Then run the esy
command from this project root to install and build depenencies.
esy
Now you can run your editor within the environment (which also includes merlin):
esy $EDITOR
esy vim
After you make some changes to source code, you can re-run project's build
again with the same simple esy
command and run the native tests with
esy test
This project uses Dune as a build system, if you add a dependency in your package.json
file, don't forget to add it to your dune
and dune-project
files too.
Running Tests
You can test compiled executable (runs scripts.tests
specified in esy.json
):
This will run the native unit test.
esy test
This tests only ensures that the output looks exactly as a snapshot, so their mission are to ensure the ppx transforms to a valid OCaml syntax.
If you want to run Bucklescript's integration test instead, you can do:
esy
cd test/bucklescript
yarn install
yarn build
yarn test
This tests are more like an end to end tests, that ensures that emotion have the correct methods for each CSS property.