@compiled/react 0.17.0 → 0.17.2

package/dist/browser/index.d.ts

@@ -2,16 +2,18 @@ import { createElement } from 'react';
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
 export { ClassNames } from './class-names';
 export { createStrictAPI } from './create-strict-api';
+export type { PseudosDeclarations, MediaQueries, AllowedStyles, ApplySchema, ApplySchemaMap, } from './create-strict-api/types';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
-export { styled } from './styled';
+export { styled, StyledProps } from './styled';
 export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
-export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
+export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, type CompiledStyles, type Internal$XCSSProp, cx, } from './xcss-prop';
 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/index.js

@@ -5,7 +5,7 @@ export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
 export { styled } from './styled';
-export { cx } from './xcss-prop';
+export { cx, } from './xcss-prop';
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
 export const jsx = createElement;

package/dist/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAQtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAS/C,OAAO,EAML,EAAE,GACH,MAAM,aAAa,CAAC;AAErB,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}

package/dist/cjs/index.d.ts

@@ -2,16 +2,18 @@ import { createElement } from 'react';
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
 export { ClassNames } from './class-names';
 export { createStrictAPI } from './create-strict-api';
+export type { PseudosDeclarations, MediaQueries, AllowedStyles, ApplySchema, ApplySchemaMap, } from './create-strict-api/types';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
-export { styled } from './styled';
+export { styled, StyledProps } from './styled';
 export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
-export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
+export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, type CompiledStyles, type Internal$XCSSProp, cx, } from './xcss-prop';
 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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAsC;AAItC,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AACvB,qCAA8C;AAArC,kHAAA,OAAO,OAAU;AAC1B,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AASf,yCAA6F;AAAxB,+FAAA,EAAE,OAAA;AAEvE,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAsC;AAItC,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AAQxB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AACvB,qCAA8C;AAArC,kHAAA,OAAO,OAAU;AAC1B,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAA+C;AAAtC,gGAAA,MAAM,OAAA;AASf,yCAOqB;AADnB,+FAAA,EAAE,OAAA;AAGJ,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}

package/dist/esm/index.d.ts

@@ -2,16 +2,18 @@ import { createElement } from 'react';
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
 export { ClassNames } from './class-names';
 export { createStrictAPI } from './create-strict-api';
+export type { PseudosDeclarations, MediaQueries, AllowedStyles, ApplySchema, ApplySchemaMap, } from './create-strict-api/types';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
-export { styled } from './styled';
+export { styled, StyledProps } from './styled';
 export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
-export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
+export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, type CompiledStyles, type Internal$XCSSProp, cx, } from './xcss-prop';
 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/index.js

@@ -5,7 +5,7 @@ export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
 export { styled } from './styled';
-export { cx } from './xcss-prop';
+export { cx, } from './xcss-prop';
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
 export const jsx = createElement;

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAQtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAS/C,OAAO,EAML,EAAE,GACH,MAAM,aAAa,CAAC;AAErB,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "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/index.ts

@@ -4,10 +4,17 @@ import type { CompiledJSX } from './jsx/jsx-local-namespace';
 
 export { ClassNames } from './class-names';
 export { createStrictAPI } from './create-strict-api';
+export type {
+  PseudosDeclarations,
+  MediaQueries,
+  AllowedStyles,
+  ApplySchema,
+  ApplySchemaMap,
+} from './create-strict-api/types';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
-export { styled } from './styled';
+export { styled, StyledProps } from './styled';
 export type {
   CSSProperties,
   CSSProps,
@@ -16,7 +23,14 @@ export type {
   CssType,
   StrictCSSProperties,
 } from './types';
-export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
+export {
+  type XCSSAllProperties,
+  type XCSSAllPseudos,
+  type XCSSProp,
+  type CompiledStyles,
+  type Internal$XCSSProp,
+  cx,
+} from './xcss-prop';
 
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
@@ -25,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;