@griffel/react 1.7.1 → 1.7.3

package/src/RendererContext.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';
+import type { GriffelRenderer } from '@griffel/core';
+import { createContext, useContext, useMemo, type FC, type ReactNode } from 'react';
+
+import { canUseDOM } from './utils/canUseDOM.js';
+
+export interface RendererProviderProps {
+  /** An instance of Griffel renderer. */
+  renderer: GriffelRenderer;
+
+  /**
+   * Document used to insert CSS variables to head
+   */
+  targetDocument?: Document;
+
+  /**
+   * Content wrapped by the RendererProvider
+   */
+  children: ReactNode;
+}
+
+/**
+ * @private
+ */
+const RendererContext = /*#__PURE__*/ createContext<GriffelRenderer>(/*#__PURE__*/ createDOMRenderer());
+
+/**
+ * @public
+ */
+export const RendererProvider: FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {
+  // "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 — useMemo runs synchronously before render, useEffect would be too late.
+  // eslint-disable-next-line react-x/use-memo, react-hooks/void-use-memo
+  useMemo(() => {
+    if (canUseDOM()) {
+      rehydrateRendererCache(renderer, targetDocument);
+    }
+  }, [renderer, targetDocument]);
+
+  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;
+};
+
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
+ */
+export function useRenderer(): GriffelRenderer {
+  return useContext(RendererContext);
+}

package/src/TextDirectionContext.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { createContext, useContext, type FC, type ReactNode } from 'react';
+
+export interface TextDirectionProviderProps {
+  /** Indicates the directionality of the element's text. */
+  dir: 'ltr' | 'rtl';
+
+  /**
+   * Content wrapped by the TextDirectionProvider.
+   */
+  children: ReactNode;
+}
+
+/**
+ * @private
+ */
+const TextDirectionContext = /*#__PURE__*/ createContext<'ltr' | 'rtl'>('ltr');
+
+/**
+ * @public
+ */
+export const TextDirectionProvider: FC<TextDirectionProviderProps> = ({ children, dir }) => {
+  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;
+};
+
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+export function useTextDirection() {
+  return useContext(TextDirectionContext);
+}

package/src/__css.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import { __css as vanillaCSS } from '@griffel/core';
+import type { CSSClassesMapBySlot } from '@griffel/core';
+
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @private
+ */
+export function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>) {
+  const getStyles = vanillaCSS(classesMapBySlot);
+
+  return function useClasses(): Record<Slots, string> {
+    const dir = useTextDirection();
+
+    return getStyles({ dir });
+  };
+}

package/src/__resetCSS.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { __resetCSS as vanillaResetCSS } from '@griffel/core';
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @private
+ */
+export function __resetCSS(ltrClassName: string, rtlClassName: string | null) {
+  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);
+
+  return function useClasses(): string {
+    const dir = useTextDirection();
+
+    return getStyles({ dir });
+  };
+}

package/src/__resetStyles.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { __resetStyles as vanillaResetStyles } from '@griffel/core';
+import type { CSSRulesByBucket } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @private
+ */
+export function __resetStyles(
+  ltrClassName: string,
+  rtlClassName: string | null,
+  cssRules: CSSRulesByBucket | string[],
+) {
+  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory);
+
+  return function useClasses(): string {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+
+    return getStyles({ dir, renderer });
+  };
+}

package/src/{__staticCSS.js → __staticCSS.ts}

@@ -1,15 +1,16 @@
 'use client';
+
 import { __staticCSS as vanillaStaticCSS } from '@griffel/core';
+
 /**
  * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
  *
  * @private
  */
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export function __staticCSS() {
-    const getStyles = vanillaStaticCSS();
-    return function useStaticStyles() {
-        return getStyles();
-    };
+  const getStyles = vanillaStaticCSS();
+
+  return function useStaticStyles(): void {
+    return getStyles();
+  };
 }
-//# sourceMappingURL=__staticCSS.js.map

