packages/babel-plugin-strip-runtime/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @compiled/babel-plugin-strip-runtime
 
+## 0.27.0
+
+### Minor Changes
+
+- db572d43: - @compiled/babel-plugin-strip-runtime:
+  - Fix `css` function calls not being extracted when using classic JSX pragma syntax and `@babel/preset-react` is turned on. Now, when the classic JSX pragma syntax is used for Compiled and `@babel/preset-react` is turned on (assuming `@babel/preset-react` runs before `@compiled/babel-plugin-strip-runtime`), the JSX pragma and the `jsx` import will be completely removed in the output.
+  - The previous version of this PR caused a regression where using the classic JSX pragma `/** @jsx jsx */` with Emotion no longer worked; this is now fixed.
+  - @compiled/utils: Add JSX pragma regex (as used by `babel-plugin-transform-react-jsx`) directly to @compiled/utils
+  - @compiled/eslint-plugin: Use the official JSX pragma regex `/^\s*\*?\s*@jsx\s+([^\s]+)\s*$/m` instead of `/@jsx (\w+)/`; the former is used in `babel-plugin-transform-react-jsx`
+
+### Patch Changes
+
+- Updated dependencies [db572d43]
+  - @compiled/utils@0.9.2
+
 ## 0.26.2
 
 ### Patch Changes

packages/babel-plugin-strip-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/babel-plugin-strip-runtime",
-  "version": "0.26.2",
+  "version": "0.27.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "homepage": "https://compiledcssinjs.com/docs/pkg-babel-plugin-strip-runtime",
   "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
@@ -25,7 +25,7 @@
     "@babel/traverse": "^7.23.2",
     "@babel/types": "^7.21.5",
     "@compiled/css": "^0.12.1",
-    "@compiled/utils": "^0.9.1"
+    "@compiled/utils": "^0.9.2"
   },
   "devDependencies": {
     "@compiled/babel-plugin": "*",

packages/babel-plugin-strip-runtime/src/__tests__/strip-runtime-source-code.test.ts

@@ -247,6 +247,293 @@ describe('babel-plugin-strip-runtime using source code', () => {
         );
       });
     });
