@compiled/react 0.9.1 → 0.10.0

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

@@ -0,0 +1,111 @@
+import { runBenchmark } from '@compiled/benchmark';
+import * as React from 'react';
+import { renderToString } from 'react-dom/server';
+
+import { CC, CS } from '../index';
+
+import { StyleArr, StyleStr } 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%}',
+    ];
+
+    const stylesStr = stylesArr.join('');
+
+    const className = [
+      '_bfhk1jys',
+      '_2rko1l7b',
+      '_vchhusvi',
+      '_syaz4rde',
+      '_1e0c1o8l',
+      '_1wyb1skh',
+      '_k48p1fw0',
+      '_vwz4kb7n',
+      '_p12f1osq',
+      '_ca0qyh40',
+      '_u5f3idpf',
+      '_n3td1l7b',
+      '_19bvidpf',
+      '_1p1dangw',
+      '_s7n41q9y',
+    ].join(' ');
+
+    const style = {
+      '--_16owtcm': 'rgb(227, 252, 239)',
+      '--_kmurgp': 'rgb(0, 102, 68)',
+    } as any;
+
+    const nonce = 'k0Mp1lEd';
+
+    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>
+          );
+        },
+      },
+      {
+        name: 'CS (n array elements)',
+        fn: () => {
+          renderToString(
+            <CC>
+              <CS nonce={nonce}>{stylesArr}</CS>
+              <span className={className} style={style}>
+                hello world
+              </span>
+            </CC>
+          );
+        },
+      },
+      {
+        name: 'StyleArr',
+        fn: () => {
+          renderToString(
+            <CC>
+              <StyleArr nonce={nonce}>{stylesArr}</StyleArr>
+              <span className={className} style={style}>
+                hello world
+              </span>
+            </CC>
+          );
+        },
+      },
+      {
+        name: 'StyleStr',
+        fn: () => {
+          renderToString(
+            <CC>
+              <StyleStr nonce={nonce}>{stylesStr}</StyleStr>
+              <span className={className} style={style}>
+                hello world
+              </span>
+            </CC>
+          );
+        },
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: expect.not.arrayContaining(['StyleStr', 'CS (n array elements)']),
+    });
+  }, 30000);
+});

package/src/runtime/__perf__/sheet.test.ts

@@ -0,0 +1,61 @@
+import { runBenchmark } from '@compiled/benchmark';
+
+import insertRule from '../sheet';
+
+import { createStyleSheet } from './utils/sheet';
+
+global.document = {
+  // @ts-expect-error
+  createTextNode: () => {},
+  head: {
+    // @ts-expect-error
+    insertBefore: () => {},
+  },
+  // @ts-expect-error
+  createElement: () => ({
+    appendChild: () => {},
+  }),
+};
+
+describe('sheet benchmark', () => {
+  it('completes with insertRule as the fastest', async () => {
+    const rules = [
+      '._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 benchmark = await runBenchmark('sheet', [
+      {
+        name: 'insertRule',
+        fn: () => {
+          for (const rule of rules) {
+            insertRule(rule, {});
+          }
+        },
+      },
+      {
+        name: 'createStyleSheet',
+        fn: () => {
+          const sheet = createStyleSheet({});
+
+          for (const rule of rules) {
+            sheet(rule);
+          }
+        },
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: expect.arrayContaining(['insertRule']),
+    });
+  }, 30000);
+});

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

@@ -0,0 +1,60 @@
+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;
+  nonce: string;
+};
+
+export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null {
+  const inserted = useCache();
+
+  // The following code will not exist in the browser bundle.
+  const sheets = children.split('.');
+  let toInsert = '';
+
+  for (let i = 0; i < sheets.length; i++) {
+    const sheet = sheets[i];
+    if (inserted[sheet]) {
+      continue;
+    }
+    toInsert += sheet;
+  }
+
+  if (!toInsert) {
+    return null;
+  }
+
+  return <style nonce={nonce}>{toInsert}</style>;
+}
+
+export type StyleArrProps = {
+  children: string[];
+  nonce: string;
+};
+
+export function StyleArr({ children: sheets, nonce }: StyleArrProps): JSX.Element | null {
+  const inserted = useCache();
+
+  // The following code will not exist in the browser bundle.
+  let toInsert = '';
+
+  for (let i = 0; i < sheets.length; i++) {
+    const sheet = sheets[i];
+    if (inserted[sheet]) {
+      continue;
+    }
+    toInsert += sheet;
+  }
+
+  if (!toInsert) {
+    return null;
+  }
+
+  return <style nonce={nonce}>{toInsert}</style>;
+}

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

