Skip to content

Commit

Permalink
Improve support for purging Haml templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamwathan
adamwathan committed Apr 30, 2020
1 parent 1c18362 commit cdef9c8
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 118 deletions.
19 changes: 17 additions & 2 deletions __tests__/fixtures/purge-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
<!-- Basic HTML -->
<div class="bg-red-500 md:bg-blue-300 w-1/2"></div>
<html>
<head>
<title>My Page</title>
</head>
<body>
<main>
<div class="bg-red-500 md:bg-blue-300 w-1/2"></div>
</main>
</body>
</html>

<!-- Vue dynamic classes -->
<span :class="{ block: enabled, 'md:flow-root': !enabled }"></span>
Expand All @@ -19,4 +28,10 @@
.col-span-2
Hello
.col-span-1.text-center
World!
World!

<!-- Haml -->
.flow-root
.text-green-700.bg-green-100
.text-left= content
%samp= output
154 changes: 39 additions & 115 deletions __tests__/purgeUnusedStyles.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,37 @@ const config = {
},
}

function assertPurged(result) {
expect(result.css).not.toContain('.bg-red-600')
expect(result.css).not.toContain('.w-1\\/3')
expect(result.css).not.toContain('.flex')
expect(result.css).not.toContain('.font-sans')
expect(result.css).not.toContain('.text-right')
expect(result.css).not.toContain('.px-4')
expect(result.css).not.toContain('.h-full')

expect(result.css).toContain('.bg-red-500')
expect(result.css).toContain('.md\\:bg-blue-300')
expect(result.css).toContain('.w-1\\/2')
expect(result.css).toContain('.block')
expect(result.css).toContain('.md\\:flow-root')
expect(result.css).toContain('.h-screen')
expect(result.css).toContain('.min-h-\\(screen-4\\)')
expect(result.css).toContain('.bg-black\\!')
expect(result.css).toContain('.font-\\%\\#\\$\\@')
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
expect(result.css).toContain('.inline-grid')
expect(result.css).toContain('.grid-cols-3')
expect(result.css).toContain('.px-1\\.5')
expect(result.css).toContain('.col-span-2')
expect(result.css).toContain('.col-span-1')
expect(result.css).toContain('.text-center')
expect(result.css).toContain('.flow-root')
expect(result.css).toContain('.text-green-700')
expect(result.css).toContain('.bg-green-100')
expect(result.css).toContain('.text-left')
}

test('purges unused classes', () => {
const OLD_NODE_ENV = process.env.NODE_ENV
process.env.NODE_ENV = 'production'
Expand All @@ -41,30 +72,7 @@ test('purges unused classes', () => {
.then(result => {
process.env.NODE_ENV = OLD_NODE_ENV

expect(result.css).not.toContain('.bg-red-600')
expect(result.css).not.toContain('.w-1\\/3')
expect(result.css).not.toContain('.flex')
expect(result.css).not.toContain('.font-sans')
expect(result.css).not.toContain('.text-right')
expect(result.css).not.toContain('.px-4')
expect(result.css).not.toContain('.h-full')

expect(result.css).toContain('.bg-red-500')
expect(result.css).toContain('.md\\:bg-blue-300')
expect(result.css).toContain('.w-1\\/2')
expect(result.css).toContain('.block')
expect(result.css).toContain('.md\\:flow-root')
expect(result.css).toContain('.h-screen')
expect(result.css).toContain('.min-h-\\(screen-4\\)')
expect(result.css).toContain('.bg-black\\!')
expect(result.css).toContain('.font-\\%\\#\\$\\@')
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
expect(result.css).toContain('.inline-grid')
expect(result.css).toContain('.grid-cols-3')
expect(result.css).toContain('.px-1\\.5')
expect(result.css).toContain('.col-span-2')
expect(result.css).toContain('.col-span-1')
expect(result.css).toContain('.text-center')
assertPurged(result)
})
})

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

expect(result.css).toContain('.container')

expect(result.css).not.toContain('.bg-red-600')
expect(result.css).not.toContain('.w-1\\/3')
expect(result.css).not.toContain('.flex')
expect(result.css).not.toContain('.font-sans')
expect(result.css).not.toContain('.text-right')
expect(result.css).not.toContain('.px-4')
expect(result.css).not.toContain('.h-full')

expect(result.css).toContain('.bg-red-500')
expect(result.css).toContain('.md\\:bg-blue-300')
expect(result.css).toContain('.w-1\\/2')
expect(result.css).toContain('.block')
expect(result.css).toContain('.md\\:flow-root')
expect(result.css).toContain('.h-screen')
expect(result.css).toContain('.min-h-\\(screen-4\\)')
expect(result.css).toContain('.bg-black\\!')
expect(result.css).toContain('.font-\\%\\#\\$\\@')
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
expect(result.css).toContain('.inline-grid')
expect(result.css).toContain('.grid-cols-3')
expect(result.css).toContain('.px-1\\.5')
expect(result.css).toContain('.col-span-2')
expect(result.css).toContain('.col-span-1')
expect(result.css).toContain('.text-center')
assertPurged(result)
})
})

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

