[plugin] Allow runtime libraries to have their own theme and styles c…

…ss path (#165)
mui · Jul 9, 2024 · 86ee5ee · 86ee5ee
1 parent aff3df4
commit 86ee5ee
Show file tree

Hide file tree

Showing 20 changed files with 571 additions and 215 deletions.
diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -19,14 +19,14 @@
     "@mui/icons-material": "next",
     "@emotion/cache": "latest",
     "local-ui-lib": "workspace:^",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "next": "latest"
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "workspace:^",
     "@types/node": "^20.5.7",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.19",
     "eslint": "^8.57.0",
     "typescript": "^5.4.4"

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -28,8 +28,8 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@pigment-css/vite-plugin": "workspace:^",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.38",
     "postcss-combine-media-query": "^1.0.1",

diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "@types/lodash": "^4.17.0",
     "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.30",
-    "@types/react": "^18.2.74",
+    "@types/react": "^18.3.3",
     "@types/yargs": "^17.0.32",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
@@ -142,7 +142,7 @@
     "@definitelytyped/typescript-versions": "^0.1.1",
     "@definitelytyped/utils": "^0.1.5",
     "@types/node": "^18.19.30",
-    "@types/react": "^18.2.74",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "18.2.24"
   },
   "nyc": {

diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
@@ -65,7 +65,7 @@
     "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.31",
     "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.3.3",
     "@types/stylis": "^4.2.5",
     "chai": "^4.4.1",
     "prettier": "^3.2.5",

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(