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: 14 days 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 (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T15:00:16.000Z (7 months ago)
• Last Synced: 2024-04-14T12:12:18.414Z (7 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

Awesome Lists containing this project

• awesome-list - styled-ppx

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, Melange and Native. Create **React Components** or simply `class` with type-safe style definitions wiht only CSS.

 Built on top of [emotion](https://emotion.sh), it allows you to style apps safely, quickly, and performantly - just as you 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)