@griffel/react 1.0.0 → 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
@@ -149,7 +183,7 @@ const useClasses = makeStyles({
     // :link, :focus, etc.
 
     '.foo': { color: 'black' },
-    ':nth-child(2n)': { background: '#fafafa' },
+    ':nth-child(2n)': { backgroundColor: '#fafafa' },
 
     '@media screen and (max-width: 992px)': { color: 'orange' },
     '@supports (display: grid)': { color: 'red' },
@@ -164,8 +198,8 @@ import { makeStyles } from '@griffel/react';
 
 const useClasses = makeStyles({
   root: {
-    ':global(html[data-whatintent="mouse"])': { background: 'yellow' },
-    // outputs: html[data-whatintent="mouse"] .abcd { background: yellow }
+    ':global(html[data-whatintent="mouse"])': { backgroundColor: 'yellow' },
+    // outputs: html[data-whatintent="mouse"] .abcd { background-color: yellow }
   },
 });
 ```
@@ -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/RendererContext.cjs.js

@@ -5,20 +5,39 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@griffel/core');
 var React = require('react');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 /**
  * Verifies if an application can use DOM.
  */
 
 function canUseDOM() {
-  return typeof window !== 'undefined' && !!(window.document && // eslint-disable-next-line deprecation/deprecation
-  window.document.createElement);
+  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
 }
 /**
  * @private
  */
 
 
-const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/core.createDOMRenderer());
+const RendererContext = /*#__PURE__*/React__namespace.createContext( /*#__PURE__*/core.createDOMRenderer());
 /**
  * @public
  */
@@ -32,14 +51,14 @@ const RendererProvider = ({
     // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after
     // mounting.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useMemo(() => {
+    React__namespace.useMemo(() => {
       // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
       // avoid double insertion of classes
       core.rehydrateRendererCache(renderer, targetDocument);
     }, [renderer, targetDocument]);
   }
 
-  return /*#__PURE__*/React.createElement(RendererContext.Provider, {
+  return /*#__PURE__*/React__namespace.createElement(RendererContext.Provider, {
     value: renderer
   }, children);
 };
@@ -50,8 +69,9 @@ const RendererProvider = ({
  */
 
 function useRenderer() {
-  return React.useContext(RendererContext);
+  return React__namespace.useContext(RendererContext);
 }
 
 exports.RendererProvider = RendererProvider;
 exports.useRenderer = useRenderer;
+//# sourceMappingURL=RendererContext.cjs.js.map

package/RendererContext.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RendererContext.cjs.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n}\n\n/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }, [renderer, targetDocument]);\n  }\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAK,CAACC,aAAN,eAAqCC,sBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,gBAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,2BAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,8BAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,gBAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;;"}

package/RendererContext.esm.js

@@ -6,8 +6,7 @@ import * as React from 'react';
  */
 
 function canUseDOM() {
-  return typeof window !== 'undefined' && !!(window.document && // eslint-disable-next-line deprecation/deprecation
-  window.document.createElement);
+  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
 }
 /**
  * @private
@@ -50,3 +49,4 @@ function useRenderer() {
 }
 
 export { RendererProvider, useRenderer };
+//# sourceMappingURL=RendererContext.esm.js.map

package/RendererContext.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RendererContext.esm.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n}\n\n/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }, [renderer, targetDocument]);\n  }\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAN,eAAqCC,iBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,KAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,sBAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,mBAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,KAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;"}

package/TextDirectionContext.cjs.js

@@ -4,11 +4,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 /**
  * @private
  */
 
-const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
+const TextDirectionContext = /*#__PURE__*/React__namespace.createContext('ltr');
 /**
  * @public
  */
@@ -17,7 +37,7 @@ const TextDirectionProvider = ({
   children,
   dir
 }) => {
-  return /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
+  return /*#__PURE__*/React__namespace.createElement(TextDirectionContext.Provider, {
     value: dir
   }, children);
 };
@@ -28,8 +48,9 @@ const TextDirectionProvider = ({
  */
 
 function useTextDirection() {
-  return React.useContext(TextDirectionContext);
+  return React__namespace.useContext(TextDirectionContext);
 }
 
 exports.TextDirectionProvider = TextDirectionProvider;
 exports.useTextDirection = useTextDirection;
+//# sourceMappingURL=TextDirectionContext.cjs.js.map

package/TextDirectionContext.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDirectionContext.cjs.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;AAGA,MAAMA,oBAAoB,gBAAGC,gBAAK,CAACC,aAAN,CAAmC,KAAnC,CAA7B;AAEA;;;;MAGaC,qBAAqB,GAAyC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD;AACzE,sBAAOJ,8BAAA,CAACD,oBAAoB,CAACM,QAAtB;AAA+BC,IAAAA,KAAK,EAAEF;GAAtC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBI;AACd,SAAOP,gBAAK,CAACQ,UAAN,CAAiBT,oBAAjB,CAAP;AACD;;;;;"}

package/TextDirectionContext.esm.js

@@ -28,3 +28,4 @@ function useTextDirection() {
 }
 
 export { TextDirectionProvider, useTextDirection };
+//# sourceMappingURL=TextDirectionContext.esm.js.map

package/TextDirectionContext.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDirectionContext.esm.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;AAOA;;;;AAGA,MAAMA,oBAAoB,gBAAGC,KAAK,CAACC,aAAN,CAAmC,KAAnC,CAA7B;AAEA;;;;MAGaC,qBAAqB,GAAyC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD;AACzE,sBAAOJ,mBAAA,CAACD,oBAAoB,CAACM,QAAtB;AAA+BC,IAAAA,KAAK,EAAEF;GAAtC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBI;AACd,SAAOP,KAAK,CAACQ,UAAN,CAAiBT,oBAAjB,CAAP;AACD;;;;"}

package/__styles.cjs.js

@@ -26,3 +26,4 @@ function __styles(classesMapBySlot, cssRules) {
 }
 
 exports.__styles = __styles;
+//# sourceMappingURL=__styles.cjs.js.map

package/__styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__styles.cjs.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["import { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __styles<Slots extends string>(\n  classesMapBySlot: CSSClassesMapBySlot<Slots>,\n  cssRules: CSSRulesByBucket,\n) {\n  const getStyles = vanillaStyles(classesMapBySlot, cssRules);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__styles","classesMapBySlot","cssRules","getStyles","vanillaStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;AAMA;;;;;AAKA;;SACgBA,SACdC,kBACAC;AAEA,QAAMC,SAAS,GAAGC,aAAa,CAACH,gBAAD,EAAmBC,QAAnB,CAA/B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AAEA,WAAON,SAAS,CAAC;AAAEG,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/__styles.esm.js

@@ -22,3 +22,4 @@ function __styles(classesMapBySlot, cssRules) {
 }
 
 export { __styles };
+//# sourceMappingURL=__styles.esm.js.map

package/__styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__styles.esm.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["import { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __styles<Slots extends string>(\n  classesMapBySlot: CSSClassesMapBySlot<Slots>,\n  cssRules: CSSRulesByBucket,\n) {\n  const getStyles = vanillaStyles(classesMapBySlot, cssRules);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__styles","classesMapBySlot","cssRules","getStyles","vanillaStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;AAMA;;;;;AAKA;;SACgBA,SACdC,kBACAC;AAEA,QAAMC,SAAS,GAAGC,UAAa,CAACH,gBAAD,EAAmBC,QAAnB,CAA/B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AAEA,WAAON,SAAS,CAAC;AAAEG,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/index.cjs.js

@@ -30,3 +30,4 @@ exports.renderToStyleElements = renderToStyleElements.renderToStyleElements;
 exports.RendererProvider = RendererContext.RendererProvider;
 exports.TextDirectionProvider = TextDirectionContext.TextDirectionProvider;
 exports.__styles = __styles.__styles;
+//# sourceMappingURL=index.cjs.js.map

package/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.esm.js

@@ -5,3 +5,4 @@ export { renderToStyleElements } from './renderToStyleElements.esm.js';
 export { RendererProvider } from './RendererContext.esm.js';
 export { TextDirectionProvider } from './TextDirectionContext.esm.js';
 export { __styles } from './__styles.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/makeStaticStyles.cjs.js

@@ -23,3 +23,4 @@ function makeStaticStyles(styles) {
 }
 
 exports.makeStaticStyles = makeStaticStyles;
+//# sourceMappingURL=makeStaticStyles.cjs.js.map

package/makeStaticStyles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeStaticStyles.cjs.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles);\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {};\n  }\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n    const options: MakeStaticStylesOptions = { renderer };\n\n    return getStyles(options);\n  };\n}\n"],"names":["makeStaticStyles","styles","getStyles","vanillaMakeStaticStyles","process","env","NODE_ENV","useStaticStyles","renderer","useRenderer","options"],"mappings":";;;;;;;SAKgBA,iBAAiBC;AAC/B,QAAMC,SAAS,GAAGC,qBAAuB,CAACF,MAAD,CAAzC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,MAA7B,EAAqC;AACnC;AACA,WAAO,QAAP;AACD;;AAED,SAAO,SAASC,eAAT;AACL,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AACA,UAAMC,OAAO,GAA4B;AAAEF,MAAAA;AAAF,KAAzC;AAEA,WAAON,SAAS,CAACQ,OAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/makeStaticStyles.d.ts

@@ -1,2 +1,2 @@
 import type { GriffelStaticStyles } from '@griffel/core';
-export declare function makeStaticStyles<Selectors>(styles: GriffelStaticStyles | GriffelStaticStyles[]): () => void;
+export declare function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]): () => void;

package/makeStaticStyles.esm.js

@@ -19,3 +19,4 @@ function makeStaticStyles(styles) {
 }
 
 export { makeStaticStyles };
+//# sourceMappingURL=makeStaticStyles.esm.js.map

package/makeStaticStyles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeStaticStyles.esm.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles);\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {};\n  }\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n    const options: MakeStaticStylesOptions = { renderer };\n\n    return getStyles(options);\n  };\n}\n"],"names":["makeStaticStyles","styles","getStyles","vanillaMakeStaticStyles","process","env","NODE_ENV","useStaticStyles","renderer","useRenderer","options"],"mappings":";;;SAKgBA,iBAAiBC;AAC/B,QAAMC,SAAS,GAAGC,kBAAuB,CAACF,MAAD,CAAzC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,MAA7B,EAAqC;AACnC;AACA,WAAO,QAAP;AACD;;AAED,SAAO,SAASC,eAAT;AACL,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AACA,UAAMC,OAAO,GAA4B;AAAEF,MAAAA;AAAF,KAAzC;AAEA,WAAON,SAAS,CAACQ,OAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/makeStyles.cjs.js

@@ -7,10 +7,30 @@ var React = require('react');
 var RendererContext = require('./RendererContext.cjs.js');
 var TextDirectionContext = require('./TextDirectionContext.cjs.js');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 function isInsideComponent() {
   try {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useContext({});
+    React__namespace.useContext({});
     return true;
   } catch (e) {
     return false;
@@ -37,3 +57,4 @@ function makeStyles(stylesBySlots) {
 }
 
 exports.makeStyles = makeStyles;
+//# sourceMappingURL=makeStyles.cjs.js.map

package/makeStyles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction isInsideComponent() {\n  try {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useContext({} as unknown as React.Context<unknown>);\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["isInsideComponent","React","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAASA,iBAAT;AACE,MAAI;AACF;AACAC,IAAAA,gBAAK,CAACC,UAAN,CAAiB,EAAjB;AACA,WAAO,IAAP;AACD,GAJD,CAIE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,eAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIV,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIW,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/makeStyles.esm.js

@@ -33,3 +33,4 @@ function makeStyles(stylesBySlots) {
 }
 
 export { makeStyles };
+//# sourceMappingURL=makeStyles.esm.js.map

package/makeStyles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction isInsideComponent() {\n  try {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useContext({} as unknown as React.Context<unknown>);\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["isInsideComponent","React","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;AAOA,SAASA,iBAAT;AACE,MAAI;AACF;AACAC,IAAAA,KAAK,CAACC,UAAN,CAAiB,EAAjB;AACA,WAAO,IAAP;AACD,GAJD,CAIE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,YAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIV,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIW,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -8,13 +8,14 @@
     "url": "https://github.com/microsoft/griffel"
   },
   "sideEffects": false,
+  "dependencies": {
+    "@griffel/core": "^1.2.0",
+    "tslib": "^2.1.0"
+  },
   "peerDependencies": {
     "react": ">=16.8.0 <18.0.0"
   },
   "main": "./index.cjs.js",
   "module": "./index.esm.js",
-  "typings": "./index.d.ts",
-  "dependencies": {
-    "@griffel/core": "1.0.7"
-  }
-}
+  "typings": "./index.d.ts"
+}

package/renderToStyleElements.cjs.js

@@ -5,6 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@griffel/core');
 var React = require('react');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 /**
  * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
  *
@@ -30,7 +50,7 @@ function renderToStyleElements(renderer) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement('style', {
+    return /*#__PURE__*/React__namespace.createElement('style', {
       key: bucketName,
       // TODO: support "nonce"
       // ...renderer.styleNodeAttributes,
@@ -44,3 +64,4 @@ function renderToStyleElements(renderer) {
 }
 
 exports.renderToStyleElements = renderToStyleElements;
+//# sourceMappingURL=renderToStyleElements.cjs.js.map

package/renderToStyleElements.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer, StyleBucketName } from '@griffel/core';\n\ntype CSSRulesGroupedByStyleBucket = Record<StyleBucketName, string[]>;\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const styles = styleBucketOrdering.reduce<CSSRulesGroupedByStyleBucket>((acc, bucketName) => {\n    return { ...acc, [bucketName]: [] };\n  }, {} as CSSRulesGroupedByStyleBucket);\n\n  // eslint-disable-next-line guard-for-in\n  for (const cssRule in renderer.insertionCache) {\n    const bucketName: StyleBucketName = renderer.insertionCache[cssRule];\n\n    styles[bucketName].push(cssRule);\n  }\n\n  return (Object.keys(styles) as StyleBucketName[])\n    .map(bucketName => {\n      const cssRules = styles[bucketName].join('');\n\n      // We don't want to create empty style elements\n      if (cssRules.length === 0) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n\n        'data-make-styles-bucket': bucketName || 'default',\n        'data-make-styles-rehydration': true,\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules,\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["renderToStyleElements","renderer","styles","styleBucketOrdering","reduce","acc","bucketName","cssRule","insertionCache","push","Object","keys","map","cssRules","join","length","React","createElement","key","dangerouslySetInnerHTML","__html","filter","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,MAAM,GAAGC,wBAAmB,CAACC,MAApB,CAAyD,CAACC,GAAD,EAAMC,UAAN;AACtE,2CAAYD;AAAK,OAACC,UAAD,GAAc;MAA/B;AACD,GAFc,EAEZ,EAFY,CAAf;;AAKA,OAAK,MAAMC,OAAX,IAAsBN,QAAQ,CAACO,cAA/B,EAA+C;AAC7C,UAAMF,UAAU,GAAoBL,QAAQ,CAACO,cAAT,CAAwBD,OAAxB,CAApC;AAEAL,IAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBG,IAAnB,CAAwBF,OAAxB;AACD;;AAED,SAAQG,MAAM,CAACC,IAAP,CAAYT,MAAZ,EACLU,GADK,CACDN,UAAU;AACb,UAAMO,QAAQ,GAAGX,MAAM,CAACI,UAAD,CAAN,CAAmBQ,IAAnB,CAAwB,EAAxB,CAAjB;;AAGA,QAAID,QAAQ,CAACE,MAAT,KAAoB,CAAxB,EAA2B;AACzB,aAAO,IAAP;AACD;;AAED,wBAAOC,gBAAK,CAACC,aAAN,CAAoB,OAApB,EAA6B;AAClCC,MAAAA,GAAG,EAAEZ,UAD6B;AAGlC;AACA;AAEA,iCAA2BA,UAAU,IAAI,SANP;AAOlC,sCAAgC,IAPE;AASlCa,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEP;AADe;AATS,KAA7B,CAAP;AAaD,GAtBK,EAuBLQ,MAvBK,CAuBEC,OAvBF,CAAR;AAwBD;;;;"}

package/renderToStyleElements.esm.js

@@ -40,3 +40,4 @@ function renderToStyleElements(renderer) {
 }
 
 export { renderToStyleElements };
+//# sourceMappingURL=renderToStyleElements.esm.js.map

package/renderToStyleElements.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer, StyleBucketName } from '@griffel/core';\n\ntype CSSRulesGroupedByStyleBucket = Record<StyleBucketName, string[]>;\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const styles = styleBucketOrdering.reduce<CSSRulesGroupedByStyleBucket>((acc, bucketName) => {\n    return { ...acc, [bucketName]: [] };\n  }, {} as CSSRulesGroupedByStyleBucket);\n\n  // eslint-disable-next-line guard-for-in\n  for (const cssRule in renderer.insertionCache) {\n    const bucketName: StyleBucketName = renderer.insertionCache[cssRule];\n\n    styles[bucketName].push(cssRule);\n  }\n\n  return (Object.keys(styles) as StyleBucketName[])\n    .map(bucketName => {\n      const cssRules = styles[bucketName].join('');\n\n      // We don't want to create empty style elements\n      if (cssRules.length === 0) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n\n        'data-make-styles-bucket': bucketName || 'default',\n        'data-make-styles-rehydration': true,\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules,\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["renderToStyleElements","renderer","styles","styleBucketOrdering","reduce","acc","bucketName","cssRule","insertionCache","push","Object","keys","map","cssRules","join","length","React","createElement","key","dangerouslySetInnerHTML","__html","filter","Boolean"],"mappings":";;;AAMA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,MAAM,GAAGC,mBAAmB,CAACC,MAApB,CAAyD,CAACC,GAAD,EAAMC,UAAN;AACtE,2CAAYD;AAAK,OAACC,UAAD,GAAc;MAA/B;AACD,GAFc,EAEZ,EAFY,CAAf;;AAKA,OAAK,MAAMC,OAAX,IAAsBN,QAAQ,CAACO,cAA/B,EAA+C;AAC7C,UAAMF,UAAU,GAAoBL,QAAQ,CAACO,cAAT,CAAwBD,OAAxB,CAApC;AAEAL,IAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBG,IAAnB,CAAwBF,OAAxB;AACD;;AAED,SAAQG,MAAM,CAACC,IAAP,CAAYT,MAAZ,EACLU,GADK,CACDN,UAAU;AACb,UAAMO,QAAQ,GAAGX,MAAM,CAACI,UAAD,CAAN,CAAmBQ,IAAnB,CAAwB,EAAxB,CAAjB;;AAGA,QAAID,QAAQ,CAACE,MAAT,KAAoB,CAAxB,EAA2B;AACzB,aAAO,IAAP;AACD;;AAED,wBAAOC,KAAK,CAACC,aAAN,CAAoB,OAApB,EAA6B;AAClCC,MAAAA,GAAG,EAAEZ,UAD6B;AAGlC;AACA;AAEA,iCAA2BA,UAAU,IAAI,SANP;AAOlC,sCAAgC,IAPE;AASlCa,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEP;AADe;AATS,KAA7B,CAAP;AAaD,GAtBK,EAuBLQ,MAvBK,CAuBEC,OAvBF,CAAR;AAwBD;;;;"}