/
setupWatchingContext.js
330 lines (266 loc) · 9.88 KB
/
setupWatchingContext.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
import fs from 'fs'
import path from 'path'
import tmp from 'tmp'
import chokidar from 'chokidar'
import fastGlob from 'fast-glob'
import LRU from 'quick-lru'
import normalizePath from 'normalize-path'
import hash from '../../util/hashConfig'
import log from '../../util/log'
import getModuleDependencies from '../../lib/getModuleDependencies'
import resolveConfig from '../../../resolveConfig'
import resolveConfigPath from '../../util/resolveConfigPath'
import { getContext } from './setupContextUtils'
// This is used to trigger rebuilds. Just updating the timestamp
// is significantly faster than actually writing to the file (10x).
function touch(filename) {
let time = new Date()
try {
fs.utimesSync(filename, time, time)
} catch (err) {
fs.closeSync(fs.openSync(filename, 'w'))
}
}
let watchers = new WeakMap()
function getWatcher(context) {
if (watchers.has(context)) {
return watchers.get(context)
}
return null
}
function setWatcher(context, watcher) {
return watchers.set(context, watcher)
}
let touchFiles = new WeakMap()
function getTouchFile(context) {
if (touchFiles.has(context)) {
return touchFiles.get(context)
}
return null
}
function setTouchFile(context, touchFile) {
return touchFiles.set(context, touchFile)
}
let configPaths = new WeakMap()
function getConfigPath(context, configOrPath) {
if (!configPaths.has(context)) {
configPaths.set(context, resolveConfigPath(configOrPath))
}
return configPaths.get(context)
}
function rebootWatcher(context, configPath, configDependencies, candidateFiles) {
let touchFile = getTouchFile(context)
if (touchFile === null) {
touchFile = tmp.fileSync().name
setTouchFile(context, touchFile)
touch(touchFile)
}
let watcher = getWatcher(context)
Promise.resolve(watcher ? watcher.close() : null).then(() => {
log.info([
'Tailwind CSS is watching for changes...',
'https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds',
])
watcher = chokidar.watch([...candidateFiles, ...configDependencies], {
ignoreInitial: true,
})
setWatcher(context, watcher)
watcher.on('add', (file) => {
let changedFile = path.resolve('.', file)
let content = fs.readFileSync(changedFile, 'utf8')
let extension = path.extname(changedFile).slice(1)
context.changedContent.push({ content, extension })
touch(touchFile)
})
watcher.on('change', (file) => {
// If it was a config dependency, touch the config file to trigger a new context.
// This is not really that clean of a solution but it's the fastest, because we
// can do a very quick check on each build to see if the config has changed instead
// of having to get all of the module dependencies and check every timestamp each
// time.
if (configDependencies.has(file)) {
for (let dependency of configDependencies) {
delete require.cache[require.resolve(dependency)]
}
touch(configPath)
} else {
let changedFile = path.resolve('.', file)
let content = fs.readFileSync(changedFile, 'utf8')
let extension = path.extname(changedFile).slice(1)
context.changedContent.push({ content, extension })
touch(touchFile)
}
})
watcher.on('unlink', (file) => {
// Touch the config file if any of the dependencies are deleted.
if (configDependencies.has(file)) {
for (let dependency of configDependencies) {
delete require.cache[require.resolve(dependency)]
}
touch(configPath)
}
})
})
}
let configPathCache = new LRU({ maxSize: 100 })
let configDependenciesCache = new WeakMap()
function getConfigDependencies(context) {
if (!configDependenciesCache.has(context)) {
configDependenciesCache.set(context, new Set())
}
return configDependenciesCache.get(context)
}
let candidateFilesCache = new WeakMap()
function getCandidateFiles(context, tailwindConfig) {
if (candidateFilesCache.has(context)) {
return candidateFilesCache.get(context)
}
let purgeContent = Array.isArray(tailwindConfig.purge)
? tailwindConfig.purge
: tailwindConfig.purge.content
let candidateFiles = purgeContent
.filter((item) => typeof item === 'string')
.map((purgePath) => normalizePath(path.resolve(purgePath)))
return candidateFilesCache.set(context, candidateFiles).get(context)
}
// Get the config object based on a path
function getTailwindConfig(configOrPath) {
let userConfigPath = resolveConfigPath(configOrPath)
if (userConfigPath !== null) {
let [prevConfig, prevModified = -Infinity, prevConfigHash] =
configPathCache.get(userConfigPath) || []
let modified = fs.statSync(userConfigPath).mtimeMs
// It hasn't changed (based on timestamp)
if (modified <= prevModified) {
return [prevConfig, userConfigPath, prevConfigHash, [userConfigPath]]
}
// It has changed (based on timestamp), or first run
delete require.cache[userConfigPath]
let newConfig = resolveConfig(require(userConfigPath))
let newHash = hash(newConfig)
configPathCache.set(userConfigPath, [newConfig, modified, newHash])
return [newConfig, userConfigPath, newHash, [userConfigPath]]
}
// It's a plain object, not a path
let newConfig = resolveConfig(
configOrPath.config === undefined ? configOrPath : configOrPath.config
)
return [newConfig, null, hash(newConfig), [userConfigPath]]
}
function resolvedChangedContent(context, candidateFiles) {
let changedContent = (
Array.isArray(context.tailwindConfig.purge)
? context.tailwindConfig.purge
: context.tailwindConfig.purge.content
)
.filter((item) => typeof item.raw === 'string')
.concat(
(context.tailwindConfig.purge?.safelist ?? []).map((content) => {
if (typeof content === 'string') {
return { raw: content, extension: 'html' }
}
if (content instanceof RegExp) {
throw new Error(
"Values inside 'purge.safelist' can only be of type 'string', found 'regex'."
)
}
throw new Error(
`Values inside 'purge.safelist' can only be of type 'string', found '${typeof content}'.`
)
})
)
.map(({ raw, extension }) => ({ content: raw, extension }))
for (let changedFile of resolveChangedFiles(context, candidateFiles)) {
let content = fs.readFileSync(changedFile, 'utf8')
let extension = path.extname(changedFile).slice(1)
changedContent.push({ content, extension })
}
return changedContent
}
let scannedContentCache = new WeakMap()
function resolveChangedFiles(context, candidateFiles) {
let changedFiles = new Set()
// If we're not set up and watching files ourselves, we need to do
// the work of grabbing all of the template files for candidate
// detection.
if (!scannedContentCache.has(context)) {
let files = fastGlob.sync(candidateFiles)
for (let file of files) {
changedFiles.add(file)
}
scannedContentCache.set(context, true)
}
return changedFiles
}
// DISABLE_TOUCH = FALSE
// Retrieve an existing context from cache if possible (since contexts are unique per
// source path), or set up a new one (including setting up watchers and registering
// plugins) then return it
export default function setupWatchingContext(configOrPath) {
return ({ tailwindDirectives, registerDependency }) => {
return (root, result) => {
let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] =
getTailwindConfig(configOrPath)
let contextDependencies = new Set(configDependencies)
// If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
// to be dependencies of the context. Can reuse the context even if they change.
// We may want to think about `@layer` being part of this trigger too, but it's tough
// because it's impossible for a layer in one file to end up in the actual @tailwind rule
// in another file since independent sources are effectively isolated.
if (tailwindDirectives.size > 0) {
// Add current css file as a context dependencies.
contextDependencies.add(result.opts.from)
// Add all css @import dependencies as context dependencies.
for (let message of result.messages) {
if (message.type === 'dependency') {
contextDependencies.add(message.file)
}
}
}
let [context, isNewContext] = getContext(
tailwindDirectives,
root,
result,
tailwindConfig,
userConfigPath,
tailwindConfigHash,
contextDependencies
)
let candidateFiles = getCandidateFiles(context, tailwindConfig)
let contextConfigDependencies = getConfigDependencies(context)
for (let file of configDependencies) {
registerDependency({ type: 'dependency', file })
}
context.disposables.push((oldContext) => {
let watcher = getWatcher(oldContext)
if (watcher !== null) {
watcher.close()
}
})
let configPath = getConfigPath(context, configOrPath)
if (configPath !== null) {
for (let dependency of getModuleDependencies(configPath)) {
if (dependency.file === configPath) {
continue
}
contextConfigDependencies.add(dependency.file)
}
}
if (isNewContext) {
rebootWatcher(context, configPath, contextConfigDependencies, candidateFiles)
}
// Register our temp file as a dependency — we write to this file
// to trigger rebuilds.
let touchFile = getTouchFile(context)
if (touchFile) {
registerDependency({ type: 'dependency', file: touchFile })
}
if (tailwindDirectives.size > 0) {
for (let changedContent of resolvedChangedContent(context, candidateFiles)) {
context.changedContent.push(changedContent)
}
}
return context
}
}
}