TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-15 07:20:15 -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

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

@ -27,28 +27,28 @@ Step 1
Step 2
: Install the required Node.js packages in the root of your project:
```sh
npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
```
```sh {copy=true}
npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
```
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`].
{{< code-toggle file=hugo >}}
[build.buildStats]
enable = true
{{< /code-toggle >}}
{{< code-toggle file=hugo copy=true >}}
[build.buildStats]
enable = true
{{< /code-toggle >}}
See the [configure build] documentation for details and options.
See the [configure build] documentation for details and options.
Step 4
: Create a PostCSS configuration file in the root of your project.
```js {file="postcss.config.js" copy=true}
const autoprefixer = require('autoprefixer');
const purgeCSSPlugin = require('@fullhuman/postcss-purgecss').default;
```js {file="postcss.config.js" copy=true}
const autoprefixer = require('autoprefixer');
const purgeCSSPlugin = require('@fullhuman/postcss-purgecss').default;
const purgecss = purgeCSSPlugin({
const purgecss = purgeCSSPlugin({
content: ['./hugo_stats.json'],
defaultExtractor: content => {
const els = JSON.parse(content).htmlElements;
@ -60,18 +60,18 @@ const purgecss = purgeCSSPlugin({
},
// https://purgecss.com/safelisting.html
safelist: []
});
});
module.exports = {
module.exports = {
plugins: [
process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null,
autoprefixer,
]
};
```
};
```
> [!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].
> [!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].
Step 5
: Place your CSS file within the `assets/css` directory.
@ -79,8 +79,8 @@ Step 5
Step 6
: If the current environment is not `development`, process the resource with PostCSS:
```go-html-template
{{ with resources.Get "css/main.css" }}
```go-html-template {copy=true}
{{ with resources.Get "css/main.css" }}
{{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ else }}
@ -88,8 +88,8 @@ Step 6
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ end }}
{{ end }}
```
{{ end }}
```
## Environment variables
@ -124,7 +124,7 @@ let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.con
## 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.