Scoped styles are not working in production builds with the esmodules branch

[jgw96]

Stencil version:

 @stencil/core@<version>

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Using scoped: true in a components works fine in dev builds (the scoped styles get applied correctly) but in production builds the scoped styles are not being applied. It also seems like the data- attributes we use to scope styles are not being applied to elements in production builds.

Expected behavior:

• data- attributes would be applied to scoped components in production builds
• scoped styles would apply in production buidls

Steps to reproduce:

• clone this repo https://github.com/jgw96/ionic-video-chat
• npm link esmodules branch
• Do a dev build and notice how scoped styles are being applied
• Do a production build and notice how scoped styles are not being applied

Related code:

// insert any relevant code here

Other information:

[adamdbradley]

Note: ensure components with different encapsulation are not bundled together. This can be done internally and should be apart of the component graph process: https://github.com/ionic-team/stencil/issues/436

[ghaiat]

hello guys, any update on this one ?

[adamdbradley]

I'm not able to replicate this issue with the latest changes. @jgw96 would you be able to double check this one is good? Thanks

[edoparearyee]

@jgw96 @adamdbradley I'm currently having this issue where scoped styles are not being scoped for production builds. I have pushed an example here based on the stencil starter app: https://github.com/edoparearyee/stencil-scoped-styles-example

You'll see that even though the <app-profile> component has no styles. Styles from <app-home> are being applied to the <app-profile> component.