Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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-09-24T13:11:47.000Z (about 2 months ago)
- Last Synced: 2024-10-02T00:02:30.649Z (about 1 month ago)
- Topics: css, css-in-js, react
- Language: TypeScript
- Homepage: https://griffel.js.org
- Size: 13.8 MB
- Stars: 1,181
- Watchers: 20
- Forks: 60
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Changelog: change/@griffel-eslint-plugin-af581fe2-88f5-44cb-bb57-3d71b2cfcf03.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.