How to List PostCSS plugins to use

support
1

I have a question about how to write something that’s written in the docs, or more generally about how to use a dict. For PostCSS it says it will accept a list of plugins to use, but how is that written? In other words, dict can do Key:Value but how do you write “key:value1, value2”

My attempts have all failed. I think I don’t understand the syntax.

(I know this can be done with a js file, but please bear with me as I learn about keys and values here.)

1 Like
2

This:

{{ $plugins := slice "autoprefixer" "postcss-preset-env" }}
{{ $options := dict "noMap" false "use" $plugins }}

Produces this data structure:

map[noMap:false use:[autoprefixer postcss-preset-env]]

Jsonifed it looks like this:

{ "noMap": false, "use": [ "autoprefixer", "postcss-preset-env" ] }

For PostCSS I’d stick with a configuration file.

2 Likes
3

Thank you so much for taking a moment to answer my question. I do plan to stick to a config file, but this brought the question to mind and I wanted to take it as a learning opportunity. And now, thanks again, I know! :slight_smile:

4

Hello friends! I’m having the same issue.

This (calling PostCSS twice) works as expected:

{{ $style := resources.Get "scss/main.scss" | toCSS (dict "transpiler" "dartsass" "targetPath" "dist/css/main.css") | postCSS (dict "use" "postcss-100vh-fix") | postCSS (dict "use" "autoprefixer") | minify | fingerprint "md5" }}

This (which would be ideal):

{{ $style := resources.Get "scss/main.scss" | toCSS (dict "transpiler" "dartsass" "targetPath" "dist/css/main.css") | postCSS (dict "use" (slice "postcss-100vh-fix" "autoprefixer")) | minify | fingerprint "md5" }}

…and this (as noted previously in this thread):

{{ $postCSS_plugins := slice "postcss-100vh-fix" "autoprefixer" }}
{{ $postCSS_options := dict "use" $postCSS_plugins }}
{{ $style := resources.Get "scss/main.scss" | toCSS (dict "transpiler" "dartsass" "targetPath" "dist/css/main.css") | postCSS $postCSS_options | minify | fingerprint "md5" }}

…both produce this error:

  • ‘Use’ expected type ‘string’, got unconvertible type ‘string’, value: ‘[postcss-100vh-fix autoprefixer]’

The docs seem to indicate (“List of PostCSS plugins to use”) that there’s a more elegant way of specifying multiple PostCSS plugins than just calling the function repeatedly, as I’m doing now. Is this in fact the case?

(Yes, I know we can add a whole new config file full of beautiful JS boilerplate, but it seems an awfully bloaty way of duplicating matter that, according to the docs, can just be expressed in a one-liner.)

5

@gridfire

Would this be acceptable?

{{ ... | postCSS (dict "use" "postcss-100vh-fix autoprefixer") }}

If yes, it’s a relatively simple code change.

6

Sure, that would be great!

7

This has been merged and will be available in the next release.

1 Like
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.