@griffel/react 1.7.3 → 1.7.4

package/src/TextDirectionContext.tsx

@@ -1,34 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-'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/__resetStyles.ts

@@ -1,28 +0,0 @@
-'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/__styles.ts

@@ -1,27 +0,0 @@
-'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

@@ -1,133 +0,0 @@
-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/insertionFactory-node.test.ts

@@ -1,31 +0,0 @@
-/*
- * @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

@@ -1,29 +0,0 @@
-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

@@ -1,27 +0,0 @@
-'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

@@ -1,27 +0,0 @@
-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

@@ -1,31 +0,0 @@
-'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

@@ -1,23 +0,0 @@
-'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

@@ -1,27 +0,0 @@
-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

@@ -1,31 +0,0 @@
-'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 });
-  };
-}