Open diegoprestes opened 3 years ago
here's the full error
console.error
Error: Could not parse CSS stylesheet
at exports.createStylesheet (/home/aron/src/xstyled-preflight-test/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
at HTMLStyleElementImpl._updateAStyleBlock (/home/aron/src/xstyled-preflight-test/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
at HTMLStyleElementImpl._childTextContentChangeSteps (/home/aron/src/xstyled-preflight-test/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
at HTMLStyleElementImpl._insert (/home/aron/src/xstyled-preflight-test/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:832:14)
at HTMLStyleElementImpl._preInsert (/home/aron/src/xstyled-preflight-test/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:768:10)
at HTMLStyleElementImpl.insertBefore (/home/aron/src/xstyled-preflight-test/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:605:17)
at HTMLStyleElement.insertBefore (/home/aron/src/xstyled-preflight-test/node_modules/jsdom/lib/jsdom/living/generated/Node.js:370:60)
at e.t.insertRule (/home/aron/src/xstyled-preflight-test/node_modules/styled-components/src/constants.js:4:33)
at e.id [as insertRules] (/home/aron/src/xstyled-preflight-test/node_modules/styled-components/src/constants.js:4:33)
at e.t.insertRules (/home/aron/src/xstyled-preflight-test/node_modules/styled-components/src/sheet/Sheet.js:97:31) {/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */}*,::after,::before{box-sizing:border-box;}:root{-moz-tab-size:4;tab-size:4;}html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';}hr{height:0;color:inherit;}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}table{text-indent:0;border-color:inherit;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,select{text-transform:none;}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;}::-moz-focus-inner{border-style:none;padding:0;}:-moz-focusring{outline:1px dotted ButtonText;}:-moz-ui-invalid{box-shadow:none;}legend{padding:0;}progress{vertical-align:baseline;}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto;}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}summary{display:list-item;}[role=button],button{cursor:pointer;}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}ol,ul{list-style:none;margin:0;padding:0;}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}*,::before,::after{border-width:0;border-style:solid;border-color:currentColor;}*{--x-ring-color:rgba(59,130,246,0.5);}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color;}@-webkit-keyframes x-spin{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes x-spin{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@-webkit-keyframes x-ping{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}75%,100%{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}@keyframes x-ping{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}75%,100%{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}@-webkit-keyframes x-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}@keyframes x-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}@-webkit-keyframes x-bounce{0%,100%{-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-animationTimingFunction:cubic-bezier(0.8,0,1,1);animationTimingFunction:cubic-bezier(0.8,0,1,1);}50%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-animationTimingFunction:cubic-bezier(0,0,0.2,1);animationTimingFunction:cubic-bezier(0,0,0.2,1);}}@keyframes x-bounce{0%,100%{-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-animationTimingFunction:cubic-bezier(0.8,0,1,1);animationTimingFunction:cubic-bezier(0.8,0,1,1);}50%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-animationTimingFunction:cubic-bezier(0,0,0.2,1);animationTimingFunction:cubic-bezier(0,0,0.2,1);}}.jOhtiK{background-color:#ef4444;padding:0.5rem;}
at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:38:63)
at HTMLStyleElementImpl._updateAStyleBlock (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
at HTMLStyleElementImpl._childTextContentChangeSteps (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
at HTMLStyleElementImpl._insert (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:832:14)
at HTMLStyleElementImpl._preInsert (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:768:10)
The problem is this at the beginning, the comment shouldn't be wrapped in braces:
{/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */}
This issue suggests the problem is a bug in stylis: https://github.com/styled-components/styled-components/issues/3017
Note that styled-components depends on emotion/stylis which is a fork
I checked, and removing the license line does work around the problem. However the point of /*!
is to make sure the license information doesn't get stripped. It's a signal to minimizers to keep that comment. We probably shouldn't remove it, but should look for a proper fix.
Understand, yes that was the only solution I found for this problem but doesn`t seem to be the best option if we can find another one would be better.
I think I already met this problem but for now there is no solution, like said it is a bug in stylis. Is there an actual simple way to remove the license only in tests?
🐛 Bug Report
When I try to run the tests in my CRA app and I include all the structure I use of theme providers in the render, if I use the Preflight on it as well I receive several errors in the console saying:
Error: Could not parse CSS stylesheet
Found a similar issue on styled-components that says that the errors happen on some comments inside the code, that we shouldn't have a comment like this
/*! comment */
. Removing the!
fixed the bug there, and we have a similar comment on Preflight code, so it might be the solution for this as well.To Reproduce
Expected behavior
It should run the tests without any CSS parse error.
Link to repl or repo
Created a repo on Github with the issue above: https://github.com/diegoprestes/xstyled-preflight-test Just follow normal install and then run the tests.