@compiled/react 0.17.2 → 0.17.3

package/dist/browser/xcss-prop/index.js

@@ -1,4 +1,4 @@
-import { ac } from '../runtime';
+import { ax } from '../runtime';
 /**
  * ## CX
  *
@@ -21,6 +21,6 @@ export const cx = (...styles) => {
     const actualStyles = styles;
     // The output should be a union type of passed in styles. This ensures the call
     // site of xcss prop can raise violations when disallowed styles have been passed.
-    return ac(actualStyles);
+    return ax(actualStyles);
 };
 //# sourceMappingURL=index.js.map

package/dist/cjs/xcss-prop/index.js

@@ -24,7 +24,7 @@ const cx = (...styles) => {
     const actualStyles = styles;
     // The output should be a union type of passed in styles. This ensures the call
     // site of xcss prop can raise violations when disallowed styles have been passed.
-    return (0, runtime_1.ac)(actualStyles);
+    return (0, runtime_1.ax)(actualStyles);
 };
 exports.cx = cx;
 //# sourceMappingURL=index.js.map

package/dist/esm/xcss-prop/index.js

@@ -1,4 +1,4 @@
-import { ac } from '../runtime';
+import { ax } from '../runtime';
 /**
  * ## CX
  *
@@ -21,6 +21,6 @@ export const cx = (...styles) => {
     const actualStyles = styles;
     // The output should be a union type of passed in styles. This ensures the call
     // site of xcss prop can raise violations when disallowed styles have been passed.
-    return ac(actualStyles);
+    return ax(actualStyles);
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",

package/src/create-strict-api/__tests__/__fixtures__/strict-api.ts

@@ -5,8 +5,8 @@ interface CSSPropertiesSchema {
     color: 'var(--ds-text-hover)';
     background: 'var(--ds-surface-hover)' | 'var(--ds-surface-sunken-hover)';
   };
-  color: 'var(--ds-text)' | 'var(--ds-text-bold)';
-  background: 'var(--ds-surface)' | 'var(--ds-surface-sunken)';
+  color: 'var(--ds-text)' | 'var(--ds-text-bold)' | 'var(--ds-text-error)';
+  background: 'var(--ds-surface)' | 'var(--ds-surface-sunken)' | 'var(--ds-surface-overlay)';
   bkgrnd: 'red' | 'green';
 }
 

package/src/create-strict-api/__tests__/pass-through-xcss.test.tsx

@@ -0,0 +1,95 @@
+/** @jsxImportSource @compiled/react */
+import { render } from '@testing-library/react';
+
+import { cssMap, type XCSSProp, cx } from './__fixtures__/strict-api';
+
+const styles = cssMap({
+  rootNative: {
+    color: 'var(--ds-text)',
+    background: 'var(--ds-surface)',
+  },
+  rootComponent: {
+    color: 'var(--ds-text-error)',
+    background: 'var(--ds-surface-overlay)',
+  },
+  bold: {
+    color: 'var(--ds-text-bold)',
+  },
+  sunken: {
+    background: 'var(--ds-surface-sunken)',
+  },
+});
+
+function ComponentPassThrough({
+  xcss,
+}: {
+  xcss?: ReturnType<typeof XCSSProp<'background' | 'color', '&:hover'>>;
+}) {
+  return <NativePassThrough xcss={cx(styles.rootComponent, xcss)} />;
+}
+
+function NativePassThrough({
+  xcss,
+}: {
+  xcss?: ReturnType<typeof XCSSProp<'background' | 'color', '&:hover'>>;
+}) {
+  return <button data-testid="button" className={xcss} css={styles.rootNative} />;
+}
+
+describe('pass-through props.xcss directly to DOM', () => {
+  it('works with no props.xcss', () => {
+    const { getByTestId } = render(<NativePassThrough />);
+
+    expect(getByTestId('button')).toHaveCompiledCss({
+      color: 'var(--ds-text)',
+      background: 'var(--ds-surface)',
+    });
+  });
+
+  it('works with pass-through props.xcss', () => {
+    const { getByTestId } = render(<NativePassThrough xcss={styles.bold} />);
+
+    expect(getByTestId('button')).toHaveCompiledCss({
+      color: 'var(--ds-text-bold)',
+      background: 'var(--ds-surface)', // rootNative styles
+    });
+  });
+
+  it('works with pass-through multiple props.xcss via cx', () => {
+    const { getByTestId } = render(<NativePassThrough xcss={cx(styles.bold, styles.sunken)} />);
+
+    expect(getByTestId('button')).toHaveCompiledCss({
+      color: 'var(--ds-text-bold)',
+      background: 'var(--ds-surface-sunken)',
+    });
+  });
+});
+
+describe('pass-through props.xcss via another component', () => {
+  it('works with no props.xcss', () => {
+    const { getByTestId } = render(<ComponentPassThrough />);
+
+    expect(getByTestId('button')).toHaveCompiledCss({
+      color: 'var(--ds-text-error)',
+      background: 'var(--ds-surface-overlay)',
+    });
+  });
+
+  it('works with pass-through props.xcss', () => {
+    const { getByTestId } = render(<ComponentPassThrough xcss={styles.bold} />);
+
+    expect(getByTestId('button')).toHaveCompiledCss({
+      color: 'var(--ds-text-bold)',
+      background: 'var(--ds-surface-overlay)', // rootComponent styles
+    });
+  });
+
+  it('works with pass-through multiple props.xcss via cx', () => {
+    const { getByTestId } = render(<ComponentPassThrough xcss={cx(styles.bold, styles.sunken)} />);
+
+    expect(getByTestId('button')).toHaveCompiledCss({
+      color: 'var(--ds-text-bold)',
+      background: 'var(--ds-surface-sunken)',
+    });
+  });
+});

package/src/xcss-prop/index.ts

@@ -1,7 +1,7 @@
 import type * as CSS from 'csstype';
 
 import type { ApplySchemaValue } from '../create-strict-api/types';
-import { ac } from '../runtime';
+import { ax } from '../runtime';
 import type { CSSPseudos, CSSPseudoClasses, CSSProperties, StrictCSSProperties } from '../types';
 
 type MarkAsRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
@@ -208,5 +208,5 @@ export const cx = <TStyles extends [...XCSSProp<any, any>[]]>(
 
   // The output should be a union type of passed in styles. This ensures the call
   // site of xcss prop can raise violations when disallowed styles have been passed.
-  return ac(actualStyles) as TStyles[number];
+  return ax(actualStyles) as TStyles[number];
 };