/
index.ts
107 lines (92 loc) · 2.94 KB
/
index.ts
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
/* eslint-env node */
// ^^^^ This comment is need to prevent browser bundles of this file
/**
* [[include:src/shim/server/README.md]]
*
* @packageDocumentation
* @module twind/shim/server
*/
import htmlparser2Tokenizer from 'htmlparser2/lib/Tokenizer'
// htmlparser2 has no esm bundle =>
// a little dance to work around different cjs loaders
const Tokenizer =
((htmlparser2Tokenizer as unknown) as typeof import('htmlparser2/lib/Tokenizer')).default ||
htmlparser2Tokenizer
import type { TW } from 'twind'
import { tw as defaultTW } from 'twind'
export * from 'twind'
export * from 'twind/sheets'
/**
* Options for {@link shim}.
*/
export interface ShimOptions {
/**
* Custom {@link twind.tw | tw} instance to use (default: {@link twind.tw}).
*/
tw?: TW
}
const noop = () => undefined
/**
* Shim the passed html.
*
* 1. tokenize the markup and process element classes with either the
* {@link twind.tw | default/global tw} instance or a {@link ShimOptions.tw | custom} instance
* 2. populate the provided sheet with the generated rules
* 3. output the HTML markup with the final element classes
* @param markup the html to shim
* @param options to use
* @return the HTML markup with the final element classes
*/
export const shim = (markup: string, options: TW | ShimOptions = {}): string => {
const { tw = defaultTW } = typeof options == 'function' ? { tw: options } : options
let lastAttribName = ''
let lastChunkStart = 0
const chunks: string[] = []
const tokenizer = new Tokenizer(
{
decodeEntities: false,
xmlMode: false,
},
{
onattribend: noop,
onattribdata: (value) => {
if (lastAttribName == 'class') {
const currentIndex = tokenizer.getAbsoluteIndex()
const startIndex = currentIndex - value.length
const parsedClassNames = tw(value)
// We only need to shift things around if we need to actually change the markup
if (parsedClassNames !== value) {
// We've hit another mutation boundary
chunks.push(markup.slice(lastChunkStart, startIndex))
chunks.push(parsedClassNames)
lastChunkStart = currentIndex
}
}
// This may not be strictly necessary
lastAttribName = ''
},
onattribname: (name) => {
lastAttribName = name
},
oncdata: noop,
onclosetag: noop,
oncomment: noop,
ondeclaration: noop,
onend: noop,
onerror: noop,
onopentagend: noop,
onopentagname: noop,
onprocessinginstruction: noop,
onselfclosingtag: noop,
ontext: noop,
},
)
tokenizer.end(markup)
// Avoid unnecessary array operations and string concatenation if we never
// needed to slice and dice things.
if (!chunks.length) {
return markup
}
// Combine the current set of chunks with the tail-end of the input
return chunks.join('') + markup.slice(lastChunkStart || 0, markup.length)
}