babel.config.json

@@ -19,7 +19,11 @@
           {
             "nonce": "\"k0Mp1lEd\"",
             "importReact": false,
-            "optimizeCss": false
+            "optimizeCss": false,
+            "importSources": [
+              "./packages/react/src/create-strict-api/__tests__/__fixtures__/strict-api",
+              "@fixture/strict-api-test"
+            ]
           }
         ]
       ]

fixtures/strict-api-test/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@fixture/strict-api-test",
+  "version": "0.1.0",
+  "private": true,
+  "main": "./src/index.ts",
+  "dependencies": {
+    "@compiled/react": "*"
+  }
+}

fixtures/strict-api-test/src/index.ts

@@ -0,0 +1,12 @@
+import { createStrictAPI } from '@compiled/react';
+
+const { css, XCSSProp, cssMap, cx } = createStrictAPI<{
+  '&:hover': {
+    color: 'var(--ds-text-hover)';
+    background: 'var(--ds-surface-hover)' | 'var(--ds-surface-sunken-hover)';
+  };
+  color: 'var(--ds-text)';
+  background: 'var(--ds-surface)' | 'var(--ds-surface-sunken)';
+}>();
+
+export { css, XCSSProp, cssMap, cx };

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

@@ -1,5 +1,19 @@
 # @compiled/babel-plugin-strip-runtime
 
+## 0.25.0
+
+### Minor Changes
+
+- fbc17ed3: - `@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.
+  - `@compiled/eslint-plugin`: Change regex in `jsx-pragma` rule to match @babel/plugin-transform-react-jsx
+  - `@compiled/utils`: Change regex in `jsx-pragma` rule to match @babel/plugin-transform-react-jsx
+
+### Patch Changes
+
+- Updated dependencies [fbc17ed3]
+  - @compiled/utils@0.9.0
+  - @compiled/css@0.12.1
+
 ## 0.23.0
 
 ### Minor Changes

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

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/babel-plugin-strip-runtime",
-  "version": "0.23.0",
+  "version": "0.25.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",
@@ -24,8 +24,8 @@
     "@babel/template": "^7.20.7",
     "@babel/traverse": "^7.23.2",
     "@babel/types": "^7.21.5",
-    "@compiled/css": "^0.12.0",
-    "@compiled/utils": "^0.8.0"
+    "@compiled/css": "^0.12.1",
+    "@compiled/utils": "^0.9.0"
   },
   "devDependencies": {
     "@compiled/babel-plugin": "*",

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

@@ -247,6 +247,194 @@ 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('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('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 +445,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']),