add variants for container max-width queries

src/index.ts

@@ -1,14 +1,44 @@
 import plugin from 'tailwindcss/plugin'
 
+type VariantSortProps = {
+  value: string;
+  modifier: string | null;
+};
+
 export = plugin(
   function containerQueries({ matchUtilities, matchVariant, theme }) {
-    let values: Record<string, string> = theme('containers') ?? {}
+    const values: Record<string, string> = theme('containers') ?? {};
 
     function parseValue(value: string) {
-      let numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
-      if (numericValue === null) return null
+      const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null;
+      if (numericValue === null) return null;
+
+      return parseFloat(value);
+    }
+
+    function sort(aVariant: VariantSortProps, zVariant: VariantSortProps) {
+      const a = parseFloat(aVariant.value);
+      const z = parseFloat(zVariant.value);
+
+      if (a === null || z === null) return 0;
 
-      return parseFloat(value)
+      // Sort values themselves regardless of unit
+      if (a - z !== 0) return a - z;
+
+      const aLabel = aVariant.modifier ?? '';
+      const zLabel = zVariant.modifier ?? '';
+
+      // Explicitly move empty labels to the end
+      if (aLabel === '' && zLabel !== '') {
+        return 1;
+      } else if (aLabel !== '' && zLabel === '') {
+        return -1;
+      }
+
+      // Sort labels alphabetically in the English locale
+      // We are intentionally overriding the locale because we do not want the sort to
+      // be affected by the machine's locale (be it a developer or CI environment)
+      return aLabel.localeCompare(zLabel, 'en', { numeric: true });
     }
 
     matchUtilities(
@@ -17,7 +47,7 @@ export = plugin(
           return {
             'container-type': value,
             'container-name': modifier,
-          }
+          };
         },
       },
       {
@@ -27,43 +57,33 @@ export = plugin(
         },
         modifiers: 'any',
       }
-    )
+    );
 
     matchVariant(
       '@',
       (value = '', { modifier }) => {
-        let parsed = parseValue(value)
+        const parsed = parseValue(value);
 
-        return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
+        return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : [];
       },
       {
         values,
-        sort(aVariant, zVariant) {
-          let a = parseFloat(aVariant.value)
-          let z = parseFloat(zVariant.value)
-
-          if (a === null || z === null) return 0
-
-          // Sort values themselves regardless of unit
-          if (a - z !== 0) return a - z
-
-          let aLabel = aVariant.modifier ?? ''
-          let zLabel = zVariant.modifier ?? ''
+        sort,
+      }
+    );
 
-          // Explicitly move empty labels to the end
-          if (aLabel === '' && zLabel !== '') {
-            return 1
-          } else if (aLabel !== '' && zLabel === '') {
-            return -1
-          }
+    matchVariant(
+      '@max',
+      (value = '', { modifier }) => {
+        const parsed = parseValue(value);
 
-          // Sort labels alphabetically in the English locale
-          // We are intentionally overriding the locale because we do not want the sort to
-          // be affected by the machine's locale (be it a developer or CI environment)
-          return aLabel.localeCompare(zLabel, 'en', { numeric: true })
-        },
+        return parsed !== null ? `@container ${modifier ?? ''} (width < ${value})` : [];
+      },
+      {
+        values,
+        sort,
       }
-    )
+    );
   },
   {
     theme: {