bug: `extTransformsPlugin` is outputting collections css files

[George-Payne]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

v2.14.2 😃

Current Behavior

When building a dist output with a collection dependency, the dependencies css files will be outputted as part of the collection output, however, they appear further up the file tree due to their relative file paths. These css files aren't needed needed for the collection.

Expected Behavior

The css files aren't outputted.

Steps to Reproduce

Clone https://github.com/George-Payne/extTransformsPlugin-bug-reproduction

yarn is being used for workspaces, npm wont work

1. yarn
2. yarn build

Observe:

collectionconsumer
├── dist
│   ├── cjs
│   ├── collection
│   ├── collectionconsumer
│   ├── esm
│   ├── index.cjs.js
│   ├── index.js
│   ├── loader
│   └── types
├── externalcollection    <------------- This folder should not be outputted
│   └── dist
│       └── collection
│           └── components
│               └── ext-component
│                   └── ext-component.css
├── node_modules
├── package.json
├── src
├── stencil.config.ts
└── tsconfig.json

Code Reproduction URL

https://github.com/George-Payne/extTransformsPlugin-bug-reproduction

Additional Information

No response

[duncanhunter]

Any updates on this we are facing the same issue?

[DennisJamin]

Have you found any way to solve this locally? I'm facing the same issue.

[George-Payne]

Have you found any way to solve this locally?

If you're using yarn 3+, you can apply the patch (#3306) directly to your the dependency:

https://yarnpkg.com/features/protocols/#patch

Run the patch command:

 yarn patch @stencil/core
➤ YN0000: Package @stencil/core@npm:2.17.4 got extracted with success!
➤ YN0000: You can now edit the following folder: /tmp/xfs-dde1e6ea/user
➤ YN0000: Once you are done run yarn patch-commit /tmp/xfs-dde1e6ea/user and Yarn will store a patchfile based on your changes.
➤ YN0000: Done in 0s 166ms

Open up the generated folder:

code /tmp/xfs-dde1e6ea/user

Modify compiler/stencil.js

-          const moduleFile = cmp && compilerCtx.moduleMap.get(cmp.sourceFilePath);
+          const moduleFile = cmp && !cmp.isCollectionDependency && compilerCtx.moduleMap.get(cmp.sourceFilePath);

Save the file, then apply the patch:

yarn patch-commit /tmp/xfs-dde1e6ea/user --save

I was originally doing this, but you need to do it every time you update stencil, and I decided it wasn't worth it, and to just add the folder to .gitignore and live with it.

[DennisJamin]

Thanks for your thorough writeup!

I'm using NPM and am considering the patch-package approach, but I indeed foresee the issues with updating Stencil. I'm surprised this isn't a more widespread issue.