search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 106 forks source link

Run tests using the Preflight outputs several errors on console #292

Open diegoprestes opened 3 years ago

diegoprestes commented 3 years ago

🐛 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

  1. Created a clean project with CRA
  2. Setup xstyled with a ThemeProvider using the defaultTheme and the Preflight
  3. Works fine when running the page
  4. Try to create a test and create the same structure in the test file.
  5. Created a simple test just checking if a text is on the page
  6. When running the test several errors appears in the console

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.

## System:
 - OS: macOS 11.4
 - CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
 - Memory: 203.34 MB / 32.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
 - Yarn: 1.22.10 - ~/.nvm/versions/node/v12.22.1/bin/yarn
 - npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @xstyled/styled-components: ^3.0.3 => 3.0.3
 - styled-components: ^5.3.0 => 5.3.0
agriffis commented 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.

diegoprestes commented 3 years ago

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.

gregberge commented 3 years ago

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?