quotes are technically optional, let's account for that

Co-Authored-By: Jordan Pittman <[email protected]>

Author: RobinMalfait

integrations/upgrade/js-config.test.ts

@@ -992,8 +992,12 @@ test(
                 // Automatically handled by bare values
                 foo: 'foo="true"',
 
+                // Quotes are optional in CSS for these kinds of attribute
+                // selectors
+                bar: 'bar=true',
+
                 // Not automatically handled by bare values because names differ
-                bar: 'baz="true"',
+                baz: 'qux="true"',
 
                 // Completely custom
                 asc: 'sort="ascending"',
@@ -1018,7 +1022,7 @@ test(
       --- src/input.css ---
       @import 'tailwindcss';
 
-      @custom-variant aria-bar (&[aria-baz="true"]);
+      @custom-variant aria-baz (&[aria-qux="true"]);
       @custom-variant aria-asc (&[aria-sort="ascending"]);
       @custom-variant aria-desc (&[aria-sort="descending"]);
 

packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts

@@ -145,7 +145,7 @@ async function migrateTheme(
       for (let [key, value] of Object.entries(resolvedConfig.theme.aria ?? {})) {
         // Will be handled by bare values if the names match.
         // E.g.: `aria-foo:flex` should produce `[aria-foo="true"]`
-        if (new RegExp(`^${key}=['"]true['"]$`).test(`${value}`)) continue
+        if (new RegExp(`^${key}=(['"]?)true\\1$`).test(`${value}`)) continue
 
         // Create custom variant
         variants.set(`aria-${key}`, `&[aria-${value}]`)