[react] Add createExtendSxProp for Material UI integration (#112)

packages/pigment-css-react/exports/internal_createExtendSxProp.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+
+exports.default = require('../processors/createExtendSxProp').CreateExtendSxPropProcessor;

packages/pigment-css-react/package.json

@@ -85,7 +85,8 @@
       "keyframes": "./exports/keyframes.js",
       "generateAtomics": "./exports/generateAtomics.js",
       "css": "./exports/css.js",
-      "createUseThemeProps": "./exports/createUseThemeProps.js"
+      "createUseThemeProps": "./exports/createUseThemeProps.js",
+      "internal_createExtendSxProp": "./exports/internal_createExtendSxProp.js"
     }
   },
   "files": [

packages/pigment-css-react/src/createExtendSxProp.d.ts

@@ -0,0 +1 @@
+export default function createExtendSxProp(): <T extends Record<string, any>>(props: T) => T;

packages/pigment-css-react/src/createExtendSxProp.js

@@ -0,0 +1,12 @@
+/**
+ * Runtime function for creating `extendSxProp`.
+ *
+ * This is a placeholder for the runtime function for replacing the `extendSxProp` in Material UI
+ * to reduce bundle size only. DO NOT use it in your codebase.
+ */
+function extendSxProp(props) {
+  return props;
+}
+export default function createExtendSxProp() {
+  return extendSxProp;
+}

packages/pigment-css-react/src/index.ts

@@ -4,4 +4,5 @@ export { default as keyframes } from './keyframes';
 export { generateAtomics, atomics } from './generateAtomics';
 export { default as css } from './css';
 export { default as createUseThemeProps } from './createUseThemeProps';
+export { default as internal_createExtendSxProp } from './createExtendSxProp';
 export { default as Box } from './Box';

packages/pigment-css-react/src/processors/createExtendSxProp.ts

@@ -0,0 +1,41 @@
+import {
+  validateParams,
+  type Expression,
+  type Params,
+  type TailProcessorParams,
+} from '@wyw-in-js/processor-utils';
+import BaseProcessor from './base-processor';
+
+export class CreateExtendSxPropProcessor extends BaseProcessor {
+  constructor(params: Params, ...args: TailProcessorParams) {
+    super([params[0]], ...args);
+    validateParams(params, ['callee', ['call']], `Invalid use of ${this.tagSource.imported} tag.`);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  build(): void {}
+
+  doEvaltimeReplacement(): void {
+    this.replacer(this.value, false);
+  }
+
+  get value(): Expression {
+    return this.astService.nullLiteral();
+  }
+
+  doRuntimeReplacement(): void {
+    const t = this.astService;
+
+    const extendSxPropImportIdentifier = t.addNamedImport(
+      this.tagSource.imported,
+      process.env.PACKAGE_NAME as string,
+    );
+
+    this.replacer(t.callExpression(extendSxPropImportIdentifier, []), true);
+  }
+
+  public override get asSelector(): string {
+    // For completeness, this is not intended to be used.
+    return `.${this.className}`;
+  }
+}

packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts

@@ -0,0 +1,14 @@
+import path from 'node:path';
+import { expect } from 'chai';
+import { runTransformation } from '../testUtils';
+
+describe('Pigment CSS - createExtendSxProp', () => {
+  it('replaced correctly', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/extendSxProp.input.js'),
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+});

packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js

@@ -0,0 +1,8 @@
+import { internal_createExtendSxProp } from '../zero-styled';
+
+const extendSxProp = internal_createExtendSxProp();
+
+export default function Typography(inProps) {
+  const props = extendSxProp(inProps);
+  return <div {...props} />;
+}

packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js

@@ -0,0 +1,6 @@
+import { internal_createExtendSxProp as _internal_createExtendSxProp } from '@pigment-css/react';
+const extendSxProp = /*#__PURE__*/ _internal_createExtendSxProp();
+export default function Typography(inProps) {
+  const props = extendSxProp(inProps);
+  return <div {...props} />;
+}

packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js

@@ -0,0 +1,11 @@
+import { describe } from 'yargs';
+import { expect } from 'chai';
+import createExtendSxProp from '../../src/createExtendSxProp';
+
+describe('createExtendSxProp', () => {
+  it('return the new copy of input', () => {
+    const original = { color: 'red' };
+    expect(createExtendSxProp()(original)).to.not.equal(original);
+    expect(createExtendSxProp()(original)).to.deep.equal({ color: 'red' });
+  });
+});

packages/pigment-css-react/tests/testUtils.ts

@@ -52,7 +52,7 @@ export async function runTransformation(
       plugins: ['@babel/plugin-syntax-jsx'],
     },
     tagResolver(source: string, tag: string) {
-      if (source !== '@pigment-css/react') {
+      if (source !== '@pigment-css/react' && !source.endsWith('/zero-styled')) {
         return null;
       }
       return require.resolve(`../exports/${tag}`);

packages/pigment-css-react/tsup.config.ts

@@ -8,6 +8,7 @@ const processors = [
   'generateAtomics',
   'css',
   'createUseThemeProps',
+  'createExtendSxProp',
   'globalCss',
 ];
 const external = ['react', 'react-is', 'prop-types'];