From baeec744ff4c860b04d390a7de5d5c4ad061270b Mon Sep 17 00:00:00 2001
From: Sindre Aarsaether <sindre.aarsaether@gmail.com>
Date: Thu, 25 Apr 2024 10:47:34 +0200
Subject: [PATCH] Tweak container query syntax

---
 packages/imba/src/compiler/nodes.imba1      |  2 +-
 packages/imba/src/compiler/selparse.imba    | 26 +++++++++++++--------
 packages/imba/vendor/css-selector-parser.js | 20 ++++++++--------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/imba/src/compiler/nodes.imba1 b/packages/imba/src/compiler/nodes.imba1
index 0849fb651..550a74a4e 100644
--- a/packages/imba/src/compiler/nodes.imba1
+++ b/packages/imba/src/compiler/nodes.imba1
@@ -12439,7 +12439,7 @@ export class StyleVar < StyleTerm
 	def c o
 		toString
 
-var VALID_CSS_UNITS = 'cm mm Q in pc pt px em ex ch rem vw vh vmin vmax % s ms fr deg rad grad turn Hz kHz'.split(' ')
+var VALID_CSS_UNITS = 'cm mm Q in pc pt px em ex ch rem vw vh vmin vmax % s ms fr deg rad grad turn Hz kHz cqw cqh cqi cqb cqmin cqmax'.split(' ')
 
 export class StyleDimension < StyleTerm
 
diff --git a/packages/imba/src/compiler/selparse.imba b/packages/imba/src/compiler/selparse.imba
index c93a629e1..ad63c4422 100644
--- a/packages/imba/src/compiler/selparse.imba
+++ b/packages/imba/src/compiler/selparse.imba
@@ -168,19 +168,25 @@ export def rewrite rule,ctx,o = {}
 		for mod,mi in items
 			let name = mod.pseudo
 			let meta = modifiers[mod.pseudo]
+			let mqcheck = /^(\!)?(\d+)([a-z]+)?$/
 
-			const container_regex = /^\!?cq-([a-zA-Z-_]*)(\d+)$/
 
-			if const match = name..match container_regex
-				let num = parseInt(match[2])
-				mod.not = !mod.not if name.match(/\!/)
-				const container-name = match[1]
-				mod.container = "{container-name} " + (mod.not ? "(max-width: {num - 1}px)" : "(min-width: {num}px)")
 
-			if name..match(/^\!?\d+$/)
-				let num = parseInt(name.replace(/\!/,''))
-				mod.not = !mod.not if name[0] == '!'
-				mod.media = mod.not ? "(max-width: {num - 1}px)" : "(min-width: {num}px)"
+			if let m = name..match(mqcheck)
+				# let [m,neg,num,typ] = name.match(mqcheck)
+				let num = parseInt(m[2])
+				mod.not = !mod.not if m[1] == '!'
+				let kind = {
+					'w': 'width'
+					'h': 'height'
+					'': 'width'
+				}[m[3] or '']
+
+				let cond = mod.not ? "(max-{kind}: {num - 1}px)" : "(min-{kind}: {num}px)"
+				if mod.closest
+					mod.container = cond
+				else
+					mod.media = cond
 
 			if name == 'important' or name == 'force'
 				mod.pseudo = null
diff --git a/packages/imba/vendor/css-selector-parser.js b/packages/imba/vendor/css-selector-parser.js
index 16766b867..ec13ed210 100644
--- a/packages/imba/vendor/css-selector-parser.js
+++ b/packages/imba/vendor/css-selector-parser.js
@@ -730,16 +730,16 @@ CssSelectorParser.prototype._renderEntity = function(entity,parent) {
       }
       let media = entity.media && entity.media.length ? ` @media ${entity.media.join(' and ')}` : ''
 
-			let container = entity.container && entity.container.length ? ` @container ${entity.container.join(' and ')}` : ''
-
-			let suffix = ''
-			if (media && container){
-				suffix = ` ${container} and ${media}`
-			} else if (media){
-				suffix = media
-			} else if (container){
-				suffix = container
-			}
+      let container = entity.container && entity.container.length ? ` @container ${entity.container.join(' and ')}` : ''
+
+      let suffix = ''
+      if (media && container){
+        suffix = ` ${container} and ${media}`
+      } else if (media){
+        suffix = media
+      } else if (container){
+        suffix = container
+      }
 
       res = parts.join(' ') + suffix;
       break;