chore: use @wyw-in-js/transform

package.json

@@ -65,7 +65,6 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-object-rest-spread": "7.8.3",
     "@babel/plugin-transform-runtime": "7.24.0",
-    "@react-native/babel-preset": "0.73.21",
     "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
@@ -103,6 +102,7 @@
     "@nx/workspace": "17.3.2",
     "@octokit/rest": "18.12.0",
     "@phenomnomnominal/tsquery": "6.1.3",
+    "@react-native/babel-preset": "0.73.21",
     "@storybook/addon-a11y": "6.5.15",
     "@storybook/addon-actions": "6.5.15",
     "@storybook/addon-docs": "6.5.15",
@@ -271,8 +271,8 @@
     "memfs": "3.2.2",
     "mini-css-extract-plugin": "2.6.1",
     "monosize": "0.5.0",
-    "monosize-storage-azure": "0.0.10",
     "monosize-bundler-webpack": "0.1.0",
+    "monosize-storage-azure": "0.0.10",
     "node-plop": "0.25.0",
     "nx": "17.3.2",
     "p-queue": "6.6.2",
@@ -350,6 +350,8 @@
     "yargs-unparser": "2.0.0"
   },
   "dependencies": {
+    "@griffel/tag-processor": "1.0.2",
+    "@wyw-in-js/transform": "0.5.0",
     "copy-to-clipboard": "3.3.1"
   },
   "license": "MIT",
@@ -377,7 +379,8 @@
     "@mdx-js/loader/loader-utils": "~2.0.4",
     "swc-loader": "^0.2.3",
     "prettier": "2.8.8",
-    "puppeteer": "19.6.0"
+    "puppeteer": "19.6.0",
+    "@griffel/react": "1.5.21"
   },
   "nx": {
     "includedScripts": []

scripts/tasks/src/presets.ts

@@ -6,7 +6,6 @@ import { addResolvePath, condition, option, parallel, series, task } from 'just-
 
 import { apiExtractor } from './api-extractor';
 import { JustArgs, getJustArgv } from './argv';
-import { babel, hasBabel } from './babel';
 import { clean } from './clean';
 import { copy, copyCompiled } from './copy';
 import { eslint } from './eslint';
@@ -23,6 +22,7 @@ import { ts } from './ts';
 import { typeCheck } from './type-check';
 import { verifyPackaging } from './verify-packaging';
 import { webpack, webpackDevServer } from './webpack';
+import { wyw } from './wyw';
 
 /** Do only the bare minimum setup of options and resolve paths */
 function basicPreset() {
@@ -72,7 +72,7 @@ export function preset() {
   task('prettier', prettier);
   task('storybook:start', startStorybookTask());
   task('storybook:build', buildStorybookTask());
-  task('babel:postprocess', babel);
+  task('wyw', wyw);
   task('generate-api', generateApi);
   task('type-check', typeCheck);
   task('verify-packaging', () => verifyPackaging(args));
@@ -96,12 +96,7 @@ export function preset() {
   });
 
   task('ts', () => {
-    return series(
-      'ts:compile',
-      'copy-compiled',
-      'ts:postprocess',
-      condition('babel:postprocess', () => hasBabel()),
-    );
+    return series('ts:compile', 'copy-compiled', 'ts:postprocess');
   });
 
   task(
@@ -117,11 +112,7 @@ export function preset() {
 
   task('swc:compile', () => {
     const moduleFlag = args.module;
-    return series(
-      'swc:esm',
-      condition('babel:postprocess', () => hasBabel()),
-      resolveModuleCompilation(moduleFlag),
-    );
+    return series('swc:esm', 'wyw', resolveModuleCompilation(moduleFlag));
   });
 
   task('code-style', series('prettier', 'lint'));

scripts/tasks/src/wyw.ts

@@ -0,0 +1,53 @@
+import fs from 'fs';
+import path from 'path';
+
+import { transform } from '@wyw-in-js/transform';
+import * as glob from 'glob';
+import { logger } from 'just-scripts';
+
+const EOL_REGEX = /\r?\n/g;
+
+type PartialServices = Parameters<typeof transform>[0];
+type AsyncResolve = Parameters<typeof transform>[2];
+
+function addSourceMappingUrl(code: string, loc: string): string {
+  // Babel keeps stripping this comment, even when correct option is set. Adding manually.
+  return code + '\n//# sourceMappingURL=' + path.basename(loc);
+}
+
+export async function wyw() {
+  const files = glob.sync('lib/**/*.styles.js');
+
+  for (const filename of files) {
+    const filePath = path.resolve(process.cwd(), filename);
+    const sourceMapFilename = filename + '.map';
+
+    const codeBuffer = await fs.promises.readFile(filePath);
+    const sourceMapContent = await fs.promises.readFile(sourceMapFilename, 'utf8');
+    const sourceCode = codeBuffer.toString().replace(EOL_REGEX, '\n');
+
+    const transformServices: PartialServices = {
+      options: {
+        filename,
+        inputSourceMap: JSON.parse(sourceMapContent),
+        root: process.cwd(),
+      },
+    };
+
+    const asyncResolve: AsyncResolve = async (what, importer, stack) => {
+      return require.resolve(what, { paths: [importer] });
+    };
+    const result = await transform(transformServices, sourceCode, asyncResolve);
+    const resultCode = addSourceMappingUrl(result.code, path.basename(filename) + '.map');
+
+    if (result.code === sourceCode) {
+      logger.verbose(`wyw: skipped ${filePath}`);
+      continue;
+    } else {
+      logger.verbose(`wyw: transformed ${filePath}`);
+    }
+
+    await fs.promises.writeFile(filePath, resultCode);
+    await fs.promises.writeFile(sourceMapFilename, JSON.stringify(result.sourceMap));
+  }
+}