Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose rollup config for custom plugins #472

Closed
mlynch opened this issue Feb 2, 2018 · 10 comments
Closed

Expose rollup config for custom plugins #472

mlynch opened this issue Feb 2, 2018 · 10 comments
Assignees

Comments

@mlynch
Copy link
Contributor

mlynch commented Feb 2, 2018

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
Copy link
Contributor

bfmatei commented Feb 2, 2018

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
Copy link
Contributor

Would be great have some doc's on that 👍

@bfmatei
Copy link
Contributor

bfmatei commented Feb 4, 2018

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
Copy link
Contributor Author

mlynch commented Feb 4, 2018

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

@mlynch
Copy link
Contributor Author

mlynch commented Feb 4, 2018

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

@bfmatei
Copy link
Contributor

bfmatei commented Feb 5, 2018

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
Copy link
Contributor Author

mlynch commented Feb 5, 2018

@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
Copy link
Contributor

bfmatei commented Feb 5, 2018

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 :).

@adamdbradley adamdbradley added this to the 0.5.0 milestone Feb 6, 2018
@adamdbradley adamdbradley self-assigned this Feb 8, 2018
@nirlanka
Copy link

nirlanka commented Oct 8, 2019

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

@kensodemann
Copy link
Member

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants