fix(runtime): render component styles at the end of the head tag #5926
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
| Path | Error Count |
|---|---|
| src/dev-server/index.ts | 37 |
| src/dev-server/server-process.ts | 32 |
| src/compiler/prerender/prerender-main.ts | 22 |
| src/runtime/vdom/vdom-render.ts | 22 |
| src/runtime/client-hydrate.ts | 20 |
| src/runtime/vdom/test/patch.spec.ts | 19 |
| src/runtime/vdom/test/util.spec.ts | 19 |
| src/screenshot/connector-base.ts | 19 |
| src/testing/puppeteer/puppeteer-element.ts | 19 |
| src/dev-server/request-handler.ts | 15 |
| src/compiler/prerender/prerender-optimize.ts | 14 |
| src/compiler/sys/stencil-sys.ts | 14 |
| src/runtime/connected-callback.ts | 14 |
| src/sys/node/node-sys.ts | 14 |
| src/compiler/prerender/prerender-queue.ts | 13 |
| src/compiler/sys/in-memory-fs.ts | 13 |
| src/runtime/set-value.ts | 13 |
| src/compiler/output-targets/output-www.ts | 12 |
| src/compiler/transformers/test/parse-vdom.spec.ts | 12 |
| src/compiler/transformers/transform-utils.ts | 12 |
Our most common errors
| Typescript Error Code | Count |
|---|---|
| TS2322 | 338 |
| TS2345 | 326 |
| TS18048 | 190 |
| TS18047 | 99 |
| TS2722 | 27 |
| TS2532 | 19 |
| TS2531 | 19 |
| TS2790 | 11 |
| TS2454 | 10 |
| TS2352 | 9 |
| TS2769 | 8 |
| TS2416 | 7 |
| TS2538 | 4 |
| TS18046 | 2 |
| TS2684 | 1 |
| TS2430 | 1 |
Unused exports report
There are 15 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!
Unused exports
| File | Line | Identifier |
|---|---|---|
| src/runtime/bootstrap-lazy.ts | 21 | setNonce |
| src/screenshot/screenshot-fs.ts | 18 | readScreenshotData |
| src/testing/testing-utils.ts | 198 | withSilentWarn |
| src/utils/index.ts | 145 | CUSTOM |
| src/utils/index.ts | 245 | NODE_TYPES |
| src/utils/index.ts | 269 | normalize |
| src/utils/index.ts | 7 | escapeRegExpSpecialCharacters |
| src/compiler/app-core/app-data.ts | 25 | BUILD |
| src/compiler/app-core/app-data.ts | 116 | Env |
| src/compiler/app-core/app-data.ts | 118 | NAMESPACE |
| src/compiler/fs-watch/fs-watch-rebuild.ts | 123 | updateCacheFromRebuild |
| src/compiler/types/validate-primary-package-output-target.ts | 82 | satisfies |
| src/compiler/types/validate-primary-package-output-target.ts | 82 | Record |
| src/testing/puppeteer/puppeteer-declarations.ts | 496 | WaitForEventOptions |
| src/compiler/sys/fetch/write-fetch-success.ts | 7 | writeFetchSuccessSync |
tanner-reits
approved these changes
Aug 6, 2024
Merged
2 tasks
2 tasks
github-merge-queue bot
pushed a commit
to ionic-team/ionic-framework
that referenced
this pull request
Aug 20, 2024
## What is the current behavior? The Playwright test for `core/src/components/menu/test/safe-area/menu.e2e.ts` started to fail after introducing the following patch to Stencil: [#5926](ionic-team/stencil#5926). After debugging the situation it turns out that the test overwrites the first style in the `<head />` tag which turns out to be a component style that caused all screenshot test to fail. ## What is the new behavior? Overwrite the existing style by adding a new style tag at the bottom of the page. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information n/a
|
This patch has been published in Stencil |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What is the current behavior?
The
<style />tag for scoped components is added before any link tag. The behavior was implemented in 05d242d without any concrete description as to why. As reported in below linked issue it can cause links withpreconnectattribute to be loaded later hence negatively impacting the performance of an application.GitHub Issue Number: fixes #5915
What is the new behavior?
Attach styles at the end of the
<head />so that the browser can already load assets marked withpreconnectbefore all styles are streamed over the wire.An alternative would be to make this configurable but I don't think there is a viable reason why someone would want to have styles injected first. If someone reports the requirement for this we can add it to the backlog.
Documentation
n/a
Does this introduce a breaking change?
Testing
Add an e2e test for this behavior.
Other information
n/a