@compiled/react 0.18.6 → 0.19.0

package/dist/browser/jsx/jsx-dev-runtime.d.ts

@@ -1,2 +1,7 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsxDEV: typeof ReactJSXRuntimeDev.jsxDEV;

package/dist/browser/jsx/jsx-dev-runtime.js

@@ -1,4 +1,4 @@
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export const Fragment = ReactJSXRuntimeDev.Fragment;
+export const jsxDEV = ReactJSXRuntimeDev.jsxDEV;
 //# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/browser/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,gDAAgD;AAChD,kGAAkG;AAClG,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC"}

package/dist/browser/jsx/jsx-runtime.d.ts

@@ -1,2 +1,8 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsx: typeof ReactJSXRuntime.jsx;
+export declare const jsxs: typeof ReactJSXRuntime.jsxs;

package/dist/browser/jsx/jsx-runtime.js

@@ -1,4 +1,5 @@
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export const Fragment = ReactJSXRuntime.Fragment;
+export const jsx = ReactJSXRuntime.jsx;
+export const jsxs = ReactJSXRuntime.jsxs;
 //# sourceMappingURL=jsx-runtime.js.map

package/dist/browser/jsx/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,mBAAmB,CAAC;AACrD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;AACjD,MAAM,CAAC,MAAM,GAAG,GAA+B,eAAe,CAAC,GAAG,CAAC;AACnE,MAAM,CAAC,MAAM,IAAI,GAAgC,eAAe,CAAC,IAAI,CAAC"}

package/dist/cjs/jsx/jsx-dev-runtime.d.ts

@@ -1,2 +1,7 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsxDEV: typeof ReactJSXRuntimeDev.jsxDEV;

package/dist/cjs/jsx/jsx-dev-runtime.js

@@ -10,11 +10,21 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-__exportStar(require("react/jsx-dev-runtime"), exports);
+exports.jsxDEV = exports.Fragment = void 0;
+const ReactJSXRuntimeDev = __importStar(require("react/jsx-dev-runtime"));
+exports.Fragment = ReactJSXRuntimeDev.Fragment;
+exports.jsxDEV = ReactJSXRuntimeDev.jsxDEV;
 //# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/cjs/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAEA,gDAAgD;AAChD,kGAAkG;AAClG,wDAAsC"}
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,0EAA4D;AAC/C,QAAA,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACvC,QAAA,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC"}

package/dist/cjs/jsx/jsx-runtime.d.ts

@@ -1,2 +1,8 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsx: typeof ReactJSXRuntime.jsx;
+export declare const jsxs: typeof ReactJSXRuntime.jsxs;

package/dist/cjs/jsx/jsx-runtime.js

@@ -10,11 +10,22 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-__exportStar(require("react/jsx-runtime"), exports);
+exports.jsxs = exports.jsx = exports.Fragment = void 0;
+const ReactJSXRuntime = __importStar(require("react/jsx-runtime"));
+exports.Fragment = ReactJSXRuntime.Fragment;
+exports.jsx = ReactJSXRuntime.jsx;
+exports.jsxs = ReactJSXRuntime.jsxs;
 //# sourceMappingURL=jsx-runtime.js.map

package/dist/cjs/jsx/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,oDAAkC"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,mEAAqD;AACxC,QAAA,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;AACpC,QAAA,GAAG,GAA+B,eAAe,CAAC,GAAG,CAAC;AACtD,QAAA,IAAI,GAAgC,eAAe,CAAC,IAAI,CAAC"}

package/dist/esm/jsx/jsx-dev-runtime.d.ts

@@ -1,2 +1,7 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsxDEV: typeof ReactJSXRuntimeDev.jsxDEV;

package/dist/esm/jsx/jsx-dev-runtime.js

@@ -1,4 +1,4 @@
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export const Fragment = ReactJSXRuntimeDev.Fragment;
+export const jsxDEV = ReactJSXRuntimeDev.jsxDEV;
 //# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/esm/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,gDAAgD;AAChD,kGAAkG;AAClG,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC"}

