Adds Stencil Example

[jagreehal]

[lloydjatkinson]

Are there any blockers? Would love to see this!

[davidroman0O]

@jagreehal Can it be merged? 😄

[jagreehal]

@lloydjatkinson @davidroman0O I can't merge it but have asked @adamwathan https://twitter.com/JagReehal/status/1259877008143720448

[Natetronn]

This looks interesting.

[joshlit]

Does anyone else have issues with rebuild times using this? Changing a single line in a component causes stenciljs rebuild time of 15s-20s. It's just a fresh stenciljs project with this added.

[jagreehal]

I don't have this issue. Maybe you could try the example in this repo?

On Thu, Jun 18, 2020 at 2:24 PM Josh Latimer [email protected] wrote:

Does anyone else have issues with rebuild times using this? Changing a single line in a component causes stenciljs rebuild time of 15s-20s. It's just a fresh stenciljs project with this added.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tailwindcss/setup-examples/pull/61#issuecomment-646014488, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA3XNWTPWAZATTYS43EKPSLRXIIPLANCNFSM4MH4GUTQ .

[joshlit]

At first I just copied the config code + setup into my project & that's where I had the issue. I just tried the example and it works perfectly though.

The only difference with my project is I'm also using Ionic components... so I'm guessing this might be why for some reason, but I can't figure out why that is.. every time I change a component & save I get this in the console with my Ionic&Stencil project

[17:15.9] rebuild, app, dev mode, started ... [17:15.9] transpile started ... [17:16.0] transpile finished in 115 ms [17:16.0] generate lazy started ... [17:28.9] generate lazy finished in 12.94 s [17:28.9] updated component: app-home [17:28.9] updated styles: ion-action-sheet, ion-alert, ion-app, ion-avatar, ion-back-button, ion-button, +37 others [17:28.9] rebuild finished, watching for changes... in 13.09 s

which I'm not sure is normal as I only started using StencilJS yesterday. I'm assuming it shouldn't be updating the styles for all of those Ionic components

In a project with no Tailwindcss it only takes a few 100ms to rebuild

[anthonylebrun]

@joshlatimer You could try removing tailwind and purge but leaving postcss/autoprefixer and see if things are still slow to rule out tailwind itself. I suspect postcss having to process all the ionic components might be what's slowing things down (in which case you could try configuring postcss to ignore those).

[niklaas]

I had to

npm install --save-dev ... autoprefixer@9

for this to work because of https://github.com/postcss/autoprefixer/issues/1358#issuecomment-692953393. With autoprefixer@10 I got the following error:

[ ERROR ]  [object Object] is not a PostCSS plugin at Processor.normalize
           (/Users/ngersdorff/Tresors/personal/git/bakery/node_modules/postcss/lib/processor.js:168:15) at new
           Processor (/Users/ngersdorff/Tresors/personal/git/bakery/node_modules/postcss/lib/processor.js:52:25) at
           postcss (/Users/ngersdorff/Tresors/personal/git/bakery/node_modules/postcss/lib/postcss.js:55:10) at
           /Users/ngersdorff/Tresors/personal/git/bakery/node_modules/@stencil/postcss/dist/index.cjs.js:162:17 at
           new Promise (<anonymous>) at Object.transform
           (/Users/ngersdorff/Tresors/personal/git/bakery/node_modules/@stencil/postcss/dist/index.cjs.js:161:20) at
           runPluginTransforms
           (/Users/ngersdorff/Tresors/personal/git/bakery/node_modules/@stencil/core/compiler/stencil.js:33704:32) at
           async buildGlobalStyles
           (/Users/ngersdorff/Tresors/personal/git/bakery/node_modules/@stencil/core/compiler/stencil.js:33848:30) at
           async generateGlobalStyles
           (/Users/ngersdorff/Tresors/personal/git/bakery/node_modules/@stencil/core/compiler/stencil.js:33832:24)

[niklaas]

Further I had to use the following configuration for purgecss:

const purge = purgecss({
  content: ['./src/**/*.tsx', './src/index.html'],
  safelist: [':host'], // <-- !
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});

If :host is not added to safelist styles will get lost.