Resolve Vite aliases. Allow users to specify aliases through StyleX p…

…lugin options as well. (#43) * Add aliased-import-theme.stylex.ts to vite-demo * Resolve Vite aliases. Allow users to specify aliases through StyleX plugin options as well. * outline color
HorusGoul · Feb 23, 2024 · 0dc6fb9 · 0dc6fb9
1 parent ce2e330
commit 0dc6fb9
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 21 deletions.
diff --git a/.changeset/shaggy-flies-trade.md b/.changeset/shaggy-flies-trade.md
@@ -0,0 +1,5 @@
+---
+"vite-plugin-stylex": patch
+---
+
+Resolve Vite aliases. Allow users to specify aliases through StyleX plugin options as well. Fixes #41.
diff --git a/apps/vite-demo/src/Card.tsx b/apps/vite-demo/src/Card.tsx
@@ -1,5 +1,6 @@
 import * as stylex from "@stylexjs/stylex";
 import { tokens } from "./theme.stylex";
+import { aliasedTokens } from "@/aliased-import-theme.stylex";
 import { colors } from "@stylexjs/open-props/lib/colors.stylex";
 
 export default function Card({ children }: { children: React.ReactNode }) {
@@ -18,5 +19,6 @@ const styles = stylex.create({
     boxShadow: "0 0 16px rgba(0, 0, 0, 0.1)",
     color: tokens.primaryTextColor,
     border: `1px solid ${colors.blue1}`,
+    outlineColor: aliasedTokens.primaryOutlineColor,
   },
 });
diff --git a/apps/vite-demo/src/aliased-import-theme.stylex.ts b/apps/vite-demo/src/aliased-import-theme.stylex.ts
@@ -0,0 +1,5 @@
+import * as stylex from "@stylexjs/stylex";
+
+export const aliasedTokens = stylex.defineVars({
+  primaryOutlineColor: "blue",
+});
diff --git a/apps/vite-demo/tsconfig.json b/apps/vite-demo/tsconfig.json
@@ -18,7 +18,13 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

diff --git a/apps/vite-demo/vite.config.ts b/apps/vite-demo/vite.config.ts
@@ -1,8 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import styleX from "vite-plugin-stylex";
+import { resolve } from "node:path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), styleX()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
 });
diff --git a/packages/vite-plugin-stylex/src/index.mts b/packages/vite-plugin-stylex/src/index.mts
@@ -1,4 +1,4 @@
-import type { Plugin, ViteDevServer, Rollup } from "vite";
+import type { Plugin, ViteDevServer, Rollup, AliasOptions } from "vite";
 import babel from "@babel/core";
 import stylexBabelPlugin, {
   Options as StyleXOptions,
@@ -39,6 +39,22 @@ interface StyleXVitePluginOptions
     >
   > {
   stylexImports?: string[];
+  /**
+   * A map of aliases to their respective paths.
+   *
+   * @example
+   *
+   * ```ts
+   * {
+   *   "@/*": [path.resolve(__dirname, "src", "*")]
+   * }
+   * ```
+   *
+   * Ensure that the paths are absolute and that you include the `*` at the end of the path.
+   */
+  aliases?: {
+    [alias: string]: string[];
+  };
 }
 
 const STYLEX_REPLACE_RULE = "@stylex stylesheet;";
@@ -67,6 +83,7 @@ export default function styleXVitePlugin({
 
   let server: ViteDevServer;
   let framework: Framework = "none";
+  let aliases: Record<string, string[]> = {};
 
   let reloadCount = 0;
   function reloadStyleX() {
@@ -145,6 +162,15 @@ export default function styleXVitePlugin({
       config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
       config.optimizeDeps.exclude.push("@stylexjs/open-props");
 
+      for (const viteAlias of config.resolve.alias) {
+        if (typeof viteAlias.find === "string") {
+          // We need to convert Vite format to this plugin's format:
+          // Example: @ -> @/*
+          const alias = path.join(viteAlias.find, "*");
+          aliases[alias] = [path.join(viteAlias.replacement, "*")];
+        }
+      }
+
       for (const plugin of config.plugins) {
         if (!plugin || !("name" in plugin)) {
           continue;
@@ -333,26 +359,45 @@ export default function styleXVitePlugin({
       const filename = path.basename(id).split("?")[0];
       const filePath = path.join(dir, filename);
 
-      const result = await babel.transformAsync(inputCode, {
-        babelrc: false,
-        filename: filePath,
-        plugins: [
-          /\.jsx?/.test(path.extname(id))
-            ? flowSyntaxPlugin
-            : typescriptSyntaxPlugin,
-          jsxSyntaxPlugin,
-          [
-            stylexBabelPlugin,
-            {
-              dev: !isProd,
-              unstable_moduleResolution,
-              importSources: stylexImports,
-              runtimeInjection: !isCompileMode,
-              ...options,
-            },
+      const result = await babel
+        .transformAsync(inputCode, {
+          babelrc: false,
+          filename: filePath,
+          plugins: [
+            /\.jsx?/.test(path.extname(id))
+              ? flowSyntaxPlugin
+              : typescriptSyntaxPlugin,
+            jsxSyntaxPlugin,
+            [
+              stylexBabelPlugin,
+              {
+                dev: !isProd,
+                unstable_moduleResolution,
+                importSources: stylexImports,
+                runtimeInjection: !isCompileMode,
+                aliases: {
+                  ...options.aliases,
+                  ...aliases,
+                },
+                ...options,
+              },
+            ],
           ],
-        ],
-      });
+        })
+        .catch((error) => {
+          if (
+            error.message.includes(
+              "Only static values are allowed inside of a stylex.create() call."
+            )
+          ) {
+            this.error(`StyleX Error: ${error.message}
+  
+💡 If you're importing StyleX tokens or styles from another file using aliases, make sure to define those in your Vite config or in the StyleX Plugin options.
+`);
+          }
+
+          throw error;
+        });
 
       if (!result) {
         return;