wip

Author: thecrypticace

packages/tailwindcss/src/canonicalize-candidates.test.ts

@@ -6,6 +6,7 @@ import type { CanonicalizeOptions } from './intellisense'
 import { DefaultMap } from './utils/default-map'
 
 const css = String.raw
+const timeout = 25_000
 const defaultTheme = fs.readFileSync(path.resolve(__dirname, '../theme.css'), 'utf8')
 
 const designSystems = new DefaultMap((base: string) => {
@@ -261,7 +262,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     ['[font-weight:400]', 'font-normal'],
     ['[line-height:0]', 'leading-0'],
     ['[border-style:solid]', 'border-solid'],
-  ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+  ])(testName, { timeout }, async (candidate, expected) => {
     await expectCanonicalization(
       css`
         @import 'tailwindcss';
@@ -341,7 +342,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       // Arbitrary percentage value must be a whole number. Should not migrate to
       // a bare value.
       ['from-[2.5%]', 'from-[2.5%]'],
-    ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+    ])(testName, { timeout }, async (candidate, expected) => {
       let input = css`
         @import 'tailwindcss';
 
@@ -358,30 +359,26 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test(
-      'migrate with custom static utility `@utility custom {…}`',
-      { timeout: 10_000 },
-      async () => {
-        let candidate = '[--key:value]'
-        let expected = 'custom'
+    test('migrate with custom static utility `@utility custom {…}`', { timeout }, async () => {
+      let candidate = '[--key:value]'
+      let expected = 'custom'
 
-        let input = css`
-          @import 'tailwindcss';
-          @theme {
-            --*: initial;
-          }
-          @utility custom {
-            --key: value;
-          }
-        `
+      let input = css`
+        @import 'tailwindcss';
+        @theme {
+          --*: initial;
+        }
+        @utility custom {
+          --key: value;
+        }
+      `
 
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
+      await expectCanonicalization(input, candidate, expected)
+    })
 
     test(
       'migrate with custom functional utility `@utility custom-* {…}`',
-      { timeout: 10_000 },
+      { timeout },
       async () => {
         let candidate = '[--key:value]'
         let expected = 'custom-value'
@@ -402,7 +399,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
 
     test(
       'migrate with custom functional utility `@utility custom-* {…}` that supports bare values',
-      { timeout: 10_000 },
+      { timeout },
       async () => {
         let candidate = '[tab-size:4]'
         let expected = 'tab-4'
@@ -476,7 +473,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
         ['max-w-(--container-3xl)', 'max-w-3xl'],
       ])(
         `migrate arbitrary value to theme value ${testName}`,
-        { timeout: 10_000 },
+        { timeout },
         async (candidate, expected) => {
           let input = css`
             @import 'tailwindcss';
@@ -494,7 +491,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
 
     test(
       'migrate an arbitrary property without spaces, to a theme value with spaces (canonicalization)',
-      { timeout: 10_000 },
+      { timeout },
       async () => {
         let candidate = 'font-[foo,bar,baz]'
         let expected = 'font-example'
@@ -523,22 +520,18 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       // Custom pixel based spacing scale
       ['w-[123px]', 'w-123', '1px'],
       ['w-[256px]', 'w-128', '2px'],
-    ])(
-      `${testName} (spacing = \`%s\`)`,
-      { timeout: 10_000 },
-      async (candidate, expected, spacing) => {
-        let input = css`
-          @import 'tailwindcss';
+    ])(`${testName} (spacing = \`%s\`)`, { timeout }, async (candidate, expected, spacing) => {
+      let input = css`
+        @import 'tailwindcss';
 
-          @theme {
-            --*: initial;
-            --spacing: ${spacing};
-          }
-        `
+        @theme {
+          --*: initial;
+          --spacing: ${spacing};
+        }
+      `
 
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
+      await expectCanonicalization(input, candidate, expected)
+    })
   })
 
   describe('bare values', () => {
@@ -562,13 +555,13 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
 
       // Custom utility with bare value integer
       ['tab-8', 'tab-github'],
-    ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+    ])(testName, { timeout }, async (candidate, expected) => {
       await expectCanonicalization(input, candidate, expected)
     })
   })
 
   describe('deprecated utilities', () => {
-    test('`order-none` → `order-0`', { timeout: 10_000 }, async () => {
+    test('`order-none` → `order-0`', { timeout }, async () => {
       let candidate = 'order-none'
       let expected = 'order-0'
 
@@ -579,26 +572,22 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test(
-      '`order-none` → `order-none` with custom implementation',
-      { timeout: 10_000 },
-      async () => {
-        let candidate = 'order-none'
-        let expected = 'order-none'
+    test('`order-none` → `order-none` with custom implementation', { timeout }, async () => {
+      let candidate = 'order-none'
+      let expected = 'order-none'
 
-        let input = css`
-          @import 'tailwindcss';
+      let input = css`
+        @import 'tailwindcss';
 
-          @utility order-none {
-            order: none; /* imagine this exists */
-          }
-        `
+        @utility order-none {
+          order: none; /* imagine this exists */
+        }
+      `
 
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
+      await expectCanonicalization(input, candidate, expected)
+    })
 
-    test('`break-words` → `wrap-break-word`', { timeout: 10_000 }, async () => {
+    test('`break-words` → `wrap-break-word`', { timeout }, async () => {
       let candidate = 'break-words'
       let expected = 'wrap-break-word'
 
@@ -609,7 +598,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test('`[overflow-wrap:break-word]` → `wrap-break-word`', { timeout: 10_000 }, async () => {
+    test('`[overflow-wrap:break-word]` → `wrap-break-word`', { timeout }, async () => {
       let candidate = '[overflow-wrap:break-word]'
       let expected = 'wrap-break-word'
 
@@ -620,24 +609,20 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test(
-      '`break-words` → `break-words` with custom implementation',
-      { timeout: 10_000 },
-      async () => {
-        let candidate = 'break-words'
-        let expected = 'break-words'
+    test('`break-words` → `break-words` with custom implementation', { timeout }, async () => {
+      let candidate = 'break-words'
+      let expected = 'break-words'
 
-        let input = css`
-          @import 'tailwindcss';
+      let input = css`
+        @import 'tailwindcss';
 
-          @utility break-words {
-            break: words; /* imagine this exists */
-          }
-        `
+        @utility break-words {
+          break: words; /* imagine this exists */
+        }
+      `
 
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
+      await expectCanonicalization(input, candidate, expected)
+    })
   })
 
   describe('arbitrary variants', () => {
@@ -667,11 +652,11 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['group-[&:focus]:flex', 'group-focus:flex'],
       ['peer-[&:focus]:flex', 'peer-focus:flex'],
       ['in-[&:focus]:flex', 'in-focus:flex'],
-    ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+    ])(testName, { timeout }, async (candidate, expected) => {
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test('unsafe migrations keep the candidate as-is', { timeout: 10_000 }, async () => {
+    test('unsafe migrations keep the candidate as-is', { timeout }, async () => {
       // `hover:` also includes an `@media` query in addition to the `&:hover`
       // state. Migration is not safe because the functionality would be different.
       let candidate = '[&:hover]:flex'
@@ -686,7 +671,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test('make unsafe migration safe (1)', { timeout: 10_000 }, async () => {
+    test('make unsafe migration safe (1)', { timeout }, async () => {
       // Overriding the `hover:` variant to only use a selector will make the
       // migration safe.
       let candidate = '[&:hover]:flex'
@@ -702,7 +687,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test('make unsafe migration safe (2)', { timeout: 10_000 }, async () => {
+    test('make unsafe migration safe (2)', { timeout }, async () => {
       // Overriding the `hover:` variant to only use a selector will make the
       // migration safe. This time with the long-hand `@variant` syntax.
       let candidate = '[&:hover]:flex'
@@ -722,7 +707,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test('custom selector-based variants', { timeout: 10_000 }, async () => {
+    test('custom selector-based variants', { timeout }, async () => {
       let candidate = '[&.macos]:flex'
       let expected = 'is-macos:flex'
       let input = css`
@@ -736,7 +721,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
 
-    test('custom @media-based variants', { timeout: 10_000 }, async () => {
+    test('custom @media-based variants', { timeout }, async () => {
       let candidate = '[@media(prefers-reduced-transparency:reduce)]:flex'
       let expected = 'transparency-safe:flex'
       let input = css`
@@ -773,7 +758,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
 
       // A color with a known theme variable migrates to the full utility
       ['bg-(color:--color-red-500)', 'bg-red-500'],
-    ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+    ])(testName, { timeout }, async (candidate, expected) => {
       await expectCanonicalization(input, candidate, expected)
     })
   })
@@ -860,7 +845,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
         'data-[selected]:aria-[selected="true"]:aspect-[12/34]',
         'data-selected:aria-selected:aspect-12/34',
       ],
-    ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+    ])(testName, { timeout }, async (candidate, expected) => {
       let input = css`
         @import 'tailwindcss';
       `
@@ -967,7 +952,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['has-[[aria-visible]]:flex', 'has-aria-[visible]:flex'],
 
       ['has-[&:not(:nth-child(even))]:flex', 'has-odd:flex'],
-    ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+    ])(testName, { timeout }, async (candidate, expected) => {
       let input = css`
         @import 'tailwindcss';
       `
@@ -1000,7 +985,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
 
       // Keep modifiers on classes that don't _really_ exist
       ['group/name', 'group/name'],
-    ])(testName, { timeout: 10_000 }, async (candidate, expected) => {
+    ])(testName, { timeout }, async (candidate, expected) => {
       await expectCanonicalization(input, candidate, expected)
     })
   })
@@ -1028,7 +1013,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     ['[font-size:14px] [line-height:1.625]', 'text-sm/relaxed'],
   ])(
     'should canonicalize multiple classes `%s` into a shorthand `%s`',
-    { timeout: 10_000 },
+    { timeout },
     async (candidates, expected) => {
       let input = css`
         @import 'tailwindcss';
@@ -1039,7 +1024,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
 })
 
 describe('theme to var', () => {
-  test('extended space scale converts to var or calc', { timeout: 10_000 }, async () => {
+  test('extended space scale converts to var or calc', { timeout }, async () => {
     let designSystem = await __unstable__loadDesignSystem(
       css`
         @tailwind utilities;
@@ -1066,7 +1051,7 @@ describe('theme to var', () => {
     ])
   })
 
-  test('custom space scale converts to var', { timeout: 10_000 }, async () => {
+  test('custom space scale converts to var', { timeout }, async () => {
     let designSystem = await __unstable__loadDesignSystem(
       css`
         @tailwind utilities;
@@ -1093,7 +1078,7 @@ describe('theme to var', () => {
 })
 
 describe('options', () => {
-  test('normalize `rem` units to `px`', { timeout: 10_000 }, async () => {
+  test('normalize `rem` units to `px`', { timeout }, async () => {
     let designSystem = await __unstable__loadDesignSystem(
       css`
         @tailwind utilities;