![X Banner](https://github.com/morfeojs/morfeo/assets/13780027/a7d3d5ae-fe23-4fa4-92be-167cbf76868d)


Morfeo is a build-time CSS-in-TS solution for the next level theming, with the minimum amount of shipped CSS.

---

[![Made with Morfeo](https://img.shields.io/badge/made%20with%20morfeo-0066ff?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxOTAuMjIyIDE3OS4xMjkgNTAgNTAuMDA0IiB3aWR0aD0iNTAiIGhlaWdodD0iNTAuMDA0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0yNy41NzIsNDcuOTIxbDAsMGwxOC40NSwtMTguNDExYzAuMDQ3LC0wLjA1MSAwLjA5NywtMC4xMDEgMC4xNDgsLTAuMTQ4bDAsMGwwLDBjMC40NjMsLTAuNDI2IDEuMDgxLC0wLjY4NyAxLjc1OSwtMC42ODdjMS40MzQsMCAyLjU5OCwxLjE2NSAyLjU5OCwyLjU5OGwwLDE2LjEzMWMwLDEuNDM0IC0xLjE2NCwyLjU5OCAtMi41OTgsMi41OThsLTQ0LjgwNCwwYy0xLjQzNCwwIC0yLjU5OCwtMS4xNjQgLTIuNTk4LC0yLjU5OGwwLDBjMCwwIDAsLTE2LjEzMSAwLC0xNi4xMzFjMCwtMS40MzMgMS4xNjQsLTIuNTk4IDIuNTk4LC0yLjU5OGMwLjc1MSwwIDEuNDI5LDAuMzIgMS45MDMsMC44M2wwLDBsMTguNDUxLDE4LjQxNmMwLjM0MSwwLjM1NiAxLjIxNiwwLjk5NyAyLjA0NywwLjk5N2MwLjgzLDAgMS41MjMsLTAuNDkgMi4wNDYsLTAuOTk3WiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDE4OS42OTUxNzUsIDE3OS4xMzA1NTQpIi8+CiAgPHBhdGggZD0iTTQ3LjI0NCwwLjAwMmMwLjA1NCwtMC4wMDIgMC4xMDgsLTAuMDA0IDAuMTYyLC0wLjAwNGMwLjA1NCwwIDAuMTA4LDAuMDAyIDAuMTYxLDAuMDA0bDAuMDAxLDBjMS41OTksMC4wODUgMi44NzEsMS40MSAyLjg3MSwzLjAyOWMwLDAuOTE3IC0wLjQwOCwxLjczOSAtMS4wNTEsMi4yOTVsMCwwbC0yMS43OSwyMS43OWMtMC41NDIsMC41MDYgLTEuMjc2LDAuODE1IC0yLjA3NCwwLjgxNWMtMC45MDcsMCAtMS43MzEsLTAuNCAtMi4yODcsLTEuMDMxbC0yMS42NTksLTIxLjY3MWwwLDBjLTAuNTgxLC0wLjU1MiAtMC45NDQsLTEuMzMzIC0wLjk0NCwtMi4xOThjMCwtMS42NzQgMS4zNTksLTMuMDMzIDMuMDMzLC0zLjAzM2MwLjA1NSwwIDAuMTA5LDAuMDAyIDAuMTYyLDAuMDA0bDAsMGw0My40MTUsMFoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAxODkuNjk1MTc1LCAxNzkuMTMwNTU0KSIvPgo8L3N2Zz4=)](https://morfeo.dev)
[![codecov](https://codecov.io/gh/morfeojs/morfeo/branch/main/graph/badge.svg?token=CZBHY8J802)](https://codecov.io/gh/morfeojs/morfeo)
[![GitHub license](https://img.shields.io/github/license/morfeojs/morfeo)](https://github.com/morfeojs/morfeo/blob/main/LICENSE)
[![Contributing](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md)
[![DeepScan grade](https://deepscan.io/api/teams/15451/projects/18608/branches/460695/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=15451&pid=18608&bid=460695)

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

# ⚠️ Morfeo V1.0.0 COMING SOON ⚠️

Hello, I'm working to finalize version 1.0.0 of Morfeo, it will include many nice features such as static extraction of `CSS`, optimization of the extracted `CSS`, minimal runtime overhead, and a beautiful `DX`.

Until the v1, Morfeo is NOT PRODUCTION READY since its API can change drastically - but if you're interested in what we're doing have a look to the new [docs](https://morfeo-docs.vercel.app/) or contact us through [Discord](https://badgen.net/badge/icon/discord?icon=discord&label) or open an issue and we'll be glad to answer.

---

Morfeo is a build-time CSS-in-JS solution for the next level theming, with the minimum amount of shipped CSS.

## Show your support

If this project helped you, please ⭐️ this repository!

In case you used Morfeo in your project and you want to show it to the world, you can use one of these badges in your `README` or your website:

[![Made with Morfeo](https://img.shields.io/badge/made%20with%20morfeo-0066ff?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxOTAuMjIyIDE3OS4xMjkgNTAgNTAuMDA0IiB3aWR0aD0iNTAiIGhlaWdodD0iNTAuMDA0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0yNy41NzIsNDcuOTIxbDAsMGwxOC40NSwtMTguNDExYzAuMDQ3LC0wLjA1MSAwLjA5NywtMC4xMDEgMC4xNDgsLTAuMTQ4bDAsMGwwLDBjMC40NjMsLTAuNDI2IDEuMDgxLC0wLjY4NyAxLjc1OSwtMC42ODdjMS40MzQsMCAyLjU5OCwxLjE2NSAyLjU5OCwyLjU5OGwwLDE2LjEzMWMwLDEuNDM0IC0xLjE2NCwyLjU5OCAtMi41OTgsMi41OThsLTQ0LjgwNCwwYy0xLjQzNCwwIC0yLjU5OCwtMS4xNjQgLTIuNTk4LC0yLjU5OGwwLDBjMCwwIDAsLTE2LjEzMSAwLC0xNi4xMzFjMCwtMS40MzMgMS4xNjQsLTIuNTk4IDIuNTk4LC0yLjU5OGMwLjc1MSwwIDEuNDI5LDAuMzIgMS45MDMsMC44M2wwLDBsMTguNDUxLDE4LjQxNmMwLjM0MSwwLjM1NiAxLjIxNiwwLjk5NyAyLjA0NywwLjk5N2MwLjgzLDAgMS41MjMsLTAuNDkgMi4wNDYsLTAuOTk3WiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDE4OS42OTUxNzUsIDE3OS4xMzA1NTQpIi8+CiAgPHBhdGggZD0iTTQ3LjI0NCwwLjAwMmMwLjA1NCwtMC4wMDIgMC4xMDgsLTAuMDA0IDAuMTYyLC0wLjAwNGMwLjA1NCwwIDAuMTA4LDAuMDAyIDAuMTYxLDAuMDA0bDAuMDAxLDBjMS41OTksMC4wODUgMi44NzEsMS40MSAyLjg3MSwzLjAyOWMwLDAuOTE3IC0wLjQwOCwxLjczOSAtMS4wNTEsMi4yOTVsMCwwbC0yMS43OSwyMS43OWMtMC41NDIsMC41MDYgLTEuMjc2LDAuODE1IC0yLjA3NCwwLjgxNWMtMC45MDcsMCAtMS43MzEsLTAuNCAtMi4yODcsLTEuMDMxbC0yMS42NTksLTIxLjY3MWwwLDBjLTAuNTgxLC0wLjU1MiAtMC45NDQsLTEuMzMzIC0wLjk0NCwtMi4xOThjMCwtMS42NzQgMS4zNTksLTMuMDMzIDMuMDMzLC0zLjAzM2MwLjA1NSwwIDAuMTA5LDAuMDAyIDAuMTYyLDAuMDA0bDAsMGw0My40MTUsMFoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAxODkuNjk1MTc1LCAxNzkuMTMwNTU0KSIvPgo8L3N2Zz4=)](https://morfeo.dev)

[![Made with Morfeo](https://img.shields.io/badge/made%20with-%20morfeo-0066ff?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MSA1MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cmVjdCBpZD0iXzUwLWZ1bGwiIHNlcmlmOmlkPSI1MC1mdWxsIiB4PSIwLjUyNyIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBzdHlsZT0iZmlsbDpub25lOyIvPjxjbGlwUGF0aCBpZD0iX2NsaXAxIj48cmVjdCB4PSIwLjUyNyIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAxKSI+PGc+PHBhdGggZD0iTTI3LjU3Miw0Ny45MjFsMCwwbDE4LjQ1LC0xOC40MTFjMC4wNDcsLTAuMDUxIDAuMDk3LC0wLjEwMSAwLjE0OCwtMC4xNDhsMCwwbDAsMGMwLjQ2MywtMC40MjYgMS4wODEsLTAuNjg3IDEuNzU5LC0wLjY4N2MxLjQzNCwwIDIuNTk4LDEuMTY1IDIuNTk4LDIuNTk4bDAsMTYuMTMxYzAsMS40MzQgLTEuMTY0LDIuNTk4IC0yLjU5OCwyLjU5OGwtNDQuODA0LDBjLTEuNDM0LDAgLTIuNTk4LC0xLjE2NCAtMi41OTgsLTIuNTk4bDAsMGMwLDAgMCwtMTYuMTMxIDAsLTE2LjEzMWMwLC0xLjQzMyAxLjE2NCwtMi41OTggMi41OTgsLTIuNTk4YzAuNzUxLDAgMS40MjksMC4zMiAxLjkwMywwLjgzbDAsMGwxOC40NTEsMTguNDE2YzAuMzQxLDAuMzU2IDEuMjE2LDAuOTk3IDIuMDQ3LDAuOTk3YzAuODMsMCAxLjUyMywtMC40OSAyLjA0NiwtMC45OTdaIiBzdHlsZT0iZmlsbDojMDZmOyIvPjxwYXRoIGQ9Ik00Ny4yNDQsMC4wMDJjMC4wNTQsLTAuMDAyIDAuMTA4LC0wLjAwNCAwLjE2MiwtMC4wMDRjMC4wNTQsMCAwLjEwOCwwLjAwMiAwLjE2MSwwLjAwNGwwLjAwMSwwYzEuNTk5LDAuMDg1IDIuODcxLDEuNDEgMi44NzEsMy4wMjljMCwwLjkxNyAtMC40MDgsMS43MzkgLTEuMDUxLDIuMjk1bDAsMGwtMjEuNzksMjEuNzljLTAuNTQyLDAuNTA2IC0xLjI3NiwwLjgxNSAtMi4wNzQsMC44MTVjLTAuOTA3LDAgLTEuNzMxLC0wLjQgLTIuMjg3LC0xLjAzMWwtMjEuNjU5LC0yMS42NzFsMCwwYy0wLjU4MSwtMC41NTIgLTAuOTQ0LC0xLjMzMyAtMC45NDQsLTIuMTk4YzAsLTEuNjc0IDEuMzU5LC0zLjAzMyAzLjAzMywtMy4wMzNjMC4wNTUsMCAwLjEwOSwwLjAwMiAwLjE2MiwwLjAwNGwwLDBsNDMuNDE1LDBaIiBzdHlsZT0iZmlsbDojMDZmOyIvPjwvZz48L2c+PC9zdmc+)](https://morfeo.dev)

> To see the markdown code just check the raw version of this README [here](https://raw.githubusercontent.com/morfeojs/morfeo/main/README.md).

## Sponsors

### 🥇 Gold Sponsors

<div style="display: flex; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px">
    <a href="https://vlkstudio.com" title="vlkstudio">
      <img src="https://vlkstudio.com/assets/logo.svg" height="128px" width="128px" title="VLK Studio" />
    </a>
  </div>
  <!-- Add more Gold sponsors here by using this template -->
  <!-- <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px">
    <a href="{WEBSITE_URL}" title="{NAME}">
      <img src="{LOGO_URL}" height="128px" width="128px" title="{NAME}" />
    </a>
  </div> -->
</div>

### 🥈 Silver Sponsors

<div style="display: flex; flex-wrap: wrap">
  <!-- Add more Silver sponsors here by using this template -->
  <!-- <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px">
    <a href="{WEBSITE_URL}" title="{NAME}">
      <img src="{LOGO_URL}" height="64px" width="64px" title="{NAME}" />
    </a>
  </div> -->
</div>

### 🥉 Bronze Sponsors

<div style="display: flex; flex-wrap: wrap">
  <!-- Add more Bronze sponsors here by using this template -->
  <!-- <div style="display: flex; flex-direction: column; align-items: center; margin: 0 20px">
    <a href="{WEBSITE_URL}" title="{NAME}">
      <img src="{LOGO_URL}" height="48px" width="48px" title="{NAME}" />
    </a>
  </div> -->
</div>

## Contributors

<a href="https://github.com/morfeojs/morfeo/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=morfeojs/morfeo" />
</a>

Made with [contrib.rocks](https://contrib.rocks)