hugo

Fork of github.com/gohugoio/hugo with reverse pagination support

git clone git://git.shimmy1996.com/hugo.git

postcss.md (3077B)

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