Stencil: Expose rollup config for custom plugins

[mlynch]

I'd love to be able to use, say, a rollup replacement plugin for string replace. Can we somehow expose the rollup config to users to add whatever they fancy?

[bfmatei]

You already have this option. Just declare an array named "plugins" in the config file. Each item from the array is a plugin. You can find the interface here: https://github.com/ionic-team/stencil/blob/master/src/declarations/plugin.ts

[romulocintra]

Would be great have some doc's on that 👍

[bfmatei]

There you go. A minimal example of a plugin converting postcss files to css files using cssnext plugin:

{
  name: 'postcss-loader',
  transform(sourceText, importee) {
    if (importee.indexOf('.pcss') !== -1) {
      const promise = new Promise((resolve) => {
        require('postcss')([
          require('postcss-cssnext')()
        ])
          .process(sourceText, {
            from: importee
          })
          .then((data) => {
            resolve(data.css);
          })
      });

      return promise;
    } else {
      return Promise.resolve({
        code: sourceText
      });
    }
  }
}

[mlynch]

Ah, yes 😅I don't believe this exposes Rollup though. It'd be nice to be able to use the existing rollup plugins

[mlynch]

Okay, it seems like the plugins list only transforms sass files at this point

[bfmatei]

Hello @mlynch,

Please have a look here: https://github.com/bfmatei/stencil-boilerplate/tree/develop

Hints:

1. Look in stencil.config.js for the plugins array
2. Look in the plugins folder for the PostCSS plugin definition (I wrote it yesterday)

[mlynch]

@bfmatei yes, I see it. The plugins are only called for Sass files right now. I need to run a transform on tsx files, and I want to use existing rollup plugins.

[bfmatei]

Sorry mate, i missed the part with style files only (hint: it triggers for postcss files for example, not just sass). I just checked with ts and tsx files and you are right :).

[nirlanka]

Hi, why would this be closed without a resolution or a reason for closing?

[kensodemann]

@nirlanka - it was closed via pull request. Click on the link right above your comment. That is a reference automatically created by GitHub when it auto-closes an issue that is linked in a specific way with a pull request.