diff --git a/change/@griffel-core-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json b/change/@griffel-core-f0fa59fb-c3b5-470c-8e8d-667d83ed587f.json new file mode 100644 index 0000000000..7a21998777 --- /dev/null +++ b/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" +} diff --git a/change/@griffel-react-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json b/change/@griffel-react-a509b887-05b6-42c0-8e64-331f4bc8f7bb.json new file mode 100644 index 0000000000..3f619b14db --- /dev/null +++ b/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" +} diff --git a/packages/core/bundle-size/makeResetStyles-runtime.fixture.js b/packages/core/bundle-size/makeResetStyles-runtime.fixture.js new file mode 100644 index 0000000000..9eb758e902 --- /dev/null +++ b/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)', +}; diff --git a/packages/react/bundle-size/makeResetStyles-runtime.fixture.js b/packages/react/bundle-size/makeResetStyles-runtime.fixture.js new file mode 100644 index 0000000000..63ec7d5785 --- /dev/null +++ b/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)', +}; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index b75982c966..555214edff 100644 --- a/packages/react/src/index.ts +++ b/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'; diff --git a/packages/react/src/makeResetStyles.ts b/packages/react/src/makeResetStyles.ts new file mode 100644 index 0000000000..a42b980144 --- /dev/null +++ b/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 }); + }; +} diff --git a/packages/react/src/makeStyles.ts b/packages/react/src/makeStyles.ts index fe0ededf77..f999675adc 100644 --- a/packages/react/src/makeStyles.ts +++ b/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(stylesBySlots: Record) { const getStyles = vanillaMakeStyles(stylesBySlots); diff --git a/packages/react/src/utils/isInsideComponent.ts b/packages/react/src/utils/isInsideComponent.ts new file mode 100644 index 0000000000..2b1f928509 --- /dev/null +++ b/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; + } +}