@griffel/react 1.0.3 → 1.1.0

package/README.md

@@ -70,6 +70,140 @@ function Component() {
 }
 ```
 
+## `shorthands`
+
+`shorthands` provides a set of functions to mimic [CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) and improve developer experience as [CSS shorthands are not supported](https://griffel.js.org/react/guides/limitations#css-shorthands-are-not-supported) by Griffel.
+
+### `shorthands.border`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.border('2px'),
+    ...shorthands.border('2px', 'solid'),
+    ...shorthands.border('2px', 'solid', 'red'),
+  },
+});
+```
+
+### `shorthands.borderBottom`, `shorthands.borderTop`, `shorthands.borderLeft`, `shorthands.borderRight`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    // The same is true for "borderTop", "borderLeft" & "borderRight"
+    ...shorthands.borderBottom('2px'),
+    ...shorthands.borderBottom('2px', 'solid'),
+    ...shorthands.borderBottom('2px', 'solid', 'red'),
+  },
+});
+```
+
+### `shorthands.borderColor`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.borderColor('red'),
+    ...shorthands.borderColor('red', 'blue'),
+    ...shorthands.borderColor('red', 'blue', 'green'),
+    ...shorthands.borderColor('red', 'blue', 'green', 'yellow'),
+  },
+});
+```
+
+### `shorthands.borderStyle`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.borderStyle('solid'),
+    ...shorthands.borderStyle('solid', 'dashed'),
+    ...shorthands.borderStyle('solid', 'dashed', 'dotted'),
+    ...shorthands.borderStyle('solid', 'dashed', 'dotted', 'double'),
+  },
+});
+```
+
+### `shorthands.borderWidth`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.borderWidth('12px'),
+    ...shorthands.borderWidth('12px', '24px'),
+    ...shorthands.borderWidth('12px', '24px', '36px'),
+    ...shorthands.borderWidth('12px', '24px', '36px', '48px'),
+  },
+});
+```
+
+### `shorthands.gap`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.gap('12px'),
+    ...shorthands.gap('12px', '24px'),
+  },
+});
+```
+
+### `shorthands.margin`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.margin('12px'),
+    ...shorthands.margin('12px', '24px'),
+    ...shorthands.margin('12px', '24px', '36px'),
+    ...shorthands.margin('12px', '24px', '36px', '48px'),
+  },
+});
+```
+
+### `shorthands.overflow`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.overflow('visible'),
+    ...shorthands.overflow('visible', 'hidden'),
+  },
+});
+```
+
+### `shorthands.padding`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.padding('12px'),
+    ...shorthands.padding('12px', '24px'),
+    ...shorthands.padding('12px', '24px', '36px'),
+    ...shorthands.padding('12px', '24px', '36px', '48px'),
+  },
+});
+```
+
 ## `makeStaticStyles()`
 
 Creates styles attached to a global selector. Styles can be defined via objects:
