@compiled/react 0.10.1 → 0.10.4

package/src/keyframes/__tests__/index.test.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { keyframes, styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 
@@ -7,15 +8,27 @@ import defaultFadeOut, { namedFadeOut, fadeOut as shadowedFadeOut } from '../__f
 const getOpacity = (str: string | number) => str;
 
 const getKeyframe = (name: string) => {
-  const styles = Array.from(
-    document.body.querySelectorAll('style'),
-    (style) => style.innerHTML
-  ).join('\n');
+  const searchStr = `@keyframes ${name}`;
 
-  return styles.substring(styles.indexOf(`@keyframes ${name}`));
+  return Array.from(document.head.querySelectorAll('style'), (style) => style.innerHTML)
+    .filter((style) => style.indexOf(searchStr) >= 0)
+    .map((style) => style.substring(style.indexOf(searchStr)))
+    .join('\n');
 };
 
 describe('keyframes', () => {
+  beforeAll(() => {
+    process.env.CACHE = 'false';
+  });
+
+  afterAll(() => {
+    delete process.env.CACHE;
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+  });
+
   describe('referenced through a css prop', () => {
     describe('render an animation', () => {
       it('given an object call expression argument', () => {

package/src/runtime/__perf__/cs.test.tsx

@@ -1,111 +1,156 @@
 import { runBenchmark } from '@compiled/benchmark';
+import { JSDOM } from 'jsdom';
 import * as React from 'react';
+import { memo } from 'react';
+import { render } from 'react-dom';
 import { renderToString } from 'react-dom/server';
 
 import { CC, CS } from '../index';
 
-import { StyleArr, StyleStr } from './utils/cs';
+const MemoCS = memo(CS, () => true);
+
+import { StyleBucketFromArray, StyleBucketFromString } from './utils/cs';
 
 describe('CS benchmark', () => {
-  it('completes with CS (1 array element) or StyleArr as the fastest', async () => {
-    const stylesArr = [
-      '._s7n4jp4b{vertical-align:top}',
-      '._1reo15vq{overflow-x:hidden}',
-      '._18m915vq{overflow-y:hidden}',
-      '._1bto1l2s{text-overflow:ellipsis}',
-      '._o5721q9c{white-space:nowrap}',
-      '._ca0qidpf{padding-top:0}',
-      '._u5f31y44{padding-right:4px}',
-      '._n3tdidpf{padding-bottom:0}',
-      '._19bv1y44{padding-left:4px}',
-      '._p12f12xx{max-width:100px}',
-      '._1bsb1osq{width:100%}',
-    ];
+  describe.each(['server', 'client'])('on the %s', (env) => {
+    const document = globalThis.document;
+    const window = globalThis.window;
+
+    beforeAll(() => {
+      if (env === 'server') {
+        // @ts-expect-error
+        delete globalThis.document;
+        // @ts-expect-error
+        delete globalThis.window;
+      } else {
+        const dom = new JSDOM('<div id="root"></div>');
+        globalThis.document = dom.window.document;
+        // @ts-expect-error
+        globalThis.window = dom.window;
+      }
+    });
+
+    afterAll(() => {
+      globalThis.document = document;
+      globalThis.window = window;
+    });
+
+    const fastest =
+      env === 'server'
+        ? ['StyleBucketFromArray', 'StyleBucketFromString']
+        : ['MemoCS (1 array element)', 'MemoCS (n array elements)'];
 
-    const stylesStr = stylesArr.join('');
+    it(`completes with [${fastest.join(', ')}] as the fastest`, async () => {
+      const stylesArr = [
+        '._s7n4jp4b{vertical-align:top}',
+        '._1reo15vq{overflow-x:hidden}',
+        '._18m915vq{overflow-y:hidden}',
+        '._1bto1l2s{text-overflow:ellipsis}',
+        '._o5721q9c{white-space:nowrap}',
+        '._ca0qidpf{padding-top:0}',
+        '._u5f31y44{padding-right:4px}',
+        '._n3tdidpf{padding-bottom:0}',
+        '._19bv1y44{padding-left:4px}',
+        '._p12f12xx{max-width:100px}',
+        '._1bsb1osq{width:100%}',
+      ];
 
-    const className = [
-      '_bfhk1jys',
-      '_2rko1l7b',
-      '_vchhusvi',
-      '_syaz4rde',
-      '_1e0c1o8l',
-      '_1wyb1skh',
-      '_k48p1fw0',
-      '_vwz4kb7n',
-      '_p12f1osq',
-      '_ca0qyh40',
-      '_u5f3idpf',
-      '_n3td1l7b',
-      '_19bvidpf',
-      '_1p1dangw',
-      '_s7n41q9y',
-    ].join(' ');
+      const stylesStr = stylesArr.join('');
 
-    const style = {
-      '--_16owtcm': 'rgb(227, 252, 239)',
-      '--_kmurgp': 'rgb(0, 102, 68)',
-    } as any;
+      const className = stylesArr.map((rule) => rule.slice(1, 10)).join(' ');
+      const nonce = 'k0Mp1lEd';
 
-    const nonce = 'k0Mp1lEd';
+      const renderJSX =
+        env === 'server'
+          ? (jsx: (key: number) => JSX.Element) => {
+              renderToString(<>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>);
+            }
+          : (jsx: (key: number) => JSX.Element) => {
+              render(
+                <>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>,
+                globalThis.document.getElementById('root')
+              );
+            };
 
-    const benchmark = await runBenchmark('CS', [
-      {
-        name: 'CS (1 array element)',
-        fn: () => {
-          renderToString(
-            <CC>
-              <CS nonce={nonce}>{[stylesStr]}</CS>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+      const tests = [
+        {
+          name: 'CS (1 array element)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`cs1-${key}`}>
+                <CS nonce={nonce}>{[stylesStr]}</CS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'CS (n array elements)',
-        fn: () => {
-          renderToString(
-            <CC>
-              <CS nonce={nonce}>{stylesArr}</CS>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'CS (n array elements)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`csn-${key}`}>
+                <CS nonce={nonce}>{stylesArr}</CS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'StyleArr',
-        fn: () => {
-          renderToString(
-            <CC>
-              <StyleArr nonce={nonce}>{stylesArr}</StyleArr>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'MemoCS (1 array element)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`memo-cs1-${key}`}>
+                <MemoCS nonce={nonce}>{[stylesStr]}</MemoCS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'StyleStr',
-        fn: () => {
-          renderToString(
-            <CC>
-              <StyleStr nonce={nonce}>{stylesStr}</StyleStr>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'MemoCS (n array elements)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`memo-csn-${key}`}>
+                <MemoCS nonce={nonce}>{stylesArr}</MemoCS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-    ]);
+        ...(env === 'server'
+          ? [
+              {
+                name: 'StyleBucketFromArray',
+                fn: () => {
+                  renderJSX((key) => (
+                    <CC key={`sbfa-${key}`}>
+                      <StyleBucketFromArray nonce={nonce}>{stylesArr}</StyleBucketFromArray>
+                      <div className={className} />
+                    </CC>
+                  ));
+                },
+              },
+              {
+                name: 'StyleBucketFromString',
+                fn: () => {
+                  renderJSX((key) => (
+                    <CC key={`sbfs-${key}`}>
+                      <StyleBucketFromString nonce={nonce}>{stylesStr}</StyleBucketFromString>
+                      <div className={className} />
+                    </CC>
+                  ));
+                },
+              },
+            ]
+          : []),
+      ];
 
-    expect(benchmark).toMatchObject({
-      fastest: expect.not.arrayContaining(['StyleStr', 'CS (n array elements)']),
-    });
-  }, 30000);
+      const benchmark = await runBenchmark('CS', tests);
+
+      const slowest = tests.map((t) => t.name).filter((n) => !fastest.includes(n));
+      for (const name of slowest) {
+        expect(benchmark.fastest).not.toContain(name);
+      }
+    }, 60000);
+  });
 });

package/src/runtime/__perf__/utils/cs.tsx

@@ -2,20 +2,17 @@ import React, { createContext, useContext } from 'react';
 
 const Cache = createContext<Record<string, true> | null>(null);
 
-export const useCache = (): Record<string, true> => {
-  return useContext(Cache) || {};
-};
-
-export type StyleStrProps = {
-  children: string;
+export type StyleBucketFromArrayProps = {
+  children: string[];
   nonce: string;
 };
 
-export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null {
-  const inserted = useCache();
+export function StyleBucketFromArray({
+  children: sheets,
+  nonce,
+}: StyleBucketFromArrayProps): JSX.Element | null {
+  const inserted = useContext(Cache) || {};
 
-  // The following code will not exist in the browser bundle.
-  const sheets = children.split('.');
   let toInsert = '';
 
   for (let i = 0; i < sheets.length; i++) {
@@ -33,15 +30,18 @@ export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null
   return <style nonce={nonce}>{toInsert}</style>;
 }
 
-export type StyleArrProps = {
-  children: string[];
+export type StyleBucketFromStringProps = {
+  children: string;
   nonce: string;
 };
 
-export function StyleArr({ children: sheets, nonce }: StyleArrProps): JSX.Element | null {
-  const inserted = useCache();
+export function StyleBucketFromString({
+  children,
+  nonce,
+}: StyleBucketFromStringProps): JSX.Element | null {
+  const inserted = useContext(Cache) || {};
 
-  // The following code will not exist in the browser bundle.
+  const sheets = children.split('.');
   let toInsert = '';
 
   for (let i = 0; i < sheets.length; i++) {

package/src/runtime/__tests__/style-ssr.test.tsx

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import React from 'react';
 import { renderToStaticMarkup, renderToString } from 'react-dom/server';
 

package/src/runtime/__tests__/style.test.tsx

@@ -2,10 +2,6 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import type { ComponentType } from 'react';
 
-jest.mock('../is-node', () => ({
-  isNodeEnvironment: () => false,
-}));
-
 describe('<Style />', () => {
   let consoleErrorSpy: jest.SpyInstance;
 

package/src/runtime/cache.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for cache
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.0
+ * @flow
+ */
+/**
+ * Returns `true` when caching should be disabled, else `false`.
+ *
+ * Any code within this check will be removed in the output bundles:
+ *
+ * ```js
+ * if (isCacheDisabled()) {
+ *   // This code will be removed from the output bundles
+ * }
+ * ```
+ */
+declare export var isCacheDisabled: () => boolean;

package/src/runtime/cache.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns `true` when caching should be disabled, else `false`.
+ *
+ * Any code within this check will be removed in the output bundles:
+ *
+ * ```js
+ * if (isCacheDisabled()) {
+ *   // This code will be removed from the output bundles
+ * }
+ * ```
+ */
+export const isCacheDisabled = (): boolean => {
+  return process.env.NODE_ENV === 'test' && process.env.CACHE === 'false';
+};

package/src/runtime/{is-node.tsx → is-node.ts}

@@ -11,6 +11,5 @@
  * ```
  */
 export const isNodeEnvironment = (): boolean => {
-  // https://nodejs.org/api/process.html#process_process_release
-  return typeof process !== 'undefined' && process?.release?.name === 'node';
+  return typeof window === 'undefined';
 };

package/src/runtime/{sheet.tsx → sheet.ts}

@@ -1,3 +1,4 @@
+import { isCacheDisabled } from './cache';
 import type { Bucket, StyleSheetOpts } from './types';
 
 /**
@@ -77,8 +78,13 @@ function lazyAddStyleBucketToHead(bucketName: Bucket, opts: StyleSheetOpts): HTM
     const tag = document.createElement('style');
     opts.nonce && tag.setAttribute('nonce', opts.nonce);
     tag.appendChild(document.createTextNode(''));
-    styleBucketsInHead[bucketName] = tag;
     document.head.insertBefore(tag, nextBucketFromCache);
+
+    if (isCacheDisabled()) {
+      return tag;
+    }
+
+    styleBucketsInHead[bucketName] = tag;
   }
 
   return styleBucketsInHead[bucketName]!;

package/src/runtime/style-cache.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { createContext, useContext } from 'react';
 
+import { isCacheDisabled } from './cache';
 import { isNodeEnvironment } from './is-node';
 import type { ProviderComponent, UseCacheHook } from './types';
 
@@ -27,6 +28,10 @@ if (!isNodeEnvironment()) {
  * Hook using the cache created on the server or client.
  */
 export const useCache: UseCacheHook = () => {
+  if (isCacheDisabled()) {
+    return {};
+  }
+
   if (isNodeEnvironment()) {
     // On the server we use React Context to we don't leak the cache between SSR calls.
     // During runtime this hook isn't conditionally called - it is at build time that the flow gets decided.

package/src/styled/__tests__/index.test.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { styled } from '@compiled/react';
 import { render } from '@testing-library/react';