You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am currently using next.js with styled-jsx. I am looking to use container queries in styled-jsx however styled-jsx is still a major version behind stylis most current version. I found some threads on this but it appears there has been no desire for styled-jsx to update.
I did try to update stylis to the most recent version in styled-jsx with success. However I believe there is undesired behavior that happens when I updated testing snapshots. Updating stylis old major version is not ideal but does solve the problem.
The text was updated successfully, but these errors were encountered:
I have exactly the same need but did not managed to make it work, @jarrett-pon-ziffdavis could you please share what you did to make container queries work with styled-jsx? I pulled the example that you provided but it's not working on my side...
@angeblecon I'll provide more details! When I tried to minify stylis I received an error regarding screw ie8. To resolve this I set the uglify-js dependency to 3.2.2 (instead of ^3.2.2). There must be a more recent minor version that removes this flag option. (If I were to open a PR, I'd resolve this issue differently but I'm just trying to get container queries to work). Here is an updated diff:
I set the version to 3.5.4-a and then run npm pack. Make sure packages are updated/installed. I move the tar file into the styled-jsx repo. Then in styled-jsx I have these changes:
As you can see styled-jsx is now using the stylis version I've made through the tar file. In styled-jsx, install/update packages and build the packages. Lastly I run npm pack and use that tar file in the project that I need the updated style-jsx with css container queries.
I am currently using next.js with styled-jsx. I am looking to use container queries in styled-jsx however styled-jsx is still a major version behind stylis most current version. I found some threads on this but it appears there has been no desire for styled-jsx to update.
One solution is to build off the old major version (3.5.4) and add container query support. Here is an example:
https://github.com/thysultan/stylis/compare/v3.5.4...jarrett-pon-ziffdavis:stylis:add-container-query?expand=1
I have tested this update and also tested using this update in styled-jsx.
I did try to update stylis to the most recent version in styled-jsx with success. However I believe there is undesired behavior that happens when I updated testing snapshots. Updating stylis old major version is not ideal but does solve the problem.
The text was updated successfully, but these errors were encountered: