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: 15 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 (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-30T19:39:51.000Z (28 days ago)
- Last Synced: 2025-05-08T08:40:59.883Z (21 days ago)
- Topics: css, css-in-js, react
- Language: TypeScript
- Homepage: https://griffel.js.org
- Size: 13 MB
- Stars: 1,236
- Watchers: 18
- Forks: 63
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Changelog: change/@griffel-babel-preset-24b642fa-66e8-4a6a-9ed1-cccdcd3f72d2.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.