emotion
emotion copied to clipboard
emotion-js
Duplicate <style> tag inside <head> tag and sources map do not work
Current behavior:
Duplicate style tag inside head tag and sources map do not work
To reproduce:
When use native div styles tag in head do not dublicate and sources map work good.
When use our component to style with emotion styles tag in head dublicated and sources map don't work.
dublicated styles
Example link https://codesandbox.io/s/emotion-duplicate-style-tag-7s9ul?file=/src/index.js
Expected behavior:
Environment information: "react": "^17.0.2", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0",
"@mui/material": "^5.0.3"
The Box component in MUI is not a styled component: https://github.com/mui-org/material-ui/blob/e4b856fdd1686b09357d36c7cefdf0daddfb8bfc/packages/mui-system/src/createBox.js#L12-L25
So we can't "fold" the tree here. cc @mnajdova unsure how feasible that would be but allow this to "fold" could be a potential performance improvement (the React tree would get flattened/smaller).
The duplicated stuff and lack of source maps is interesting. The inner Box receives jus a className from the outer one and it gets "decoded" into what this class name contains in the getRegisteredStyles here:
https://github.com/emotion-js/emotion/blob/685bbec099372b6797a7d2cfb558756faeee4f19/packages/utils/src/index.js#L13-L15
However, this never contains a source map. So the final hash and all is different here and thus u have "duplicated" styles.
I will give this a thought but keep in mind that this shouldn't cause any production issues and this stuff wouldn't even be duplicated in production as source maps are disabled there anyway.
@Andarist the main reason for creating this issue is that I do not have normal debug methods I what to have link in development mode to sources
It would be nice to get the behavior like in the video after some manual manipulations
I also use customize-cra with @emotion/babel-plugin and can use sources map in production now
https://youtu.be/s1DsUIiMs-4
example with my functional component (sources maps work) https://codesandbox.io/s/emotion-duplicate-style-tag-forked-qktwn?file=/src/index.js
Note for me: we actually only hash the content of the styles and source maps should not affect this anyhow. The problem here is that the second styles have the additional trailing ; (so they are not the same). This might be been added at runtime to fix issues with styles concatenation - but those issues were created (at least partially) because we've tried to optimize the output of the Babel plugin and skipped a trailing ; there. However, there is always a chance that Babel is not being used at all, and whatever Babel creates can be also created by users manually - so reverting the output "optimization" on the Babel level doesn't seem like a proper solution.
I need to track all of the PRs related to this - but I've verified that even though the second styles don't have access to the source map they would not get reinjected to the document IF the actual styles would be the same (without trailing ; mismatch).
It's a somewhat easy fix - but requires some thorough investigation first.
@mnajdova unsure how feasible that would be but allow this to "fold" could be a potential performance improvement (the React tree would get flattened/smaller).
This is a tradeoff we made. We are creating all components more or less in the same manner. The components themselves are not styled(), but the root element they return is. We then support the components API, which allows you to completely swap the elements returned.
Could you point me to the components API docs or something? Would it be impossible to support this API if the component itself would be styled?