Stencil Not Considering All Available Modes/StyleUrls

[danbucholtz]

Stencil version:

 @stencil/[email protected]

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:

Expected behavior:
I think it should just work TM

Steps to reproduce:

This repo contains a very simple reproduction case for a bug when using Ionic in conjunction with your own design system utilizing Stencil. It is dead simple to recreate, and uses the component starter and pwa toolkit projects from using npm create stencil.

https://github.com/danbucholtz/stencil-ionic-design-system-mode-bug

1. Navigate to the my-design-system directory
2. Run npm install and run npm run build. Then run npm link.
3. Navigate to the ionic-pwa-toolkit-app directory and run npm install. Then run npm link my-design-system.
4. Run npm run build and serve up the www with httpster or something
5. Open browser and navigate to the app on localhost:3333 or whatever port
6. Observe the app works 🎉

Now for the bug:

1. In the my-design-system project, in the my-component render function change the ion-button tag to an ion-app tag.
2. Run npm run build in the my-design-system project
3. Navigate to ionic-pwa-toolkit-app directory and run npm run build
4. Serve up the www with httpster or something
5. Open browser and navigate to the app on localhost:3333 or whatever port
6. Observe the app is broken and see the errors in the console

Notes:
This bug only happens in prod mode and I believe it's related to using multiple styleUrls and defining my own modes.

If you debug in the stencil code, in the loadModule function there is ultimately a list of modes available. In the first case with ion-button, there are my two modes available (msb, bch) and the two ionic modes (md, ios). When using ion-app, there are only my two modes available, no references to md or ios.

In the Ionic source code, I noticed that ion-button uses styleUrls for md and ios. ion-app does not use different styleUrls for each mode.

[rwaskiewicz]

This is still a bug present in v3 😞 Ingesting this into the backlog

[danbucholtz]

This would be a really great bug to fix to better support design systems and rendering totally different styles like Ionic does. Basically someone could implement n themes in a scoped, maintainable way if this feature worked as intended.

[rwaskiewicz]

👋

This issue has been resolved in Stencil v4.8.2 by #5131. As a result, I'm going to close this out. Should this reappear, please feel free to open a new issue. Thanks!