[pigment-css][nextjs-plugin] Add missing RTL implementation (#41751)

mui · Apr 4, 2024 · 71a880d · 71a880d
1 parent 06fbeea
commit 71a880d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
@@ -21,6 +21,7 @@ import {
   generateThemeTokens,
   extendTheme,
   type Theme as BaseTheme,
+  type PluginCustomOptions,
 } from '@pigment-css/react/utils';
 import type { ResolvePluginInstance } from 'webpack';
 
@@ -52,7 +53,8 @@ export type PigmentOptions<Theme extends BaseTheme = BaseTheme> = {
   meta?: Meta;
   asyncResolve?: (...args: Parameters<AsyncResolver>) => Promise<string | null>;
   transformSx?: boolean;
-} & Partial<WywInJsPluginOptions>;
+} & Partial<WywInJsPluginOptions> &
+  Omit<PluginCustomOptions, 'themeArgs'>;
 
 const extensions = ['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts'];
 
@@ -100,13 +102,14 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
     theme,
     meta,
     transformLibraries = [],
-    preprocessor = basePreprocessor,
+    preprocessor,
     asyncResolve: asyncResolveOpt,
     debug = false,
     sourceMap = false,
     transformSx = true,
     overrideContext,
     tagResolver,
+    css,
     ...rest
   } = options;
   const cache = new TransformCacheCollection();
@@ -151,6 +154,10 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
     return asyncResolveFallback(what, importer, stack);
   };
 
+  const withRtl = (selector: string, cssText: string) => {
+    return basePreprocessor(selector, cssText, css);
+  };
+
   const wywInJSTransformPlugin: UnpluginOptions = {
     name: 'zero-plugin-transform-wyw-in-js',
     enforce: 'post',
@@ -188,12 +195,13 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
       compiler.options.resolve.plugins = compiler.options.resolve.plugins || [];
       compiler.options.resolve.plugins.push(resolverPlugin);
     },
-    async transform(code, id) {
+    async transform(code, filePath) {
+      const [id] = filePath.split('?');
       const transformServices = {
         options: {
           filename: id,
           root: process.cwd(),
-          preprocessor,
+          preprocessor: preprocessor ?? withRtl,
           pluginOptions: {
             ...rest,
             themeArgs: {
@@ -246,8 +254,6 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
             map: result.sourceMap,
           };
         }
-        const slug = slugify(cssText);
-        const cssFilename = `${slug}.zero.css`;
 
         if (sourceMap && result.cssSourceMapText) {
           const map = Buffer.from(result.cssSourceMapText).toString('base64');
@@ -260,7 +266,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
         if (isNext) {
           const data = `${meta.placeholderCssFile}?${encodeURIComponent(
             JSON.stringify({
-              filename: cssFilename,
+              filename: id.split('/').pop(),
               source: cssText,
             }),
           )}`;
@@ -270,9 +276,13 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
             map: result.sourceMap,
           };
         }
+
+        const slug = slugify(cssText);
+        const cssFilename = `${slug}.zero.css`;
         const cssId = `./${cssFilename}`;
         cssFileLookup.set(cssId, cssFilename);
         cssLookup.set(cssFilename, cssText);
+
         return {
           code: `${result.code}\nimport ${JSON.stringify(`./${cssFilename}`)};`,
           map: result.sourceMap,

diff --git a/packages/pigment-css-vite-plugin/src/index.ts b/packages/pigment-css-vite-plugin/src/index.ts
@@ -9,16 +9,11 @@ import {
 import { transformAsync } from '@babel/core';
 import baseWywPluginPlugin, { type VitePluginOptions } from './vite-plugin';
 
-export interface PigmentOptions extends VitePluginOptions {
+export interface PigmentOptions extends Omit<VitePluginOptions, 'themeArgs'> {
   /**
    * The theme object that you want to be passed to the `styled` function
    */
   theme: Theme;
-  /**
-   * Whether the css variables for the default theme should target the :root selector or not.
-   * @default true
-   */
-  injectDefaultThemeInRoot?: boolean;
 }
 
 const VIRTUAL_CSS_FILE = `\0zero-runtime-styles.css`;