@compiled/react 0.17.1 → 0.17.3

package/dist/browser/index.d.ts

@@ -13,6 +13,7 @@ export declare const jsx: typeof createElement;
 export declare namespace jsx {
     namespace JSX {
         type Element = CompiledJSX.Element;
+        type ElementType = CompiledJSX.ElementType;
         type ElementClass = CompiledJSX.ElementClass;
         type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
         type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;

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/index.d.ts

@@ -13,6 +13,7 @@ export declare const jsx: typeof createElement;
 export declare namespace jsx {
     namespace JSX {
         type Element = CompiledJSX.Element;
+        type ElementType = CompiledJSX.ElementType;
         type ElementClass = CompiledJSX.ElementClass;
         type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
         type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;

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/index.d.ts

@@ -13,6 +13,7 @@ export declare const jsx: typeof createElement;
 export declare namespace jsx {
     namespace JSX {
         type Element = CompiledJSX.Element;
+        type ElementType = CompiledJSX.ElementType;
         type ElementClass = CompiledJSX.ElementClass;
         type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
         type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;

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.1",
+  "version": "0.17.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",

package/src/__tests__/browser.test.tsx

@@ -100,7 +100,7 @@ describe('browser', () => {
       <style nonce="k0Mp1lEd">._f8pjbf54:focus{color:green}</style>
       <style nonce="k0Mp1lEd">._30l31gy6:hover{color:yellow}</style>
       <style nonce="k0Mp1lEd">._9h8h13q2:active{color:blue}</style>
-      <style nonce="k0Mp1lEd">@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible, ._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}</style>
+      <style nonce="k0Mp1lEd">@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible, ._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}</style>
       "
     `);
   });

package/src/__tests__/jest-matcher.test.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @compiled/react */
 // This test belongs in @compiled/jest - but can't be placed there due to a circular dependency.
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { styled } from '@compiled/react';
+import { cssMap, styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 
 describe('toHaveCompliedCss', () => {
@@ -124,6 +124,22 @@ describe('toHaveCompliedCss', () => {
     expect(el).toHaveCompiledCss('color', 'blue', { target: ':active' });
   });
 
+  it('should match camelCase css vars', () => {
+    const styles = cssMap({ root: { '--myCamelVar': 'red' } });
+
+    const { getByText } = render(<div css={styles.root}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('--myCamelVar', 'red');
+  });
+
+  it('should match kebab-case css vars', () => {
+    const styles = cssMap({ root: { '--my-kebab-var': 'green' } });
+
+    const { getByText } = render(<div css={styles.root}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('--my-kebab-var', 'green');
+  });
+
   it('should match styles with media', () => {
     const { getByText } = render(
       <div

package/src/__tests__/ssr.test.tsx

@@ -135,8 +135,8 @@ describe('SSR', () => {
     );
 
     expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style data-cmpld="true" nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._ysv75scu:link{color:red}._105332ev:visited{color:pink}._f8pjbf54:focus{color:green}._30l31gy6:hover{color:yellow}._9h8h13q2:active{color:blue}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._1cld11x8:active{color:black}}</style>
-      <a href="https://atlassian.design" class="_1e0c1txw _1wyb12am _syaz1cnh _30l31gy6 _9h8h13q2 _ysv75scu _1df61gy6 _7okp11x8 _f8pjbf54 _105332ev _1o8z1gy6 _1cld11x8">Atlassian Design System</a>"
+      "<style data-cmpld="true" nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._ysv75scu:link{color:red}._105332ev:visited{color:pink}._f8pjbf54:focus{color:green}._30l31gy6:hover{color:yellow}._9h8h13q2:active{color:blue}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._1cld11x8:active{color:black}}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}</style>
+      <a href="https://atlassian.design" class="_1e0c1txw _1wyb12am _syaz1cnh _ysv75scu _105332ev _f8pjbf54 _30l31gy6 _9h8h13q2 _1o8z1gy6 _1cld11x8 _1df61gy6 _7okp11x8">Atlassian Design System</a>"
     `);
   });
 

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/index.ts

@@ -39,6 +39,7 @@ export const jsx = createElement;
 export namespace jsx {
   export namespace JSX {
     export type Element = CompiledJSX.Element;
+    export type ElementType = CompiledJSX.ElementType;
     export type ElementClass = CompiledJSX.ElementClass;
     export type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
     export type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;

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];
 };