add values option to the matchVariant API

Author: RobinMalfait

src/lib/setupContextUtils.js

@@ -471,6 +471,10 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     },
     matchVariant: function (variants, options) {
       for (let variant in variants) {
+        for (let [k, v] of Object.entries(options?.values ?? {})) {
+          api.addVariant(`${variant}-${k}`, variants[variant](v))
+        }
+
         api.addVariant(
           variant,
           Object.assign(

tests/arbitrary-variants.test.js

@@ -410,52 +410,58 @@ test('partial arbitrary variants', () => {
   let config = {
     content: [
       {
-        raw: html`
-          <div class="container-[sidebar] container-type-inline-size">
-            <div class="contain-[sidebar,min:500px]:flex"></div>
-            <div class="contain-[sidebar,max:500px]:flex"></div>
-            <div class="contain-[min:500px]:flex"></div>
-            <div class="contain-[max:500px]:flex"></div>
-            <div class="contain-[500px]:flex"></div>
-          </div>
-        `,
+        raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
       },
     ],
     corePlugins: { preflight: false },
     plugins: [
-      ({ addUtilities, matchVariant, matchUtilities }) => {
-        addUtilities({
-          '.container-type-size': { 'container-type': 'size' },
-          '.container-type-inline-size': { 'container-type': 'inline-size' },
-          '.container-type-block-size': { 'container-type': 'block-size' },
-          '.container-type-style': { 'container-type': 'style' },
-          '.container-type-state': { 'container-type': 'state' },
+      ({ matchVariant }) => {
+        matchVariant({
+          potato: (flavor) => `.potato-${flavor} &`,
         })
+      },
+    ],
+  }
 
-        matchUtilities({
-          container: (value) => {
-            return {
-              'container-name': value,
-            }
-          },
-        })
+  let input = css`
+    @tailwind utilities;
+  `
 
-        matchVariant({
-          contain: (args) => {
-            if (args.includes(',')) {
-              let [name, query] = args.split(',')
-              let [type, value] = query.split(':')
-              return `@container ${name} (${
-                { min: 'min-width', max: 'max-width' }[type]
-              }: ${value})`
-            } else if (args.includes(':')) {
-              let [type, value] = args.split(':')
-              return `@container (${{ min: 'min-width', max: 'max-width' }[type]}: ${value})`
-            } else {
-              return `@container (min-width: ${args})`
-            }
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .potato-baked .potato-\[baked\]\:w-3 {
+        width: 0.75rem;
+      }
+
+      .potato-yellow .potato-\[yellow\]\:bg-yellow-200 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+      }
+    `)
+  })
+})
+
+test('partial arbitrary variants with default values', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="tooltip-bottom:mt-2 tooltip-top:mb-2"></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+    plugins: [
+      ({ matchVariant }) => {
+        matchVariant(
+          {
+            tooltip: (side) => `&${side}`,
           },
-        })
+          {
+            values: {
+              bottom: '[data-location="bottom"]',
+              top: '[data-location="top"]',
+            },
+          }
+        )
       },
     ],
   }
@@ -466,42 +472,66 @@ test('partial arbitrary variants', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .container-type-inline-size {
-        container-type: inline-size;
+      .tooltip-bottom\:mt-2[data-location='bottom'] {
+        margin-top: 0.5rem;
       }
 
-      .container-\[sidebar\] {
-        container-name: sidebar;
+      .tooltip-top\:mb-2[data-location='top'] {
+        margin-bottom: 0.5rem;
       }
+    `)
+  })
+})
 
-      @container sidebar (min-width: 500px) {
-        .contain-\[sidebar\2c min\:500px\]\:flex {
-          display: flex;
-        }
-      }
+test('matched variant values maintain the sort order they are registered in', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div
+          class="alphabet-c:underline alphabet-a:underline alphabet-d:underline alphabet-b:underline"
+        ></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+    plugins: [
+      ({ matchVariant }) => {
+        matchVariant(
+          {
+            alphabet: (side) => `&${side}`,
+          },
+          {
+            values: {
+              a: '[data-value="a"]',
+              b: '[data-value="b"]',
+              c: '[data-value="c"]',
+              d: '[data-value="d"]',
+            },
+          }
+        )
+      },
+    ],
+  }
 
-      @container sidebar (max-width: 500px) {
-        .contain-\[sidebar\2c max\:500px\]\:flex {
-          display: flex;
-        }
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .alphabet-a\:underline[data-value='a'] {
+        text-decoration-line: underline;
       }
 
-      @container (min-width: 500px) {
-        .contain-\[min\:500px\]\:flex {
-          display: flex;
-        }
+      .alphabet-b\:underline[data-value='b'] {
+        text-decoration-line: underline;
       }
 
-      @container (max-width: 500px) {
-        .contain-\[max\:500px\]\:flex {
-          display: flex;
-        }
+      .alphabet-c\:underline[data-value='c'] {
+        text-decoration-line: underline;
       }
 
-      @container (min-width: 500px) {
-        .contain-\[500px\]\:flex {
-          display: flex;
-        }
+      .alphabet-d\:underline[data-value='d'] {
+        text-decoration-line: underline;
       }
     `)
   })