@@ -187,6 +321,7 @@ const useClasses = makeStyles({
 
     '@media screen and (max-width: 992px)': { color: 'orange' },
     '@supports (display: grid)': { color: 'red' },
+    '@layer utility': { marginBottom: '1em' }
   },
 });
 ```

package/RendererContext.cjs.js

@@ -65,7 +65,7 @@ const RendererProvider = ({
 /**
  * Returns an instance of current makeStyles() renderer.
  *
- * @private
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
  */
 
 function useRenderer() {

package/RendererContext.cjs.js.map

@@ -1 +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;;;;;"}
+{"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 Exported as \"useRenderer_unstable\" use it on own risk. Can be changed or removed without a notice.\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.d.ts

@@ -15,6 +15,6 @@ export declare const RendererProvider: React.FC<RendererProviderProps>;
 /**
  * Returns an instance of current makeStyles() renderer.
  *
- * @private
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
  */
 export declare function useRenderer(): GriffelRenderer;

package/RendererContext.esm.js

@@ -41,7 +41,7 @@ const RendererProvider = ({
 /**
  * Returns an instance of current makeStyles() renderer.
  *
- * @private
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
  */
 
 function useRenderer() {

package/RendererContext.esm.js.map

@@ -1 +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;;;;"}
+{"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 Exported as \"useRenderer_unstable\" use it on own risk. Can be changed or removed without a notice.\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/index.cjs.js

@@ -28,6 +28,7 @@ exports.makeStyles = makeStyles.makeStyles;
 exports.makeStaticStyles = makeStaticStyles.makeStaticStyles;
 exports.renderToStyleElements = renderToStyleElements.renderToStyleElements;
 exports.RendererProvider = RendererContext.RendererProvider;
+exports.useRenderer_unstable = RendererContext.useRenderer;
 exports.TextDirectionProvider = TextDirectionContext.TextDirectionProvider;
 exports.__styles = __styles.__styles;
 //# sourceMappingURL=index.cjs.js.map

package/index.cjs.js.map

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

package/index.d.ts

@@ -3,6 +3,6 @@ export type { GriffelStyle } from '@griffel/core';
 export { makeStyles } from './makeStyles';
 export { makeStaticStyles } from './makeStaticStyles';
 export { renderToStyleElements } from './renderToStyleElements';
-export { RendererProvider } from './RendererContext';
+export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext';
 export { TextDirectionProvider } from './TextDirectionContext';
 export { __styles } from './__styles';

package/index.esm.js

@@ -2,7 +2,7 @@ export { createDOMRenderer, mergeClasses, shorthands } from '@griffel/core';
 export { makeStyles } from './makeStyles.esm.js';
 export { makeStaticStyles } from './makeStaticStyles.esm.js';
 export { renderToStyleElements } from './renderToStyleElements.esm.js';
-export { RendererProvider } from './RendererContext.esm.js';
+export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext.esm.js';
 export { TextDirectionProvider } from './TextDirectionContext.esm.js';
 export { __styles } from './__styles.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/makeStyles.cjs.js

@@ -28,9 +28,19 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function isInsideComponent() {
+  // React 18 always logs errors if a dispatcher is not present:
+  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
   try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React__namespace.useContext({});
+    // @ts-expect-error "SECRET_INTERNALS" are not typed
+    const dispatcher = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; // Before any React component was rendered "dispatcher" will be "null"
+
+    if (dispatcher === null || dispatcher === undefined) {
+      return false;
+    } // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+    // a call on the dispatcher don't
+
+
+    dispatcher.useContext({});
     return true;
   } catch (e) {
     return false;

package/makeStyles.cjs.js.map

@@ -1 +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;;;;"}
+{"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  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\n\n    // Before any React component was rendered \"dispatcher\" will be \"null\"\n    if (dispatcher === null || dispatcher === undefined) {\n      return false;\n    }\n\n    // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n    // a call on the dispatcher don't\n    dispatcher.useContext({});\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","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAASA,iBAAT;AACE;AACA;AACA,MAAI;AACF;AACA,UAAMC,UAAU,GAAGC,gBAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;AAKF,QAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;AACnD,aAAO,KAAP;AACD,KAPC;AAUF;;;AACAL,IAAAA,UAAU,CAACM,UAAX,CAAsB,EAAtB;AACA,WAAO,IAAP;AACD,GAbD,CAaE,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,QAAIf,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIgB,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

@@ -4,9 +4,19 @@ import { useRenderer } from './RendererContext.esm.js';
 import { useTextDirection } from './TextDirectionContext.esm.js';
 
 function isInsideComponent() {
+  // React 18 always logs errors if a dispatcher is not present:
+  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
   try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useContext({});
+    // @ts-expect-error "SECRET_INTERNALS" are not typed
+    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; // Before any React component was rendered "dispatcher" will be "null"
+
+    if (dispatcher === null || dispatcher === undefined) {
+      return false;
+    } // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+    // a call on the dispatcher don't
+
+
+    dispatcher.useContext({});
     return true;
   } catch (e) {
     return false;

package/makeStyles.esm.js.map

@@ -1 +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;;;;"}
+{"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  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\n\n    // Before any React component was rendered \"dispatcher\" will be \"null\"\n    if (dispatcher === null || dispatcher === undefined) {\n      return false;\n    }\n\n    // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n    // a call on the dispatcher don't\n    dispatcher.useContext({});\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","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;AAOA,SAASA,iBAAT;AACE;AACA;AACA,MAAI;AACF;AACA,UAAMC,UAAU,GAAGC,KAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;AAKF,QAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;AACnD,aAAO,KAAP;AACD,KAPC;AAUF;;;AACAL,IAAAA,UAAU,CAACM,UAAX,CAAsB,EAAtB;AACA,WAAO,IAAP;AACD,GAbD,CAaE,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,QAAIf,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIgB,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.3",
+  "version": "1.1.0",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.2.0",
+    "@griffel/core": "^1.3.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {