Allow for pre-pending style tags to container element #1473
Conversation
🦋 Changeset is good to goLatest commit: faaeca1 We got this. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codecov Report
|
|
I'm not very familiar with the emotion codebase so this may not be what's actually needed to get the desired results. I also see there may be a different way of inserting rules in production, which this fix woulnd't address. Would very much appreciate some feedback/guidance on how to approach this. |
jcharry
force-pushed
the
jcharry/insert-position
branch
from
36b5f05
to
1fe49ea
Compare
|
I suppose that could work - but it's pretty non-semantic and not necessarily guaranteed to be supported by all browsers. Off the cuff I'm guessing |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit faaeca1:
|
|
@mitchellhamilton this seems quite reasonable to me, I would be hesitant to put divs into head as well. I've simplified the implementation a little bit, so this is really a minor change and allows to achieve the goal in a cleaner way than multi-step workaround with a custom container. WDYT? Would you be willing to merge this? |
|
@jcharry thank you for your work! Sorry that you had to wait so long - this will become available in the upcoming v11 release. |
|
@Andarist thanks so much! |
* Add prepend option to createCache * changeset * Simplify implementation a little bit * Add test * Tweak changeset * Add new prepend option to TS types * Add type for prepend in createCache options as well
What: Currently, by default generated style tags are appended to the end of
document.head. This can create issues with codebases that rely on passingclassNameinto components to override local component styles. Because the specificity of the passed in class often matches the class generated by emotion, the one generated by emotion pretty much always takes precedence because it is appended to the end of<head>.By allowing the option for prepending tags to a container element, we can ensure that styles coming from css modules that are injected farther down in
<head>will take precedence over emotions generated styles when there are specificity issues and the same css properties are being targeted.How: the addition of a
prependproperty tocreateCachepasses this property down to the StyleSheet where the inject method can read the property, and decide where to inject the style tag. Ifprependis omitted, the current default behavior is preserved. This also attempts to preserve previous behavior such that if abeforetag is found in the StyleSheet, the incoming new tag will be placed adjacent to it. Basically, this last bit is to preserve all default behavior except for the instance of someone passingprependand no other style tags are available to be used as position markers.Checklist: