griffel
griffel copied to clipboard
microsoft
CSS-in-JS with ahead-of-time compilation ⚡️
I see that the `@griffel/babel-preset` depends on `@linaria`, which in turn [has mechanisms](https://github.com/callstack/linaria/blob/master/docs/LINTING.md) to run [`stylelint`](https://stylelint.io/) over the resulting CSS. However, I cannot seem to get it working with Griffel....
```ts const useStyles = makeStyles({ root: { [` & .item:hover, & .item-selected `]: { backgroundColor: '#fff', } } }); ```
# TODO Update PR to reflect removal of `@griffel/babel-preset`. ## Summary This PR upgrades `@griffel/babel-preset` and `@griffel/webpack-loader` to use [wyw-in-js](https://wyw-in-js.dev/). wyw-in-js introduces a concept of processors to handle different CSS-in-JS...
When an invalid CSS rule is found during runtime, Griffel does not inject the rule and logs an error to console:  When the same rule is found during build...
React devtools (https://www.npmjs.com/package/react-devtools) can be used in headless mode to debug Electron & Webview2 apps. We need to explore the same approach for devtools in Griffel.
When using nested attribute selectors that contains commas, they generate incorrect styles, inserting ampersands after the comma. For example: ``` '& [style*="color: rgb(245, 240, 241);"]': { color: 'black !important' },...
If a component is already setting the font-family, there is no way to completely remove the font-family property. The only option is to set the font-family to a new, valid...
Implements a stylelint config for griffel that uses the postcss syntax. Also adds tests for stylelint integration.
One thing I feel would really make Griffel complete would be to add docs for other frameworks, and remove the "for React.js" from the homepage. Make React support a "batteries...
When creating a new try-it-out playground for new features, it always breaks because the playground uses the latest released version of Griffel. Would be a nice enhancement for local DX...