Skip to content

Commit cdef9c8

Browse files
adamwathanadamwathan
committed
Improve support for purging Haml templates
1 parent 1c18362 commit cdef9c8

File tree

3 files changed

+57
-118
lines changed

3 files changed

+57
-118
lines changed

‎__tests__/fixtures/purge-example.html

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<!-- Basic HTML -->
2-
<div class="bg-red-500 md:bg-blue-300 w-1/2"></div>
2+
<html>
3+
<head>
4+
<title>My Page</title>
5+
</head>
6+
<body>
7+
<main>
8+
<div class="bg-red-500 md:bg-blue-300 w-1/2"></div>
9+
</main>
10+
</body>
11+
</html>
312

413
<!-- Vue dynamic classes -->
514
<span :class="{ block: enabled, 'md:flow-root': !enabled }"></span>
@@ -19,4 +28,10 @@
1928
.col-span-2
2029
Hello
2130
.col-span-1.text-center
22-
World!
31+
World!
32+
33+
<!-- Haml -->
34+
.flow-root
35+
.text-green-700.bg-green-100
36+
.text-left= content
37+
%samp= output

‎__tests__/purgeUnusedStyles.test.js

Lines changed: 39 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,37 @@ const config = {
2525
},
2626
}
2727

28+
function assertPurged(result) {
29+
expect(result.css).not.toContain('.bg-red-600')
30+
expect(result.css).not.toContain('.w-1\\/3')
31+
expect(result.css).not.toContain('.flex')
32+
expect(result.css).not.toContain('.font-sans')
33+
expect(result.css).not.toContain('.text-right')
34+
expect(result.css).not.toContain('.px-4')
35+
expect(result.css).not.toContain('.h-full')
36+
37+
expect(result.css).toContain('.bg-red-500')
38+
expect(result.css).toContain('.md\\:bg-blue-300')
39+
expect(result.css).toContain('.w-1\\/2')
40+
expect(result.css).toContain('.block')
41+
expect(result.css).toContain('.md\\:flow-root')
42+
expect(result.css).toContain('.h-screen')
43+
expect(result.css).toContain('.min-h-\\(screen-4\\)')
44+
expect(result.css).toContain('.bg-black\\!')
45+
expect(result.css).toContain('.font-\\%\\#\\$\\@')
46+
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
47+
expect(result.css).toContain('.inline-grid')
48+
expect(result.css).toContain('.grid-cols-3')
49+
expect(result.css).toContain('.px-1\\.5')
50+
expect(result.css).toContain('.col-span-2')
51+
expect(result.css).toContain('.col-span-1')
52+
expect(result.css).toContain('.text-center')
53+
expect(result.css).toContain('.flow-root')
54+
expect(result.css).toContain('.text-green-700')
55+
expect(result.css).toContain('.bg-green-100')
56+
expect(result.css).toContain('.text-left')
57+
}
58+
2859
test('purges unused classes', () => {
2960
const OLD_NODE_ENV = process.env.NODE_ENV
3061
process.env.NODE_ENV = 'production'
@@ -41,30 +72,7 @@ test('purges unused classes', () => {
4172
.then(result => {
4273
process.env.NODE_ENV = OLD_NODE_ENV
4374

44-
expect(result.css).not.toContain('.bg-red-600')
45-
expect(result.css).not.toContain('.w-1\\/3')
46-
expect(result.css).not.toContain('.flex')
47-
expect(result.css).not.toContain('.font-sans')
48-
expect(result.css).not.toContain('.text-right')
49-
expect(result.css).not.toContain('.px-4')
50-
expect(result.css).not.toContain('.h-full')
51-
52-
expect(result.css).toContain('.bg-red-500')
53-
expect(result.css).toContain('.md\\:bg-blue-300')
54-
expect(result.css).toContain('.w-1\\/2')
55-
expect(result.css).toContain('.block')
56-
expect(result.css).toContain('.md\\:flow-root')
57-
expect(result.css).toContain('.h-screen')
58-
expect(result.css).toContain('.min-h-\\(screen-4\\)')
59-
expect(result.css).toContain('.bg-black\\!')
60-
expect(result.css).toContain('.font-\\%\\#\\$\\@')
61-
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
62-
expect(result.css).toContain('.inline-grid')
63-
expect(result.css).toContain('.grid-cols-3')
64-
expect(result.css).toContain('.px-1\\.5')
65-
expect(result.css).toContain('.col-span-2')
66-
expect(result.css).toContain('.col-span-1')
67-
expect(result.css).toContain('.text-center')
75+
assertPurged(result)
6876
})
6977
})
7078

@@ -85,31 +93,7 @@ test('does not purge components', () => {
8593
process.env.NODE_ENV = OLD_NODE_ENV
8694

8795
expect(result.css).toContain('.container')
88-
89-
expect(result.css).not.toContain('.bg-red-600')
90-
expect(result.css).not.toContain('.w-1\\/3')
91-
expect(result.css).not.toContain('.flex')
92-
expect(result.css).not.toContain('.font-sans')
93-
expect(result.css).not.toContain('.text-right')
94-
expect(result.css).not.toContain('.px-4')
95-
expect(result.css).not.toContain('.h-full')
96-
97-
expect(result.css).toContain('.bg-red-500')
98-
expect(result.css).toContain('.md\\:bg-blue-300')
99-
expect(result.css).toContain('.w-1\\/2')
100-
expect(result.css).toContain('.block')
101-
expect(result.css).toContain('.md\\:flow-root')
102-
expect(result.css).toContain('.h-screen')
103-
expect(result.css).toContain('.min-h-\\(screen-4\\)')
104-
expect(result.css).toContain('.bg-black\\!')
105-
expect(result.css).toContain('.font-\\%\\#\\$\\@')
106-
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
107-
expect(result.css).toContain('.inline-grid')
108-
expect(result.css).toContain('.grid-cols-3')
109-
expect(result.css).toContain('.px-1\\.5')
110-
expect(result.css).toContain('.col-span-2')
111-
expect(result.css).toContain('.col-span-1')
112-
expect(result.css).toContain('.text-center')
96+
assertPurged(result)
11397
})
11498
})
11599

