TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-15 03:54:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

content: Fix formatting

Browse Source
This commit is contained in:
Joe Mooring 2025-08-20 08:03:10 -07:00 committed by GitHub
parent 82885415fa
commit d77b06aa6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
content/en/functions/resources/PostProcess.md
View File

@ -27,51 +27,51 @@ Step 1
Step 2 Step 2
: Install the required Node.js packages in the root of your project: : Install the required Node.js packages in the root of your project:
```sh ```sh {copy=true}
npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
``` ```
Step 3 Step 3
: Enable creation of the `hugo_stats.json` file when building the site. If you are only using this for the production build, consider placing it below [`config/production`]. : Enable creation of the `hugo_stats.json` file when building the site. If you are only using this for the production build, consider placing it below [`config/production`].
{{< code-toggle file=hugo >}} {{< code-toggle file=hugo copy=true >}}
[build.buildStats] [build.buildStats]
enable = true enable = true
{{< /code-toggle >}} {{< /code-toggle >}}
See the [configure build] documentation for details and options. See the [configure build] documentation for details and options.
Step 4 Step 4
: Create a PostCSS configuration file in the root of your project. : Create a PostCSS configuration file in the root of your project.
```js {file="postcss.config.js" copy=true} ```js {file="postcss.config.js" copy=true}
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const purgeCSSPlugin = require('@fullhuman/postcss-purgecss').default; const purgeCSSPlugin = require('@fullhuman/postcss-purgecss').default;
const purgecss = purgeCSSPlugin({ const purgecss = purgeCSSPlugin({
content: ['./hugo_stats.json'], content: ['./hugo_stats.json'],
defaultExtractor: content => { defaultExtractor: content => {
const els = JSON.parse(content).htmlElements; const els = JSON.parse(content).htmlElements;
return [ return [
...(els.tags || []), ...(els.tags || []),
...(els.classes || []), ...(els.classes || []),
...(els.ids || []), ...(els.ids || []),
]; ];
}, },
// https://purgecss.com/safelisting.html // https://purgecss.com/safelisting.html
safelist: [] safelist: []
}); });
module.exports = { module.exports = {
plugins: [ plugins: [
process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null, process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null,
autoprefixer, autoprefixer,
] ]
}; };
``` ```
> [!note] > [!note]
> If you are a Windows user, and the path to your project contains a space, you must place the PostCSS configuration within the package.json file. See [this example] and issue [#7333]. > If you are a Windows user, and the path to your project contains a space, you must place the PostCSS configuration within the package.json file. See [this example] and issue [#7333].
Step 5 Step 5
: Place your CSS file within the `assets/css` directory. : Place your CSS file within the `assets/css` directory.
@ -79,17 +79,17 @@ Step 5
Step 6 Step 6
: If the current environment is not `development`, process the resource with PostCSS: : If the current environment is not `development`, process the resource with PostCSS:
```go-html-template ```go-html-template {copy=true}
{{ with resources.Get "css/main.css" }} {{ with resources.Get "css/main.css" }}
{{ if hugo.IsDevelopment }} {{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ else }} {{ else }}
{{ with . | postCSS | minify | fingerprint | resources.PostProcess }} {{ with . | postCSS | minify | fingerprint | resources.PostProcess }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} ```
```
## Environment variables ## Environment variables
@ -124,7 +124,7 @@ let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.con
## Limitations ## Limitations
Do not use `resources.PostProcess` when running Hugo's built-in development server. The examples above specifically prevent this by verifying that the current environment is not "development". Do not use `resources.PostProcess` when running Hugo's built-in development server. The examples above specifically prevent this by verifying that the current environment is not `development`.
The `resources.PostProcess` function only works within templates that produce HTML files. The `resources.PostProcess` function only works within templates that produce HTML files.