@@ -0,0 +1,151 @@
+/**
+ * Ordered style buckets using their short psuedo name.
+ * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ */
+export const styleBucketOrdering: string[] = [
+  // catch-all
+  '',
+  // link
+  'l',
+  // visited
+  'v',
+  // focus-within
+  'w',
+  // focus
+  'f',
+  // focus-visible
+  'i',
+  // hover
+  'h',
+  // active
+  'a',
+  // at-rules
+  'm',
+];
+
+/**
+ * Holds all style buckets in memory that have been added to the head.
+ */
+const styleBucketsInHead: Record<string, HTMLStyleElement> = {};
+
+/**
+ * Maps the long pseudo name to the short pseudo name.
+ * Pseudos that match here will be ordered,
+ * everythin else will make their way to the catch all style bucket.
+ * We reduce the pseduo name to save bundlesize.
+ * Thankfully there aren't any overlaps, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.
+ */
+const pseudosMap: Record<string, string> = {
+  // link
+  k: 'l',
+  // visited
+  ited: 'v',
+  // focus-within
+  'us-within': 'w',
+  // focus
+  us: 'f',
+  // focus-visible
+  'us-visible': 'i',
+  // hover
+  er: 'h',
+  // active
+  ive: 'a',
+};
+
+type StyleBucketOptions = {
+  nonce?: string;
+};
+
+/**
+ * Lazily adds a `<style>` bucket to the `<head>`.
+ * This will ensure that the style buckets are ordered.
+ *
+ * @param bucketName Bucket to insert in the head.
+ * @param opts
+ */
+function lazyAddStyleBucketToHead(
+  bucketName: string,
+  { nonce }: StyleBucketOptions
+): HTMLStyleElement {
+  if (!styleBucketsInHead[bucketName]) {
+    let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
+    let nextBucketFromCache = null;
+
+    for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
+      // Find the next bucket which we will add our new style bucket before.
+      const nextBucket = styleBucketsInHead[styleBucketOrdering[currentBucketIndex]];
+      if (nextBucket) {
+        nextBucketFromCache = nextBucket;
+        break;
+      }
+    }
+
+    const tag = document.createElement('style');
+    nonce && tag.setAttribute('nonce', nonce);
+    tag.appendChild(document.createTextNode(''));
+    styleBucketsInHead[bucketName] = tag;
+    document.head.insertBefore(tag, nextBucketFromCache);
+  }
+
+  return styleBucketsInHead[bucketName]!;
+}
+
+/**
+ * Gets the bucket depending on the sheet.
+ * This function makes assumptions as to the form of the input class name.
+ *
+ * Input:
+ *
+ * ```
+ * "._a1234567:hover{ color: red; }"
+ * ```
+ *
+ * Output:
+ *
+ * ```
+ * "h"
+ * ```
+ *
+ * @param sheet styles for which we are getting the bucket
+ */
+const getStyleBucketName = (sheet: string): string => {
+  // We are grouping all the at-rules like @media, @supports etc under `m` bucket.
+  if (sheet.charCodeAt(0) === 64 /* "@" */) {
+    return 'm';
+  }
+
+  /**
+   * We assume that classname will always be 9 character long,
+   * using this the 10th character could be a pseudo declaration.
+   */
+  if (sheet.charCodeAt(10) === 58 /* ":" */) {
+    // We send through a subset of the string instead of the full pseudo name.
+    // For example `"focus-visible"` name would instead of `"us-visible"`.
+    // Return a mapped pseudo else the default catch all bucket.
+    return pseudosMap[sheet.slice(14, sheet.indexOf('{'))] || '';
+  }
+
+  // Return default catch all bucket
+  return '';
+};
+
+export type CreateStyleSheetOptions = StyleBucketOptions;
+
+/**
+ * Returns a style sheet object that is used to move styles to the head of the application during runtime.
+ *
+ * @param opts StyleSheetOpts
+ */
+export function createStyleSheet(opts: CreateStyleSheetOptions) {
+  return (css: string): void => {
+    const bucketName = getStyleBucketName(css);
+    const style = lazyAddStyleBucketToHead(bucketName, opts);
+
+    if (process.env.NODE_ENV === 'production') {
+      const sheet = style.sheet as CSSStyleSheet;
+      sheet.insertRule(css, sheet.cssRules.length);
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  };
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderToStaticMarkup, renderToString } from 'react-dom/server';
+
 import Style from '../style';
 
 describe('<Style />', () => {

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

@@ -1,6 +1,6 @@
+import { render } from '@testing-library/react';
 import React from 'react';
 import type { ComponentType } from 'react';
-import { render } from '@testing-library/react';
 
 jest.mock('../is-node', () => ({
   isNodeEnvironment: () => false,

package/src/runtime/css-custom-property.js.flow

@@ -13,7 +13,7 @@
  * @param prefix
  */
 declare export default function cssCustomPropertyValue(
-  value: string | number | number | null,
+  value: string | number | null | void,
   suffix?: string | void | null,
   prefix?: string | void | null
 ): string | number;

package/src/runtime/css-custom-property.tsx

@@ -8,7 +8,7 @@
  * @param prefix
  */
 export default function cssCustomPropertyValue(
-  value: string | number | number | null,
+  value: string | number | null | undefined,
   suffix?: string | undefined | null,
   prefix?: string | undefined | null
 ): string | number {

package/src/runtime/sheet.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.15.0
  * @flow
  */
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
  * Ordered style buckets using their short psuedo name.
  * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.

package/src/runtime/sheet.tsx

@@ -1,4 +1,4 @@
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 
 /**
  * Ordered style buckets using their short psuedo name.

package/src/runtime/style-cache.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { createContext, useContext } from 'react';
+
 import { isNodeEnvironment } from './is-node';
 import type { ProviderComponent, UseCacheHook } from './types';
 

package/src/runtime/style.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
+
 import { analyzeCssInDev } from './dev-warnings';
-import type { StyleSheetOpts, Bucket } from './types';
-import { useCache } from './style-cache';
 import { isNodeEnvironment } from './is-node';
+import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
+import { useCache } from './style-cache';
+import type { Bucket, StyleSheetOpts } from './types';
 
 interface StyleProps extends StyleSheetOpts {
   /**

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+/** @jsxImportSource @compiled/react */
 import { styled } from '@compiled/react';
+import { render } from '@testing-library/react';
 
 const em = (str: string | number) => str;
 
@@ -139,7 +139,7 @@ describe('styled component', () => {
     expect(StyledDiv.displayName).toEqual(undefined);
   });
 
-  xit('should have a display name', () => {
+  it('should have a display name', () => {
     process.env.NODE_ENV = 'development';
 
     const StyledDiv = styled.div`

package/src/styled/index.tsx

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'react';
-import { createSetupError } from '../utils/error';
+
 import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
+import { createSetupError } from '../utils/error';
 
 /**
  * Typing for the CSS object.