@@ -177,30 +161,7 @@ test('purges outside of production if explicitly enabled', () => {
177161
.then(result => {
178162
process.env.NODE_ENV = OLD_NODE_ENV
179163

180-
expect(result.css).not.toContain('.bg-red-600')
181-
expect(result.css).not.toContain('.w-1\\/3')
182-
expect(result.css).not.toContain('.flex')
183-
expect(result.css).not.toContain('.font-sans')
184-
expect(result.css).not.toContain('.text-right')
185-
expect(result.css).not.toContain('.px-4')
186-
expect(result.css).not.toContain('.h-full')
187-
188-
expect(result.css).toContain('.bg-red-500')
189-
expect(result.css).toContain('.md\\:bg-blue-300')
190-
expect(result.css).toContain('.w-1\\/2')
191-
expect(result.css).toContain('.block')
192-
expect(result.css).toContain('.md\\:flow-root')
193-
expect(result.css).toContain('.h-screen')
194-
expect(result.css).toContain('.min-h-\\(screen-4\\)')
195-
expect(result.css).toContain('.bg-black\\!')
196-
expect(result.css).toContain('.font-\\%\\#\\$\\@')
197-
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
198-
expect(result.css).toContain('.inline-grid')
199-
expect(result.css).toContain('.grid-cols-3')
200-
expect(result.css).toContain('.px-1\\.5')
201-
expect(result.css).toContain('.col-span-2')
202-
expect(result.css).toContain('.col-span-1')
203-
expect(result.css).toContain('.text-center')
164+
assertPurged(result)
204165
})
205166
})
206167

@@ -222,31 +183,8 @@ test('purgecss options can be provided', () => {
222183
])
223184
.process(input, { from: inputPath })
224185
.then(result => {
225-
expect(result.css).not.toContain('.bg-red-600')
226-
expect(result.css).not.toContain('.w-1\\/3')
227-
expect(result.css).not.toContain('.flex')
228-
expect(result.css).not.toContain('.font-sans')
229-
expect(result.css).not.toContain('.text-right')
230-
expect(result.css).not.toContain('.px-4')
231-
expect(result.css).not.toContain('.h-full')
232-
233186
expect(result.css).toContain('.md\\:bg-green-500')
234-
expect(result.css).toContain('.bg-red-500')
235-
expect(result.css).toContain('.md\\:bg-blue-300')
236-
expect(result.css).toContain('.w-1\\/2')
237-
expect(result.css).toContain('.block')
238-
expect(result.css).toContain('.md\\:flow-root')
239-
expect(result.css).toContain('.h-screen')
240-
expect(result.css).toContain('.min-h-\\(screen-4\\)')
241-
expect(result.css).toContain('.bg-black\\!')
242-
expect(result.css).toContain('.font-\\%\\#\\$\\@')
243-
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
244-
expect(result.css).toContain('.inline-grid')
245-
expect(result.css).toContain('.grid-cols-3')
246-
expect(result.css).toContain('.px-1\\.5')
247-
expect(result.css).toContain('.col-span-2')
248-
expect(result.css).toContain('.col-span-1')
249-
expect(result.css).toContain('.text-center')
187+
assertPurged(result)
250188
})
251189
})
252190

@@ -271,28 +209,14 @@ test('can purge all CSS, not just Tailwind classes', () => {
271209
])
272210
.process(input, { from: inputPath })
273211
.then(result => {
274-
expect(result.css).not.toContain('html')
275-
expect(result.css).not.toContain('body')
212+
expect(result.css).toContain('html')
213+
expect(result.css).toContain('body')
214+
expect(result.css).toContain('samp')
276215
expect(result.css).not.toContain('button')
277216
expect(result.css).not.toContain('legend')
278217
expect(result.css).not.toContain('progress')
279218

280-
expect(result.css).toContain('.bg-red-500')
281-
expect(result.css).toContain('.md\\:bg-blue-300')
282-
expect(result.css).toContain('.w-1\\/2')
283-
expect(result.css).toContain('.block')
284-
expect(result.css).toContain('.md\\:flow-root')
285-
expect(result.css).toContain('.h-screen')
286-
expect(result.css).toContain('.min-h-\\(screen-4\\)')
287-
expect(result.css).toContain('.bg-black\\!')
288-
expect(result.css).toContain('.font-\\%\\#\\$\\@')
289-
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
290-
expect(result.css).toContain('.inline-grid')
291-
expect(result.css).toContain('.grid-cols-3')
292-
expect(result.css).toContain('.px-1\\.5')
293-
expect(result.css).toContain('.col-span-2')
294-
expect(result.css).toContain('.col-span-1')
295-
expect(result.css).toContain('.text-center')
219+
assertPurged(result)
296220
})
297221
})
298222

‎src/lib/purgeUnusedStyles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default function purgeUnusedUtilities(config) {
6767
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
6868

6969
// Capture classes within other delimiters like .block(class="w-1/2") in Pug
70-
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
70+
const innerMatches = content.match(/[^<>"'`\s.()=%]*[^<>"'`\s.()=%:]/g) || []
7171

7272
return broadMatches.concat(innerMatches)
7373
},

0 commit comments

Comments
 (0)