@compiled/react 0.10.0 → 0.10.3

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.tsx

@@ -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

@@ -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

@@ -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';
 

package/src/styled/index.tsx

@@ -58,17 +58,45 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
 }
 
 /**
- * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
+ * ## Styled component
  *
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
+ *
+ * ### Style with objects
+ *
+ * @example
+ * ```
+ * styled.div({
+ *   fontSize: 12,
+ * });
+ * ```
+ *
+ * ### Style with template literals
+ *
+ * @example
  * ```
- * styled.div`font-size: 12px`; // Template literal CSS
- * styled.div({ fontSize: 12 }); // Object CSS
- * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
- * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * ### Compose styles with arrays
+ *
+ * @example
+ * ```
+ * import { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
+ *
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
  */
 export const styled: StyledComponentInstantiator = new Proxy(
   {},

package/CHANGELOG.md

@@ -1,128 +0,0 @@
-# @compiled/react
-
-## 0.10.0
-
-### Minor Changes
-
-- 427cead: **Breaking change:** When using the `css` prop with [TypeScript](https://www.typescriptlang.org) you now need to declare a JSX pragma enabling types for that module. Previously when importing the `@compiled/react` package the global JSX namespace would be polluted as a side effect potentially causing collisions with other CSS-in-JS libraries. Now thanks to the use of [locally scoped JSX namespaces](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#locally-scoped-jsx-namespaces) the global JSX namespace will no longer be polluted.
-
-  As an added bonus the `css` prop will only be available on JSX elements that have also defined a `className` prop with the potential for more type safe features later on.
-
-  Make sure to update all Compiled dependencies to latest when adopting this change.
-
-  **Automatic runtime**
-
-  ```diff
-  -import '@compiled/react';
-  +/** @jsxImportSource @compiled/react */
-
-  <div css={{ display: 'block' }} />;
-  ```
-
-  **Classic runtime**
-
-  ```diff
-  -import '@compiled/react';
-  +/** @jsx jsx */
-  +import { jsx } from '@compiled/react';
-
-  <div css={{ display: 'block' }} />;
-  ```
-
-  To aid consumers in adopting this change easily, a new ESLint rule `jsx-pragma` has been created which will automatically migrate you to use a JSX pragma if missing when running with `--fix`. The rule takes an option to configure the runtime (either classic or automatic) and defaults to automatic.
-
-  ```sh
-  npm i @compiled/eslint-plugin
-  ```
-
-  ```json
-  {
-    "rules": {
-      "@compiled/jsx-pragma": ["error", { "runtime": "classic" }]
-    }
-  }
-  ```
-
-### Patch Changes
-
-- 79cfb08: Internal refactor changing how the TypeScript compiler picks up source files.
-
-## 0.9.1
-
-### Patch Changes
-
-- 4309aaa: Patch inexact flow type on styled
-
-## 0.9.0
-
-### Minor Changes
-
-- 2092839: Allow inline strings and inline css mixins in conditional expressions. Fix ordering of styles in template literals.
-
-## 0.8.0
-
-### Minor Changes
-
-- 4210ff6: Add flow types support
-- 53935b3: Add `ObjectExpression` support to `css`
-
-## 0.7.0
-
-### Minor Changes
-
-- bcb2a68: Add support for `keyframes`
-- a7ab8e1: Add support for conditional rules for `Styled`
-
-## 0.6.13
-
-### Patch Changes
-
-- 13c3a60: add support of additional parameters to css function
-
-## 0.6.12
-
-### Patch Changes
-
-- b5b4e8a: Catch unhandled exception on inserting rules with prefixed selectors.
-
-## 0.6.11
-
-### Patch Changes
-
-- ee3363e: Fix HTML characters escapes in style tags on SSR.
-
-## 0.6.10
-
-### Patch Changes
-
-- 40bc0d9: Package descriptions have been updated.
-- 1b1c964: The `css` mixin API is now available,
-  functioning similarly to the [emotion equivalent](https://emotion.sh/docs/composition).
-
-  ```jsx
-  import { css } from '@compiled/react';
-
-  <div
-    css={css`
-      display: flex;
-      font-size: 50px;
-      color: blue;
-    `}
-  >
-    blue text
-  </div>;
-  ```
-
-  For more help, read the docs: https://compiledcssinjs.com/docs/css.
-
-## 0.6.9
-
-### Patch Changes
-
-- 4032cd4: Memo has been removed from the style component which was breaking re-renders at times.
-
-## 0.6.8
-
-### Patch Changes
-
-- aea3504: Packages now released with [changesets](https://github.com/atlassian/changesets).