fix: use the correct serializer based on the direction value (#350)

mui · Dec 19, 2024 · dcd6f12 · dcd6f12
1 parent 0590bc0
commit dcd6f12
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 10 deletions.
diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
@@ -73,7 +73,7 @@
     "react": "^18.3.1"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "sideEffects": false,
   "publishConfig": {

diff --git a/packages/pigment-css-react/src/utils/preprocessor.ts b/packages/pigment-css-react/src/utils/preprocessor.ts
@@ -1,4 +1,4 @@
-import type { Element } from 'stylis';
+import type { Element, Middleware } from 'stylis';
 import { serialize, compile, stringify, middleware } from 'stylis';
 import rtlPlugin from 'stylis-plugin-rtl';
 import { type PluginCustomOptions } from './cssFnValueToVariable';
@@ -26,10 +26,10 @@ function getSerializer(includeRtl?: boolean) {
   return middleware([globalSelector, rtlPlugin, stringify]);
 }
 
-const serializer = getSerializer();
+const serializerLtr = getSerializer();
 const serializerRtl = getSerializer(true);
 
-const stylis = (css: string, serializerParam = serializer) =>
+const stylis = (css: string, serializerParam: Middleware) =>
   serialize(compile(css), serializerParam);
 
 const defaultGetDirSelector = (dir: 'ltr' | 'rtl') => `[dir=${dir}]`;
@@ -48,18 +48,20 @@ export function preprocessor(
     generateForBothDir = false,
     getDirSelector = defaultGetDirSelector,
   } = options || {};
+  const serializer = defaultDirection === 'ltr' ? serializerLtr : serializerRtl;
   let css = '';
   const isGlobal = selector.startsWith(getGlobalSelector(''));
 
   if (!isGlobal && cssText.startsWith('@keyframes')) {
-    css += stylis(cssText.replace('@keyframes', `@keyframes ${selector}`));
+    css += stylis(cssText.replace('@keyframes', `@keyframes ${selector}`), serializer);
     return css;
   }
-  css += stylis(!isGlobal ? `${selector}{${cssText}}` : cssText);
+  css += stylis(!isGlobal ? `${selector}{${cssText}}` : cssText, serializer);
   if (generateForBothDir) {
+    const otherSerializer = defaultDirection === 'ltr' ? serializerRtl : serializerLtr;
     css += stylis(
       `${getDirSelector(defaultDirection === 'ltr' ? 'rtl' : 'ltr')} ${!isGlobal ? `${selector}{${cssText}}` : cssText}`,
-      serializerRtl,
+      otherSerializer,
     );
   }
 

diff --git a/packages/pigment-css-react/tests/utils/preprocessor.test.ts b/packages/pigment-css-react/tests/utils/preprocessor.test.ts
@@ -0,0 +1,37 @@
+import { expect } from 'chai';
+import { preprocessor } from '@pigment-css/react/utils';
+
+describe('preprocessor', () => {
+  it('should preprocess selector and css by default to ltr', () => {
+    const res = preprocessor('.hello', 'padding-left: 10px; transform: translate(10px, 20px)');
+    expect(res).to.equal('.hello{padding-left:10px;transform:translate(10px, 20px);}');
+  });
+
+  it('should preprocess selector and css to rtl when specified', () => {
+    const res = preprocessor('.hello', 'padding-left: 10px; transform: translate(10px, 20px)', {
+      defaultDirection: 'rtl',
+      generateForBothDir: false,
+    });
+    expect(res).to.equal('.hello{padding-right:10px;transform:translate(-10px, 20px);}');
+  });
+
+  it('should generate both rtl and ltr css when "generateForBothDir" is true', () => {
+    expect(
+      preprocessor('.hello', 'padding-left: 10px; transform: translate(10px, 20px)', {
+        defaultDirection: 'ltr',
+        generateForBothDir: true,
+      }),
+    ).to.equal(
+      '.hello{padding-left:10px;transform:translate(10px, 20px);}[dir=rtl] .hello{padding-right:10px;transform:translate(-10px, 20px);}',
+    );
+
+    expect(
+      preprocessor('.hello', 'padding-right: 10px; transform: translate(-10px, 20px)', {
+        defaultDirection: 'rtl',
+        generateForBothDir: true,
+      }),
+    ).to.equal(
+      '.hello{padding-left:10px;transform:translate(10px, 20px);}[dir=ltr] .hello{padding-right:10px;transform:translate(-10px, 20px);}',
+    );
+  });
+});
diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
@@ -115,7 +115,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
     theme,
     meta,
     transformLibraries = [],
-    preprocessor = basePreprocessor,
+    preprocessor,
     asyncResolve: asyncResolveOpt,
     debug = false,
     sourceMap = false,

diff --git a/packages/pigment-css-vite-plugin/src/vite-plugin.ts b/packages/pigment-css-vite-plugin/src/vite-plugin.ts
@@ -20,7 +20,11 @@ import {
   type PluginOptions,
   type IFileReporterOptions,
 } from '@wyw-in-js/transform';
-import { matchAdapterPath, type PluginCustomOptions } from '@pigment-css/react/utils';
+import {
+  matchAdapterPath,
+  type PluginCustomOptions,
+  preprocessor as basePreprocessor,
+} from '@pigment-css/react/utils';
 import { styledEngineMockup } from '@pigment-css/react/internal';
 
 export type VitePluginOptions = {
@@ -74,6 +78,10 @@ export default function wywVitePlugin({
 
   const { emitter, onDone } = createFileReporter(debug ?? false);
 
+  const withRtl = (selector: string, cssText: string) => {
+    return basePreprocessor(selector, cssText, cssConfig);
+  };
+
   // <dependency id, targets>
   const targets: { dependencies: string[]; id: string }[] = [];
   const cache = new TransformCacheCollection();
@@ -198,7 +206,7 @@ export default function wywVitePlugin({
             options: {
               filename: id,
               root: process.cwd(),
-              preprocessor,
+              preprocessor: preprocessor ?? withRtl,
               pluginOptions: {
                 ...other,
                 features: {