fix(workspace-plugin): stop re-creating raw styles for cjs from non raw source (#34862)

Author: Hotell

tools/workspace-plugin/src/executors/build/executor.spec.ts

@@ -115,7 +115,9 @@ describe('Build Executor', () => {
     ]);
 
     expect(loggerVerboseSpy.mock.calls.flat()).toEqual([
+      `Applying transforms: 0`,
       `babel: transformed ${workspaceRoot}/libs/proj/lib/greeter.styles.js`,
+      `Applying transforms: 0`,
     ]);
 
     expect(rmMock.mock.calls.flat()).toEqual([
@@ -292,6 +294,9 @@ describe('Build Executor', () => {
 
   describe(`#enableGriffelRawStyles`, () => {
     it('generates raw styles files when enableGriffelRawStyles is enabled', async () => {
+      const loggerLogSpy = jest.spyOn(logger, 'log').mockImplementation(() => {
+        return;
+      });
       const optionsWithRawStyles: BuildExecutorSchema = {
         ...options,
         enableGriffelRawStyles: true,
@@ -300,6 +305,8 @@ describe('Build Executor', () => {
       const output = await executor(optionsWithRawStyles, context);
       expect(output.success).toBe(true);
 
+      expect(loggerLogSpy.mock.calls.flat()).toContain('💅 Griffel RAW styles output enabled');
+
       // =====================
       // assert raw styles files are generated
       // =====================
@@ -360,6 +367,9 @@ describe('Build Executor', () => {
     }, 60000);
 
     it('does not generate raw styles files when enableGriffelRawStyles is disabled', async () => {
+      const loggerLogSpy = jest.spyOn(logger, 'log').mockImplementation(() => {
+        return;
+      });
       const optionsWithoutRawStyles: BuildExecutorSchema = {
         ...options,
         enableGriffelRawStyles: false,
@@ -368,6 +378,8 @@ describe('Build Executor', () => {
       const output = await executor(optionsWithoutRawStyles, context);
       expect(output.success).toBe(true);
 
+      expect(loggerLogSpy.mock.calls.flat()).not.toContain('💅 Griffel RAW styles output enabled');
+
       // =====================
       // assert raw styles files are NOT generated
       // =====================

tools/workspace-plugin/src/executors/build/lib/babel.ts

@@ -3,7 +3,7 @@
  * TODO: remove this module and its usage once we will be able to remove griffel AOT from our build output -> https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/shared/build-system/stop-styles-transforms.md
  */
 
-import { writeFile, readFile } from 'node:fs/promises';
+import { writeFile, readFile, copyFile } from 'node:fs/promises';
 import { basename, join } from 'node:path';
 
 import { type BabelFileResult, transformAsync } from '@babel/core';
@@ -50,7 +50,12 @@ export async function compileWithGriffelStylesAOT(options: NormalizedOptions) {
     return processAsyncQueue(compilationQueue);
   }
 
-  await compileSwc(esmConfig, options);
+  const transforms = [];
+  if (options.enableGriffelRawStyles) {
+    logger.log('💅 Griffel RAW styles output enabled');
+    transforms.push(createStyleRawOutput);
+  }
+  await compileSwc(esmConfig, options, transforms);
   await babel(esmConfig, options);
 
   const compilationQueue = restOfConfigs.map(outputConfig => {
@@ -121,6 +126,20 @@ async function babel(esmModuleOutput: NormalizedOptions['moduleOutput'][number],
   }
 }
 
+/**
+ *
+ * Creates a raw styles output file if the original file is a Griffel styles file and the enableGriffelRawStyles option is true.
+ * The raw styles file is created by copying the original file and renaming it with a .raw suffix.
+ */
+async function createStyleRawOutput(filePath: string): Promise<void> {
+  if (!filePath.includes('.styles.')) {
+    return;
+  }
+  const rawFilePath = filePath.replace('.styles.', '.styles.raw.');
+  await copyFile(filePath, rawFilePath);
+  logger.verbose(`raw-style: created ${rawFilePath}`);
+}
+
 type NonNullableRecord<T> = {
   [P in keyof T]-?: NonNullable<T[P]>;
 };

tools/workspace-plugin/src/executors/build/lib/file-processor.ts

@@ -1,4 +1,5 @@
 import { mkdir, writeFile, copyFile } from 'node:fs/promises';
+import { writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 
 import { globSync } from 'fast-glob';
@@ -7,7 +8,6 @@ import { transformFile, type Config } from '@swc/core';
 import { logger, readJsonFile } from '@nx/devkit';
 
 import { type NormalizedOptions } from './shared';
-import { FileProcessor, GriffelRawStylesProcessor, applyFileProcessors } from './file-processor';
 
 // extend @swc/core types by missing apis
 declare module '@swc/core' {
@@ -21,25 +21,16 @@ interface Options {
   outputPath: string;
 }
 
-function createFileProcessors(options: NormalizedOptions): FileProcessor[] {
-  const processors: FileProcessor[] = [];
-
-  if (options.enableGriffelRawStyles) {
-    processors.push(new GriffelRawStylesProcessor());
-  }
-
-  return processors;
-}
-
-export async function compileSwc(options: Options, normalizedOptions: NormalizedOptions) {
+export async function compileSwc(
+  options: Options,
+  normalizedOptions: NormalizedOptions,
+  transforms?: Array<Transform>,
+) {
   const { outputPath, module } = options;
-  const fileProcessors = createFileProcessors(normalizedOptions);
   const absoluteOutputPath = join(normalizedOptions.absoluteProjectRoot, outputPath);
 
   logger.log(`Compiling with SWC for module:${options.module}...`);
-  if (fileProcessors.length > 0) {
-    logger.log(`Applying ${fileProcessors.length} file processors...`);
-  }
+  logger.verbose(`Applying transforms: ${transforms ? transforms.length : 0}`);
 
   const sourceFiles = globSync(`**/*.{js,ts,tsx}`, { cwd: normalizedOptions.absoluteSourceRoot });
 
@@ -74,12 +65,23 @@ export async function compileSwc(options: Options, normalizedOptions: Normalized
     await mkdir(dirname(compiledFilePath), { recursive: true });
 
     await writeFile(compiledFilePath, resultCode);
-    await applyFileProcessors(compiledFilePath, fileProcessors);
+    await applyTransforms(compiledFilePath, transforms);
 
     if (result.map) {
       const mapFilePath = `${compiledFilePath}.map`;
       await writeFile(mapFilePath, result.map);
-      await applyFileProcessors(mapFilePath, fileProcessors);
+      await applyTransforms(mapFilePath, transforms);
     }
   }
 }
+
+type Transform = (filePath: string) => Promise<void>;
+async function applyTransforms(filePath: string, transforms?: Array<Transform>): Promise<void> {
+  if (!transforms || !Array.isArray(transforms) || transforms.length === 0) {
+    return;
+  }
+
+  for (const transform of transforms) {
+    await transform(filePath);
+  }
+}