package/dist/esm/jsx/jsx-runtime.d.ts

@@ -1,2 +1,8 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsx: typeof ReactJSXRuntime.jsx;
+export declare const jsxs: typeof ReactJSXRuntime.jsxs;

package/dist/esm/jsx/jsx-runtime.js

@@ -1,4 +1,5 @@
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export const Fragment = ReactJSXRuntime.Fragment;
+export const jsx = ReactJSXRuntime.jsx;
+export const jsxs = ReactJSXRuntime.jsxs;
 //# sourceMappingURL=jsx-runtime.js.map

package/dist/esm/jsx/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,mBAAmB,CAAC;AACrD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;AACjD,MAAM,CAAC,MAAM,GAAG,GAA+B,eAAe,CAAC,GAAG,CAAC;AACnE,MAAM,CAAC,MAAM,IAAI,GAAgC,eAAe,CAAC,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.18.6",
+  "version": "0.19.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -78,15 +78,15 @@
     "@compiled/benchmark": "^1.1.0",
     "@compiled/utils": "^0.13.0",
     "@fixture/strict-api-test": "*",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.1.0",
     "@types/jsdom": "^16.2.15",
-    "@types/react-dom": "^17.0.22",
+    "@types/react-dom": "^18.3.1",
     "expect-type": "^0.20.0",
     "jsdom": "^19.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "react": ">= 16.12.0"
+    "react": ">=18.0.0"
   }
 }

package/src/__tests__/server-side-hydrate.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 
 import { CC, CS } from '../runtime';
 
@@ -34,12 +34,12 @@ describe('server side hydrate', () => {
     );
 
     flushRuntimeModule();
-    hydrate(
+    hydrateRoot(
+      elem,
       <CC>
         <CS>{['.foo { color: blue; }', '.foo { color: blue; }']}</CS>
         <div className="foo">hello world</div>
-      </CC>,
-      elem
+      </CC>
     );
 
     expect(console.error).not.toHaveBeenCalled();

package/src/jsx/jsx-dev-runtime.ts

@@ -1,5 +1,5 @@
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
 
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export const Fragment = ReactJSXRuntimeDev.Fragment;
+export const jsxDEV = ReactJSXRuntimeDev.jsxDEV;

package/src/jsx/jsx-runtime.ts

@@ -1,5 +1,6 @@
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
 
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export const Fragment = ReactJSXRuntime.Fragment;
+export const jsx: typeof ReactJSXRuntime.jsx = ReactJSXRuntime.jsx;
+export const jsxs: typeof ReactJSXRuntime.jsxs = ReactJSXRuntime.jsxs;

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

@@ -2,7 +2,7 @@ import { runBenchmark } from '@compiled/benchmark';
 import { JSDOM } from 'jsdom';
 import * as React from 'react';
 import { memo } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
 
 import { CC, CS } from '../index';
@@ -66,9 +66,8 @@ describe('CS benchmark', () => {
               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')
+              createRoot(globalThis.document.getElementById('root')!).render(
+                <>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>
               );
             };
 

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

@@ -19,7 +19,7 @@ describe('<Style />', () => {
   });
 
   // We want to isolate the test to correctly mimic the environment being loaded in once
-  const createIsolatedTest = (callback: (Style: ComponentType) => void) => {
+  const createIsolatedTest = (callback: (Style: ComponentType<{ children: string[] }>) => void) => {
     jest.isolateModules(() => {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const Style = require('../style');

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

@@ -236,7 +236,7 @@ describe('styled component', () => {
   });
 
   it('should inherit types from composed component', () => {
-    const Link = (props: { href: string }) => <a {...props} />;
+    const Link = (props: React.PropsWithChildren<{ href: string }>) => <a {...props} />;
     const StyledLink = styled(Link)({
       fontSize: 12,
     });