experimental feature: container queries (#891)

* feat: container queries `c@c-article230`

* fix negative container queries

* change syntax to @cq and make container name optional

packages/imba/src/compiler/selparse.imba

@@ -65,6 +65,7 @@ export def rewrite rule,ctx,o = {}
 
 	rule.meta = {}
 	rule.media = []
+	rule.container = []
 
 	let parts = []
 	let curr = rule.rule
@@ -168,6 +169,14 @@ export def rewrite rule,ctx,o = {}
 			let name = mod.pseudo
 			let meta = modifiers[mod.pseudo]
 
+			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] == '!'
@@ -186,6 +195,13 @@ export def rewrite rule,ctx,o = {}
 				else
 					mod.media = meta.media
 
+			if meta..container
+				if mod.not
+					if meta.containerneg
+						mod.container = meta.containerneg
+				else
+					mod.container = meta.media
+
 			if mod.pseudo == 'media'
 				mod.media = "({mod.value})"
 
@@ -205,6 +221,9 @@ export def rewrite rule,ctx,o = {}
 			if mod.media
 				rule.media.push(mod.media)
 
+			if mod.container
+				rule.container.push(mod.container)
+
 			if name is 'odd' or name is 'even'
 				Object.assign(mod,meta)
 
@@ -284,15 +303,24 @@ export def render root, content, options = {}
 	for rule in rules
 		let sel = selparser.render(rule)
 		let [base,media = ''] = sel.split(' @media ')
+		let [cbase,container = ''] = sel.split(' @container ')
 		rule.#string = base
 
 		# can we really group them this way?
 		# let media = rule.media.length ? "@media {rule.media.join(' and ')}" : ''
 		if media
 			rule.#media = media = '@media ' + media
 
-		if media != group[0]
-			groups.push(group = [media])
+			if media != group[0]
+				groups.push(group = [media])
+
+		elif container
+			rule.#container = container = '@container  ' + container
+
+			if container != group[0]
+				groups.push(group = [container])
+
+			base = cbase
 
 		group.push(base)
 		root.#rules.push(rule)

packages/imba/vendor/css-selector-parser.js

@@ -729,7 +729,19 @@ CssSelectorParser.prototype._renderEntity = function(entity,parent) {
         currentEntity = currentEntity.rule;
       }
       let media = entity.media && entity.media.length ? ` @media ${entity.media.join(' and ')}` : ''
-      res = parts.join(' ') + media;
+
+			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;
     case 'selectors':
       res = entity.selectors.map(this._renderEntity, this).join(', ');
@@ -786,7 +798,7 @@ CssSelectorParser.prototype._renderEntity = function(entity,parent) {
 
         // Identify numeric media here?
 
-        if(part.media || part.skip){
+        if(part.media || part.skip || part.container){
           // console.log('media',rootSelector);
           continue;
         }