import QuickLRU from '@alloc/quick-lru'
import {
compile,
env,
Features,
Instrumentation,
normalizePath,
optimize,
Polyfills,
} from '@tailwindcss/node'
import { clearRequireCache } from '@tailwindcss/node/require-cache'
import { Scanner } from '@tailwindcss/oxide'
import fs from 'node:fs'
import path from 'node:path'
import type { LoaderContext } from 'webpack'
const DEBUG = env.DEBUG
export interface LoaderOptions {
base?: string
optimize?: boolean | { minify?: boolean }
}
interface CacheEntry {
mtimes: Map<string, number>
compiler: null | Awaited<ReturnType<typeof compile>>
scanner: null | Scanner
candidates: Set<string>
fullRebuildPaths: string[]
}
const cache = new QuickLRU<string, CacheEntry>({ maxSize: 50 })
function getContextFromCache(inputFile: string, opts: LoaderOptions): CacheEntry {
let key = `${inputFile}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
if (cache.has(key)) return cache.get(key)!
let entry: CacheEntry = {
mtimes: new Map<string, number>(),
compiler: null,
scanner: null,
candidates: new Set<string>(),
fullRebuildPaths: [],
}
cache.set(key, entry)
return entry
}
export default async function tailwindLoader(
this: LoaderContext<LoaderOptions>,
source: string,
): Promise<void> {
let callback = this.async()
let options = this.getOptions() ?? {}
let inputFile = this.resourcePath
let base = options.base ?? process.cwd()
let shouldOptimize = options.optimize ?? process.env.NODE_ENV === 'production'
let isCSSModuleFile = inputFile.endsWith('.module.css')
using I = new Instrumentation()
DEBUG && I.start(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
{
DEBUG && I.start('Quick bail check')
let canBail = !/@(import|reference|theme|variant|config|plugin|apply|tailwind)\b/.test(source)
if (canBail) {
DEBUG && I.end('Quick bail check')
DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
callback(null, source)
return
}
DEBUG && I.end('Quick bail check')
}
try {
let context = getContextFromCache(inputFile, options)
let inputBasePath = path.dirname(path.resolve(inputFile))
let isInitialBuild = context.compiler === null
async function createCompiler() {
DEBUG && I.start('Setup compiler')
if (context.fullRebuildPaths.length > 0 && !isInitialBuild) {
clearRequireCache(context.fullRebuildPaths)
}
context.fullRebuildPaths = []
DEBUG && I.start('Create compiler')
let compiler = await compile(source, {
from: inputFile,
base: inputBasePath,
shouldRewriteUrls: true,
onDependency: (depPath) => context.fullRebuildPaths.push(depPath),
polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
})
DEBUG && I.end('Create compiler')
DEBUG && I.end('Setup compiler')
return compiler
}
context.compiler ??= await createCompiler()
if (context.compiler.features === Features.None) {
DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
callback(null, source)
return
}
let rebuildStrategy: 'full' | 'incremental' = 'incremental'
DEBUG && I.start('Register full rebuild paths')
{
for (let file of context.fullRebuildPaths) {
this.addDependency(path.resolve(file))
}
let files = [...context.fullRebuildPaths, inputFile]
for (let file of files) {
let changedTime: number | null = null
try {
changedTime = fs.statSync(file)?.mtimeMs ?? null
} catch {
}
if (changedTime === null) {
if (file === inputFile) {
rebuildStrategy = 'full'
}
continue
}
let prevTime = context.mtimes.get(file)
if (prevTime === changedTime) continue
rebuildStrategy = 'full'
context.mtimes.set(file, changedTime)
}
}
DEBUG && I.end('Register full rebuild paths')
if (rebuildStrategy === 'full' && !isInitialBuild) {
context.compiler = await createCompiler()
}
let compiler = context.compiler
if (
!(
compiler.features &
(Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
)
) {
DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
callback(null, source)
return
}
if (context.scanner === null || rebuildStrategy === 'full') {
DEBUG && I.start('Setup scanner')
let sources = (() => {
if (compiler.root === 'none') {
return []
}
if (compiler.root === null) {
return [{ base, pattern: '**/*', negated: false }]
}
return [{ ...compiler.root, negated: false }]
})().concat(compiler.sources)
context.scanner = new Scanner({ sources })
DEBUG && I.end('Setup scanner')
}
if (compiler.features & Features.Utilities) {
DEBUG && I.start('Scan for candidates')
for (let candidate of context.scanner.scan()) {
context.candidates.add(candidate)
}
DEBUG && I.end('Scan for candidates')
DEBUG && I.start('Register dependency messages')
let resolvedInputFile = path.resolve(base, inputFile)
for (let file of context.scanner.files) {
let absolutePath = path.resolve(file)
if (absolutePath === resolvedInputFile) {
continue
}
this.addDependency(absolutePath)
}
for (let glob of context.scanner.globs) {
if (glob.pattern[0] === '!') continue
if (glob.pattern === '*' && base === glob.base) {
continue
}
this.addContextDependency(path.resolve(glob.base))
}
let root = compiler.root
if (root !== 'none' && root !== null) {
let basePath = normalizePath(path.resolve(root.base, root.pattern))
try {
let stats = fs.statSync(basePath)
if (!stats.isDirectory()) {
throw new Error(
`The path given to \`source(…)\` must be a directory but got \`source(${basePath})\` instead.`,
)
}
} catch (err) {
if ((err as NodeJS.ErrnoException).code !== 'ENOENT') {
throw err
}
}
}
DEBUG && I.end('Register dependency messages')
}
DEBUG && I.start('Build utilities')
let css = compiler.build([...context.candidates])
DEBUG && I.end('Build utilities')
let result = css
if (shouldOptimize) {
DEBUG && I.start('Optimization')
let optimized = optimize(css, {
minify: typeof shouldOptimize === 'object' ? shouldOptimize.minify : true,
})
result = optimized.code
DEBUG && I.end('Optimization')
}
DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
callback(null, result)
} catch (error) {
let key = `${inputFile}:${options.base ?? ''}:${JSON.stringify(options.optimize)}`
cache.delete(key)
DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
callback(error as Error)
}
}