Fix: Perform Node/SSR check without process (#918)

* Check for `document` instead of `process` to check for SSR

* Changeset

* Fixup tests - JSDOM now looks like a browser, not SSR

* Allow tests to disable caching

* Fix jsdoc typo

* Rename cache helper file

* Move replace plugin to react package only and use window instead of document

* Use a common config for the transform in React package

Co-authored-by: Jake Lane <jlane2@atlassian.com>

Author: tnienhouse-atl

.changeset/seven-walls-scream.md

@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Changed the SSR check to be based on the presence of `document` instead of looking for Node processes.

package.json

@@ -143,7 +143,7 @@
     },
     {
       "path": "./packages/react/dist/browser/runtime.js",
-      "limit": "435B",
+      "limit": "436B",
       "import": "{ CC, CS }",
       "ignore": [
         "react"

packages/react/src/__tests__/browser.test.tsx

@@ -2,12 +2,6 @@ import { styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 import React from 'react';
 
-// TODO: When we move back to browser checking (window vs. process) we can remove
-// this and replace with the "jest-environment node" pragma.
-jest.mock('../../src/runtime/is-node', () => ({
-  isNodeEnvironment: () => false,
-}));
-
 describe('browser', () => {
   beforeEach(() => {
     // Reset style tags in head before each test so that it will remove styles

packages/react/src/keyframes/__tests__/index.test.tsx

@@ -7,15 +7,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', () => {

packages/react/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';
 

packages/react/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;
 

packages/react/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;

packages/react/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';
+};

packages/react/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';
 };

packages/react/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]!;

packages/react/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.

packages/react/tsconfig.browser.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.options.json",
+  "extends": "./tsconfig.options.json",
   "compilerOptions": {
     "outDir": "dist/browser",
     "plugins": [
@@ -10,7 +10,6 @@
         }
       }
     ],
-    "rootDir": "src",
     "tsBuildInfoFile": "tsconfig.browser.tsbuildinfo"
   },
   "references": [{ "path": "../benchmark" }, { "path": "../jest" }]

packages/react/tsconfig.cjs.json

@@ -1,9 +1,8 @@
 {
-  "extends": "../tsconfig.options.json",
+  "extends": "./tsconfig.options.json",
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "dist/cjs",
-    "rootDir": "src",
     "tsBuildInfoFile": "tsconfig.cjs.tsbuildinfo"
   },
   "references": [{ "path": "../benchmark" }, { "path": "../jest" }]

packages/react/tsconfig.json

@@ -1,8 +1,7 @@
 {
-  "extends": "../tsconfig.options.json",
+  "extends": "./tsconfig.options.json",
   "compilerOptions": {
     "outDir": "dist/esm",
-    "rootDir": "src",
     "tsBuildInfoFile": "tsconfig.esm.tsbuildinfo"
   },
   "references": [{ "path": "../benchmark" }, { "path": "../jest" }]

packages/react/tsconfig.options.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.options.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "plugins": [
+      {
+        "transform": "ts-transform-define",
+        "replace": {
+          "isCacheDisabled()": "false"
+        }
+      }
+    ]
+  }
+}