Stencil: Add compiler plugin architecture

[adamdbradley]

Currently Node Sass is a hard dependency of Stencil. Now that the compiler is further along, we'd like to come up with a good plugin architecture similar to rollup and webpack, and pull more parts out of the core compiler and turn them into plugins.

Related: https://github.com/ionic-team/stencil/pull/275

[marinho]

I'm not sure if I should open a new ticket or my point is included in this one, so, let me describe it.

Ideally, Stencil's bundling mechanism should support customisable pre/post processing, so we can for instance concatenate other JS files together in the same bundle and prevent user to include multiple <script> references in their app.

[jthoms1]

I think making a point here is enough. This thread is open to get outside input on what issues/concerns we should account for.

[jgw96]

Linking this issue here https://github.com/ionic-team/stencil/issues/335 as it is related.

[adamdbradley]

https://github.com/ionic-team/stencil/commit/55827cc98af716a777bdcd7e43eaccdc5c53f688

[giotramu]

Is it possible now to use postcss plugins?

[bfmatei]

@giotramu Have a look here: https://github.com/bfmatei/stencil-boilerplate/blob/master/plugins/postcss.js

[equinusocio]

@bfmatei Hi, there is a documenation about how integrate/use postcss?

[bfmatei]

@equinusocio

1. Get the plugin from my repo (linked above)
2. Integrate it in your stencil.config.js file (same as in my repo)
3. Rename your style files from "css" or "sass" to "pcss" (ex: app-main.css -> app-main.pcss)
4. Profit

PS: Additionally to the plugins array, you can also pass enableCache: true in order to activate the cache and skip unnecessary recompiles.
PS2: I will add an additional key named "options" which will be passed directly to the PostCSS compiler as its internal props.