hugo/content/en/hugo-pipes/postcss.md
Bjørn Erik Pedersen aa5ac36a3e Squashed 'docs/' changes from 327003421..39a7fac34
39a7fac34 Add .hugo_build.lock to .gitignore
920c716a4 fix a typo: to -> two (#1545)
6f0ba9593 Remove godocref from front matter (#1543)
8ec3d5948 remove link to wercker (#1544)
b56008719 Delete deployment-with-wercker.md (#1542)
e33d29b02 Fix broken links (#1538)
29e9d4c21 Sort commenting systems (#1541)
0b7ea60a7 Delete the news page "HTTP/2 Server Push in Hugo"
6e1515857 Fix quick-start.md (#1525)
62168ab35 Update comments.md (#1535)
d92191512 Small typo (#1539)
129c8834a Correct the PostCSS noMap default value (#1534)
6a5b29fcc Add example to index function (#1536)
e3dd8c507 Update output-formats.md
0c9321ca0 Remove reference to using LiveReload in production environment
4072d6776 Mod testing
09fabf7d6 Fix typo (#1524)
2fce813c8 Fix grammatical error in quick-start.md (#1523)
45230ab4a Hugo Mod testing
2dd4cd9e7 Update index.md
2c3ed62fd netlify: Bump to 0.88.1
648e2a007 Merge branch 'tempv0.88.1'
f216eade1 releaser: Add release notes to /docs for release of 0.88.1
8a7b64d4b Fix typographical errors in 0.88.0 release notes
a4bf86300 Release 0.88
738bb8f38 releaser: Add release notes to /docs for release of 0.88.0
8fcf2c55d highlight: Remove some pygments references
f2b173de2 HTTPS link
c88881c8e Adding link to nginx documentation
6b0a74fe0 Fix typos in docs (#1516)
498b8f0f1 Fix typos in time.Format (#1515)
28723fad6 Fix taxonomy and term examples (#1514)
3ffd00e12 Update front-matter.md
7cc1da82e Fix grammar in 0.86.1 release notes (#1510)
0009c51c3 Update docs helper
7e2f430f4 Update index.md
7857eae7e releaser: Add release notes to /docs for release of 0.87.0
1f08b684b releaser: Add release notes to /docs for release of 0.87.0
36a9e701c docs: Adjust config docs
0f588438e docs: Regen CLI docs
1b4682cd8 docs: Regen docs helper
bc8bbaae9 Merge commit 'bd77f6e1c99e04a476f0b1bb4e44569134e02399' into release-0.87.0
6f2480643 docs: Adjust time zone docs

git-subtree-dir: docs
git-subtree-split: 39a7fac343c289906db644c96079fdcc0298582f
2021-10-31 13:51:51 +01:00

81 lines
2.4 KiB
Markdown
Executable file

---
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]
: List of PostCSS plugins to use
parser [string]
: Custom PostCSS parser
stringifier [string]
: Custom PostCSS stringifier
syntax [string]
: Custom postcss syntax
```go-html-template
{{ $style := resources.Get "css/main.css" | resources.PostCSS (dict "config" "customPostCSS.js" "noMap" true) }}
```
## 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]
: []
]
}
```