Support @container query

[a-maggi]

__Is your feature request related to a problem?

I would like to be able to use the new media query property "@container" on my styles.

Describe the solution you'd like I would like to be able to use the property @container in the same way as we use @media queries in the library.

Are you willing to implement it? No

[behnammodi]

@a-maggi Thanks to report this issue, could you tell us what happens when you use @container? or could you reproduce it on a repo or sandbox link

[pearcake]

@behnammodi long story short its a new syntax that allows developers to use rules similar to @media min-max width rules, but on element level - depending on parent container size: MDN Docs

I also came here looking for a solution to wrap all of my JSS in @layer LAYERNAME {} tag, which is already supported by all major browsers. It allows developers to assign render priorities to different CSS code segments (like an !important rule, but more sophisticated and global). And JSS is currently does not support neither of those.

[isti115]

I've opened a pull request with a minimal fix, meanwhile if you wish you can apply the following patch using patch-package: jss+10.9.2.patch

It simply extends the RegEx that's used to match conditional rules:

diff --git a/node_modules/jss/dist/jss.esm.js b/node_modules/jss/dist/jss.esm.js
index 915ecea..5c71e64 100644
--- a/node_modules/jss/dist/jss.esm.js
+++ b/node_modules/jss/dist/jss.esm.js
@@ -456,7 +456,7 @@ function () {
 
   return ConditionalRule;
 }();
-var keyRegExp = /@media|@supports\s+/;
+var keyRegExp = /@container|@media|@supports\s+/;
 var pluginConditionalRule = {
   onCreateRule: function onCreateRule(key, styles, options) {
     return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;

[a-maggi]

@Isti115 Thanks you so much for introducing this update! Do you know the ETA for releasing this as a new version in NPM?

[kof]

released https://github.com/cssinjs/jss/releases/tag/v10.10.0

[a-maggi]

@kof Thanks!

[MarcusNotheis]

Thanks for developing and releasing this feature! Is it just me or is the new release somehow missing in npm?

npm view [email protected]
npm ERR! code E404
npm ERR! 404 No match found for version 10.10.0
npm ERR! 404
npm ERR! 404  '[email protected]' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

[kof]

seems like publish to npm didn't actually publish

[kof]

Released it. Tons of problems: npm added OTP we don't have support of, lerna is way newer now and I wasn't able to upgrade easily. If anyone could help with the release process, it would help releasing updates as soon as we merge PRs.

Right now I spent hours to do that.