Allow loading Tailwind CSS with a custom npm package name (#366)

* Hoist package name

* Add internal option to change the package name to use when loading Tailwind CSS

* Update lockfile

Author: thecrypticace

package-lock.json

@@ -29,12 +29,16 @@ let prettierConfigCache = expiringMap<string, string | null>(10_000)
 export async function getTailwindConfig(
   options: ParserOptions,
 ): Promise<ContextContainer> {
+  let pkgName = options.tailwindPackageName ?? 'tailwindcss'
+
   let key = [
     options.filepath,
     options.tailwindStylesheet ?? '',
     options.tailwindEntryPoint ?? '',
     options.tailwindConfig ?? '',
+    pkgName,
   ].join(':')
+
   let baseDir = await getBaseDir(options)
 
   // Map the source file to it's associated Tailwind config file
@@ -58,7 +62,12 @@ export async function getTailwindConfig(
   }
 
   // By this point we know we need to load the Tailwind config file
-  let result = await loadTailwindConfig(baseDir, configPath, entryPoint)
+  let result = await loadTailwindConfig(
+    baseDir,
+    pkgName,
+    configPath,
+    entryPoint,
+  )
 
   pathToContextMap.set(contextKey, result)
 
@@ -100,6 +109,7 @@ async function getBaseDir(options: ParserOptions): Promise<string> {
 
 async function loadTailwindConfig(
   baseDir: string,
+  pkgName: string,
   tailwindConfigPath: string | null,
   entryPoint: string | null,
 ): Promise<ContextContainer> {
@@ -110,11 +120,11 @@ async function loadTailwindConfig(
   let tailwindConfig: RequiredConfig = { content: [] }
 
   try {
-    let pkgFile = resolveJsFrom(baseDir, 'tailwindcss/package.json')
+    let pkgFile = resolveJsFrom(baseDir, `${pkgName}/package.json`)
     let pkgDir = path.dirname(pkgFile)
 
     try {
-      let v4 = await loadV4(baseDir, pkgDir, entryPoint)
+      let v4 = await loadV4(baseDir, pkgDir, pkgName, entryPoint)
       if (v4) {
         return v4
       }
@@ -197,10 +207,11 @@ function createLoader<T>({
 async function loadV4(
   baseDir: string,
   pkgDir: string,
+  pkgName: string,
   entryPoint: string | null,
 ) {
   // Import Tailwind — if this is v4 it'll have APIs we can use directly
-  let pkgPath = resolveJsFrom(baseDir, 'tailwindcss')
+  let pkgPath = resolveJsFrom(baseDir, pkgName)
 
   let tw = await import(pathToFileURL(pkgPath).toString())
 

src/config.ts

@@ -1,5 +1,10 @@
 export interface InternalOptions {
   printer: Printer<any>
+
+  /**
+   * The package name to use when loading Tailwind CSS
+   */
+  tailwindPackageName?: string
 }
 
 export interface InternalPlugin {

src/internal.d.ts

@@ -55,6 +55,13 @@ export const options: Record<string, SupportOption> = {
     category: 'Tailwind CSS',
     description: 'Preserve duplicate classes inside a class list when sorting',
   },
+
+  tailwindPackageName: {
+    type: 'string',
+    default: 'tailwindcss',
+    category: 'Tailwind CSS',
+    description: 'The package name to use when loading Tailwind CSS',
+  },
 }
 
 export function getCustomizations(

src/options.ts

@@ -73,6 +73,16 @@ let fixtures = [
     dir: 'v4/css-loading-js',
     ext: 'html',
   },
+  {
+    name: 'custom npm package name: v3',
+    dir: 'custom-pkg-name-v3',
+    ext: 'html',
+  },
+  {
+    name: 'custom npm package name: v4',
+    dir: 'custom-pkg-name-v4',
+    ext: 'html',
+  },
 ]
 
 let configs = [

tests/fixtures.test.ts

@@ -0,0 +1,9 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'tomato': 'tomato',
+      }
+    }
+  }
+}

tests/fixtures/custom-pkg-name-v3/config.js

@@ -0,0 +1 @@
+<div class="sm:bg-tomato bg-red-500"></div>

tests/fixtures/custom-pkg-name-v3/index.html

@@ -0,0 +1 @@
+<div class="bg-red-500 sm:bg-tomato"></div>