Add Tailwind and PurgeCSS Test (#9714)
This commit is contained in:
Joe Haddad
GitHub
parent
01b7c576b4
commit
c593171db1
7 changed files with 141 additions and 0 deletions
|
|
@ -35,6 +35,7 @@
|
|||
"@babel/plugin-proposal-object-rest-spread": "7.6.2",
|
||||
"@babel/preset-flow": "7.0.0",
|
||||
"@babel/preset-react": "7.7.0",
|
||||
"@fullhuman/postcss-purgecss": "1.3.0",
|
||||
"@mdx-js/loader": "0.18.0",
|
||||
"@types/jest": "24.0.13",
|
||||
"@types/string-hash": "1.1.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import '../styles/global.css'
|
||||
|
||||
export default function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
const links = [
|
||||
{ href: 'https://github.com/zeit/next.js', label: 'GitHub' },
|
||||
{ href: 'https://nextjs.org/docs', label: 'Docs' },
|
||||
]
|
||||
|
||||
function Nav() {
|
||||
return (
|
||||
<nav>
|
||||
<ul className="flex justify-between items-center p-8">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a className="text-blue-500 no-underline">Home</a>
|
||||
</Link>
|
||||
</li>
|
||||
<ul className="flex justify-between items-center">
|
||||
{links.map(({ href, label }) => (
|
||||
<li key={`${href}${label}`} className="ml-4">
|
||||
<a href={href} className="btn-blue no-underline">
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Nav />
|
||||
<div className="hero">
|
||||
<h1 className="title">Next.js + Tailwind CSS + PurgeCSS</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
const path = require('path')
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'tailwindcss',
|
||||
[
|
||||
'@fullhuman/postcss-purgecss',
|
||||
{
|
||||
content: [path.join(__dirname, './pages/**/*.{js,jsx,ts,tsx}')],
|
||||
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -598,4 +598,42 @@ describe('CSS Support', () => {
|
|||
expect(cssMapFiles.length).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Tailwind and Purge CSS', () => {
|
||||
const appDir = join(fixturesDir, 'with-tailwindcss-and-purgecss')
|
||||
|
||||
beforeAll(async () => {
|
||||
await remove(join(appDir, '.next'))
|
||||
})
|
||||
|
||||
it('should build successfully', async () => {
|
||||
await nextBuild(appDir)
|
||||
})
|
||||
|
||||
it(`should've compiled and prefixed`, async () => {
|
||||
const cssFolder = join(appDir, '.next/static/css')
|
||||
|
||||
const files = await readdir(cssFolder)
|
||||
const cssFiles = files.filter(f => /\.css$/.test(f))
|
||||
|
||||
expect(cssFiles.length).toBe(1)
|
||||
const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
|
||||
|
||||
expect(cssContent).not.toMatch(/object-right-bottom/) // this was unused and should be gone
|
||||
expect(cssContent).toMatch(/text-blue-500/) // this was used
|
||||
expect(cssContent).not.toMatch(/tailwind/) // ensure @tailwind was removed
|
||||
|
||||
// Contains a source map
|
||||
expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//)
|
||||
})
|
||||
|
||||
it(`should've emitted a source map`, async () => {
|
||||
const cssFolder = join(appDir, '.next/static/css')
|
||||
|
||||
const files = await readdir(cssFolder)
|
||||
const cssMapFiles = files.filter(f => /\.css\.map$/.test(f))
|
||||
|
||||
expect(cssMapFiles.length).toBe(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
43
yarn.lock
43
yarn.lock
|
|
@ -1308,6 +1308,14 @@
|
|||
resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.23.tgz#a0df05b210ff03c65ecb3589390095631b95e1f8"
|
||||
integrity sha512-BJqOF51sPQjmRoX+WFMbZ5mhuy53JrFN0t1KY+HffcvDRb+82+vkFatKnwG3wTCKV183vJW5tGQIytb4T8pUBg==
|
||||
|
||||
"@fullhuman/postcss-purgecss@1.3.0":
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-1.3.0.tgz#d632900d818f4fcf4678e7326923fb838c3e03a7"
|
||||
integrity sha512-zvfS3dPKD2FAtMcXapMJXGbDgEp9E++mLR6lTgSruv6y37uvV5xJ1crVktuC1gvnmMwsa7Zh1m05FeEiz4VnIQ==
|
||||
dependencies:
|
||||
postcss "^7.0.14"
|
||||
purgecss "^1.4.0"
|
||||
|
||||
"@grpc/proto-loader@^0.5.0":
|
||||
version "0.5.1"
|
||||
resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.5.1.tgz#48492b53cdda353110b51a4b02f465974729c76f"
|
||||
|
|
@ -12874,6 +12882,16 @@ punycode@^2.1.0, punycode@^2.1.1:
|
|||
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
|
||||
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
|
||||
|
||||
purgecss@^1.4.0:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-1.4.1.tgz#d362e63eb1ed9dd1fa1554b9fd7accb8d54e56dc"
|
||||
integrity sha512-5jONV/D/3nfa+lC425+LA+OWe5/LDn4a79cac+TnzJq3VczwnWlpIDdW275hHsGhkzIlqATQsYFLW7or0cSwNQ==
|
||||
dependencies:
|
||||
glob "^7.1.3"
|
||||
postcss "^7.0.14"
|
||||
postcss-selector-parser "^6.0.0"
|
||||
yargs "^14.0.0"
|
||||
|
||||
q@^1.1.2, q@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
|
||||
|
|
@ -16079,6 +16097,14 @@ yargs-parser@^13.1.1:
|
|||
camelcase "^5.0.0"
|
||||
decamelize "^1.2.0"
|
||||
|
||||
yargs-parser@^15.0.0:
|
||||
version "15.0.0"
|
||||
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
|
||||
integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
|
||||
dependencies:
|
||||
camelcase "^5.0.0"
|
||||
decamelize "^1.2.0"
|
||||
|
||||
yargs-parser@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
|
||||
|
|
@ -16120,6 +16146,23 @@ yargs@^13.3.0:
|
|||
y18n "^4.0.0"
|
||||
yargs-parser "^13.1.1"
|
||||
|
||||
yargs@^14.0.0:
|
||||
version "14.2.2"
|
||||
resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.2.tgz#2769564379009ff8597cdd38fba09da9b493c4b5"
|
||||
integrity sha512-/4ld+4VV5RnrynMhPZJ/ZpOCGSCeghMykZ3BhdFBDa9Wy/RH6uEGNWDJog+aUlq+9OM1CFTgtYRW5Is1Po9NOA==
|
||||
dependencies:
|
||||
cliui "^5.0.0"
|
||||
decamelize "^1.2.0"
|
||||
find-up "^3.0.0"
|
||||
get-caller-file "^2.0.1"
|
||||
require-directory "^2.1.1"
|
||||
require-main-filename "^2.0.0"
|
||||
set-blocking "^2.0.0"
|
||||
string-width "^3.0.0"
|
||||
which-module "^2.0.0"
|
||||
y18n "^4.0.0"
|
||||
yargs-parser "^15.0.0"
|
||||
|
||||
yargs@^3.10.0:
|
||||
version "3.32.0"
|
||||
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
|
||||
|
|
|
|||
Loading…
Reference in a new issue