Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/davesnx/styled-ppx

Type-safe styled components for ReScript, Melange and native with type-safe CSS
https://github.com/davesnx/styled-ppx

css css-in-js emotion melange ocaml ppx react reason reasonml rescript styled styled-components vscode-extension

Last synced: about 2 months ago
JSON representation

Type-safe styled components for ReScript, Melange and native with type-safe CSS

Host: GitHub
URL: https://github.com/davesnx/styled-ppx
Owner: davesnx
License: bsd-2-clause
Created: 2020-01-22T16:26:03.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2024-04-12T15:00:16.000Z (3 months ago)
Last Synced: 2024-04-14T12:12:18.414Z (3 months ago)
Topics: css, css-in-js, emotion, melange, ocaml, ppx, react, reason, reasonml, rescript, styled, styled-components, vscode-extension
Language: Reason
Homepage: https://styled-ppx.vercel.app
Size: 8.55 MB
Stars: 391
Watchers: 9
Forks: 30
Open Issues: 28
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Lists

awesome-list - styled-ppx
awesome-ppx-reasonml - styled-ppx - styled-components/emotion in Reason and OCaml (PPXs)
awesome-reasonml - styled-ppx - Type-safe styled components for ReScript, Melange and native with type-safe CSS (Reason / Libraries)
my-awesome-stars - davesnx/styled-ppx - Type-safe styled components for ReScript and Melange with type-safe CSS (Reason)
awesome-reasonml - styled-ppx - CSS-in-Reason that mimics [styled-components](https://github.com/styled-components/styled-components) (Reason / Libraries and Bindings)
awesome-stars - styled-ppx - safe styled components for ReScript, Melange and native with type-safe CSS | davesnx | 395 | (Reason)

README

        ![styled-ppx-header-light](./.github/header-light.png#gh-dark-mode-only)![styled-ppx-header-dark](./.github/header-dark.png#gh-light-mode-only)

### Typed styled components for ReScript, Melange and Native

![demo](./.github/demo-dark.png#gh-dark-mode-only)![styled-ppx-demo-dark](./.github/demo-light.png#gh-light-mode-only)

**styled-ppx** is a [ppx](https://tarides.com/blog/2019-05-09-an-introduction-to-ocaml-ppx-ecosystem) and a library that brings styled components to ReScript and Melange. It allows you to create **React Components** with type-safe style definitions that don't rely on a different language ([DSL](https://en.wikipedia.org/wiki/Domain-specific_language)) except CSS, but also can be used without React.

Built on top of [emotion](https://emotion.sh), it allows you to style apps safely, quickly, and performantly - just as you have always done it.

## [Documentation](https://styled-ppx.vercel.app)

For the entire documentation, visit [styled-ppx.vercel.app](https://styled-ppx.vercel.app)

## [Editor Support](https://styled-ppx.vercel.app/editor-support)

We provide an editor extension that brings syntax highlighting:

- Install the **[VSCode Extension](https://marketplace.visualstudio.com/items?itemName=davesnx.vscode-styled-ppx)**

- Install the **[vim plugin](https://github.com/ahrefs/vim-styled-ppx/blob/main/README.md#installation)**

> If you are interested on another editor, please [file an issue](https://github.com/davesnx/styled-ppx/issues/new)

## Contributing

We would love your help improving **styled-ppx**! Please see our contributing and community guidelines; they'll help you get set up locally and explain the whole process: [CONTRIBUTING.md](./CONTRIBUTING.md)

## License

This project is licensed under the [Simplified BSD License (BSD 2-Clause License)](./LICENSE)