@griffel/react 1.7.1 → 1.7.3

package/src/renderToStyleElements-node.test.tsx

@@ -0,0 +1,418 @@
+/*
+ * @vitest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import { describe, it, expect } from 'vitest';
+import { createDOMRenderer } from '@griffel/core';
+import * as prettier from 'prettier';
+import type * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+
+import { makeStyles } from './makeStyles.js';
+import { makeResetStyles } from './makeResetStyles.js';
+import { RendererProvider } from './RendererContext.js';
+import { renderToStyleElements } from './renderToStyleElements.js';
+
+async function formatHtml(value: string) {
+  return (await prettier.format(value, { parser: 'html' })).trim();
+}
+
+describe('renderToStyleElements (node)', () => {
+  describe('makeStyles', () => {
+    it('supports overrides', async () => {
+      const useExampleStyles = makeStyles({
+        root: {
+          color: 'red',
+          ':hover': { color: 'pink' },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return <div className={classes.root} />;
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .fe3e8s9 {
+            color: red;
+          }</style
+        ><style
+          data-make-styles-bucket="h"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .f14hep94:hover {
+            color: pink;
+          }
+        </style>"
+      `);
+    });
+
+    it('supports overrides', async () => {
+      const useExampleStylesA = makeStyles({
+        root: {
+          paddingLeft: '10px',
+          margin: '10px',
+          ':hover': { paddingRight: '20px' },
+        },
+      });
+      const useExampleStylesB = makeStyles({
+        root: { padding: '10px', ':hover': { padding: '20px' } },
+      });
+      const useExampleStylesC = makeStyles({
+        root: { marginLeft: '10px' },
+      });
+      const ExampleComponent: React.FC = () => {
+        useExampleStylesA();
+        useExampleStylesB();
+        useExampleStylesC();
+
+        return null;
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="-1"
+          data-make-styles-rehydration="true"
+        >
+          .femlv54 {
+            margin: 10px;
+          }
+          .fbhmu18 {
+            padding: 10px;
+          }</style
+        ><style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .frdkuqy {
+            padding-left: 10px;
+          }
+          .f81rol6 {
+            padding-right: 10px;
+          }
+          .f1oou7ox {
+            margin-left: 10px;
+          }
+          .f1pxv85q {
+            margin-right: 10px;
+          }</style
+        ><style
+          data-make-styles-bucket="h"
+          data-priority="-1"
+          data-make-styles-rehydration="true"
+        >
+          .fp9hkdp:hover {
+            padding: 20px;
+          }</style
+        ><style
+          data-make-styles-bucket="h"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .f19vcps:hover {
+            padding-right: 20px;
+          }
+          .f1mr755h:hover {
+            padding-left: 20px;
+          }
+        </style>"
+      `);
+    });
+
+    it('handles @at rules', async () => {
+      const useExampleStyles = makeStyles({
+        media: {
+          '@media screen and (max-width: 992px)': {
+            ':hover': { color: 'blue' },
+          },
+        },
+
+        support: {
+          '@supports (display: grid)': {
+            color: 'red',
+          },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return (
+          <>
+            <div className={classes.media} />
+            <div className={classes.support} />
+          </>
+        );
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="t"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @supports (display: grid) {
+            .fo1gfrc {
+              color: red;
+            }
+          }</style
+        ><style
+          media="screen and (max-width: 992px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media screen and (max-width: 992px) {
+            .fzd6x39:hover {
+              color: blue;
+            }
+          }
+        </style>"
+      `);
+    });
+
+    it('handles media query order', async () => {
+      const useExampleStyles = makeStyles({
+        media: {
+          color: 'red',
+          '@media (max-width: 4px)': {
+            ':hover': { color: 'blue' },
+          },
+          '@media (max-width: 2px)': {
+            ':hover': { color: 'blue' },
+          },
+          '@supports (display: grid)': {
+            color: 'green',
+          },
+          '@media (max-width: 3px)': {
+            ':hover': { color: 'blue' },
+          },
+          '@media (max-width: 1px)': {
+            ':hover': { color: 'blue' },
+          },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return <div className={classes.media} />;
+      };
+
+      const mediaQueryOrder = ['(max-width: 1px)', '(max-width: 2px)', '(max-width: 3px)', '(max-width: 4px)'];
+      const renderer = createDOMRenderer(undefined, {
+        compareMediaQueries(a, b) {
+          return mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b);
+        },
+      });
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .fe3e8s9 {
+            color: red;
+          }</style
+        ><style
+          data-make-styles-bucket="t"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @supports (display: grid) {
+            .fui0tgz {
+              color: green;
+            }
+          }</style
+        ><style
+          media="(max-width: 1px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 1px) {
+            .f13d6lhy:hover {
+              color: blue;
+            }
+          }</style
+        ><style
+          media="(max-width: 2px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 2px) {
+            .f1b07yzi:hover {
+              color: blue;
+            }
+          }</style
+        ><style
+          media="(max-width: 3px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 3px) {
+            .f1cy3850:hover {
+              color: blue;
+            }
+          }</style
+        ><style
+          media="(max-width: 4px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 4px) {
+            .fyvg8w:hover {
+              color: blue;
+            }
+          }
+        </style>"
+      `);
+    });
+
+    it('handles keyframes', async () => {
+      const useExampleStyles = makeStyles({
+        keyframe: {
+          animationName: {
+            from: {
+              transform: 'rotate(0deg)',
+            },
+            to: {
+              transform: 'rotate(360deg)',
+            },
+          },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return <div className={classes.keyframe} />;
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .f1g6ul6r {
+            animation-name: f1q8eu9e;
+          }
+          .f1fp4ujf {
+            animation-name: f55c0se;
+          }</style
+        ><style
+          data-make-styles-bucket="k"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @keyframes f1q8eu9e {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+          @keyframes f55c0se {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(-360deg);
+            }
+          }
+        </style>"
+      `);
+    });
+  });
+
+  describe('makeResetStyles', () => {
+    it('renders styles', async () => {
+      const useClassName = makeResetStyles({
+        color: 'red',
+        ':hover': { color: 'pink' },
+      });
+      const ExampleComponent: React.FC = () => {
+        return <div className={useClassName()} />;
+      };
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="r"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .r1tsu58y {
+            color: red;
+          }
+          .r1tsu58y:hover {
+            color: pink;
+          }
+        </style>"
+      `);
+    });
+  });
+});

package/src/renderToStyleElements.test.tsx

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import type { GriffelRenderer } from '@griffel/core';
+import { createDOMRenderer } from '@griffel/core';
+import * as prettier from 'prettier';
+import * as React from 'react';
+import { createRoot } 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';
+
+async function formatHtml(value: string) {
+  return (await prettier.format(value, { parser: 'html' })).trim();
+}
+
+describe('renderToStyleElements (DOM)', () => {
+  let renderer: GriffelRenderer;
+
+  beforeEach(() => {
+    process.env.NODE_ENV = 'production';
+    renderer = createDOMRenderer(document);
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  it('makeStyles', async () => {
+    const useExampleStyles = makeStyles({
+      root: { color: 'red', ':hover': { color: 'green' } },
+    });
+    const ExampleComponent: React.FC = () => {
+      const classes = useExampleStyles();
+
+      return <div className={classes.root} />;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    React.act(() => {
+      root.render(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+    });
+
+    expect(await formatHtml(renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>))).toMatchInlineSnapshot(`
+      "<style
+        data-make-styles-bucket="d"
+        data-priority="0"
+        data-make-styles-rehydration="true"
+      >
+        .fe3e8s9 {
+          color: red;
+        }</style
+      ><style
+        data-make-styles-bucket="h"
+        data-priority="0"
+        data-make-styles-rehydration="true"
+      >
+        .f1ej289o:hover {
+          color: green;
+        }
+      </style>"
+    `);
+  });
+
+  it('makeResetStyles', async () => {
+    const useClassName = makeResetStyles({
+      color: 'red',
+      ':hover': { color: 'pink' },
+    });
+    const ExampleComponent: React.FC = () => {
+      return <div className={useClassName()} />;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    React.act(() => {
+      root.render(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+    });
+
+    expect(await formatHtml(renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>))).toMatchInlineSnapshot(`
+      "<style
+        data-make-styles-bucket="r"
+        data-priority="0"
+        data-make-styles-rehydration="true"
+      >
+        .r1tsu58y {
+          color: red;
+        }
+        .r1tsu58y:hover {
+          color: pink;
+        }
+      </style>"
+    `);
+  });
+});

package/src/renderToStyleElements.ts

@@ -0,0 +1,61 @@
+'use client';
+
+import { styleBucketOrdering } from '@griffel/core';
+import { createElement } from 'react';
+import type { ReactElement } from 'react';
+import type { GriffelRenderer } from '@griffel/core';
+
+/**
+ * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
+ *
+ * @public
+ */
+export function renderToStyleElements(renderer: GriffelRenderer): ReactElement[] {
+  const stylesheets = Object.values(renderer.stylesheets)
+    // first sort: bucket by order [data-priority]
+    .sort((a, b) => {
+      return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
+    })
+    // second sort: bucket by bucket name
+    .sort((a, b) => {
+      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
+    })
+    // third sort: media queries
+    .sort((a, b) => {
+      const mediaA = a.elementAttributes['media'];
+      const mediaB = b.elementAttributes['media'];
+
+      if (mediaA && mediaB) {
+        return renderer.compareMediaQueries(mediaA, mediaB);
+      }
+
+      if (mediaA || mediaB) {
+        return mediaA ? 1 : -1;
+      }
+
+      return 0;
+    });
+
+  return stylesheets
+    .map(stylesheet => {
+      const cssRules = stylesheet.cssRules();
+      // don't want to create any empty style elements
+      if (!cssRules.length) {
+        return null;
+      }
+
+      return createElement('style', {
+        key: stylesheet.bucketName,
+
+        // TODO: support "nonce"
+        // ...renderer.styleNodeAttributes,
+        ...stylesheet.elementAttributes,
+        'data-make-styles-rehydration': 'true',
+
+        dangerouslySetInnerHTML: {
+          __html: cssRules.join(''),
+        },
+      });
+    })
+    .filter(Boolean) as ReactElement[];
+}

