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.

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

Append styles imported in JS to end of document.head #1045

Merged
merged 1 commit into from
Dec 12, 2021

Conversation

simonihmig
Copy link
Collaborator

This addresses the issue raised in #1033 ("2. Import app.scss from app.js") that link tags added through imports of CSS in JS get added next to the script entrypoint (at the body's end) rather than to the document's head, causing a FOUC in FastBoot rendered pages.

This was tested locally with my test app (https://github.com/simonihmig/embroider-sass-app/tree/import-app), so I am quite confident it does the right thing. Idk if we need automated tests for this, I haven't found any related test coverage, but maybe I missed something with the (new) test setup? We could add unit tests for the Placeholder class, but that seems to yield relatively little value given the rather trivial implementation. Better maybe would be some webpack-related e2e-like tests. To ensure the output in the generated index.html, especially the order of styles and scripts, one would probably need (jest) tests that parse the build output, rather than regular ember app tests?

This addresses the issue raised in embroider-build#1033 ("2. Import app.scss from app.js") that link tags added through imports of CSS in JS get added next to the script entrypoint (at the body's end) rather than to the document's head, causing a FOUC in FastBoot rendered pages.
@simonihmig simonihmig added the bug Something isn't working label Dec 10, 2021
this.appendToHead(newTag);
} else {
// Keep the new style in the same place as the original one
this.insert(newTag);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should ensure that styles already present in index.html will be kept where they are, to keep the existing order. Especially when dealing with external styles, that are not funneled through this. (e.g. vendor.css, then external google-font-css, then app.css). All other dynamically added styles will be appended to <head>, in whatever order webpack gives us.

This is all we can do here about ensuring the "right" order, is it?

@simonihmig
Copy link
Collaborator Author

The one failing CI job is unrelated (some network error w/ yarn)

@ef4 ef4 merged commit bbc26b3 into embroider-build:master Dec 12, 2021
@ef4
Copy link
Contributor

ef4 commented Dec 12, 2021

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants