chore: replace stylex configs with recommended

Floffah · Jan 7, 2025 · 4dc3acf · 4dc3acf
1 parent 34915b4
commit 4dc3acf
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 101 deletions.
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
@@ -1,14 +1,33 @@
-import stylexConfig from "./stylex.config";
 import stylexPlugin from "@stylexswc/nextjs-plugin";
 import type { NextConfig } from "next";
+import path from "node:path";
 import Icons from "unplugin-icons/webpack";
 
-const withStylex = stylexPlugin(stylexConfig);
+const projectRoot = __dirname;
+// const monorepoRoot = path.resolve(projectRoot, "../../");
+
+const withStylex = stylexPlugin({
+    rsOptions: {
+        aliases: {
+            "@/*": [path.join(projectRoot, "src/*")],
+        },
+        unstable_moduleResolution: {
+            type: "commonJS",
+            // rootDir: monorepoRoot,
+        },
+    },
+    extractCSS: false,
+});
 
 const nextConfig = {
     reactStrictMode: true,
     serverExternalPackages: ["@node-rs/bcrypt"],
+    transpilePackages: ["@stylexjs/open-props"],
+    experimental: {
+        // ppr: true,
+    },
     typescript: {
+        // part of lint step, next ignores tsconfig references and breaks trpc
         ignoreBuildErrors: true,
     },
     eslint: {
@@ -26,9 +45,6 @@ const nextConfig = {
 
         return config;
     },
-    images: {
-        remotePatterns: [],
-    },
 } satisfies NextConfig;
 
 export default withStylex(nextConfig);
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
@@ -1,10 +1,26 @@
+const path = require("path");
+
 const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, "../../");
 
 module.exports = {
     plugins: {
         "@stylexswc/postcss-plugin": {
-            include: [projectRoot + "/src/**/*.{js,jsx,ts,tsx}"],
-            ...require("./stylex.config"),
+            include: ["src/**/*.{js,jsx,ts,tsx}"],
+            rsOptions: {
+                isDev: process.env.NODE_ENV === "development",
+                genConditionalClasses: true,
+                treeshakeCompensation: true,
+                useRemForFontSize: true,
+                aliases: {
+                    "@/*": [path.join(projectRoot, "src/*")],
+                },
+                unstable_moduleResolution: {
+                    type: "commonJS",
+                    rootDir: projectRoot,
+                },
+            },
+            useCSSLayers: true,
         },
         "postcss-preset-env": {},
     },

diff --git a/apps/web/stylex.config.js b/apps/web/stylex.config.js