diff --git a/content/en/functions/resources/PostProcess.md b/content/en/functions/resources/PostProcess.md index 00720e3f9..766817ff5 100644 --- a/content/en/functions/resources/PostProcess.md +++ b/content/en/functions/resources/PostProcess.md @@ -27,51 +27,51 @@ 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({ - content: ['./hugo_stats.json'], - defaultExtractor: content => { - const els = JSON.parse(content).htmlElements; - return [ - ...(els.tags || []), - ...(els.classes || []), - ...(els.ids || []), - ]; - }, - // https://purgecss.com/safelisting.html - safelist: [] -}); + const purgecss = purgeCSSPlugin({ + content: ['./hugo_stats.json'], + defaultExtractor: content => { + const els = JSON.parse(content).htmlElements; + return [ + ...(els.tags || []), + ...(els.classes || []), + ...(els.ids || []), + ]; + }, + // https://purgecss.com/safelisting.html + safelist: [] + }); -module.exports = { - plugins: [ - process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null, - autoprefixer, - ] -}; -``` + 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,17 +79,17 @@ 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" }} - {{ if hugo.IsDevelopment }} - - {{ else }} - {{ with . | postCSS | minify | fingerprint | resources.PostProcess }} - + ```go-html-template {copy=true} + {{ with resources.Get "css/main.css" }} + {{ if hugo.IsDevelopment }} + + {{ else }} + {{ with . | postCSS | minify | fingerprint | resources.PostProcess }} + + {{ 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.