https://github.com/microsoft/griffel

CSS-in-JS with ahead-of-time compilation ⚡️
https://github.com/microsoft/griffel

css css-in-js react

Last synced: 2 days ago
JSON representation

CSS-in-JS with ahead-of-time compilation ⚡️

• Host: GitHub
• URL: https://github.com/microsoft/griffel
• Owner: microsoft
• License: mit
• Created: 2021-12-14T16:38:54.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-26T10:22:46.000Z (16 days ago)
• Last Synced: 2024-12-10T00:39:08.041Z (2 days ago)
• Topics: css, css-in-js, react
• Language: TypeScript
• Homepage: https://griffel.js.org
• Size: 12.4 MB
• Stars: 1,204
• Watchers: 20
• Forks: 61
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Changelog: change/@griffel-eslint-plugin-5a1f549c-cc6f-46c2-82f4-da91901b75cf.json
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: CODEOWNERS
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-javascript - griffel-repository - in-JS with ahead-of-time compilation. (Packages)
• awesome-javascript - griffel-repository - in-JS with ahead-of-time compilation. (Packages)

README

        




  

    

    

  



CSS-in-JS with ahead-of-time compilation ⚡️



  

    

  

  

  

    

  



Griffel ([_German for stylus/pen_](https://en.wiktionary.org/wiki/Griffel)) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.

🚀   Zero config start: Griffel has both runtime & build time implementations

🔥   Optional [build time transforms](./packages/webpack-loader) to improve performance

💪   Type-safe styles via [csstype](https://github.com/frenic/csstype)

🧩   Uses Atomic CSS to reuse styles and avoid specificity issues with CSS

📝   _Experimental_ CSS extraction with [Webpack plugin](./packages/webpack-extraction-plugin)

🐞   Debug using [Griffel DevTools extension](https://chrome.google.com/webstore/detail/griffel-devtools/bejhagjehnpgagkaaeehdpdadmffbigb)

### Griffel with React

```bash

npm install @griffel/react

# or

yarn add @griffel/react

```

- [Quick start](https://griffel.js.org/react/install)

- [API guide](https://griffel.js.org/react/api/make-styles)

- [README](./packages/react)

## Learn more?

Check series episodes of Fluent UI Insights related to styling issues and Griffel 🎥

|                                                                                                           EP02: Styling                                                                                                           |                                                                                                           EP03: Griffel                                                                                                           |

| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |

|  |  |

## Contributing

This project welcomes contributions and suggestions, please see [CONTRIBUTING.md](./CONTRIBUTING.md) to get started.

## Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft

trademarks or logos is subject to and must follow

[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

Any use of third-party trademarks or logos are subject to those third-party's policies.

## License

This project is licensed under the MIT License, see the [LICENSE.md](LICENSE.md) file for details.