+
+    describe('with jsx pragma', () => {
+      it('work with classic jsx pragma', () => {
+        const codeWithPragma = `
+          /** @jsx myJsx */
+          import { css, jsx as myJsx } from '@compiled/react';
+
+          const Component = () => (
+            <div css={{ fontSize: 12, color: 'blue' }}>
+              hello world 2
+            </div>
+          );
+
+          const Component2 = () => (
+            <div css={css({ fontSize: 12, color: 'pink' })}>
+              hello world 2
+            </div>
+          );
+        `;
+
+        const actual = transform(codeWithPragma, {
+          run: 'both',
+          runtime: 'classic',
+        });
+
+        expect(actual).toMatchInlineSnapshot(`
+          "/* app.tsx generated by @compiled/babel-plugin v0.0.0 */
+          import * as React from 'react';
+          import { ax, ix } from '@compiled/react/runtime';
+          const Component = () =>
+            /*#__PURE__*/ React.createElement(
+              'div',
+              {
+                className: ax(['_1wyb1fwx _syaz13q2']),
+              },
+              'hello world 2'
+            );
+          const Component2 = () =>
+            /*#__PURE__*/ React.createElement(
+              'div',
+              {
+                className: ax(['_1wyb1fwx _syaz32ev']),
+              },
+              'hello world 2'
+            );
+          "
+        `);
+      });
+
+      it("doesn't do anything to emotion's classic jsx pragma", () => {
+        const codeWithPragma = `
+          /** @jsx myJsx */
+          import { css, jsx as myJsx } from '@emotion/react';
+
+          const Component = () => (
+            <div css={{ fontSize: 12, color: 'blue' }}>
+              hello world 2
+            </div>
+          );
+
+          const Component2 = () => (
+            <div css={css({ fontSize: 12, color: 'pink' })}>
+              hello world 2
+            </div>
+          );
+        `;
+
+        const actual = transform(codeWithPragma, {
+          run: 'both',
+          runtime: 'classic',
+        });
+
+        expect(actual).toMatchInlineSnapshot(`
+          "/** @jsx myJsx */
+          import { css, jsx as myJsx } from '@emotion/react';
+          const Component = () =>
+            myJsx(
+              'div',
+              {
+                css: {
+                  fontSize: 12,
+                  color: 'blue',
+                },
+              },
+              'hello world 2'
+            );
+          const Component2 = () =>
+            myJsx(
+              'div',
+              {
+                css: css({
+                  fontSize: 12,
+                  color: 'pink',
+                }),
+              },
+              'hello world 2'
+            );
+          "
+        `);
+      });
+
+      it('work with automatic jsx pragma', () => {
+        const codeWithPragma = `
+          /** @jsxImportSource @compiled/react */
+          import { css } from '@compiled/react';
+
+          const Component = () => (
+            <div css={{ fontSize: 12, color: 'blue' }}>
+              hello world 2
+            </div>
+          );
+
+          const Component2 = () => (
+            <div css={css({ fontSize: 12, color: 'pink' })}>
+              hello world 2
+            </div>
+          );
+        `;
+
+        const actual = transform(codeWithPragma, {
+          run: 'both',
+          runtime: 'automatic',
+        });
+
+        expect(actual).toMatchInlineSnapshot(`
+          "/* app.tsx generated by @compiled/babel-plugin v0.0.0 */
+          import { ax, ix } from '@compiled/react/runtime';
+          import { jsxs as _jsxs } from '@compiled/react/jsx-runtime';
+          import { jsx as _jsx } from '@compiled/react/jsx-runtime';
+          /** @jsxImportSource @compiled/react */
+
+          const Component = () =>
+            _jsx('div', {
+              className: ax(['_1wyb1fwx _syaz13q2']),
+              children: 'hello world 2',
+            });
+          const Component2 = () =>
+            _jsx('div', {
+              className: ax(['_1wyb1fwx _syaz32ev']),
+              children: 'hello world 2',
+            });
+          "
+        `);
+      });
+
+      it("doesn't do anything to emotion's automatic jsx pragma", () => {
+        const codeWithPragma = `
+          /** @jsxImportSource @emotion/react */
+          import { css } from '@emotion/react';
+
+          const Component = () => (
+            <div css={{ fontSize: 12, color: 'blue' }}>
+              hello world 2
+            </div>
+          );
+
+          const Component2 = () => (
+            <div css={css({ fontSize: 12, color: 'pink' })}>
+              hello world 2
+            </div>
+          );
+        `;
+
+        const actual = transform(codeWithPragma, {
+          run: 'both',
+          runtime: 'automatic',
+        });
+
+        expect(actual).toMatchInlineSnapshot(`
+          "/** @jsxImportSource @emotion/react */
+          import { css } from '@emotion/react';
+          import { jsx as _jsx } from '@emotion/react/jsx-runtime';
+          const Component = () =>
+            _jsx('div', {
+              css: {
+                fontSize: 12,
+                color: 'blue',
+              },
+              children: 'hello world 2',
+            });
+          const Component2 = () =>
+            _jsx('div', {
+              css: css({
+                fontSize: 12,
+                color: 'pink',
+              }),
+              children: 'hello world 2',
+            });
+          "
+        `);
+      });
+
+      it('work with classic jsx pragma with extractStylesToDirectory', () => {
+        const codeWithPragma = `
+          /** @jsx myJsx */
+          import { css, jsx as myJsx } from '@compiled/react';
+
+          const Component = () => (
+            <div css={{ fontSize: 12, color: 'blue' }}>
+              hello world 2
+            </div>
+          );
+
+          const Component2 = () => (
+            <div css={css({ fontSize: 12, color: 'pink' })}>
+              hello world 2
+            </div>
+          );
+        `;
+
+        const actual = transform(codeWithPragma, {
+          run: 'both',
+          runtime: 'classic',
+          extractStylesToDirectory: { source: 'src/', dest: 'dist/' },
+        });
+
+        expect(actual).toMatchInlineSnapshot(`
+          "/* app.tsx generated by @compiled/babel-plugin v0.0.0 */
+          import './app.compiled.css';
+          import * as React from 'react';
+          import { ax, ix } from '@compiled/react/runtime';
+          const Component = () =>
+            /*#__PURE__*/ React.createElement(
+              'div',
+              {
+                className: ax(['_1wyb1fwx _syaz13q2']),
+              },
+              'hello world 2'
+            );
+          const Component2 = () =>
+            /*#__PURE__*/ React.createElement(
+              'div',
+              {
+                className: ax(['_1wyb1fwx _syaz32ev']),
+              },
+              'hello world 2'
+            );
+          "
+        `);
+      });
+
+      it('work with automatic jsx pragma with extractStylesToDirectory', () => {
+        const codeWithPragma = `
+          /** @jsxImportSource @compiled/react */
+          import { css } from '@compiled/react';
+
+          const Component = () => (
+            <div css={{ fontSize: 12, color: 'blue' }}>
+              hello world 2
+            </div>
+          );
+
+          const Component2 = () => (
+            <div css={css({ fontSize: 12, color: 'pink' })}>
+              hello world 2
+            </div>
+          );
+        `;
+
+        const actual = transform(codeWithPragma, {
+          run: 'both',
+          runtime: 'automatic',
+          extractStylesToDirectory: { source: 'src/', dest: 'dist/' },
+        });
+
+        expect(actual).toMatchInlineSnapshot(`
+          "/* app.tsx generated by @compiled/babel-plugin v0.0.0 */
+          import './app.compiled.css';
+          import { ax, ix } from '@compiled/react/runtime';
+          import { jsxs as _jsxs } from '@compiled/react/jsx-runtime';
+          import { jsx as _jsx } from '@compiled/react/jsx-runtime';
+          /** @jsxImportSource @compiled/react */
+
+          const Component = () =>
+            _jsx('div', {
+              className: ax(['_1wyb1fwx _syaz13q2']),
+              children: 'hello world 2',
+            });
+          const Component2 = () =>
+            _jsx('div', {
+              className: ax(['_1wyb1fwx _syaz32ev']),
+              children: 'hello world 2',
+            });
+          "
+        `);
+      });
+    });
   });
 
   describe('when run in subsequent steps', () => {
@@ -257,14 +544,13 @@ describe('babel-plugin-strip-runtime using source code', () => {
         const baked = transform(code, { run: 'bake', runtime });
         const actual = transform(baked, { run: 'extract', runtime });
 
-        // TODO: This is missing the PURE pragma in the Component return. Fix this.
         expect(actual).toMatchInlineSnapshot(`
           "/* app.tsx generated by @compiled/babel-plugin v0.0.0 */
           import { ax, ix } from '@compiled/react/runtime';
           import { jsxs as _jsxs } from 'react/jsx-runtime';
           import { jsx as _jsx } from 'react/jsx-runtime';
           const Component = () =>
-            _jsx('div', {
+            /*#__PURE__*/ _jsx('div', {
               className: ax(['_1wyb1fwx _syaz13q2']),
               children: 'hello world',
             });

packages/babel-plugin-strip-runtime/src/__tests__/strip-runtime-transpiled-code.test.ts

@@ -96,7 +96,7 @@ describe('babel-plugin-strip-runtime using transpiled code', () => {
 
       expect(actual.split('var Component = ')[1]).toMatchInlineSnapshot(`
         "() =>
-          (0, _jsxRuntime.jsx)('div', {
+          /*#__PURE__*/ (0, _jsxRuntime.jsx)('div', {
             className: (0, _runtime.ax)(['_1wyb1fwx _syaz13q2']),
             children: 'hello world',
           });
@@ -114,7 +114,7 @@ describe('babel-plugin-strip-runtime using transpiled code', () => {
         import { jsxs as _jsxs } from 'react/jsx-runtime';
         import { jsx as _jsx } from 'react/jsx-runtime';
         var Component = () =>
-          _jsx('div', {
+          /*#__PURE__*/ _jsx('div', {
             className: ax(['_1wyb1fwx _syaz13q2']),
             children: 'hello world',
           });
@@ -150,7 +150,7 @@ describe('babel-plugin-strip-runtime using transpiled code', () => {
 
       expect(actual.split('var Component = ')[1]).toMatchInlineSnapshot(`
         "() =>
-          React.createElement(
+          /*#__PURE__*/ React.createElement(
             'div',
             {
               className: (0, _runtime.ax)(['_1wyb1fwx _syaz13q2']),
@@ -169,7 +169,7 @@ describe('babel-plugin-strip-runtime using transpiled code', () => {
         import * as React from 'react';
         import { ax, ix } from '@compiled/react/runtime';
         var Component = () =>
-          React.createElement(
+          /*#__PURE__*/ React.createElement(
             'div',
             {
               className: ax(['_1wyb1fwx _syaz13q2']),