Help with ESM plugin

[cossssmin]

Can someone share some insight into what I'm doing wrong here please?

I'm not seeing the console.log inside Declaration (decl) and !important isn't removed from the declaration, in fact no transform works.

Here's what I have:

_removeImportantPlugin.js

const plugin = () => {
  console.log('✅ Seeing this logged!')

  return {
    postcssPlugin: 'postcss-remove-important',
    Declaration (decl) {
      console.log('❌ Not seeing this logged...')
      if (decl.important) {
        decl.important = false
      }
    }
  }
}
plugin.postcss = true

export default plugin

index.js

This is a PostHTML plugin that walks nodes and parses their content with PostCSS. node.content is the content of a <style> tag.

const processStyleTags = (node, tree, options = {}) => {
  return new Promise((resolve, reject) => {
    try {
      const postcssPlugins = options.postcss?.plugins || []

      const { result } = postcss(postcssPlugins).process(node.content.join(' '), {from: undefined})

	  resolve({node})
	} catch (error) {
      reject(error)
    }
  })
}

test.js

Using AVA to test, process is just a custom function just parses a fixture file (postcss-plugins.html in this case) with PostHTML.

import removeImportant from './stubs/_removeImportantPlugin.js'

test('PostCSS plugins', t => {
  return process(t, 'postcss-plugins', {
    postcss: {
      plugins: [
        removeImportant,
      ],
    },
  })
})

[ai]

Plugin looks good. I think the problem is somewhere in index.js

[cossssmin]

Indeed it was, fixed the promise and now it's working fine :)

const processStyleTags = (node, tree, options = {}) => {
  return new Promise((resolve, reject) => {
    postcss(options.postcss?.plugins || [])
      .process(node.content.join(' '), {from: undefined})
      .then(result => {
        node.content = [result.root.toString()]

        resolve({node})
      })
      .catch(error => {
        reject(error)
      })
  })
}