[react] Add createExtendSxProp for Material UI integration

packages/pigment-css-react/exports/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",
+      "createExtendSxProp": "./exports/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 createExtendSxProp } from './createExtendSxProp';
 export { default as Box } from './Box';

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

@@ -0,0 +1,35 @@
+import type { Expression, Params, 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);
+  }
+
+  // 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/tsup.config.ts

@@ -1,7 +1,15 @@
 import { Options, defineConfig } from 'tsup';
 import config from '../../tsup.config';
 
-const processors = ['styled', 'sx', 'keyframes', 'generateAtomics', 'css', 'createUseThemeProps'];
+const processors = [
+  'styled',
+  'sx',
+  'keyframes',
+  'generateAtomics',
+  'css',
+  'createUseThemeProps',
+  'createExtendSxProp',
+];
 const external = ['react', 'react-is', 'prop-types'];
 
 const baseConfig: Options = {