@compiled/react 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @compiled/react
 
+## 0.10.0
+
+### Minor Changes
+
+- 427cead: **Breaking change:** When using the `css` prop with [TypeScript](https://www.typescriptlang.org) you now need to declare a JSX pragma enabling types for that module. Previously when importing the `@compiled/react` package the global JSX namespace would be polluted as a side effect potentially causing collisions with other CSS-in-JS libraries. Now thanks to the use of [locally scoped JSX namespaces](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#locally-scoped-jsx-namespaces) the global JSX namespace will no longer be polluted.
+
+  As an added bonus the `css` prop will only be available on JSX elements that have also defined a `className` prop with the potential for more type safe features later on.
+
+  Make sure to update all Compiled dependencies to latest when adopting this change.
+
+  **Automatic runtime**
+
+  ```diff
+  -import '@compiled/react';
+  +/** @jsxImportSource @compiled/react */
+
+  <div css={{ display: 'block' }} />;
+  ```
+
+  **Classic runtime**
+
+  ```diff
+  -import '@compiled/react';
+  +/** @jsx jsx */
+  +import { jsx } from '@compiled/react';
+
+  <div css={{ display: 'block' }} />;
+  ```
+
+  To aid consumers in adopting this change easily, a new ESLint rule `jsx-pragma` has been created which will automatically migrate you to use a JSX pragma if missing when running with `--fix`. The rule takes an option to configure the runtime (either classic or automatic) and defaults to automatic.
+
+  ```sh
+  npm i @compiled/eslint-plugin
+  ```
+
+  ```json
+  {
+    "rules": {
+      "@compiled/jsx-pragma": ["error", { "runtime": "classic" }]
+    }
+  }
+  ```
+
+### Patch Changes
+
+- 79cfb08: Internal refactor changing how the TypeScript compiler picks up source files.
+
 ## 0.9.1
 
 ### Patch Changes

package/dist/browser/class-names/index.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
 export interface ClassNamesProps {
     children: (opts: {

package/dist/browser/class-names/index.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import type { Node } from 'react';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
 export interface ClassNamesProps {
   children: (opts: {

package/dist/browser/class-names/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,UAAU,CAAC,CAAkB;IAC3C,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,UAAU,CAAC,CAAkB;IAC3C,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/css/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/export */
 import { createSetupError } from '../utils/error';
 export default function css(_css) {
     var _values = [];

package/dist/browser/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/index.d.ts

@@ -1,32 +1,22 @@
+import { createElement } from 'react';
+import type { CompiledJSX } from './jsx/jsx-local-namespace';
 import type { CssFunction, CSSProps } from './types';
 export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
+export declare const jsx: typeof createElement;
 export type { CssFunction, CSSProps };
 export type { CssObject } from './styled';
-declare module 'react' {
-    interface DOMAttributes<T> {
-        css?: CssFunction | CssFunction[];
-    }
-}
-declare global {
+export declare namespace jsx {
     namespace JSX {
-        interface IntrinsicAttributes {
-            /**
-             * Tie styles to an element.
-             * It is available when the `@compiled/react` module is in scope.
-             *
-             * ```
-             * css={{ fontSize: 12 }} // Object CSS
-             * css={`font-size: 12px;`} // Template literal CSS
-             * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
-             * ```
-             *
-             * For more help, read the docs:
-             * https://compiledcssinjs.com/docs/api-css-prop
-             */
-            css?: CssFunction | CssFunction[];
-        }
+        type Element = CompiledJSX.Element;
+        type ElementClass = CompiledJSX.ElementClass;
+        type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
+        type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;
+        type LibraryManagedAttributes<C, P> = CompiledJSX.LibraryManagedAttributes<C, P>;
+        type IntrinsicAttributes = CompiledJSX.IntrinsicAttributes;
+        type IntrinsicClassAttributes<T> = CompiledJSX.IntrinsicClassAttributes<T>;
+        type IntrinsicElements = CompiledJSX.IntrinsicElements;
     }
 }

package/dist/browser/index.js

@@ -1,5 +1,9 @@
+import { createElement } from 'react';
 export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
+// Pass through the (classic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+export var jsx = createElement;
 //# sourceMappingURL=index.js.map

package/dist/browser/index.js.flow

@@ -1,40 +1,15 @@
 /**
- * Flowtype definitions for index
+ * THIS IS A MANUALLY CURATED FLOW FILE.
+ *
+ * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.15.0
  * @flow
  */
-import type { CssFunction, CSSProps } from './types';
+import type { CSSProps, CssFunction } from './types';
 declare export { keyframes } from './keyframes';
 declare export { styled } from './styled';
 declare export { ClassNames } from './class-names';
 declare export { default as css } from './css';
 export type { CssFunction, CSSProps };
 export type { CssObject } from './styled';
-declare module 'react' {
-  declare interface DOMAttributes<T> {
-    css?: CssFunction<> | CssFunction<>[];
-  }
-}
-declare module 'global' {
-  declare var JSX: typeof npm$namespace$JSX;
-  declare var npm$namespace$JSX: {|
-    IntrinsicAttributes: Class<JSX$IntrinsicAttributes>,
-  |};
-  declare interface JSX$IntrinsicAttributes {
-    /**
-     * Tie styles to an element.
-     * It is available when the `@compiled/react` module is in scope.
-     *
-     * ```
-     * css={{ fontSize: 12 }} // Object CSS
-     * css={`font-size: 12px;`} // Template literal CSS
-     * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
-     * ```
-     *
-     * For more help, read the docs:
-     * https://compiledcssinjs.com/docs/api-css-prop
-     */
-    css?: CssFunction<> | CssFunction<>[];
-  }
-}

package/dist/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,IAAM,GAAG,GAAG,aAAa,CAAC"}

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

@@ -0,0 +1,2 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+export * from 'react/jsx-dev-runtime';

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

@@ -0,0 +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';
+//# sourceMappingURL=jsx-dev-runtime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.tsx"],"names":[],"mappings":"AAEA,gDAAgD;AAChD,kGAAkG;AAClG,cAAc,uBAAuB,CAAC"}

package/dist/browser/jsx/jsx-local-namespace.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import type { CssFunction } from '../types';
+declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
+    /**
+     * Tie styles to an element.
+     *
+     * ```
+     * css={{ fontSize: 12 }} // Object CSS
+     * css={`font-size: 12px;`} // Template literal CSS
+     * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
+     * ```
+     *
+     * For more help, read the docs:
+     * https://compiledcssinjs.com/docs/api-css-prop
+     */
+    css?: CssFunction | CssFunction[];
+} : {} : {};
+declare type ReactJSXElement = JSX.Element;
+declare type ReactJSXElementClass = JSX.ElementClass;
+declare type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+declare type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+declare type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+declare type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+declare type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+declare type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+export declare namespace CompiledJSX {
+    type Element = ReactJSXElement;
+    type ElementClass = ReactJSXElementClass;
+    type ElementAttributesProperty = ReactJSXElementAttributesProperty;
+    type ElementChildrenAttribute = ReactJSXElementChildrenAttribute;
+    type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>;
+    type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
+    type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
+    type IntrinsicElements = {
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+            css?: CssFunction | CssFunction[];
+        };
+    };
+}
+export {};

package/dist/browser/jsx/jsx-local-namespace.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=jsx-local-namespace.js.map

package/dist/browser/jsx/jsx-local-namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-local-namespace.js","sourceRoot":"","sources":["../../../src/jsx/jsx-local-namespace.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+export * from 'react/jsx-runtime';

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

@@ -0,0 +1,4 @@
+// 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';
+//# sourceMappingURL=jsx-runtime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.tsx"],"names":[],"mappings":"AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,cAAc,mBAAmB,CAAC"}

package/dist/browser/runtime/css-custom-property.d.ts

@@ -7,4 +7,4 @@
  * @param suffix
  * @param prefix
  */
-export default function cssCustomPropertyValue(value: string | number | number | null, suffix?: string | undefined | null, prefix?: string | undefined | null): string | number;
+export default function cssCustomPropertyValue(value: string | number | null | undefined, suffix?: string | undefined | null, prefix?: string | undefined | null): string | number;

package/dist/browser/runtime/css-custom-property.js.flow

@@ -13,7 +13,7 @@
  * @param prefix
  */
 declare export default function cssCustomPropertyValue(
-  value: string | number | number | null,
+  value: string | number | null | void,
   suffix?: string | void | null,
   prefix?: string | void | null
 ): string | number;

package/dist/browser/runtime/css-custom-property.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-custom-property.js","sourceRoot":"","sources":["../../../src/runtime/css-custom-property.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,KAAsC,EACtC,MAAkC,EAClC,MAAkC;IAElC,IAAI,KAAK,IAAI,SAAS,EAAE;QACtB,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,EAAE;gBACV,OAAO,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;aAChC;YAED,OAAO,KAAK,GAAG,MAAM,CAAC;SACvB;QAED,OAAO,KAAK,CAAC;KACd;IAED,qFAAqF;IACrF,4EAA4E;IAC5E,kEAAkE;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC"}
+{"version":3,"file":"css-custom-property.js","sourceRoot":"","sources":["../../../src/runtime/css-custom-property.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,KAAyC,EACzC,MAAkC,EAClC,MAAkC;IAElC,IAAI,KAAK,IAAI,SAAS,EAAE;QACtB,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,EAAE;gBACV,OAAO,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;aAChC;YAED,OAAO,KAAK,GAAG,MAAM,CAAC;SACvB;QAED,OAAO,KAAK,CAAC;KACd;IAED,qFAAqF;IACrF,4EAA4E;IAC5E,kEAAkE;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/dist/browser/runtime/sheet.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
  * Ordered style buckets using their short psuedo name.
  * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.

package/dist/browser/runtime/sheet.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.15.0
  * @flow
  */
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
  * Ordered style buckets using their short psuedo name.
  * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.

package/dist/browser/runtime/style-cache.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-cache.js","sourceRoot":"","sources":["../../../src/runtime/style-cache.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAG9C;;;GAGG;AACH,IAAM,KAAK,GAAQ,MAAoB,CAAC,CAAC,aAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAE/F,IAAI,MAAoB,EAAE;IACxB;;;;OAIG;IACH,IAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAmB,mBAAmB,CAAC,CAAC;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,iGAAiG;QACjG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC;CACF;AAED;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAiB;IACpC,WAAyB;QACvB,mFAAmF;QACnF,wGAAwG;QACxG,sDAAsD;QACtD,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KAChC;IAED,6CAA6C;IAC7C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;GAKG;AACH,IAAM,kBAAkB,GAAsB,UAAC,KAAK;IAClD,WAAyB;QACvB,4EAA4E;QAC5E,sDAAsD;QACtD,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC5B,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAkB,CAAC;KAC3E;IAED,OAAO,KAAK,CAAC,QAAuB,CAAC;AACvC,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"style-cache.js","sourceRoot":"","sources":["../../../src/runtime/style-cache.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAG9C;;;GAGG;AACH,IAAM,KAAK,GAAQ,MAAoB,CAAC,CAAC,aAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAE/F,IAAI,MAAoB,EAAE;IACxB;;;;OAIG;IACH,IAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAmB,mBAAmB,CAAC,CAAC;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,iGAAiG;QACjG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC;CACF;AAED;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAiB;IACpC,WAAyB;QACvB,mFAAmF;QACnF,wGAAwG;QACxG,sDAAsD;QACtD,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KAChC;IAED,6CAA6C;IAC7C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;GAKG;AACH,IAAM,kBAAkB,GAAsB,UAAC,KAAK;IAClD,WAAyB;QACvB,4EAA4E;QAC5E,sDAAsD;QACtD,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC5B,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAkB,CAAC;KAC3E;IAED,OAAO,KAAK,CAAC,QAAuB,CAAC;AACvC,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/browser/runtime/style.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
 import { analyzeCssInDev } from './dev-warnings';
-import { useCache } from './style-cache';
 import { isNodeEnvironment } from './is-node';
+import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
+import { useCache } from './style-cache';
 export default function Style(props) {
     var inserted = useCache();
     if (process.env.NODE_ENV === 'development') {

package/dist/browser/runtime/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/runtime/style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,EAAE,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAU9C,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KACzC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;QACzB,WAAyB;YACvB,IAAM,gBAAc,GAAoC,EAAE,CAAC;YAC3D,IAAI,SAAS,GAAG,KAAK,CAAC;YAEtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;qBAAM;oBACL,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;oBACvB,SAAS,GAAG,IAAI,CAAC;iBAClB;gBAED,IAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBAC7C,gBAAc,CAAC,UAAU,CAAC,GAAG,CAAC,gBAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;aACzE;YAED,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,mDAEE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,uBAAuB,EAAE;oBACvB,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,gBAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;iBAC7E,GACD,CACH,CAAC;SACH;aAAM;YACL,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;gBAED,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;gBACvB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/runtime/style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,UAAU,EAAE,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAWzC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KACzC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;QACzB,WAAyB;YACvB,IAAM,gBAAc,GAAoC,EAAE,CAAC;YAC3D,IAAI,SAAS,GAAG,KAAK,CAAC;YAEtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;qBAAM;oBACL,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;oBACvB,SAAS,GAAG,IAAI,CAAC;iBAClB;gBAED,IAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBAC7C,gBAAc,CAAC,UAAU,CAAC,GAAG,CAAC,gBAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;aACzE;YAED,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,mDAEE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,uBAAuB,EAAE;oBACvB,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,gBAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;iBAC7E,GACD,CACH,CAAC;SACH;aAAM;YACL,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;gBAED,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;gBACvB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/browser/styled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAyDlD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,IAAM,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAwDlD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,IAAM,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/dist/cjs/class-names/index.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
 export interface ClassNamesProps {
     children: (opts: {

package/dist/cjs/class-names/index.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import type { Node } from 'react';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
 export interface ClassNamesProps {
   children: (opts: {

package/dist/cjs/class-names/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":";;;AACA,wCAAkD;AAYlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAgB,UAAU,CAAC,CAAkB;IAC3C,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AAFD,gCAEC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":";;;AAGA,wCAAkD;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAgB,UAAU,CAAC,CAAkB;IAC3C,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AAFD,gCAEC"}

package/dist/cjs/css/index.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable import/export */
 Object.defineProperty(exports, "__esModule", { value: true });
 var error_1 = require("../utils/error");
 function css(_css) {

package/dist/cjs/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":";;AAAA,wCAAkD;AAmClD,SAAwB,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":";AAAA,kCAAkC;;AAGlC,wCAAkD;AAkClD,SAAwB,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}

package/dist/cjs/index.d.ts

@@ -1,32 +1,22 @@
+import { createElement } from 'react';
+import type { CompiledJSX } from './jsx/jsx-local-namespace';
 import type { CssFunction, CSSProps } from './types';
 export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
+export declare const jsx: typeof createElement;
 export type { CssFunction, CSSProps };
 export type { CssObject } from './styled';
-declare module 'react' {
-    interface DOMAttributes<T> {
-        css?: CssFunction | CssFunction[];
-    }
-}
-declare global {
+export declare namespace jsx {
     namespace JSX {
-        interface IntrinsicAttributes {
-            /**
-             * Tie styles to an element.
-             * It is available when the `@compiled/react` module is in scope.
-             *
-             * ```
-             * css={{ fontSize: 12 }} // Object CSS
-             * css={`font-size: 12px;`} // Template literal CSS
-             * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
-             * ```
-             *
-             * For more help, read the docs:
-             * https://compiledcssinjs.com/docs/api-css-prop
-             */
-            css?: CssFunction | CssFunction[];
-        }
+        type Element = CompiledJSX.Element;
+        type ElementClass = CompiledJSX.ElementClass;
+        type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
+        type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;
+        type LibraryManagedAttributes<C, P> = CompiledJSX.LibraryManagedAttributes<C, P>;
+        type IntrinsicAttributes = CompiledJSX.IntrinsicAttributes;
+        type IntrinsicClassAttributes<T> = CompiledJSX.IntrinsicClassAttributes<T>;
+        type IntrinsicElements = CompiledJSX.IntrinsicElements;
     }
 }

package/dist/cjs/index.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.css = exports.ClassNames = exports.styled = exports.keyframes = void 0;
+exports.jsx = exports.css = exports.ClassNames = exports.styled = exports.keyframes = void 0;
+var react_1 = require("react");
 var keyframes_1 = require("./keyframes");
 Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
 var styled_1 = require("./styled");
@@ -12,4 +13,7 @@ var class_names_1 = require("./class-names");
 Object.defineProperty(exports, "ClassNames", { enumerable: true, get: function () { return class_names_1.ClassNames; } });
 var css_1 = require("./css");
 Object.defineProperty(exports, "css", { enumerable: true, get: function () { return __importDefault(css_1).default; } });
+// Pass through the (classic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+exports.jsx = react_1.createElement;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.flow

@@ -1,40 +1,15 @@
 /**
- * Flowtype definitions for index
+ * THIS IS A MANUALLY CURATED FLOW FILE.
+ *
+ * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.15.0
  * @flow
  */
-import type { CssFunction, CSSProps } from './types';
+import type { CSSProps, CssFunction } from './types';
 declare export { keyframes } from './keyframes';
 declare export { styled } from './styled';
 declare export { ClassNames } from './class-names';
 declare export { default as css } from './css';
 export type { CssFunction, CSSProps };
 export type { CssObject } from './styled';
-declare module 'react' {
-  declare interface DOMAttributes<T> {
-    css?: CssFunction<> | CssFunction<>[];
-  }
-}
-declare module 'global' {
-  declare var JSX: typeof npm$namespace$JSX;
-  declare var npm$namespace$JSX: {|
-    IntrinsicAttributes: Class<JSX$IntrinsicAttributes>,
-  |};
-  declare interface JSX$IntrinsicAttributes {
-    /**
-     * Tie styles to an element.
-     * It is available when the `@compiled/react` module is in scope.
-     *
-     * ```
-     * css={{ fontSize: 12 }} // Object CSS
-     * css={`font-size: 12px;`} // Template literal CSS
-     * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
-     * ```
-     *
-     * For more help, read the docs:
-     * https://compiledcssinjs.com/docs/api-css-prop
-     */
-    css?: CssFunction<> | CssFunction<>[];
-  }
-}

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;AAEA,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAsC;AAKtC,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AAEvB,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}

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

@@ -0,0 +1,2 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+export * from 'react/jsx-dev-runtime';

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

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    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);
+};
+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);
+//# sourceMappingURL=jsx-dev-runtime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,gDAAgD;AAChD,kGAAkG;AAClG,wDAAsC"}

package/dist/cjs/jsx/jsx-local-namespace.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import type { CssFunction } from '../types';
+declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
+    /**
+     * Tie styles to an element.
+     *
+     * ```
+     * css={{ fontSize: 12 }} // Object CSS
+     * css={`font-size: 12px;`} // Template literal CSS
+     * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
+     * ```
+     *
+     * For more help, read the docs:
+     * https://compiledcssinjs.com/docs/api-css-prop
+     */
+    css?: CssFunction | CssFunction[];
+} : {} : {};
+declare type ReactJSXElement = JSX.Element;
+declare type ReactJSXElementClass = JSX.ElementClass;
+declare type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+declare type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+declare type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+declare type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+declare type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+declare type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+export declare namespace CompiledJSX {
+    type Element = ReactJSXElement;
+    type ElementClass = ReactJSXElementClass;
+    type ElementAttributesProperty = ReactJSXElementAttributesProperty;
+    type ElementChildrenAttribute = ReactJSXElementChildrenAttribute;
+    type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>;
+    type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
+    type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
+    type IntrinsicElements = {
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+            css?: CssFunction | CssFunction[];
+        };
+    };
+}
+export {};

package/dist/cjs/jsx/jsx-local-namespace.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=jsx-local-namespace.js.map

package/dist/cjs/jsx/jsx-local-namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-local-namespace.js","sourceRoot":"","sources":["../../../src/jsx/jsx-local-namespace.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+export * from 'react/jsx-runtime';

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

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    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);
+};
+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);
+//# sourceMappingURL=jsx-runtime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,oDAAkC"}

package/dist/cjs/runtime/css-custom-property.d.ts

@@ -7,4 +7,4 @@
  * @param suffix
  * @param prefix
  */
-export default function cssCustomPropertyValue(value: string | number | number | null, suffix?: string | undefined | null, prefix?: string | undefined | null): string | number;
+export default function cssCustomPropertyValue(value: string | number | null | undefined, suffix?: string | undefined | null, prefix?: string | undefined | null): string | number;

package/dist/cjs/runtime/css-custom-property.js.flow

@@ -13,7 +13,7 @@
  * @param prefix
  */
 declare export default function cssCustomPropertyValue(
-  value: string | number | number | null,
+  value: string | number | null | void,
   suffix?: string | void | null,
   prefix?: string | void | null
 ): string | number;