diff --git a/src/config.ts b/src/config.ts index 9c3db9e..b97abc8 100644 --- a/src/config.ts +++ b/src/config.ts @@ -123,12 +123,18 @@ async function loadTailwindConfig( let pkgFile = resolveJsFrom(baseDir, `${pkgName}/package.json`) let pkgDir = path.dirname(pkgFile) + // If the user doesn't define an entrypoint then we use the default theme + entryPoint = entryPoint ?? `${pkgDir}/theme.css` + try { - let v4 = await loadV4(baseDir, pkgDir, pkgName, entryPoint) - if (v4) { - return v4 - } - } catch {} + let v4 = await loadV4(baseDir, pkgName, entryPoint) + if (v4) return v4 + } catch (err) { + console.error( + `Unable to load your Tailwind CSS v4 stylesheet: ${entryPoint}`, + ) + console.error(err) + } resolveConfig = require(path.join(pkgDir, 'resolveConfig')) createContext = require( @@ -142,10 +148,18 @@ async function loadTailwindConfig( loadConfig = require(path.join(pkgDir, 'loadConfig')) } catch {} - if (tailwindConfigPath) { - clearModule(tailwindConfigPath) - const loadedConfig = loadConfig(tailwindConfigPath) - tailwindConfig = loadedConfig.default ?? loadedConfig + try { + if (tailwindConfigPath) { + clearModule(tailwindConfigPath) + const loadedConfig = loadConfig(tailwindConfigPath) + tailwindConfig = loadedConfig.default ?? loadedConfig + } + } catch (err) { + console.error( + `Unable to load your Tailwind CSS v3 config: ${tailwindConfigPath}`, + ) + + throw err } // suppress "empty content" warning @@ -204,24 +218,14 @@ function createLoader({ } } -async function loadV4( - baseDir: string, - pkgDir: string, - pkgName: string, - entryPoint: string | null, -) { +async function loadV4(baseDir: string, pkgName: string, entryPoint: string) { // Import Tailwind — if this is v4 it'll have APIs we can use directly let pkgPath = resolveJsFrom(baseDir, pkgName) let tw = await import(pathToFileURL(pkgPath).toString()) // This is not Tailwind v4 - if (!tw.__unstable__loadDesignSystem) { - return null - } - - // If the user doesn't define an entrypoint then we use the default theme - entryPoint = entryPoint ?? `${pkgDir}/theme.css` + if (!tw.__unstable__loadDesignSystem) return null // Create a Jiti instance that can be used to load plugins and config files let jiti = createJiti(import.meta.url, { @@ -232,7 +236,9 @@ async function loadV4( let importBasePath = path.dirname(entryPoint) // Resolve imports in the entrypoint to a flat CSS tree - let css = await fs.readFile(entryPoint, 'utf-8') + let css: string + + css = await fs.readFile(entryPoint, 'utf-8') // Determine if the v4 API supports resolving `@import` let supportsImports = false @@ -354,12 +360,38 @@ function getConfigPath(options: ParserOptions, baseDir: string): string | null { function getEntryPoint(options: ParserOptions, baseDir: string): string | null { if (options.tailwindStylesheet) { + if ( + options.tailwindStylesheet.endsWith('.js') || + options.tailwindStylesheet.endsWith('.mjs') || + options.tailwindStylesheet.endsWith('.cjs') || + options.tailwindStylesheet.endsWith('.ts') || + options.tailwindStylesheet.endsWith('.mts') || + options.tailwindStylesheet.endsWith('.cts') + ) { + console.error( + "Your `tailwindStylesheet` option points to a JS/TS config file. You must point to your project's `.css` file for v4 projects.", + ) + } else if ( + options.tailwindStylesheet.endsWith('.sass') || + options.tailwindStylesheet.endsWith('.scss') || + options.tailwindStylesheet.endsWith('.less') || + options.tailwindStylesheet.endsWith('.styl') + ) { + console.error( + 'Your `tailwindStylesheet` option points to a preprocessor file. This is unsupported and you may get unexpected results.', + ) + } else if (!options.tailwindStylesheet.endsWith('.css')) { + console.error( + 'Your `tailwindStylesheet` option does not point to a CSS file. This is unsupported and you may get unexpected results.', + ) + } + return path.resolve(baseDir, options.tailwindStylesheet) } if (options.tailwindEntryPoint) { console.warn( - 'Use the `tailwindStylesheet` option for v4 projects instead of `tailwindEntryPoint`.', + 'Deprecated: Use the `tailwindStylesheet` option for v4 projects instead of `tailwindEntryPoint`.', ) return path.resolve(baseDir, options.tailwindEntryPoint) @@ -367,7 +399,7 @@ function getEntryPoint(options: ParserOptions, baseDir: string): string | null { if (options.tailwindConfig && options.tailwindConfig.endsWith('.css')) { console.warn( - 'Use the `tailwindStylesheet` option for v4 projects instead of `tailwindConfig`.', + 'Deprecated: Use the `tailwindStylesheet` option for v4 projects instead of `tailwindConfig`.', ) return path.resolve(baseDir, options.tailwindConfig)