package/src/stories/ComponentStyles.stories.tsx

@@ -0,0 +1,55 @@
+import type * as React from 'react';
+import type { StoryObj } from '@storybook/react-vite';
+
+import { makeStyles, mergeClasses, shorthands } from '../';
+
+const tokens = {
+  brandBackground: '#106ebe',
+  brandBackgroundHover: '#2899f5',
+};
+
+const useButtonStyles = makeStyles({
+  root: {
+    backgroundColor: 'transparent',
+    outlineStyle: 'none',
+    ...shorthands.borderRadius('.3em'),
+    ...shorthands.border('1px', 'solid', '#333'),
+    ...shorthands.padding('.3em', '1em'),
+    ':hover': {
+      cursor: 'pointer',
+      backgroundColor: '#ddd',
+    },
+  },
+
+  primary: {
+    backgroundColor: tokens.brandBackground,
+    color: '#eff6fc',
+    ':hover': {
+      backgroundColor: tokens.brandBackgroundHover,
+    },
+  },
+});
+
+const Button: React.FunctionComponent<{ className?: string; primary?: boolean }> = ({
+  className,
+  primary = false,
+  ...props
+}) => {
+  const classes = useButtonStyles();
+  const mergedClasses = mergeClasses(classes.root, primary && classes.primary, className);
+  return <button {...props} className={mergedClasses} />;
+};
+
+export const ComponentStyles: StoryObj<{ primary: boolean }> = {
+  render: args => {
+    return <Button {...args}>button</Button>;
+  },
+
+  args: {
+    primary: false,
+  },
+};
+
+export default {
+  title: 'Component styles',
+};

