Replace endsWith with includes to check adapter path (#214)

Author: siriwatknp

packages/pigment-css-react/src/utils/preprocessor.ts

@@ -65,3 +65,7 @@ export function preprocessor(
 
   return css;
 }
+
+export function matchAdapterPath(path: string) {
+  return path.includes('zero-styled');
+}

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

@@ -8,7 +8,7 @@ import {
   transform as wywTransform,
   createFileReporter,
 } from '@wyw-in-js/transform';
-import { PluginCustomOptions, preprocessor } from '@pigment-css/react/utils';
+import { matchAdapterPath, PluginCustomOptions, preprocessor } from '@pigment-css/react/utils';
 import * as prettier from 'prettier';
 
 import sxTransformPlugin from '../exports/sx-plugin';
@@ -70,7 +70,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor
         return require.resolve(`../exports/styled`);
       }
 
-      if (source !== '@pigment-css/react' && !source.endsWith('/zero-styled')) {
+      if (source !== '@pigment-css/react' && !matchAdapterPath(source)) {
         return null;
       }
       return require.resolve(`../${pkgJson['wyw-in-js'].tags[tag]}`.replace('.js', ''));

packages/pigment-css-react/tests/utils/adapter-path.test.ts

@@ -0,0 +1,9 @@
+import { expect } from 'chai';
+import { matchAdapterPath } from '@pigment-css/react/utils';
+
+describe('matchAdapterPath', () => {
+  it('should match adapter path', () => {
+    expect(matchAdapterPath('../zero-styled')).to.equal(true);
+    expect(matchAdapterPath('../zero-styled/index.js')).to.equal(true);
+  });
+});

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

@@ -20,6 +20,7 @@ import {
   generateTokenCss,
   generateThemeSource,
   extendTheme,
+  matchAdapterPath,
   type Theme as BaseTheme,
   type PluginCustomOptions,
 } from '@pigment-css/react/utils';
@@ -256,7 +257,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
               if (tagResult) {
                 return tagResult;
               }
-              if (source.endsWith('/zero-styled')) {
+              if (matchAdapterPath(source)) {
                 return require.resolve(`${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`);
               }
               return null;

packages/pigment-css-vite-plugin/src/vite-plugin.ts

@@ -20,7 +20,7 @@ import {
   type PluginOptions,
   type IFileReporterOptions,
 } from '@wyw-in-js/transform';
-import { type PluginCustomOptions } from '@pigment-css/react/utils';
+import { matchAdapterPath, type PluginCustomOptions } from '@pigment-css/react/utils';
 
 export type VitePluginOptions = {
   debug?: IFileReporterOptions | false | null | undefined;
@@ -238,7 +238,7 @@ export default function wywVitePlugin({
                   if (tagResult) {
                     return tagResult;
                   }
-                  if (source.endsWith('/zero-styled')) {
+                  if (matchAdapterPath(source)) {
                     return `${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`;
                   }
                   return null;