@compiled/react - npm Package Compare versions

Comparing version 0.9.1 to 0.10.0

CHANGELOG.md

 # @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
@@ -4,0 +51,0 @@

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

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

dist/browser/css/index.js

@@ -0,1 +1,2 @@
+/* eslint-disable import/export */
 import { createSetupError } from '../utils/error';
@@ -2,0 +3,0 @@ export default function css(_css) {

dist/browser/index.d.ts

@@ -0,1 +1,3 @@
+import { createElement } from 'react';
+import type { CompiledJSX } from './jsx/jsx-local-namespace';
 import type { CssFunction, CSSProps } from './types';
@@ -6,28 +8,16 @@ export { keyframes } from './keyframes';
 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;
     }
 }

dist/browser/index.js

@@ -0,1 +1,2 @@
+import { createElement } from 'react';
 export { keyframes } from './keyframes';
@@ -5,2 +6,5 @@ export { styled } from './styled';
 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

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

@@ -10,2 +10,2 @@ /**
  */
-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;

dist/browser/runtime/sheet.d.ts

@@ -1,2 +0,2 @@
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
@@ -3,0 +3,0 @@ * Ordered style buckets using their short psuedo name.

dist/browser/runtime/style.js

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

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

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

dist/cjs/css/index.js

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

dist/cjs/index.d.ts

@@ -0,1 +1,3 @@
+import { createElement } from 'react';
+import type { CompiledJSX } from './jsx/jsx-local-namespace';
 import type { CssFunction, CSSProps } from './types';
@@ -6,28 +8,16 @@ export { keyframes } from './keyframes';
 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;
     }
 }

dist/cjs/index.js

@@ -6,3 +6,4 @@ "use strict";
 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");
@@ -16,2 +17,5 @@ Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
 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

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

@@ -10,2 +10,2 @@ /**
  */
-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;

dist/cjs/runtime/sheet.d.ts

@@ -1,2 +0,2 @@
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
@@ -3,0 +3,0 @@ * Ordered style buckets using their short psuedo name.

dist/cjs/runtime/style.js

@@ -26,6 +26,6 @@ "use strict";
 var react_1 = __importDefault(require("react"));
+var dev_warnings_1 = require("./dev-warnings");
+var is_node_1 = require("./is-node");
 var sheet_1 = __importStar(require("./sheet"));
-var dev_warnings_1 = require("./dev-warnings");
 var style_cache_1 = require("./style-cache");
-var is_node_1 = require("./is-node");
 function Style(props) {
@@ -32,0 +32,0 @@ var inserted = style_cache_1.useCache();

dist/esm/class-names/index.d.ts

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

dist/esm/css/index.js

@@ -0,1 +1,2 @@
+/* eslint-disable import/export */
 import { createSetupError } from '../utils/error';
@@ -2,0 +3,0 @@ export default function css(_css) {

dist/esm/index.d.ts

@@ -0,1 +1,3 @@
+import { createElement } from 'react';
+import type { CompiledJSX } from './jsx/jsx-local-namespace';
 import type { CssFunction, CSSProps } from './types';
@@ -6,28 +8,16 @@ export { keyframes } from './keyframes';
 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;
     }
 }

dist/esm/index.js

@@ -0,1 +1,2 @@
+import { createElement } from 'react';
 export { keyframes } from './keyframes';
@@ -5,2 +6,5 @@ export { styled } from './styled';
 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

dist/esm/runtime/css-custom-property.d.ts

@@ -10,2 +10,2 @@ /**
  */
-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;

dist/esm/runtime/sheet.d.ts

@@ -1,2 +0,2 @@
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
@@ -3,0 +3,0 @@ * Ordered style buckets using their short psuedo name.

dist/esm/runtime/style.js

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

package.json

 {
   "name": "@compiled/react",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -9,3 +9,2 @@ "keywords": [
     "styled-components",
-    "emotion-js",
     "typescript"
@@ -25,12 +24,40 @@ ],
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": [
+        "./dist/esm/index.js",
+        "./src/index.tsx"
+      ],
+      "require": [
+        "./dist/cjs/index.js",
+        "./src/index.tsx"
+      ]
     },
-    "./babel-plugin": {
-      "import": "./dist/esm/babel-plugin.js",
-      "require": "./dist/cjs/babel-plugin.js"
+    "./runtime": {
+      "import": [
+        "./dist/esm/runtime.js",
+        "./src/runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/runtime.js",
+        "./src/runtime.tsx"
+      ]
     },
-    "./runtime": {
-      "import": "./dist/esm/runtime.js",
-      "require": "./dist/cjs/runtime.js"
+    "./jsx-runtime": {
+      "import": [
+        "./dist/esm/jsx/jsx-runtime.js",
+        "./src/jsx/jsx-runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/jsx/jsx-runtime.js",
+        "./src/jsx/jsx-runtime.tsx"
+      ]
+    },
+    "./jsx-dev-runtime": {
+      "import": [
+        "./dist/esm/jsx/jsx-dev-runtime.js",
+        "./src/jsx/jsx-dev-runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/jsx/jsx-dev-runtime.js",
+        "./src/jsx/jsx-dev-runtime.tsx"
+      ]
     }
@@ -45,5 +72,5 @@ },
     "src",
-    "babel-plugin",
     "runtime",
-    "README.md"
+    "jsx-runtime",
+    "jsx-dev-runtime"
   ],
@@ -55,2 +82,3 @@ "dependencies": {
     "@testing-library/react": "^11.2.7",
+    "@types/react-dom": "^17.0.10",
     "react": "^17.0.2",
@@ -57,0 +85,0 @@ "react-dom": "^17.0.2"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

292349

increased by12.6%

Number of package files

310

increased by14.81%

Lines of code

5315

increased by18.11%

Worsened metrics

Dev dependency count

4

increased by33.33%

No dependency changes