package/src/stories/DOMRendererFilter.stories.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import type { StoryObj } from '@storybook/react-vite';
+
+import { createDOMRenderer } from '@griffel/core';
+import { makeStyles, RendererProvider, shorthands } from '../';
+
+const useStyles = makeStyles({
+  root: {
+    width: '200px',
+    height: '100px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...shorthands.border('1px', 'solid', '#333'),
+    backgroundColor: 'cornflowerblue',
+  },
+});
+
+const ColorBox: React.FC = () => {
+  const classes = useStyles();
+
+  return <div className={classes.root}>blue box</div>;
+};
+
+const CustomRendererProvider: React.FC<{ children: React.ReactNode; filterEnabled: boolean }> = ({
+  children,
+  filterEnabled,
+}) => {
+  const customDOMRenderer = React.useMemo(() => {
+    return createDOMRenderer(undefined, {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      unstable_filterCSSRule: cssRule => {
+        // Filter out background-color
+        return !filterEnabled || cssRule.indexOf('{background-color:') === -1;
+      },
+    });
+  }, [filterEnabled]);
+
+  return <RendererProvider renderer={customDOMRenderer}>{children}</RendererProvider>;
+};
+
+export const DOMRendererFilter: StoryObj<{ filterEnabled: boolean }> = {
+  render: ({ filterEnabled }) => {
+    return (
+      <CustomRendererProvider filterEnabled={filterEnabled}>
+        <p>
+          It is possible to define a filter function in <code>DOMRenderer</code> to filter out CSS rules before adding
+          them to DOM. The classes are still applied to an element.
+        </p>
+        <p>Once the CSS rule is added, there is no way to remove it.</p>
+        <ol>
+          <li>Render this story with filter enabled &rarr; it renders the box without a background.</li>
+          <li>Disable the filter &rarr; story is re-rendered, blue background is added to the box.</li>
+          <li>
+            Enable the filter again &rarr; there is still the blue background, you need to refresh the page to get rid
+            of the background
+          </li>
+        </ol>
+        <p style={{ color: 'red' }}>
+          Filter is currently marked as unstable. This functionality can be changed or removed without considering it a
+          breaking change!
+        </p>
+
+        <ColorBox />
+      </CustomRendererProvider>
+    );
+  },
+
+  args: {
+    filterEnabled: true,
+  },
+};
+
+export default {
+  title: 'unstable_filterCSSRule',
+};