tree.walk is not a function when using posthtml-postcss as a plugin

[cossssmin]

Hey :)

Tried using posthtml-postcss with it and it doesn't seem to work, here's what I tried.

This is my PostHTML render function:

import posthtml from 'posthtml'
import components from 'posthtml-component'
import postcss from 'posthtml-postcss'
import tailwindcss from 'tailwindcss'
import postcssImport from 'postcss-import'

async function render(html) {
  return posthtml([
    components({
      root: './',
      folders: ['src/components', 'src/layouts', 'src/templates'],
      fileExtension: 'html',
      expressions: {
        strictMode: false
      },
      plugins: [
        postcss([
          postcssImport(),
          tailwindcss(),
        ],
          {
            from: undefined
          }
        ),
      ]
    }),
  ]).process(html, {
    recognizeNoValueAttribute: true,
    recognizeSelfClosing: true,
  }).then(({html}) => html)

Running this I get this error:

TypeError: tree.walk is not a function
at ...\node_modules\posthtml-postcss\index.js:22:10
at ...\node_modules\posthtml-component\src\index.js:288:12
at Array.reduce (<anonymous>)
at applyPluginsToTree (...\node_modules\posthtml-component\src\index.js:287:18)
at ...\node_modules\posthtml-component\src\index.js:166:14
at ...\node_modules\posthtml-component\src\index.js:139:27
at err (...\node_modules\posthtml\lib\index.js:219:34)
at tryCatch (...\node_modules\posthtml\lib\index.js:300:12)
at next (...\node_modules\posthtml\lib\index.js:219:19)
at ...\node_modules\posthtml\lib\index.js:238:7

I thought to try and set tree.walk in posthtml-postcss to see if that fixes it:

+ const {walk} = require('posthtml/lib/api');

return function (tree) {
+  tree.walk = tree.walk || walk;

// ...
}

However when I do that, posthtml-component no longer works, <x-> tags are not compiled and are output as-is on page.

My current workaround is to run the posthtml-postcss plugin before and after posthtml-component, but it feels hacky and is inefficient to run it twice:

return posthtml([
    // 1st run: for most <style> tags
    postcss([
      postcssImport(),
      tailwindcss(),
    ], {from: undefined}
    ),
    components({
      root: './',
      folders: ['src/components', 'src/layouts', 'src/templates'],
      fileExtension: 'html',
      expressions: {
        strictMode: false
      },
    }),
    // 2nd run: for <push name="head"><style>...</style></push>
    postcss([
      postcssImport(),
      tailwindcss(),
    ], {from: undefined}
    ),
  ]).process(html, {
    recognizeNoValueAttribute: true,
    recognizeSelfClosing: true,
  }).then(({html}) => html)

Thanks for reading this far, I'd appreciate any insights you might have 😊

[cossssmin]

Hmm I'm actually seeing this with other PostHTML plugins, like posthtml-safe-class-names.

@thewebartisan7 can you check this on your end please?

[thewebartisan7]

@cossssmin sorry for late reply, but I was not able to login duo to mandatory 2FA introduced recently by GitHub (just for my own sake??). This annoyance is what nearly caused me to migrate off of GitHub, but alas, I am still here.

Anyway, about your issue.. The issue with posthtml-postcs maybe is because it's an async plugin? I see it return a promise, and as you know this is not yet supported.

About posthtml-safe-class-names, did you try with the same solution you used for postcss plugin? I mean using tree.walk = tree.walk || walk;.

but it feels hacky and is inefficient to run it twice

If may feels hacky, but it's should not be inefficient. The plugin doesn't process twice the same thing, but first process what found before, and then process what found after posthtml-component load everything. If that works, I would keep using it.