search

thysultan / stylis

light – weight css preprocessor
https://stylis.js.org
MIT License
1.73k stars 84 forks source link

Container query support for styled-jsx #311

Closed jarrett-pon-ziffdavis closed 1 month ago

jarrett-pon-ziffdavis commented 1 year ago

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.

angeblecon commented 1 year ago

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...

jarrett-pon-ziffdavis commented 1 year ago

@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:

https://github.com/thysultan/stylis/compare/v3.5.4...jarrett-pon-ziffdavis:add-container-query?expand=1

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:

https://github.com/vercel/styled-jsx/compare/main...jarrett-pon-ziffdavis:styled-jsx:add-container-query?expand=1

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.