import { join , resolve , relative } from 'path' ; import { existsSync } from 'fs' ; import defu from 'defu' ; import clearModule from 'clear-module' ; import chalk from 'chalk' ; import { joinURL , withTrailingSlash } from 'ufo' ; import consola from 'consola' ; import { name , version } from '../package.json' ; import defaultTailwindConfig from './tailwind.config' ; const logger = consola . withScope ( 'nuxt:tailwindcss' ) ; async function tailwindCSSModule ( moduleOptions ) { const { nuxt } = this ; const options = defu . arrayFn ( moduleOptions , nuxt . options . tailwindcss , { configPath : 'tailwind.config.js' , cssPath : join ( nuxt . options . dir . assets , 'css' , 'tailwind.css' ) , exposeConfig : false , config : defaultTailwindConfig ( nuxt . options ) , viewer : nuxt . options . dev , injectPosition : 0 } ) ; const configPath = nuxt . resolver . resolveAlias ( options . configPath ) ; const cssPath = options . cssPath && nuxt . resolver . resolveAlias ( options . cssPath ) ; const injectPosition = ~ ~ Math . min ( options . injectPosition , ( nuxt . options . css || [ ] ) . length + 1 ) ; nuxt . options . build . postcss = defu ( nuxt . options . build . postcss , { plugins : { 'postcss-nesting' : { } , 'postcss-custom-properties' : { } } } ) ; await this . addModule ( '@nuxt/postcss8' ) ; if ( typeof cssPath === 'string' ) { if ( existsSync ( cssPath ) ) { logger . info ( `Using Tailwind CSS from ~/${ relative ( nuxt . options . srcDir , cssPath ) }` ) ; nuxt . options . css . splice ( injectPosition , 0 , cssPath ) ; } else { nuxt . options . css . splice ( injectPosition , 0 , resolve ( __dirname , 'runtime' , 'tailwind.css' ) ) ; } } let tailwindConfig = { } ; if ( existsSync ( configPath ) ) { clearModule ( configPath ) ; tailwindConfig = nuxt . resolver . requireModule ( configPath ) ; logger . info ( `Merging Tailwind config from ~/${ relative ( this . options . srcDir , configPath ) }` ) ; if ( Array . isArray ( tailwindConfig . purge ) ) { tailwindConfig . purge = { content : tailwindConfig . purge } ; } } tailwindConfig = defu . arrayFn ( tailwindConfig , options . config ) ; if ( nuxt . options . dev ) { nuxt . options . watch . push ( configPath ) ; } nuxt . hook ( 'build:before' , async ( ) => { if ( ! nuxt . options . dev && ! process . env . NODE_ENV ) { process . env . NODE_ENV = 'production' ; } await nuxt . callHook ( 'tailwindcss:config' , tailwindConfig ) ; tailwindConfig . _hash = String ( Date . now ( ) ) ; if ( options . jit === true ) { logger . warn ( '`tailwindcss.jit` option had been deprecated in favour of tailwind config `mode: \'jit\'`' ) ; tailwindConfig . mode = 'jit' ; } if ( tailwindConfig . mode === 'jit' ) { logger . info ( 'Tailwind JIT activated' ) ; } nuxt . options . build . postcss . plugins . tailwindcss = tailwindConfig ; if ( options . exposeConfig ) { const resolveConfig = require ( 'tailwindcss/resolveConfig' ) ; const resolvedConfig = resolveConfig ( tailwindConfig ) ; this . addTemplate ( { src : resolve ( __dirname , 'runtime/tailwind.config.json' ) , fileName : 'tailwind.config.json' , options : { config : resolvedConfig } } ) ; nuxt . options . alias [ '~tailwind.config' ] = resolve ( nuxt . options . buildDir , 'tailwind.config.json' ) ; const { cacheGroups } = nuxt . options . build . optimization . splitChunks ; cacheGroups . tailwindConfig = { test : /tailwind\.config/ , chunks : 'all' , priority : 10 , name : true } ; } } ) ; if ( nuxt . options . dev && options . viewer ) { const path = '/_tailwind/' ; process . nuxt = process . nuxt || { } ; process . nuxt . $config = process . nuxt . $config || { } ; process . nuxt . $config . tailwind = { viewerPath : path , getConfig : ( ) => tailwindConfig } ; this . addServerMiddleware ( { path , handler : require . resolve ( './runtime/config-viewer' ) } ) ; nuxt . hook ( 'listen' , ( ) => { const url = withTrailingSlash ( joinURL ( nuxt . server . listeners && nuxt . server . listeners [ 0 ] ? nuxt . server . listeners [ 0 ] . url : '/' , path ) ) ; nuxt . options . cli . badgeMessages . push ( `Tailwind Viewer: ${ chalk . underline . yellow ( url ) }` ) ; } ) ; } } tailwindCSSModule . meta = { name , version } ; export default tailwindCSSModule ;