Incorrect context provided for bundler plugin transforms

[DesignByOnyx]

Stencil version:

 @stencil/core@1.0.2

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
According to the Stencil docs the stencil bundler uses rollup under the hood and we should be able to provide our own rollup plugins. However, the "transform" hook is not called with the proper rollup plugin context. This is not only breaking the ability for me to create my own plugin, but it also breaks community plugins which reference this.xxxx inside the transform method.

Expected behavior:
I would expect that my rollup plugin transform hook be called with the correct rollup plugin context. See the rollup plugin context docs.

Steps to reproduce:
You can use the existing @stencil/postcss plugin and try calling this.addWatchFile() from inside the transform function.

Other information:
I am willing and eager to fix this if you can provide some insight. I have been digging through the compiler code for hours and cannot figure out the abstraction you have created around rollup. The existing buildCtx and compilerCtx do not contain the rollup plugin context, and I cannot figure out how to inject it.

UPDATE: the primary issue I am running into is the fact that @import'd files are not being watched (using either @stencil/postcss or @stencil/sass). This could be easily fixed if we could call this.addWatchFile from inside the transform function.

Update 2022.04.04

The following information is from #3303:

Steps to Reproduce

See the linked fork: https://github.com/ionic-team/stencil-sass/compare/master...DesignByOnyx:rwheale/1707-rollup-context-bug?expand=1

To get you there quicker:

git clone https://github.com/DesignByOnyx/stencil-sass.git
cd stencil-sass
npm i
npm run build
npm test

Code Reproduction URL

https://github.com/ionic-team/stencil-sass/compare/master...DesignByOnyx:rwheale/1707-rollup-context-bug?expand=1

[manucorporat]

@stencil/postcss is not a rollup plugin, and it's not intended to be one.

[DesignByOnyx]

• @stencil/postcss is listed on the Related Plugins section of the docs which describe building custom rollup plugins: https://stenciljs.com/docs/plugins
• It also implements a transform function which accepts the code and id arguments and returns an object with the code property - so it quacks rather loudly like a rollup plugin.
• Most importantly, the @stencil/postcss plugin is configured the same way you would any other rollup plugin in the plugins section of the stencil config: https://stenciljs.com/docs/module-bundling

This issue isn't about @stencil/postcss, but rather building a custom rollup plugin and having the transform hook called with the proper plugin context. I was using an existing plugin as an example so you don't have to write one from scratch. The same would apply if you wrote your own rollup plugin from scratch or used a community-maintained rollup plugin and expect this to be what it should.

[jgroth]

Any updates on this? I'm trying to write a Rollup plugin and am not able to call this.addWatchFile since it always seem to be undefined.

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

I'm going to label this and sort it so we can better understand how to improve Rollup for folks. If you have had better luck since you originally posted, could you share your progress with me here? Even adding a reproduction case would be awesome.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[rwaskiewicz]

Hey ionitron-bot, we didn't mean to close this. Bad bot!