Added support for raw queries and container-type: size

.gitignore

@@ -2,3 +2,5 @@ node_modules
 dist
 yarn.lock
 package-lock.json
+
+.idea

src/index.ts

@@ -4,7 +4,7 @@ export = plugin(
   function containerQueries({ matchUtilities, matchVariant, theme }) {
     let values: Record<string, string> = theme('containers') ?? {}
 
-    function parseValue(value: string) {
+    function parseNumberValue(value: string) {
       let numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
       if (numericValue === null) return null
 
@@ -24,17 +24,29 @@ export = plugin(
         values: {
           DEFAULT: 'inline-size',
           normal: 'normal',
+          size: 'size'
         },
         modifiers: 'any',
       }
     )
-
     matchVariant(
       '@',
       (value = '', { modifier }) => {
-        let parsed = parseValue(value)
+        let parsedNumber = null;
+        let parsedObject = null;
+
+        if(typeof value === 'object') {
+          parsedObject = JSON.parse(JSON.stringify(value)) || null;
+        }else{
+          parsedNumber = parseNumberValue(value);
+        }
+
+
+        if(parsedObject !== null) {
+          return `@container ${modifier ?? ''} ${parsedObject.raw}`
+        }
 
-        return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
+        return parsedNumber !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
       },
       {
         values,

tests/index.test.ts

@@ -7,7 +7,7 @@ it('container queries', () => {
       {
         raw: html`
           <div
-            class="@container @container-normal @container/sidebar @container-normal/sidebar @container-[size]/sidebar"
+            class="@container @container-normal @container-size @container/sidebar @container-normal/sidebar @container-[size]/sidebar"
           >
             <div class="@md:underline"></div>
             <div class="@md/container1:underline"></div>
@@ -39,6 +39,7 @@ it('container queries', () => {
         sm: '320px',
         md: '768px',
         lg: '1024px',
+        "xs-h": { raw: "(max-height: 600px)" },
       },
     },
     corePlugins: { preflight: false },
@@ -58,6 +59,10 @@ it('container queries', () => {
         container-type: normal;
       }
 
+      .\@container-size {
+        container-type: size;
+      }
+
       .\@container\/sidebar {
         container-type: inline-size;
         container-name: sidebar;