1 | const { join, resolve, relative } = require('path')
|
2 | const { pathExists } = require('fs-extra')
|
3 | const defu = require('defu')
|
4 | const clearModule = require('clear-module')
|
5 |
|
6 | const logger = require('./logger')
|
7 | const defaultTailwindConfig = require('./files/tailwind.config.js')
|
8 |
|
9 | module.exports = async function (moduleOptions) {
|
10 | const { nuxt, addTemplate } = this
|
11 | const options = defu.arrayFn(moduleOptions, nuxt.options.tailwindcss, {
|
12 | configPath: 'tailwind.config.js',
|
13 | cssPath: join(nuxt.options.dir.assets, 'css', 'tailwind.css'),
|
14 | exposeConfig: false,
|
15 | config: defaultTailwindConfig(nuxt.options),
|
16 | ui: nuxt.options.dev
|
17 | })
|
18 |
|
19 | const configPath = nuxt.resolver.resolveAlias(options.configPath)
|
20 | const cssPath = nuxt.resolver.resolveAlias(options.cssPath)
|
21 |
|
22 |
|
23 | if (await pathExists(cssPath)) {
|
24 | logger.info(`Using Tailwind CSS from ~/${relative(nuxt.options.srcDir, cssPath)}`)
|
25 | nuxt.options.css.unshift(cssPath)
|
26 | } else {
|
27 | nuxt.options.css.unshift(resolve(__dirname, 'files', 'tailwind.css'))
|
28 | }
|
29 |
|
30 |
|
31 | let tailwindConfig = {}
|
32 | if (await pathExists(configPath)) {
|
33 | clearModule(configPath)
|
34 | tailwindConfig = require(configPath)
|
35 | logger.info(`Merging Tailwind config from ~/${relative(this.options.srcDir, configPath)}`)
|
36 | }
|
37 |
|
38 | tailwindConfig = defu.arrayFn(tailwindConfig, options.config)
|
39 |
|
40 |
|
41 |
|
42 | if (nuxt.options.dev) {
|
43 | nuxt.options.watch.push(configPath)
|
44 | }
|
45 |
|
46 | nuxt.hook('build:before', async () => {
|
47 |
|
48 |
|
49 | if (!nuxt.options.dev && !process.env.NODE_ENV) {
|
50 | process.env.NODE_ENV = 'production'
|
51 | }
|
52 | |
53 |
|
54 |
|
55 | const { postcss } = nuxt.options.build
|
56 |
|
57 | postcss.preset.stage = 1
|
58 | postcss.plugins = postcss.plugins || {}
|
59 |
|
60 |
|
61 | await nuxt.callHook('tailwindcss:config', tailwindConfig)
|
62 |
|
63 |
|
64 | if (Array.isArray(postcss.plugins)) {
|
65 | logger.error('Array syntax for postcss plugins is not supported with v3. Please use the object syntax: https://nuxtjs.org/guides/configuration-glossary/configuration-build#postcss')
|
66 | } else if (typeof postcss.plugins === 'object') {
|
67 | postcss.plugins.tailwindcss = tailwindConfig
|
68 | }
|
69 |
|
70 | |
71 |
|
72 |
|
73 |
|
74 | if (nuxt.options.dev) {
|
75 |
|
76 | const layout = resolve(__dirname, 'ui', 'layouts', 'tw.vue')
|
77 | this.addLayout(layout, 'tw')
|
78 |
|
79 | const page = resolve(__dirname, 'ui', 'pages', 'index.vue')
|
80 |
|
81 |
|
82 | this.extendRoutes((routes) => {
|
83 | routes.unshift({
|
84 | name: '_tailwind',
|
85 | path: '/_tailwind',
|
86 | component: page
|
87 | })
|
88 | })
|
89 | const url = nuxt.server.listeners ? nuxt.server.listeners[0].url : '/'
|
90 | logger.info(`Tailwind Colors available on ${url}_tailwind`)
|
91 | }
|
92 | |
93 |
|
94 |
|
95 |
|
96 | if (nuxt.options.dev || options.exposeConfig) {
|
97 |
|
98 | const resolveConfig = require('tailwindcss/resolveConfig')
|
99 | const resolvedConfig = resolveConfig(tailwindConfig)
|
100 |
|
101 |
|
102 | addTemplate({
|
103 | src: resolve(__dirname, 'templates/tailwind.config.json'),
|
104 | fileName: 'tailwind.config.json',
|
105 | options: { config: resolvedConfig }
|
106 | })
|
107 |
|
108 |
|
109 | nuxt.options.alias['~tailwind.config'] =
|
110 | resolve(nuxt.options.buildDir, 'tailwind.config.json')
|
111 |
|
112 |
|
113 | const { cacheGroups } = nuxt.options.build.optimization.splitChunks
|
114 | cacheGroups.tailwindConfig = {
|
115 | test: /tailwind\.config/,
|
116 | chunks: 'all',
|
117 | priority: 10,
|
118 | name: true
|
119 | }
|
120 | }
|
121 | })
|
122 | }
|
123 |
|
124 | module.exports.meta = require('../package.json')
|