packages/babel-plugin/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @compiled/babel-plugin
 
+## 0.24.3
+
+### Patch Changes
+
+- be019f11: Add detectConflictWithOtherLibraries and onlyRunIfImportingCompiled config options to jsx-pragma ESLint rule. Both are set to true by default, hence the breaking change.
+
+  `detectConflictWithOtherLibraries` raises a linting error if `css` or `jsx` is imported from `@emotion/react` (or `@emotion/core`) in the same file
+  as a Compiled import. Set to true by default.
+
+  `onlyRunIfImportingCompiled` sets this rule to only suggest adding the JSX pragma if the `css` or `cssMap` functions are imported from `@compiled/react`, as opposed to whenever the `css` attribute is detected at all. Set to false by default.
+
 ## 0.24.2
 
 ### Patch Changes

packages/babel-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/babel-plugin",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "homepage": "https://compiledcssinjs.com/docs/pkg-babel-plugin",
   "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",

packages/eslint-plugin/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @compiled/eslint-plugin
 
+## 0.10.0
+
+### Minor Changes
+
+- be019f11: Add detectConflictWithOtherLibraries and onlyRunIfImportingCompiled config options to jsx-pragma ESLint rule. Both are set to true by default, hence the breaking change.
+
+  `detectConflictWithOtherLibraries` raises a linting error if `css` or `jsx` is imported from `@emotion/react` (or `@emotion/core`) in the same file
+  as a Compiled import. Set to true by default.
+
+  `onlyRunIfImportingCompiled` sets this rule to only suggest adding the JSX pragma if the `css` or `cssMap` functions are imported from `@compiled/react`, as opposed to whenever the `css` attribute is detected at all. Set to false by default.
+
 ## 0.9.4
 
 ### Patch Changes

packages/eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/eslint-plugin",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "homepage": "https://compiledcssinjs.com/docs/pkg-eslint-plugin",
   "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",

packages/eslint-plugin/src/rules/jsx-pragma/README.md

@@ -1,6 +1,23 @@
 # `jsx-pragma`
 
-Enforce a jsx pragma is set when using the `css` prop.
+Ensure that the Compiled JSX pragma is set when using the `css` or `xcss` prop.
+
+A JSX pragma is a comment that declares where to import the JSX namespace from. It looks
+like one of the following:
+
+```js
+/** @jsx jsx */
+import { jsx } from '@compiled/react';
+```
+
+```js
+/** @jsxImportSource @compiled/react */
+import { jsx } from '@compiled/react';
+```
+
+For all Compiled usages, one of these should be used. See the
+[Emotion documentation](https://emotion.sh/docs/css-prop#jsx-pragma) for more details
+on how JSX pragmas work.
 
 ---
 
@@ -35,6 +52,26 @@ import '@compiled/react';
      ^^^ missing pragma
 ```
 
+```js
+// [{ "pragma": "jsxImportSource" }]
+
+import { Box } from '@atlaskit/primitives';
+
+<Box xcss={{ borderStyle: 'solid' }} />;
+     ^^^ missing pragma
+```
+
+```js
+// [{ "detectConflictWithOtherLibraries": true }]
+
+/** @jsx jsx */
+import { css } from '@compiled/react';
+import { jsx } from '@emotion/react';
+
+<div css={css({ display: 'block' })} />;
+          ^^^ cannot mix Compiled and Emotion
+```
+
 👍 Examples of **correct** code for this rule:
 
 ```js
@@ -52,6 +89,19 @@ import { jsx } from '@compiled/react';
 <div css={{ display: 'block' }} />
 ```
 
+```js
+// [{ "onlyRunIfImportingCompiled": true }]
+
+import { css } from '@emotion/react';
+<div css={css({ display: 'block' })} />;
+```
+
+```js
+// [{ "onlyRunIfImportingCompiled": true }]
+
+<div css={{ display: 'block' }} />
+```
+
 ## Options
 
 This rule supports the following options:
@@ -60,3 +110,24 @@ This rule supports the following options:
 
 What [JSX runtime](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) to adhere to,
 defaults to automatic.
+
+### `detectConflictWithOtherLibraries: boolean`
+
+Raises a linting error if `css` or `jsx` is imported from `@emotion/react` (or `@emotion/core`) in the same file
+as a Compiled import.
+
+This is important as Emotion can't be used with Compiled in the same file, and ignoring this linting error will
+result in a confusing runtime error.
+
+This defaults to `true`.
+
+### `onlyRunIfImportingCompiled: boolean`
+
+By default, the `jsx-pragma` rule suggests adding the Compiled JSX pragma whenever the `css` attribute is being
+used. This may not be ideal if your codebase uses a mix of Compiled and other libraries (e.g. Emotion,
+styled-components). Setting `onlyRunIfImportingCompiled` to true turns off this rule unless `css` or `cssMap`
+are imported from `@compiled/react`.
+
+Note that this option does not affect `xcss`.
+
+This option defaults to `false`.

packages/eslint-plugin/src/rules/jsx-pragma/__tests__/rule.test.ts

@@ -23,19 +23,70 @@ tester.run('jsx-pragma', jsxPragmaRule, {
     `,
     {
       code: `
-      /** @jsxImportSource @compiled/react */
-      <div css={{ display: 'block' }} />
-    `,
+        /** @jsxImportSource @compiled/react */
+        <div css={{ display: 'block' }} />
+      `,
       options: [{ runtime: 'automatic' }],
     },
     {
       code: `
-      /** @jsx jsx */
-      import { jsx } from '@compiled/react';
-      <div css={{ display: 'block' }} />
-    `,
+        /** @jsx jsx */
+        import { jsx } from '@compiled/react';
+        <div css={{ display: 'block' }} />
+      `,
+      options: [{ runtime: 'classic' }],
+    },
+    {
+      name: "don't error when @jsxImportSource and Compiled css API are being used",
+      code: `
+        /** @jsxImportSource @compiled/react */
+        import { css } from '@compiled/react';
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ runtime: 'automatic' }],
+    },
+    {
+      code: `
+        /** @jsx jsx */
+        import { css, jsx } from '@compiled/react';
+        <div css={css({ display: 'block' })} />
+      `,
       options: [{ runtime: 'classic' }],
     },
+    {
+      name: "when onlyRunIfImportingCompiled is true and Compiled is not imported, don't override with Compiled",
+      code: `<div css={{ display: 'block' }} />`,
+      options: [{ onlyRunIfImportingCompiled: true }],
+    },
+    {
+      name: "when onlyRunIfImportingCompiled is true and Emotion jsx is used, don't override with Compiled",
+      code: `
+        /** @jsx jsx */
+        import { jsx } from '@emotion/react';
+        <>
+          <div css={{ display: 'block' }} />
+          <div css={[ someStyles ]} />
+        </>
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+    },
+    {
+      name: "when onlyRunIfImportingCompiled is true and Emotion css is used, don't override with Compiled (with Emotion css function)",
+      code: `
+        import { css } from '@emotion/react';
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+    },
+    {
+      name: "when onlyRunIfImportingCompiled is true and Emotion css is used, don't override with Compiled (with Emotion css and jsx)",
+      code: `
+        /** @jsx jsx */
+        import { css, jsx } from '@emotion/react';
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+    },
   ],
   invalid: [
     {
@@ -340,5 +391,149 @@ import * as React from 'react';
         },
       ],
     },
