Pass options to postcss-cli

support
1

I’d like to save my postcss .pcss files as .css files after using the resources.PostCSS pipe so that i can properly link to them with resource.RelPermaLink as a stylesheet <link>. Usually this is done by passing a --ext option to the postcss cli.

Is there a way to have access to the options passed to postcss-cli, or some other way pipe the .pcss resource to a .css file?

In the meanwhile I have simply kept my postcss files as .css and have set my editor to apply postcss syntax highlighting and linting rules to any *.css files it finds.

2

I never heard of .pcss files, so this might be the wrong answer. In my pipe the options are added as dicted in (something like an array) like this:

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
{{ $style := resources.Get "sass/theme.scss" | resources.ToCSS $options | resources.PostCSS (dict "config" "postcss.config.js" "noMap" true) |  resources.Fingerprint "sha512" }}

The first line creates an options object for toCSS, after the second pipe you see how you can add a dictionary inline. Main part of the config is in my postcss.config.js file in the root directory.

3

Yes, thank you @davidsneighbour! The toCSS pipe is what did it. Here’s my final code for inlining some critical postcss.

  {{ $criticalCss := .Resources.GetMatch "critical.pcss" | toCSS }}
  {{ $criticalStyle := $criticalCss | postCSS }}
  <style>{{ $criticalStyle.Content | safeCSS }}</style>

And another example of my non-critical styles being deferred with a Google Developer recommended method.

  {{/*  defer loading of non critical stylesheet  */}}
  {{ $nonCriticalCss := .Resources.GetMatch "non-critical.pcss" | toCSS (dict "targetPath" "non-critical.css") }}
  {{ $nonCriticalStyle := $nonCriticalCss | postCSS }}
  <link 
    rel="preload"
    href="{{ $nonCriticalStyle.RelPermalink }}"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
  >
  {{/*  Fallback incase of javascript being disabled  */}}
  <noscript><link rel="stylesheet" href="{{ $nonCriticalStyle.RelPermalink }}"></noscript>

PS: .pcss or .postcss are postcss file extensions. Because postcss can act on regular .css files without issue, the only reason I know for using a .pcss filetype is so a code editor like VsCode can implement the appropriate syntax highlighting and plugins. It also makes the correct file icon appear in the explorer window. Absolutely necessary! :smile:

Though this worked in the meantime in my VsCode workspace JSON settings.

{
...
"files.associations": {
    "*.css": "postcss"
  }
...
}
2 Likes