Add packageMap option to replace import path with a configurable path

from plugin options.
mui · Jul 2, 2024 · 863e795 · 863e795
1 parent 8129df8
commit 863e795
Show file tree

Hide file tree

Showing 15 changed files with 193 additions and 24 deletions.
diff --git a/packages/pigment-css-react/src/processors/base-processor.ts b/packages/pigment-css-react/src/processors/base-processor.ts
@@ -4,6 +4,7 @@ import {
   BaseProcessor as WywBaseProcessor,
   toValidCSSIdentifier,
 } from '@wyw-in-js/processor-utils';
+import type { PluginCustomOptions } from '../utils/cssFnValueToVariable';
 
 export default abstract class BaseProcessor extends WywBaseProcessor {
   variableIdx = 0;
@@ -42,4 +43,11 @@ export default abstract class BaseProcessor extends WywBaseProcessor {
       valueSlug: slugify(`${source}${hasUnit}`),
     };
   }
+
+  protected getImportPath() {
+    const { packageMap } = this.options as PluginCustomOptions;
+    const { source: originalSource } = this.tagSource;
+    const transformedImport = packageMap?.[originalSource];
+    return transformedImport ?? `${process.env.PACKAGE_NAME as string}`;
+  }
 }
diff --git a/packages/pigment-css-react/src/processors/createExtendSxProp.ts b/packages/pigment-css-react/src/processors/createExtendSxProp.ts
@@ -28,7 +28,7 @@ export class CreateExtendSxPropProcessor extends BaseProcessor {
 
     const extendSxPropImportIdentifier = t.addNamedImport(
       this.tagSource.imported,
-      process.env.PACKAGE_NAME as string,
+      this.getImportPath(),
     );
 
     this.replacer(t.callExpression(extendSxPropImportIdentifier, []), true);

diff --git a/packages/pigment-css-react/src/processors/createUseThemeProps.ts b/packages/pigment-css-react/src/processors/createUseThemeProps.ts
@@ -48,7 +48,7 @@ export class CreateUseThemePropsProcessor extends BaseProcessor {
 
     const useThemePropsImportIdentifier = t.addNamedImport(
       this.tagSource.imported,
-      process.env.PACKAGE_NAME as string,
+      this.getImportPath(),
     );
 
     let replacement: Expression = t.stringLiteral(this.componentName);

diff --git a/packages/pigment-css-react/src/processors/generateAtomics.ts b/packages/pigment-css-react/src/processors/generateAtomics.ts
@@ -103,7 +103,7 @@ export class GenerateAtomicsProcessor extends BaseProcessor {
       return;
     }
     const { astService: t } = this;
-    const importName = t.addNamedImport('atomics', process.env.PACKAGE_NAME as string);
+    const importName = t.addNamedImport('atomics', this.getImportPath());
     this.replacer(t.callExpression(importName, [valueToLiteral(this.runtimeConfig)]), true);
   }
 }
diff --git a/packages/pigment-css-react/src/processors/styled.ts b/packages/pigment-css-react/src/processors/styled.ts
@@ -320,7 +320,7 @@ export class StyledProcessor extends BaseProcessor {
       return;
     }
     const themeImportIdentifier = this.astService.addDefaultImport(
-      `${process.env.PACKAGE_NAME}/theme`,
+      `${this.getImportPath()}/theme`,
       'theme',
     );
     // all the variant definitions are collected here so that we can
@@ -416,7 +416,7 @@ export class StyledProcessor extends BaseProcessor {
       }
     }
 
