blob: fddc7e9cf10ea3af225e1b2286f09bb1b9768b38 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
title: PostCSS
description: Hugo Pipes can process CSS files with PostCSS.
date: 2018-07-14
publishdate: 2018-07-14
lastmod: 2018-07-14
categories: [asset management]
keywords: []
menu:
docs:
parent: "pipes"
weight: 40
weight: 40
sections_weight: 40
draft: false
---
Any asset file can be processed using `resources.PostCSS` which takes for argument the resource object and a slice of options listed below.
The resource will be processed using the project's or theme's own `postcss.config.js` or any file set with the `config` option.
```go-html-template
{{ $css := resources.Get "css/main.css" }}
{{ $style := $css | resources.PostCSS }}
```
{{% note %}}
Hugo Pipe's PostCSS requires the `postcss-cli` JavaScript package to be installed in the environment (`npm install -g postcss postcss-cli`) along with any PostCSS plugin(s) used (e.g., `npm install -g autoprefixer`).
If you are using the Hugo Snap package, PostCSS and plugin(s) need to be installed locally within your Hugo site directory, e.g., `npm install postcss-cli` without the `-g` flag.
{{% /note %}}
### Options
config [string]
: Path to the PostCSS configuration file
noMap [bool]
: Default is `false`. Disable the default inline sourcemaps
inlineImports [bool] {{< new-in "0.66.0" >}}
: Default is `false`. Enable inlining of @import statements. It does so recursively, but will only import a file once.
URL imports (e.g. `@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');`) and imports with media queries will be ignored.
Note that this import routine does not care about the CSS spec, so you can have @import anywhere in the file.
Hugo will look for imports relative to the module mount and will respect theme overrides.
_If no configuration file is used:_
use [string]
: Space-delimited list of PostCSS plugins to use
parser [string]
: Custom PostCSS parser
stringifier [string]
: Custom PostCSS stringifier
syntax [string]
: Custom postcss syntax
```go-html-template
{{ $options := dict "config" "customPostCSS.js" "noMap" true }}
{{ $style := resources.Get "css/main.css" | resources.PostCSS $options }}
{{ $options := dict "use" "autoprefixer postcss-color-alpha" }}
{{ $style := resources.Get "css/main.css" | resources.PostCSS $options }}
```
## Check Hugo Environment from postcss.config.js
{{< new-in "0.66.0" >}}
The current Hugo environment name (set by `--environment` or in config or OS environment) is available in the Node context, which allows constructs like this:
```js
module.exports = {
plugins: [
require('autoprefixer'),
...process.env.HUGO_ENVIRONMENT === 'production'
? [purgecss]
: []
]
}
```
|