+    {
+      name: 'should error if Emotion css and Compiled styled are used',
+      code: `
+        import { css } from '@emotion/react';
+        import { styled } from '@compiled/react';
+        <div css={css({ display: 'block' })} />
+      `,
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error if Emotion css and Compiled styled are used (onlyRunIfImportingCompiled = true)',
+      code: `
+        import { css } from '@emotion/react';
+        import { styled } from '@compiled/react';
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error when both Emotion and Compiled css APIs are being used',
+      code: `
+        /** @jsx jsx */
+        import * as React from 'react';
+        import { css, jsx } from '@emotion/react';
+        import { css as cssCompiled } from '@compiled/react';
+
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error when both Emotion and Compiled css APIs are being used (alt)',
+      code: `
+        /** @jsx jsxEmotion */
+        import * as React from 'react';
+        import { css, jsx as jsxEmotion } from '@emotion/react';
+        import { css as cssCompiled } from '@compiled/react';
+
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error when both Emotion jsx API and Compiled css API are being used',
+      code: `
+        import * as React from 'react';
+        import { jsx } from '@emotion/react';
+        import { css } from '@compiled/react';
+
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error when both Emotion jsx API and Compiled css API are being used (with JSX pragma)',
+      code: `
+        /** @jsx jsx */
+        import * as React from 'react';
+        import { jsx } from '@emotion/react';
+        import { css } from '@compiled/react';
+
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error when both Emotion css API and Compiled jsx API are being used (with JSX pragma)',
+      code: `
+        /** @jsx jsx */
+        import * as React from 'react';
+        import { jsx } from '@compiled/react';
+        import { css } from '@emotion/react';
+
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true, runtime: 'classic' }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error when both Emotion and Compiled css APIs are being used (with @emotion/core)',
+      code: `
+        /** @jsx jsxEmotion */
+        import * as React from 'react';
+        import { jsx } from '@emotion/core';
+        import { css as cssCompiled } from '@compiled/react';
+
+        <div css={{ display: 'block' }} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
+    {
+      name: 'should error when both Emotion and Compiled css APIs are being used (onlyRunIfImportingCompiled = true)',
+      code: `
+        import * as React from 'react';
+        import { css } from '@emotion/react';
+        import { css as cssCompiled } from '@compiled/react';
+
+        <div css={css({ display: 'block' })} />
+      `,
+      options: [{ onlyRunIfImportingCompiled: true }],
+      errors: [
+        {
+          messageId: 'emotionAndCompiledConflict',
+        },
+      ],
+    },
   ],
 });