Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 15 additions & 4 deletions src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)

Expand Down Expand Up @@ -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> {
Expand All @@ -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
}
Expand Down Expand Up @@ -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())

Expand Down
5 changes: 5 additions & 0 deletions src/internal.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
export interface InternalOptions {
printer: Printer<any>

/**
* The package name to use when loading Tailwind CSS
*/
tailwindPackageName?: string
}

export interface InternalPlugin {
Expand Down
7 changes: 7 additions & 0 deletions src/options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
10 changes: 10 additions & 0 deletions tests/fixtures.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
9 changes: 9 additions & 0 deletions tests/fixtures/custom-pkg-name-v3/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = {
theme: {
extend: {
colors: {
'tomato': 'tomato',
}
}
}
}
1 change: 1 addition & 0 deletions tests/fixtures/custom-pkg-name-v3/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div class="sm:bg-tomato bg-red-500"></div>
1 change: 1 addition & 0 deletions tests/fixtures/custom-pkg-name-v3/output.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div class="bg-red-500 sm:bg-tomato"></div>
Loading