-    const styledImportIdentifier = t.addNamedImport('styled', process.env.PACKAGE_NAME as string);
+    const styledImportIdentifier = t.addNamedImport('styled', this.getImportPath());
     const styledCall = t.callExpression(
       styledImportIdentifier,
       componentMetaExpression ? [componentName, componentMetaExpression] : [componentName],

diff --git a/packages/pigment-css-react/src/processors/useTheme.ts b/packages/pigment-css-react/src/processors/useTheme.ts
@@ -50,7 +50,7 @@ export class UseThemeProcessor extends BaseProcessor {
 
   doRuntimeReplacement() {
     const t = this.astService;
-    const themeIdentifier = t.addDefaultImport(`${process.env.PACKAGE_NAME as string}/theme`);
+    const themeIdentifier = t.addDefaultImport(`${this.getImportPath()}/theme`);
     this.replacer(themeIdentifier, false);
   }
 

diff --git a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
@@ -37,6 +37,31 @@ export type PluginCustomOptions = {
      */
     getDirSelector?: (dir: 'ltr' | 'rtl') => string;
   };
+  /**
+   * Customize the replacement package name that should be added in-place of
+   * the actually imported package name, ie,
+   *
+   * ```js
+   * import { styled } from '@pigment-css/react';
+   * ```
+   *
+   * will turn into
+   *
+   * ```js
+   * import { styled } from '@mui/material-pigment-css';
+   * ```
+   *
+   * if packageMap has this
+   *
+   * ```js
+   * {
+   *   packageMap: {
+   *     '@pigment-css/react': '@mui/material-pigment-css',
+   *   }
+   * }
+   * ```
+   */
+  packageMap?: Record<string, string>;
 };
 
 type CssFnValueToVariableParams = {

diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-import-replacement.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-import-replacement.input.js
@@ -0,0 +1,33 @@
+import { styled, keyframes } from '@pigment-css/react';
+
+const rotateKeyframe = keyframes({
+  from: {
+    transform: 'translateX(0%)',
+  },
+  to: {
+    transform: 'translateX(100%)',
+  },
+});
+
+const Component = styled.div(({ theme }) => ({
+  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
+  marginLeft: 10,
+}));
+
+export const SliderRail = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})`
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-top-left-radius: 3px;
+`;
+
+const SliderRail2 = styled.span`
+  ${SliderRail} {
+    padding-inline-start: none;
+    margin: 0px 10px 10px 30px;
+  }
+`;
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-import-replacement.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-import-replacement.output.css
@@ -0,0 +1,23 @@
+@keyframes rrqhzm2 {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.ci0148v {
+  animation: rrqhzm2 2s ease-out 0s infinite;
+  margin-left: 10px;
+}
+.suo5xob {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-top-left-radius: 3px;
+}
+.sudpq9z .suo5xob {
+  padding-inline-start: none;
+  margin: 0px 10px 10px 30px;
+}
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-import-replacement.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-import-replacement.output.js
@@ -0,0 +1,18 @@
+import {
+  styled as _styled,
+  styled as _styled2,
+  styled as _styled3,
+} from '@mui/material-pigment-css';
+import _theme from '@mui/material-pigment-css/theme';
+const Component = /*#__PURE__*/ _styled('div')({
+  classes: ['ci0148v'],
+});
+export const SliderRail = /*#__PURE__*/ _styled2('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  classes: ['suo5xob'],
+});
+const SliderRail2 = /*#__PURE__*/ _styled3('span')({
+  classes: ['sudpq9z'],
+});
diff --git a/packages/pigment-css-react/tests/styled/styled.test.tsx b/packages/pigment-css-react/tests/styled/styled.test.tsx
@@ -139,4 +139,18 @@ describe('Pigment CSS - styled', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('should replace the import paths to the ones specific in packageMap', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled-import-replacement.input.js'),
+      {
+        packageMap: {
+          '@pigment-css/react': '@mui/material-pigment-css',
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });
diff --git a/packages/pigment-css-react/tests/testUtils.ts b/packages/pigment-css-react/tests/testUtils.ts
@@ -14,9 +14,7 @@ import * as prettier from 'prettier';
 import sxTransformPlugin from '../exports/sx-plugin';
 import pkgJson from '../package.json';
 
-type TransformOptions = {
-  themeArgs?: { theme?: any };
-  css?: PluginCustomOptions['css'];
+type TransformOptions = PluginCustomOptions & {
   outputDir?: string;
 };
 
@@ -35,15 +33,12 @@ export async function runTransformation(absolutePath: string, options?: Transfor
   const cache = new TransformCacheCollection();
   const { emitter: eventEmitter } = createFileReporter(false);
   const inputFilePath = absolutePath;
+  const { outputDir, ...restOptions } = options ?? {};
   let outputFilePath = (
-    options?.outputDir
-      ? path.join(options.outputDir, inputFilePath.split(path.sep).pop() as string)
-      : absolutePath
+    outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath
   ).replace('.input.', '.output.');
   let outputCssFilePath = (
-    options?.outputDir
-      ? path.join(options.outputDir, inputFilePath.split(path.sep).pop() as string)
-      : absolutePath
+    outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath
   )
     .replace('.input.js', '.output.css')
     .replace('.input.jsx', '.output.css');
@@ -65,9 +60,6 @@ export async function runTransformation(absolutePath: string, options?: Transfor
   const babelResult = await runSxTransform(inputContent, inputFilePath);
 
   const pluginOptions = {
-    themeArgs: {
-      theme: options?.themeArgs?.theme,
-    },
     babelOptions: {
       configFile: false,
       babelrc: false,
@@ -83,6 +75,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor
       }
       return require.resolve(`../${pkgJson['wyw-in-js'].tags[tag]}`.replace('.js', ''));
     },
+    ...restOptions,
   };
 
   const result = await wywTransform(

diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
@@ -82,6 +82,24 @@ function isZeroRuntimeProcessableFile(fileName: string, transformLibraries: stri
   );
 }
 
+const addMaterialUIOverriedContext = (originalContext: Record<string, unknown>) => {
+  const originalRequire = originalContext.require as (id: string) => any;
+  const newRequire = (id: string) => {
+    if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
+      return {
+        __esModule: true,
+        default: () => () => () => null,
+        internal_processStyles: () => {},
+        keyframes: () => '',
+        css: () => '',
+      };
+    }
+    return originalRequire(id);
+  };
+  originalContext.require = newRequire;
+  return originalContext;
+};
+
 /**
  * Next.js initializes the plugin multiple times. So all the calls
  * have to share the same Maps.
@@ -213,18 +231,26 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
             themeArgs: {
               theme,
             },
+            packageMap: transformLibraries.reduce(
+              (acc, lib) => {
+                acc[lib] = lib;
+                return acc;
+              },
+              {} as Record<string, string>,
+            ),
             features: {
               useWeakRefInEval: false,
               // If users know what they are doing, let them override to true
               ...rest.features,
             },
             overrideContext(context: Record<string, unknown>, filename: string) {
-              if (overrideContext) {
-                return overrideContext(context, filename);
-              }
               if (!context.$RefreshSig$) {
                 context.$RefreshSig$ = outerNoop;
               }
+              addMaterialUIOverriedContext(context);
+              if (overrideContext) {
+                return overrideContext(context, filename);
+              }
               return context;
             },
             tagResolver(source: string, tag: string) {

diff --git a/packages/pigment-css-vite-plugin/src/index.ts b/packages/pigment-css-vite-plugin/src/index.ts
@@ -112,6 +112,13 @@ export function pigment(options: PigmentOptions) {
     themeArgs: {
       theme,
     },
+    packageMap: transformLibraries.reduce(
+      (acc, lib) => {
+        acc[lib] = lib;
+        return acc;
+      },
+      {} as Record<string, string>,
+    ),
     preprocessor: preprocessor ?? withRtl,
     babelOptions: {
       ...babelOptions,

diff --git a/packages/pigment-css-vite-plugin/src/vite-plugin.ts b/packages/pigment-css-vite-plugin/src/vite-plugin.ts
@@ -41,6 +41,24 @@ function outerNoop() {
   return innerNoop;
 }
 
+const addMaterialUIOverriedContext = (originalContext: Record<string, unknown>) => {
+  const originalRequire = originalContext.require as (id: string) => any;
+  const newRequire = (id: string) => {
+    if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
+      return {
+        __esModule: true,
+        default: () => () => () => null,
+        internal_processStyles: () => {},
+        keyframes: () => '',
+        css: () => '',
+      };
+    }
+    return originalRequire(id);
+  };
+  originalContext.require = newRequire;
+  return originalContext;
+};
+
 export default function wywVitePlugin({
   debug,
   include,
@@ -203,12 +221,16 @@ export default function wywVitePlugin({
                   presets: Array.from(presets),
                 },
                 overrideContext(context: Record<string, unknown>, filename: string) {
-                  if (overrideContext) {
-                    return overrideContext(context, filename);
-                  }
                   if (!context.$RefreshSig$) {
                     context.$RefreshSig$ = outerNoop;
                   }
+
+                  addMaterialUIOverriedContext(context);
+
+                  if (overrideContext) {
+                    return overrideContext(context, filename);
+                  }
+
                   return context;
                 },
                 tagResolver(source: string, tag: string) {