expect(result.css).not.toContain('.bg-red-600')
expect(result.css).not.toContain('.w-1\\/3')
expect(result.css).not.toContain('.flex')
expect(result.css).not.toContain('.font-sans')
expect(result.css).not.toContain('.text-right')
expect(result.css).not.toContain('.px-4')
expect(result.css).not.toContain('.h-full')

expect(result.css).toContain('.bg-red-500')
expect(result.css).toContain('.md\\:bg-blue-300')
expect(result.css).toContain('.w-1\\/2')
expect(result.css).toContain('.block')
expect(result.css).toContain('.md\\:flow-root')
expect(result.css).toContain('.h-screen')
expect(result.css).toContain('.min-h-\\(screen-4\\)')
expect(result.css).toContain('.bg-black\\!')
expect(result.css).toContain('.font-\\%\\#\\$\\@')
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
expect(result.css).toContain('.inline-grid')
expect(result.css).toContain('.grid-cols-3')
expect(result.css).toContain('.px-1\\.5')
expect(result.css).toContain('.col-span-2')
expect(result.css).toContain('.col-span-1')
expect(result.css).toContain('.text-center')
assertPurged(result)
})
})

Expand All @@ -222,31 +183,8 @@ test('purgecss options can be provided', () => {
])
.process(input, { from: inputPath })
.then(result => {
expect(result.css).not.toContain('.bg-red-600')
expect(result.css).not.toContain('.w-1\\/3')
expect(result.css).not.toContain('.flex')
expect(result.css).not.toContain('.font-sans')
expect(result.css).not.toContain('.text-right')
expect(result.css).not.toContain('.px-4')
expect(result.css).not.toContain('.h-full')

expect(result.css).toContain('.md\\:bg-green-500')
expect(result.css).toContain('.bg-red-500')
expect(result.css).toContain('.md\\:bg-blue-300')
expect(result.css).toContain('.w-1\\/2')
expect(result.css).toContain('.block')
expect(result.css).toContain('.md\\:flow-root')
expect(result.css).toContain('.h-screen')
expect(result.css).toContain('.min-h-\\(screen-4\\)')
expect(result.css).toContain('.bg-black\\!')
expect(result.css).toContain('.font-\\%\\#\\$\\@')
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
expect(result.css).toContain('.inline-grid')
expect(result.css).toContain('.grid-cols-3')
expect(result.css).toContain('.px-1\\.5')
expect(result.css).toContain('.col-span-2')
expect(result.css).toContain('.col-span-1')
expect(result.css).toContain('.text-center')
assertPurged(result)
})
})

Expand All @@ -271,28 +209,14 @@ test('can purge all CSS, not just Tailwind classes', () => {
])
.process(input, { from: inputPath })
.then(result => {
expect(result.css).not.toContain('html')
expect(result.css).not.toContain('body')
expect(result.css).toContain('html')
expect(result.css).toContain('body')
expect(result.css).toContain('samp')
expect(result.css).not.toContain('button')
expect(result.css).not.toContain('legend')
expect(result.css).not.toContain('progress')

expect(result.css).toContain('.bg-red-500')
expect(result.css).toContain('.md\\:bg-blue-300')
expect(result.css).toContain('.w-1\\/2')
expect(result.css).toContain('.block')
expect(result.css).toContain('.md\\:flow-root')
expect(result.css).toContain('.h-screen')
expect(result.css).toContain('.min-h-\\(screen-4\\)')
expect(result.css).toContain('.bg-black\\!')
expect(result.css).toContain('.font-\\%\\#\\$\\@')
expect(result.css).toContain('.w-\\(1\\/2\\+8\\)')
expect(result.css).toContain('.inline-grid')
expect(result.css).toContain('.grid-cols-3')
expect(result.css).toContain('.px-1\\.5')
expect(result.css).toContain('.col-span-2')
expect(result.css).toContain('.col-span-1')
expect(result.css).toContain('.text-center')
assertPurged(result)
})
})

Expand Down
2 changes: 1 addition & 1 deletion src/lib/purgeUnusedStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function purgeUnusedUtilities(config) {
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

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

return broadMatches.concat(innerMatches)
},
Expand Down

0 comments on commit cdef9c8

Please sign in to comment.