@griffel/react 1.0.2 → 1.0.3

package/README.md

@@ -133,6 +133,40 @@ function App() {
 }
 ```
 
+## `createDOMRenderer()`, `RendererProvider`
+
+`createDOMRenderer` is paired with `RendererProvider` component and is useful for child window rendering and SSR scenarios. This is the default renderer for web, and will make sure that styles are injected to a document.
+
+```jsx
+import { createDOMRenderer, RendererProvider } from '@griffel/react';
+
+function App(props) {
+  const { targetDocument } = props;
+  const renderer = React.useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
+
+  return (
+    <RendererProvider renderer={renderer} targetDocument={targetDocument}>
+      {/* Children components */}
+      {/* ... */}
+    </RendererProvider>
+  );
+}
+```
+
+### styleElementAttributes
+
+A map of attributes that's passed to the generated style elements. For example, is useful to set ["nonce" attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).
+
+```js
+import { createDOMRenderer } from '@griffel/react';
+
+const renderer = createDOMRenderer(targetDocument, {
+  styleElementAttributes: {
+    nonce: 'random',
+  },
+});
+```
+
 ## Features support
 
 ### 📃 pseudo & class selectors, at-rules, global styles
@@ -202,3 +236,18 @@ const useClasses = makeStyles({
   },
 });
 ```
+
+### CSS Fallback Properties
+
+Any CSS property accepts an array of values which are all added to the styles.
+Every browser will use the latest valid value (which might be a different one in different browsers, based on supported CSS in that browser):
+
+```js
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    overflowY: ['scroll', 'overlay'],
+  },
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.1.1",
+    "@griffel/core": "^1.2.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {