feat: add makeResetStyles to @griffel/react

change/@griffel-core-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add bundle size fixtures",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-react-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add makeResetStyles to @griffel/react",
+  "packageName": "@griffel/react",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/core/bundle-size/makeResetStyles-runtime.fixture.js

@@ -0,0 +1,7 @@
+import { makeResetStyles } from '@griffel/core';
+
+console.log(makeResetStyles);
+
+export default {
+  name: 'makeResetStyles (runtime)',
+};

packages/react/bundle-size/makeResetStyles-runtime.fixture.js

@@ -0,0 +1,7 @@
+import { makeResetStyles } from '@griffel/react';
+
+console.log(makeResetStyles);
+
+export default {
+  name: 'makeResetStyles (runtime)',
+};

packages/react/src/index.ts

@@ -2,6 +2,7 @@ export { shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
 export type { GriffelStyle, CreateDOMRendererOptions, GriffelRenderer } from '@griffel/core';
 
 export { makeStyles } from './makeStyles';
+export { makeResetStyles } from './makeResetStyles';
 export { makeStaticStyles } from './makeStaticStyles';
 export { renderToStyleElements } from './renderToStyleElements';
 

packages/react/src/makeResetStyles.ts

@@ -0,0 +1,28 @@
+import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';
+import type { GriffelResetStyle } from '@griffel/core';
+
+import { isInsideComponent } from './utils/isInsideComponent';
+import { useRenderer } from './RendererContext';
+import { useTextDirection } from './TextDirectionContext';
+
+export function makeResetStyles(styles: GriffelResetStyle) {
+  const getStyles = vanillaMakeResetStyles(styles);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (isInsideComponent()) {
+      throw new Error(
+        [
+          "makeResetStyles(): this function cannot be called in component's scope.",
+          'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',
+        ].join(' '),
+      );
+    }
+  }
+
+  return function useClassName(): string {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+
+    return getStyles({ dir, renderer });
+  };
+}

packages/react/src/makeStyles.ts

@@ -1,31 +1,10 @@
 import { makeStyles as vanillaMakeStyles } from '@griffel/core';
-import * as React from 'react';
 import type { GriffelStyle } from '@griffel/core';
 
+import { isInsideComponent } from './utils/isInsideComponent';
 import { useRenderer } from './RendererContext';
 import { useTextDirection } from './TextDirectionContext';
 
-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 {
-    // @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;
-  }
-}
-
 export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {
   const getStyles = vanillaMakeStyles(stylesBySlots);
 

packages/react/src/utils/isInsideComponent.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export 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 {
+    // @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 wont
+    dispatcher.useContext({});
+    return true;
+  } catch (e) {
+    return false;
+  }
+}