feat(react-icons): enable griffel unprocessed (styles.raw.js) output for production assets (#858)

* feat(react-icons): decouple griffel styles to follow .styles pattern

* feat(react-icons): encapsulate ts->js transpilation and add .styles.raw.js output

* style: remove unused imports

* fix: decouple griffel styles to follow .styles pattern after rebase #855

* chore: additional cleanup of npm script, babel

* chore(react-icons): invoke ts via npx to target correct bin

* chore: update repo pkg-lock

* chore: run babel on all tsc emmited js files to retain same production outputs

* test(react-icons): add integration tests for raw and non raw styles and enable skipped tests

* refactor: cleanup build.js

Author: Hotell

package-lock.json

@@ -1,4 +1,3 @@
 {
-  "presets": ["@griffel"],
   "compact": false
 }

packages/react-icons/.babelrc

@@ -0,0 +1,143 @@
+// @ts-check
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+const { execSync } = require('node:child_process');
+const { copyFileSync, readFileSync, writeFileSync } = require('node:fs');
+const { join, basename } = require('node:path');
+
+const glob = require('glob');
+const { transformSync } = require('@babel/core');
+
+main();
+
+/**
+ * Builds source TypeScript and copys assets to the output directories.
+ *
+ * It transpiles TypeScript files to both ESNext and CommonJS formats,
+ * applies Babel transformations, and copies font assets.
+ * It also creates raw style copies for .styles.js files.
+ */
+function main(){
+  const projectRoot = __dirname;
+
+  transpileTsc({ moduleFormat: 'esnext', outDir: 'lib' },projectRoot);
+  transpileTsc({ moduleFormat: 'commonjs', outDir: 'lib-cjs' },projectRoot);
+
+  applyBabelTransform('lib', projectRoot);
+  applyBabelTransform('lib-cjs', projectRoot);
+
+  copyAssets('src/utils/fonts/*.{ttf,woff,woff2,json}', './lib/utils/fonts', projectRoot);
+  copyAssets('src/utils/fonts/*.{ttf,woff,woff2,json}', './lib-cjs/utils/fonts', projectRoot);
+
+}
+
+// =================================================================================================
+
+/**
+ *
+ * @param {string} styleFile
+ */
+
+function createRawStylesCopy(styleFile) {
+
+  const sourcePath = join(styleFile);
+  const targetPath = styleFile.replace('.styles.js', '.styles.raw.js');
+
+  try {
+    copyFileSync(sourcePath, targetPath);
+    console.log(`  ✓ [raw style] ${styleFile} -> ${basename(targetPath)}`);
+  } catch (error) {
+    console.error(`  ✗ Failed to copy ${styleFile}:`, error.message);
+  }
+
+}
+
+/**
+ *
+ * @param {{moduleFormat:'esnext'|'commonjs'; outDir:string}} options
+ * @param {string} baseDir
+ */
+function transpileTsc(options, baseDir) {
+ const {moduleFormat,outDir} = options;
+  console.log(`Transpiling module format [${moduleFormat}] to -> ${outDir}/`);
+  const cmd = `npx tsc -p . --module ${moduleFormat} --outDir ${outDir}`;
+  return execSync(cmd, {stdio: 'inherit', cwd: baseDir});
+}
+
+/**
+ *
+ * @param {string} root
+ * @param {string} baseDir
+ */
+function applyBabelTransform(root, baseDir) {
+  const EOL_REGEX = /\r?\n/g;
+  const griffelPreset = [
+    ['@griffel']
+  ];
+
+  const jsRoot = join(baseDir,root)
+
+  console.log(`Processing .js files with babel in ${jsRoot}:`);
+  const jsFiles = glob.sync('**/*.js', { cwd: jsRoot });
+
+
+  for (const filename of jsFiles) {
+    const isStylesFile = filename.endsWith('.styles.js');
+    const filePath = join(jsRoot, filename);
+
+    if (isStylesFile) {
+      createRawStylesCopy(filePath)
+    };
+
+    const codeBuffer = readFileSync(filePath);
+    const sourceCode = codeBuffer.toString().replace(EOL_REGEX, '\n');
+
+    const result = transformSync(sourceCode, {
+      ast: false,
+      sourceMaps: true,
+      babelrc: true,
+      // to avoid leaking of global configs
+      babelrcRoots: [baseDir],
+      filename: filePath,
+      // Only apply @griffel preset to .styles.js files
+      presets: isStylesFile ? griffelPreset : [],
+    });
+
+    const resultCode = result?.code;
+
+    if (!resultCode) {
+      console.warn(`No code generated for ${filename}. Skipping.`);
+      continue;
+    }
+
+    const prefix = isStylesFile ? '  ✓ [griffel]' : '  ✓ [babel]';
+    console.log(`${prefix} ${filename}`);
+    writeFileSync(filePath, resultCode);
+  }
+}
+
+/**
+ *
+ * @param {string} src - globs of files to copy
+ * @param {string} dest
+ * @param {string} baseDir
+ */
+function copyAssets(src, dest, baseDir){
+
+  const assets = glob.sync(src, { cwd: baseDir });
+  console.log(`Copying ${src} assets to -> ${dest}:`);
+
+  assets.forEach(file => {
+    const sourcePath = join(baseDir, file);
+    const targetPath = join(baseDir,dest, basename(file));
+
+    try {
+      copyFileSync(sourcePath, targetPath);
+      console.log(`  ✓ ${file}`);
+    } catch (error) {
+      console.error(`  ✗ Failed to copy ${file}:`, error.message);
+    }
+  });
+}
+

packages/react-icons/build-verify.test.js

@@ -14,7 +14,6 @@
   "scripts": {
     "clean": "git clean -fXd lib/ lib-cjs/ intermediate/ src/",
     "copy": "node ../../importer/generate.js --source=../../assets --dest=./intermediate --extension=svg --target=react",
-    "copy:font-files": "cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib/utils/fonts/. && cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib-cjs/utils/fonts/.",
     "convert:svg": "node convert.js --source=./intermediate --dest=./src --rtl=./intermediate/rtl.json",
     "convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts --rtl=./intermediate/rtl.json",
     "generate:font-regular": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Regular --codepoints=../../fonts/FluentSystemIcons-Regular.json",
@@ -25,23 +24,18 @@
     "generate:rtl": "node ../../importer/rtlMetadata.js --source=../../assets --dest=./intermediate/rtl.json",
     "optimize": "svgo --config svgo.config.js --folder=./intermediate --precision=2 --quiet",
     "unfill": "find ./intermediate -type f -name \"*.svg\" ! -name \"*_color*\" -exec sed -i.bak 's/fill=\"none\"//g' {} \\; && find ./intermediate -type f -name \"*.bak\" -delete",
-    "build:cjs": "tsc -p . --module commonjs --outDir lib-cjs && babel lib-cjs --out-dir lib-cjs",
-    "build:esm": "tsc -p . && babel lib --out-dir lib",
     "build:fonts-and-svg": "npm run copy && npm run generate:font && npm run generate:rtl && npm run optimize && npm run unfill",
     "build:generate-js-chunks": "npm run convert:svg && npm run convert:fonts",
-    "build:js": "npm run build:cjs && npm run build:esm",
+    "build:js": "node build.js",
     "prebuild": "npm run clean",
-    "build": "npm run build:fonts-and-svg && npm run build:generate-js-chunks && npm run build:js && npm run copy:font-files",
+    "build": "npm run build:fonts-and-svg && npm run build:generate-js-chunks && npm run build:js",
     "build:verify": "vitest run build-verify.test.js",
     "test": "vitest --exclude build-verify.test.js"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.7",
     "@griffel/babel-preset": "^1.0.0",
     "@types/react": "^17.0.2",
-    "cpy-cli": "^4.1.0",
     "glob": "^7.2.0",
     "lodash": "^4.17.21",
     "mkdirp": "^1.0.4",

packages/react-icons/build.js

@@ -0,0 +1,7 @@
+import { makeStyles } from "@griffel/react";
+
+
+export const useBundledIconStyles = makeStyles({
+    root: { display: "none" },
+    visible: { display: "inline" }
+});

packages/react-icons/package.json

@@ -1,12 +1,10 @@
 import * as React from "react";
+import {  mergeClasses } from "@griffel/react";
+
 import { iconFilledClassName, iconRegularClassName } from "./constants";
-import { makeStyles, mergeClasses } from "@griffel/react";
 import { FluentIcon } from "./createFluentIcon";
+import { useBundledIconStyles } from "./bundleIcon.styles";
 
-const useBundledIconStyles = makeStyles({
-    root: { display: "none" },
-    visible: { display: "inline" }
-});
 
 const bundleIcon = (FilledIcon: FluentIcon, RegularIcon: FluentIcon) => {
     const Component: FluentIcon = (props) => {

packages/react-icons/src/utils/bundleIcon.styles.ts

@@ -0,0 +1,12 @@
+import { makeStyles } from "@griffel/react";
+
+export const useRootStyles = makeStyles({
+  root: {
+    // This style is required because browsers automatically have SVGs set to
+    // forced-color-adjust: preserve-parent-color, which will not override
+    // internally-defined colors in our SVG icons in high contrast mode.
+    "@media (forced-colors: active)": {
+      forcedColorAdjust: "auto",
+    },
+  },
+});

packages/react-icons/src/utils/bundleIcon.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
+import { mergeClasses } from "@griffel/react";
 import { FluentIconsProps } from "./FluentIconsProps.types";
 import { useIconState } from "./useIconState";
-import { makeStyles, mergeClasses } from "@griffel/react";
+import { useRootStyles } from "./createFluentIcon.styles";
 
 export type FluentIcon = {
     (props: FluentIconsProps): JSX.Element;
@@ -13,16 +14,7 @@ export type CreateFluentIconOptions = {
     color?: boolean;
 }
 
-const useRootStyles = makeStyles({
-  root: {
-    // This style is required because browsers automatically have SVGs set to
-    // forced-color-adjust: preserve-parent-color, which will not override
-    // internally-defined colors in our SVG icons in high contrast mode.
-    "@media (forced-colors: active)": {
-      forcedColorAdjust: "auto",
-    },
-  },
-});
+
 
 export const createFluentIcon = (displayName: string, width: string, pathsOrSvg: string[] | string, options?: CreateFluentIconOptions): FluentIcon => {
     const styles = useRootStyles();