postcss.config.js plugins causing exception

[BasilPP]

Describe the bug
When using this plugin, it throws an exception when a postcss.config.js file with plugins is present.
Error Message:
[typescript-plugin-css-modules] Stack trace: Error: Use process(css).then(cb) to work with async plugins

To Reproduce
Include a postcss.config.js file with any of these plugins:
• postcss-import
• postcss- url
• postcss-preset-env
• cssnano

Expected behavior
Exception to not be thrown.

Desktop (please complete the following information):
OS - windows

Additional context
I’ve traced the error to a line in DtsSnapshotCreator.ts:
const processedCss = processor.process(transformedCss);

Now, in my scenario, processor.process(transformedCss) is returning a Promise and a simple solution I found was to await the promise returned by processor.process(transformedCss).

But I'm not sure if the reason a Promise is being returned in my case is that:

• there is something wrong in my setup?
• one of the plugins I'm using is forcing processor.process(transformedCss) to behave in an async fashion?
  I noticed that there is code in the index.ts file to filter out the postcss-mixins plugin as it might be async.
  Do more plugins need to be excluded in this way?

[mrmckeb]

Basically, the issue here is that TypeScript doesn't support anything async as a part of this process. So the moment an async plugin is loaded, we can't complete the transform.

The problem then, which I'm sure you've guessed, is that some people may find that their CSS is no longer processable - because those plugins are needed for it to work.

If those plugins happen to have sync methods, and some may, we could use this to help us process the files... but I'm not 100% sure.

In your case, I assume that these plugins are required?

[BasilPP]

Thanks for the reply @mrmckeb
In my particular case I don't think any of the postcss stuff needs to be processed by the plugin at all.
(My postcss is just used to to run things like postcss-url which I believe won't affect any of the css classes themselves.)

At the risk of polluting the tsconfig options, is this something that could be worth having an option for?

[mrmckeb]

Yes, definitely. Do you think the option would just be to ignore your local config? Or to pass in a custom config here?

Or perhaps the solution we were discussing in #47 is the best fix?

[BasilPP]

A config definitely sounds better than just a plain ignore flag, how do you see a custom config working/looking like?

Or perhaps the solution we were discussing in #47 is the best fix?

Yeah, I think your custom function idea for rendering is starting to sound like it will solve both cases the best!
With that in mind, do you think its still worth me finishing that PR, or would you rather have a look at solving it by using the render function, and not have the config settings changed unnecessarily?
(I happy to use a forked version with some path tweaks in the interim)

[mrmckeb]

So we could:

a) Allow someone to pass a config in, by name:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "postCssConfig": "./path/my.other.config.js",
        }
      }
    ]
  }
}

b) Pass a custom processor, that would handle any matched files.

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "customProcessor": "./path/my.renderer.js",
        }
      }
    ]
  }
}

The second is great to have, especially for advanced/edge cases.

I imagine it would be something like:

module.exports = (...args) => {
  // Process with args
  // Return CSS
};

I or @lianapache could do that over the weekend if the second option sounds better for you?

[BasilPP]

The second option is absolutely perfect! (and it solves #47 very nicely too)

Thank you so much to you both for spending so much time looking into this, its very much appreciated!

[mrmckeb]

No problem!

[mrmckeb]

Hi @BasilPP, we've just released v2.0.0 which enables custom renderers and passing through options to renderers.

Release notes and migration steps can be found here: https://github.com/mrmckeb/typescript-plugin-css-modules/releases/tag/v2.0.0

Please let me know if you have any other issues or feedback! And thanks for your patience.