fix(ui~cli): windows path normalization for setup plugins (#1541)

SutuSebastian · web-flow · commit af49b100f841 · 2025-03-25T10:46:34.000+02:00
* refactor(cli): windows support - replace path.join with joinNormalizedPath in plugin setup commands

* chore: add changeset
diff --git a/.changeset/shiny-parents-raise.md b/.changeset/shiny-parents-raise.md
@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+fix(ui~cli): path normalzation for windows support (setup plugins paths)
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-astro.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-astro.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginAstro(configPath: string) {
   await addPluginToConfig({
     configKey: "integrations",
     configPath,
-    pluginImportPath: path.join(pluginPath, "astro"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "astro"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-bun.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-bun.ts
@@ -1,15 +1,15 @@
 import fs from "fs/promises";
-import path from "path";
 import toml from "@iarna/toml";
 import { pluginName, pluginPath } from "../../consts";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 import { updateBuildConfig } from "../../utils/update-build-config";
 
 export async function setupPluginBun(configPath: string) {
   try {
     // update bunfig.toml
     const bunfig = await fs.readFile(configPath, "utf-8");
     const bunfigContent = toml.parse(bunfig) as { serve?: { static?: { plugins?: string[] } } };
-    const bunPluginPath = path.join(pluginPath, "bun");
+    const bunPluginPath = joinNormalizedPath(pluginPath, "bun");
 
     if (bunfigContent.serve?.static?.plugins?.includes(pluginName)) {
       return;
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-farm.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-farm.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginFarm(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "farm"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "farm"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-modernjs.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-modernjs.ts
@@ -1,14 +1,14 @@
 import fs from "fs/promises";
-import path from "path";
 import cjson from "comment-json";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginModernjs(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "modernjs"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "modernjs"),
     pluginName,
   });
 
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-nextjs.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-nextjs.ts
@@ -1,7 +1,7 @@
 import fs from "fs/promises";
-import path from "path";
 import { pluginPath } from "../../consts";
 import { addImport } from "../../utils/add-import";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 import { wrapDefaultExport } from "../../utils/wrap-default-export";
 
 export async function setupPluginNextjs(configPath: string) {
@@ -13,7 +13,7 @@ export async function setupPluginNextjs(configPath: string) {
     let updatedContent = addImport({
       content,
       importName: pluginName,
-      importPath: path.join(pluginPath, "nextjs"),
+      importPath: joinNormalizedPath(pluginPath, "nextjs"),
     });
 
     if (!content.includes(`${pluginName}(`)) {
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-parcel.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-parcel.ts
@@ -1,6 +1,7 @@
 import fs from "fs/promises";
 import path from "path";
 import { outputDir, pluginName, pluginPath } from "../../consts";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginParcel(configPath: string) {
   try {
@@ -38,7 +39,7 @@ export async function setupPluginParcel(configPath: string) {
     }
 
     // setup `.flowbite-react/parcel-config/parcel-reporter.cjs` file
-    const pluginImportPath = path.join(pluginPath, "parcel");
+    const pluginImportPath = joinNormalizedPath(pluginPath, "parcel");
     const parcelReporterFileContent = `module.exports = require("${pluginImportPath}");`;
     const parcelReporterFilePath = path.join(parcelConfigDir, parcelReporterFile);
 
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-rolldown.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-rolldown.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginRolldown(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "rolldown"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "rolldown"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-rollup.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-rollup.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginRollup(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "rollup"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "rollup"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-rsbuild.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-rsbuild.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginRsbuild(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "rsbuild"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "rsbuild"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-rspack.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-rspack.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginRspack(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "rspack"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "rspack"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-tanstack-start.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-tanstack-start.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginTanStackStart(configPath: string) {
   await addPluginToConfig({
     configKey: "vite.plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "vite"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "vite"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-vite.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-vite.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginVite(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "vite"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "vite"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/plugins/setup-plugin-webpack.ts b/packages/ui/src/cli/commands/plugins/setup-plugin-webpack.ts
@@ -1,12 +1,12 @@
-import path from "path";
 import { pluginName, pluginPath } from "../../consts";
 import { addPluginToConfig } from "../../utils/add-plugin-to-config";
+import { joinNormalizedPath } from "../../utils/normalize-path";
 
 export async function setupPluginWebpack(configPath: string) {
   await addPluginToConfig({
     configKey: "plugins",
     configPath,
-    pluginImportPath: path.join(pluginPath, "webpack"),
+    pluginImportPath: joinNormalizedPath(pluginPath, "webpack"),
     pluginName,
   });
 }
diff --git a/packages/ui/src/cli/commands/setup-tailwind.ts b/packages/ui/src/cli/commands/setup-tailwind.ts
@@ -4,6 +4,7 @@ import { classListFilePath, excludeDirs, pluginName, pluginPath } from "../const
 import { addImport } from "../utils/add-import";
 import { addToConfig } from "../utils/add-to-config";
 import { findFiles } from "../utils/find-files";
+import { joinNormalizedPath } from "../utils/normalize-path";
 
 export async function setupTailwind() {
   try {
@@ -56,7 +57,7 @@ async function setupTailwindV4() {
 
       found = true;
 
-      const pluginDirectivePath = path.join(pluginPath, "tailwindcss");
+      const pluginDirectivePath = joinNormalizedPath(pluginPath, "tailwindcss");
       const sourceDirectivePath = path
         .join(path.relative(path.dirname(file), process.cwd()), classListFilePath)
         .replace(/\\/g, "/");
@@ -118,7 +119,7 @@ async function setupTailwindV3() {
       let updatedContent = addImport({
         content,
         importName: pluginName,
-        importPath: path.join(pluginPath, "tailwindcss"),
+        importPath: joinNormalizedPath(pluginPath, "tailwindcss"),
       });
 
       updatedContent = addToConfig({
diff --git a/packages/ui/src/cli/utils/__tests__/normalize-path.test.ts b/packages/ui/src/cli/utils/__tests__/normalize-path.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { joinNormalizedPath, normalizeImportPath } from "../normalize-path";
+
+describe("normalizeImportPath", () => {
+  it("should normalize Windows-style paths to use forward slashes", () => {
+    expect(normalizeImportPath("path\\to\\file")).toBe("path/to/file");
+    expect(normalizeImportPath("C:\\Users\\name\\project")).toBe("C:/Users/name/project");
+  });
+
+  it("should leave Unix-style paths unchanged", () => {
+    expect(normalizeImportPath("path/to/file")).toBe("path/to/file");
+    expect(normalizeImportPath("/home/user/project")).toBe("/home/user/project");
+  });
+
+  it("should handle mixed path separators", () => {
+    expect(normalizeImportPath("path\\to/file")).toBe("path/to/file");
+    expect(normalizeImportPath("C:/Users\\name/project")).toBe("C:/Users/name/project");
+  });
+
+  it("should handle paths with no separators", () => {
+    expect(normalizeImportPath("file")).toBe("file");
+  });
+});
+
+describe("joinNormalizedPath", () => {
+  it("should join path segments and normalize to forward slashes", () => {
+    expect(joinNormalizedPath("path", "to", "file")).toBe("path/to/file");
+    expect(joinNormalizedPath("C:", "Users", "name", "project")).toBe("C:/Users/name/project");
+  });
+
+  it("should handle single segment", () => {
+    expect(joinNormalizedPath("file")).toBe("file");
+  });
+
+  it("should handle empty segments", () => {
+    expect(joinNormalizedPath("path", "", "file")).toBe("path/file");
+  });
+
+  it("should handle segments with existing separators", () => {
+    expect(joinNormalizedPath("path\\to", "file")).toBe("path/to/file");
+    expect(joinNormalizedPath("path/to", "file")).toBe("path/to/file");
+  });
+});
diff --git a/packages/ui/src/cli/utils/normalize-path.ts b/packages/ui/src/cli/utils/normalize-path.ts
@@ -0,0 +1,23 @@
+import path from "path";
+
+/**
+ * Normalizes a path for use in import statements, ensuring forward slashes are used
+ * regardless of the operating system.
+ *
+ * @param importPath - The path to normalize
+ * @returns The normalized path with forward slashes
+ */
+export function normalizeImportPath(importPath: string): string {
+  return importPath.replace(/\\/g, "/");
+}
+
+/**
+ * Joins path segments and normalizes the result to use forward slashes.
+ * This is useful for paths that need to be used in import statements or URLs.
+ *
+ * @param segments - Path segments to join
+ * @returns The normalized path with forward slashes
+ */
+export function joinNormalizedPath(...segments: string[]): string {
+  return normalizeImportPath(path.join(...segments));
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"flowbite-react": patch
 +---
++
 +fix(ui~cli): path normalzation for windows support (setup plugins paths)