Tweak container query syntax

imba · Apr 25, 2024 · baeec74 · baeec74
1 parent 800edd7
commit baeec74
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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;