@compiled/react 0.8.0 → 0.10.1

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,103 +1,137 @@
-import React from 'react';
 import { render } from '@testing-library/react';
-import Style from '../style';
+import React from 'react';
+import type { ComponentType } from 'react';
 
 jest.mock('../is-node', () => ({
   isNodeEnvironment: () => false,
 }));
 
 describe('<Style />', () => {
+  let consoleErrorSpy: jest.SpyInstance;
+
   beforeEach(() => {
-    // Reset style tags in head before each test so that it will remove styles
-    // injected by test
-    document.head.querySelectorAll('style').forEach((styleElement) => {
-      styleElement.textContent = '';
-    });
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
   });
 
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+    document.head.innerHTML = '';
+  });
+
+  // We want to isolate the test to correctly mimic the environment being loaded in once
+  const createIsolatedTest = (callback: (Style: ComponentType) => void) => {
+    jest.isolateModules(() => {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const Style = require('../style');
+
+      callback(Style.default);
+    });
+  };
+
   it('should render nothing on the client', () => {
-    const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
 
-    expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
+      expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should add style to the head on the client', () => {
-    render(<Style>{[`.b { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      render(<Style>{[`.b { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
+      expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should only add one style if it was already added', () => {
-    render(<Style>{[`.c { display: block; }`]}</Style>);
-    render(<Style>{[`.c { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      render(<Style>{[`.c { display: block; }`]}</Style>);
+      render(<Style>{[`.c { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
+      expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should noop in prod', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'production';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'production';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).not.toHaveBeenCalled();
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should warn in dev when using a dangerous pseduo selector', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'development';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'development';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).toHaveBeenCalled();
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
   });
 
   it('should warn in dev only once', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'development';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'development';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringMatching('Selectors ":first-child, :nth-child" are dangerous to use')
+      );
+    });
   });
 
   it('should render style tags in buckets', () => {
-    render(
-      <Style>
-        {[
-          `._a1234567:hover{ color: red; }`,
-          `._b1234567:active{ color: blue; }`,
-          `._c1234567:link{ color: green; }`,
-          `._d1234567{ display: block; }`,
-          `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
-          `._f1234567:focus{ color: pink; }`,
-          `._g1234567:visited{ color: grey; }`,
-          `._h1234567:focus-visible{ color: white; }`,
-          `._i1234567:focus-within{ color: black; }`,
-        ]}
-      </Style>
-    );
-
-    expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style>._d1234567{ display: block; }</style>
-      <style>._c1234567:link{ color: green; }</style>
-      <style>._g1234567:visited{ color: grey; }</style>
-      <style>._i1234567:focus-within{ color: black; }</style>
-      <style>._f1234567:focus{ color: pink; }</style>
-      <style>._h1234567:focus-visible{ color: white; }</style>
-      <style>._a1234567:hover{ color: red; }</style>
-      <style>._b1234567:active{ color: blue; }</style>
-      <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
-      "
-    `);
+    createIsolatedTest((Style) => {
+      render(
+        <Style>
+          {[
+            `._a1234567:hover{ color: red; }`,
+            `._b1234567:active{ color: blue; }`,
+            `._c1234567:link{ color: green; }`,
+            `._d1234567{ display: block; }`,
+            `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
+            `._f1234567:focus{ color: pink; }`,
+            `._g1234567:visited{ color: grey; }`,
+            `._h1234567:focus-visible{ color: white; }`,
+            `._i1234567:focus-within{ color: black; }`,
+          ]}
+        </Style>
+      );
+
+      expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
+        "<style>._d1234567{ display: block; }</style>
+        <style>._c1234567:link{ color: green; }</style>
+        <style>._g1234567:visited{ color: grey; }</style>
+        <style>._i1234567:focus-within{ color: black; }</style>
+        <style>._f1234567:focus{ color: pink; }</style>
+        <style>._h1234567:focus-visible{ color: white; }</style>
+        <style>._a1234567:hover{ color: red; }</style>
+        <style>._b1234567:active{ color: blue; }</style>
+        <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
+        "
+      `);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should update styles', () => {
-    const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
 
-    rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
+      rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
+      expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 });

package/src/runtime/ax.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ax
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 /**

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

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for css-custom-property
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @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/dev-warnings.js.flow

@@ -1,8 +1,7 @@
 /**
  * Flowtype definitions for dev-warnings
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
-declare export var warn: (str: string, ...args: any[]) => void;
 declare export var analyzeCssInDev: (sheet: string) => void;

package/src/runtime/dev-warnings.tsx

@@ -1,7 +1,7 @@
 const selectorsToWarn = [':first-child', ':nth-child'];
 const hasWarned: Record<string, true> = {};
 
-export const warn = (str: string, ...args: any[]): void =>
+const warn = (str: string, ...args: any[]): void =>
   console.error(
     `
  ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗

package/src/runtime/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 declare export { default as CS } from './style';

package/src/runtime/is-node.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for is-node
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 /**

package/src/runtime/sheet.js.flow

@@ -1,10 +1,10 @@
 /**
  * Flowtype definitions for sheet
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * 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`.