Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: make position of <style> tags configurable in hydrateDocument() #5915

Closed
3 tasks done
mhoritani opened this issue Jul 30, 2024 · 4 comments · Fixed by #5926 · May be fixed by AnirudhJalagam/ionic-frameworkss#2
Closed
3 tasks done

feat: make position of <style> tags configurable in hydrateDocument() #5915

mhoritani opened this issue Jul 30, 2024 · 4 comments · Fixed by #5926 · May be fixed by AnirudhJalagam/ionic-frameworkss#2
Assignees
@christian-bromann
Labels
Help Wanted Resolution: Refine This PR is marked for Jira refinement. We're not working on it - we're talking it through.

Comments

@mhoritani
Copy link

mhoritani commented Jul 30, 2024 •
edited
Loading

Prerequisites

Describe the Feature Request

It would be helpful if hydrateDocument() could be configured as to where generated inline <style> tags will be placed.

Describe the Use Case

When the document is hydrated, the inline <style> tags created for the Stencil components are placed at the top of the <head> section. This placement can delay the loading of <link> tags, such as those with a rel="preconnect" value, which are crucial for performance optimization. Ideally, the placement of these styles should be configurable to avoid such issues.

Sample input:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="preconnect" href="https://some-url.com" />
    </head>
    <body>
        <my-component></my-component>
    </body>
</html>

Output:

<!doctype html>
<html lang="en" data-stencil-build="vuogzrh7" class="hydrated">
    <head>
        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style sty-id="sc-my-component">
            /*!@:host*/
            .sc-my-component-h {
                display: inline-block;
                border: 1px solid red;
                padding: 5px;
            }
        </style>
        <link rel="preconnect" href="https://some-url.com" />
    </head>
    <body>
        <my-component class="sc-my-component-h hydrated" s-id="1"
            ><!--r.1-->
            <div class="sc-my-component" c-id="1.0.0.0">
                <!--t.1.1.1.0-->My Component
            </div></my-component
        >
    </body>
</html>

Describe Preferred Solution

Make hydrateDocument() configurable as to where generated style tags are placed.

Describe Alternatives

No response

Related Code

A well-documented reproduction of the use-case/issue can be found here:
https://github.com/mhoritani/stencil-repro-072024

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Jul 30, 2024
@mhoritani mhoritani changed the title feat: position of <style> tags should be configurable in hydrateDocument feat: make position of <style> tags configurable in hydrateDocument() Jul 30, 2024
@christian-bromann
Copy link
Member

Thanks for reporting @mhoritani , I think changing the order makes totally sense. Any contributions are much appreciated!

@christian-bromann christian-bromann added Feature: Want this? Upvote it! This PR or Issue may be a great consideration for a future idea. Help Wanted and removed triage labels Jul 30, 2024
@mhoritani
Copy link
Author

Happy to have a look @christian-bromann. Any chance of pointing us in the right direction?

@christian-bromann christian-bromann added Resolution: Refine This PR is marked for Jira refinement. We're not working on it - we're talking it through. and removed Feature: Want this? Upvote it! This PR or Issue may be a great consideration for a future idea. labels Aug 1, 2024
@christian-bromann christian-bromann self-assigned this Aug 1, 2024
@christian-bromann
Copy link
Member

@mhoritani I pulled the issue into the sprint to take a look at.

For future reference, this behavior was introduced in 05d242d unfortunately with no further explanation on the reason.

@christian-bromann christian-bromann mentioned this issue Aug 5, 2024
Merged
2 tasks
@christian-bromann
Copy link
Member

A fix for this bug has been published in Stencil v4.21.0!

@AnirudhJalagam AnirudhJalagam mentioned this issue Oct 4, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@christian-bromann christian-bromann

Labels
Help Wanted Resolution: Refine This PR is marked for Jira refinement. We're not working on it - we're talking it through.
Projects
None yet
Milestone
No milestone
2 participants
@christian-bromann @mhoritani