package/src/__staticStyles.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import { __staticStyles as vanillaStaticStyles } from '@griffel/core';
+import type { CSSRulesByBucket } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @private
+ */
+export function __staticStyles(cssRules: CSSRulesByBucket) {
+  const getStyles = vanillaStaticStyles(cssRules, insertionFactory);
+
+  return function useStaticStyles(): void {
+    const renderer = useRenderer();
+
+    return getStyles({ renderer });
+  };
+}

package/src/__styles.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { __styles as vanillaStyles } from '@griffel/core';
+import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @private
+ */
+export function __styles<Slots extends string>(
+  classesMapBySlot: CSSClassesMapBySlot<Slots>,
+  cssRules: CSSRulesByBucket,
+) {
+  const getStyles = vanillaStyles(classesMapBySlot, cssRules, insertionFactory);
+
+  return function useClasses(): Record<Slots, string> {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+
+    return getStyles({ dir, renderer });
+  };
+}

package/src/createDOMRenderer.test.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi } from 'vitest';
+import type { Mock } from 'vitest';
+import { createDOMRenderer, mergeClasses } from '@griffel/core';
+import * as React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { makeStyles } from './makeStyles.js';
+import { makeResetStyles } from './makeResetStyles.js';
+import { RendererProvider } from './RendererContext.js';
+import { renderToStyleElements } from './renderToStyleElements.js';
+import { useInsertionEffect as _useInsertionEffect } from './useInsertionEffect.js';
+
+vi.mock('./useInsertionEffect', () => ({
+  useInsertionEffect: vi.fn(),
+}));
+
+const useInsertionEffect = _useInsertionEffect as Mock<typeof React.useInsertionEffect>;
+
+describe('createDOMRenderer', () => {
+  it('rehydrateCache() avoids double insertion', () => {
+    // This test validates a scenario for Server-Side rendering
+
+    const clientRenderer = createDOMRenderer(document);
+    const serverRenderer = createDOMRenderer(
+      // we should use "null" as "undefined" will fall back to "document" which is present in this environment
+      null as unknown as undefined,
+    );
+
+    const useExampleClasses = makeStyles({
+      root: {
+        animationName: {
+          from: { height: '10px' },
+          to: { height: '20px' },
+        },
+
+        color: 'red',
+        '@media screen and (max-width: 992px)': { ':hover': { color: 'blue' } },
+      },
+    });
+    const useExampleClass = makeResetStyles({
+      color: 'red',
+      ':hover': { color: 'blue' },
+    });
+    const ExampleComponent: React.FC = () => {
+      const classes = useExampleClasses();
+      const className = useExampleClass();
+
+      return <div className={mergeClasses(className, classes.root)} />;
+    };
+
+    //
+    // Server
+    // A "server" renders components to static HTML that will be transferred to a client
+    //
+
+    // Heads up!
+    // Mock there is need as this test is executed in DOM environment and uses "useInsertionEffect".
+    // However, "useInsertionEffect" will not be called in "renderToStaticMarkup()".
+    useInsertionEffect.mockImplementation(fn => fn());
+
+    const componentHTML = renderToStaticMarkup(
+      <RendererProvider renderer={serverRenderer}>
+        <ExampleComponent />
+      </RendererProvider>,
+    );
+    const stylesHTML = renderToStaticMarkup(<>{renderToStyleElements(serverRenderer)}</>);
+
+    useInsertionEffect.mockImplementation(React.useInsertionEffect);
+
+    // Ensure that all styles are inserted into the cache
+    expect(serverRenderer.insertionCache).toMatchInlineSnapshot(`
+      {
+        ".f1p9cr64{animation-name:f1kgwxhb;}": "d",
+        ".fe3e8s9{color:red;}": "d",
+        ".rp2atum:hover{color:blue;}": "r",
+        ".rp2atum{color:red;}": "r",
+        "@keyframes f1kgwxhb{from{height:10px;}to{height:20px;}}": "k",
+        "@media screen and (max-width: 992px){.fzd6x39:hover{color:blue;}}": "m",
+      }
+    `);
+    // There is no DOM on a server, style nodes should not be present
+    expect(document.querySelector('style')).toBe(null);
+
+    //
+    // Client
+    // Creates an element to render components and inserts HTML rendered from a server
+    //
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+
+    container.innerHTML = componentHTML;
+    document.head.innerHTML = stylesHTML;
+
+    // As all style came from a server, we should not insert any CSS on a client
+    // (this tests internal implementation, but there is no other way?)
+    const styleElementsBeforeHydration = document.querySelectorAll<HTMLStyleElement>('style');
+    const insertRules = [...(styleElementsBeforeHydration as unknown as HTMLStyleElement[])].map(styleEl =>
+      vi.spyOn(styleEl.sheet!, 'insertRule'),
+    );
+
+    React.act(() => {
+      hydrateRoot(
+        container,
+        // "RendererProvider" is not required there, we need it only for Jest spies
+        <RendererProvider renderer={clientRenderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+    });
+
+    const styleElementsAfterHydration = document.querySelectorAll<HTMLStyleElement>('style');
+
+    // We also would to ensure that new elements have not been inserted
+    expect(styleElementsBeforeHydration.length).toBe(styleElementsAfterHydration.length);
+
+    // Following rules are present in cache:
+    // - makeResetStyles
+    //   - color
+    //   - :hover + color
+    // - makeStyles
+    //   - "animationName"
+    //   - "color"
+    //   - @keyframes
+    //   - @media
+    expect(Object.keys(clientRenderer.insertionCache)).toHaveLength(6);
+    insertRules.forEach(insertRule => {
+      expect(insertRule).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/{index.d.ts → index.ts}

@@ -1,11 +1,17 @@
+'use client';
+
 export { RESET, shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
 export type { GriffelStyle, GriffelResetStyle, CreateDOMRendererOptions, GriffelRenderer } from '@griffel/core';
+
 export { makeStyles } from './makeStyles.js';
 export { makeResetStyles } from './makeResetStyles.js';
 export { makeStaticStyles } from './makeStaticStyles.js';
 export { renderToStyleElements } from './renderToStyleElements.js';
+
 export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext.js';
 export { TextDirectionProvider } from './TextDirectionContext.js';
+
+// Private exports, are used by build time transforms
 export { __css } from './__css.js';
 export { __styles } from './__styles.js';
 export { __resetCSS } from './__resetCSS.js';

package/src/insertionFactory-node.test.ts

@@ -0,0 +1,31 @@
+/*
+ * @vitest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import { describe, it, expect, vi } from 'vitest';
+import type { GriffelRenderer } from '@griffel/core';
+
+const { useInsertionEffect } = vi.hoisted(() => ({
+  useInsertionEffect: vi.fn(),
+}));
+
+vi.mock('react', async importOriginal => {
+  const actual = await importOriginal<typeof import('react')>();
+  return { ...actual, useInsertionEffect };
+});
+
+import { insertionFactory } from './insertionFactory.js';
+
+describe('insertionFactory (node)', () => {
+  it('does not use insertionEffect', () => {
+    const renderer: Partial<GriffelRenderer> = { id: 'a', insertCSSRules: vi.fn() };
+    const insertStyles = insertionFactory();
+
+    insertStyles(renderer as GriffelRenderer, { d: ['a'] });
+
+    expect(useInsertionEffect).not.toHaveBeenCalled();
+    expect(renderer.insertCSSRules).toHaveBeenCalledTimes(1);
+  });
+});

package/src/insertionFactory.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Mock } from 'vitest';
+import type { GriffelRenderer } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useInsertionEffect as _useInsertionEffect } from './useInsertionEffect.js';
+import type * as React from 'react';
+
+vi.mock('./useInsertionEffect', () => ({
+  useInsertionEffect: vi.fn().mockImplementation(fn => fn()),
+}));
+
+const useInsertionEffect = _useInsertionEffect as Mock<typeof React.useInsertionEffect>;
+
+describe('canUseDOM', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('uses "useInsertionEffect" when available', () => {
+    const renderer: Partial<GriffelRenderer> = { insertCSSRules: vi.fn() };
+    const insertStyles = insertionFactory();
+
+    insertStyles(renderer as GriffelRenderer, { d: ['a'] });
+
+    expect(useInsertionEffect).toHaveBeenCalledTimes(1);
+    expect(renderer.insertCSSRules).toHaveBeenCalledTimes(1);
+  });
+});

package/src/insertionFactory.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import type { CSSRulesByBucket, GriffelInsertionFactory, GriffelRenderer } from '@griffel/core';
+
+import { canUseDOM } from './utils/canUseDOM.js';
+import { useInsertionEffect } from './useInsertionEffect.js';
+
+export const insertionFactory: GriffelInsertionFactory = () => {
+  const insertionCache: Record<string, boolean> = {};
+
+  return function insert(renderer: GriffelRenderer, cssRules: CSSRulesByBucket) {
+    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
+    if (useInsertionEffect && canUseDOM()) {
+      // eslint-disable-next-line react-x/rules-of-hooks
+      useInsertionEffect(() => {
+        renderer.insertCSSRules(cssRules!);
+      }, [renderer, cssRules]);
+
+      return;
+    }
+
+    if (insertionCache[renderer.id] === undefined) {
+      renderer.insertCSSRules(cssRules!);
+      insertionCache[renderer.id] = true;
+    }
+  };
+};

package/src/makeResetStyles.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect, vi } from 'vitest';
+import type * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+import { makeResetStyles } from './makeResetStyles.js';
+
+describe('makeResetStyles', () => {
+  it('works outside of React components', () => {
+    expect(() => makeResetStyles({ root: { color: 'red' } })).not.toThrow();
+  });
+
+  it('throws inside React components', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const Example: React.FC = () => {
+      makeResetStyles({ color: 'red' });
+      return null;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    expect(() => act(() => root.render(<Example />))).toThrow(/All makeResetStyles\(\) calls should be top level/);
+
+    // Should not throw outside React components after rendering
+    expect(() => makeResetStyles({ color: 'red' })).not.toThrow();
+  });
+});

package/src/makeResetStyles.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';
+import type { GriffelResetStyle } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+import { isInsideComponent } from './utils/isInsideComponent.js';
+
+export function makeResetStyles(styles: GriffelResetStyle) {
+  const getStyles = vanillaMakeResetStyles(styles, insertionFactory);
+
+  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 });
+  };
+}

package/src/makeStaticStyles.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';
+import type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+
+export function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {
+  const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);
+
+  if (process.env.NODE_ENV === 'test') {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }
+
+  return function useStaticStyles(): void {
+    const renderer = useRenderer();
+    const options: MakeStaticStylesOptions = { renderer };
+
+    return getStyles(options);
+  };
+}

package/src/makeStyles.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect, vi } from 'vitest';
+import type * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+import { makeStyles } from './makeStyles.js';
+
+describe('makeStyles', () => {
+  it('works outside of React components', () => {
+    expect(() => makeStyles({ root: { color: 'red' } })).not.toThrow();
+  });
+
+  it('throws inside React components', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const Example: React.FC = () => {
+      makeStyles({ root: { color: 'red' } });
+      return null;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    expect(() => act(() => root.render(<Example />))).toThrow(/All makeStyles\(\) calls should be top level/);
+
+    // Should not throw outside React components after rendering
+    expect(() => makeStyles({ root: { color: 'red' } })).not.toThrow();
+  });
+});

package/src/makeStyles.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { makeStyles as vanillaMakeStyles } from '@griffel/core';
+import type { GriffelStyle } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+import { isInsideComponent } from './utils/isInsideComponent.js';
+
+export function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {
+  const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (isInsideComponent()) {
+      throw new Error(
+        [
+          "makeStyles(): this function cannot be called in component's scope.",
+          'All makeStyles() calls should be top level i.e. in a root scope of a file.',
+        ].join(' '),
+      );
+    }
+  }
+
+  return function useClasses(): Record<Slots, string> {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+
+    return getStyles({ dir, renderer });
+  };
+}