mirror of
https://github.com/gohugoio/hugo.git
synced 2024-09-13 01:12:31 -04:00
095bf64c99
The main use case for this is to use with resources.PostProcess and resources.PostCSS with purgecss.
You would normally set it up to extract keywords from your templates, doing it from the full /public takes forever for bigger sites.
Doing the template thing misses dynamically created class names etc., and it's hard/impossible to set up in when using themes.
You can enable this in your site config:
```toml
[build]
writeStats = true
```
It will then write a `hugo_stats.json` file to the project root as part of the build.
If you're only using this for the production build, you should consider putting it below `config/production`.
You can then set it up with PostCSS like this:
```js
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [ './hugo_stats.json' ],
defaultExtractor: (content) => {
let els = JSON.parse(content).htmlElements;
return els.tags.concat(els.classes, els.ids);
}
});
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : [])
]
};
```
Fixes #6999
81 lines
2.5 KiB
Go
81 lines
2.5 KiB
Go
// Copyright 2020 The Hugo Authors. All rights reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
package publisher
|
|
|
|
import (
|
|
"fmt"
|
|
"strings"
|
|
"testing"
|
|
|
|
qt "github.com/frankban/quicktest"
|
|
)
|
|
|
|
func TestClassCollector(t *testing.T) {
|
|
c := qt.New((t))
|
|
|
|
f := func(tags, classes, ids string) HTMLElements {
|
|
var tagss, classess, idss []string
|
|
if tags != "" {
|
|
tagss = strings.Split(tags, " ")
|
|
}
|
|
if classes != "" {
|
|
classess = strings.Split(classes, " ")
|
|
}
|
|
if ids != "" {
|
|
idss = strings.Split(ids, " ")
|
|
}
|
|
return HTMLElements{
|
|
Tags: tagss,
|
|
Classes: classess,
|
|
IDs: idss,
|
|
}
|
|
}
|
|
|
|
for _, test := range []struct {
|
|
name string
|
|
html string
|
|
expect HTMLElements
|
|
}{
|
|
{"basic", `<body class="b a"></body>`, f("body", "a b", "")},
|
|
{"duplicates", `<div class="b a b"></div>`, f("div", "a b", "")},
|
|
{"single quote", `<body class='b a'></body>`, f("body", "a b", "")},
|
|
{"no quote", `<body class=b id=myelement></body>`, f("body", "b", "myelement")},
|
|
|
|
{"AlpineJS bind 1", `<body>
|
|
<div x-bind:class="{
|
|
'class1': data.open,
|
|
'class2 class3': data.foo == 'bar'
|
|
}">
|
|
</div>
|
|
</body>`, f("body div", "class1 class2 class3", "")},
|
|
|
|
{"Alpine bind 2", `<div x-bind:class="{ 'bg-black': filter.checked }"
|
|
class="inline-block mr-1 mb-2 rounded bg-gray-300 px-2 py-2">FOO</div>`,
|
|
f("div", "bg-black bg-gray-300 inline-block mb-2 mr-1 px-2 py-2 rounded", "")},
|
|
|
|
{"Alpine bind 3", `<div x-bind:class="{ 'text-gray-800': !checked, 'text-white': checked }"></div>`, f("div", "text-gray-800 text-white", "")},
|
|
{"Alpine bind 4", `<div x-bind:class="{ 'text-gray-800': !checked,
|
|
'text-white': checked }"></div>`, f("div", "text-gray-800 text-white", "")},
|
|
|
|
{"Vue bind", `<div v-bind:class="{ active: isActive }"></div>`, f("div", "active", "")},
|
|
} {
|
|
c.Run(test.name, func(c *qt.C) {
|
|
w := newHTMLElementsCollectorWriter(newHTMLElementsCollector())
|
|
fmt.Fprint(w, test.html)
|
|
got := w.collector.getHTMLElements()
|
|
c.Assert(got, qt.DeepEquals, test.expect)
|
|
})
|
|
}
|
|
|
|
}
|