Use non-existing example in tests (#20021)

This PR makes a small change to the tests. In some cases, where we test
`@utility` functionality we use `tab-*` utilities.

But there is a possibility that we will add this as an actual utility,
so instead let's use a much more generic `example-*` utility. Then we
can read from the `--example` theme value, and use `--resolved-value:
…;` and `--resolved-modifier: …;` values.

It's admittedly more vague, but chances of conflicts go way down. Until
CSS or Tailwind CSS introduces an `example-*` utility...


## Test plan

1. Only tests changed, and all of them still pass

Author: RobinMalfait

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

@@ -520,16 +520,16 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       'migrate with custom functional utility `@utility custom-* {…}` that supports bare values',
       { timeout },
       async () => {
-        let candidate = '[tab-size:4]'
-        let expected = 'tab-4'
+        let candidate = '[--resolved-value:4]'
+        let expected = 'example-4'
 
         let input = css`
           @import 'tailwindcss';
           @theme {
             --*: initial;
           }
-          @utility tab-* {
-            tab-size: --value(integer);
+          @utility example-* {
+            --resolved-value: --value(integer);
           }
         `
 
@@ -538,24 +538,24 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     )
 
     test.each([
-      ['[tab-size:0]', 'tab-0'],
-      ['[tab-size:4]', 'tab-4'],
-      ['[tab-size:8]', 'tab-github'],
-      ['tab-[0]', 'tab-0'],
-      ['tab-[4]', 'tab-4'],
-      ['tab-[8]', 'tab-github'],
+      ['[--resolved-value:0]', 'example-0'],
+      ['[--resolved-value:4]', 'example-4'],
+      ['[--resolved-value:8]', 'example-a'],
+      ['example-[0]', 'example-0'],
+      ['example-[4]', 'example-4'],
+      ['example-[8]', 'example-a'],
     ])(
       'migrate custom @utility from arbitrary values to bare values and named values (based on theme)',
       async (candidate, expected) => {
         let input = css`
           @import 'tailwindcss';
           @theme {
             --*: initial;
-            --tab-size-github: 8;
+            --example-a: 8;
           }
 
-          @utility tab-* {
-            tab-size: --value(--tab-size, integer, [integer]);
+          @utility example-* {
+            --resolved-value: --value(--example, integer, [integer]);
           }
         `
 
@@ -676,11 +676,11 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
         --*: initial;
         --spacing: 0.25rem;
         --aspect-video: 16 / 9;
-        --tab-size-github: 8;
+        --example-a: 8;
       }
 
-      @utility tab-* {
-        tab-size: --value(--tab-size, integer);
+      @utility example-* {
+        --resolved-value: --value(--example, integer);
       }
     `
 
@@ -689,7 +689,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['aspect-16/9', 'aspect-video'],
 
       // Custom utility with bare value integer
-      ['tab-8', 'tab-github'],
+      ['example-8', 'example-a'],
     ])(testName, { timeout }, async (candidate, expected) => {
       await expectCanonicalization(input, candidate, expected)
     })

packages/tailwindcss/src/intellisense.test.ts

@@ -497,11 +497,6 @@ test('Custom functional @utility', async () => {
     @import 'tailwindcss/utilities';
 
     @theme reference {
-      --tab-size-1: 1;
-      --tab-size-2: 2;
-      --tab-size-4: 4;
-      --tab-size-github: 8;
-
       --text-xs: 0.75rem;
       --text-xs--line-height: calc(1 / 0.75);
 
@@ -510,10 +505,11 @@ test('Custom functional @utility', async () => {
 
       --spacing: 0.25rem;
       --spacing-custom: 123px;
-    }
 
-    @utility tab-* {
-      tab-size: --value(--tab-size, 'revert', 'initial');
+      --negative-1: 1;
+      --negative-2: 2;
+      --negative-4: 4;
+      --negative-a: 8;
     }
 
     @utility example-* {
@@ -535,7 +531,7 @@ test('Custom functional @utility', async () => {
     }
 
     @utility -negative-* {
-      margin: --value(--tab-size-*);
+      margin: --value(--negative-*);
     }
   `
 
@@ -550,18 +546,6 @@ test('Custom functional @utility', async () => {
   let classMap = new Map(design.getClassList())
   let classNames = Array.from(classMap.keys())
 
-  expect(classNames).toContain('tab-1')
-  expect(classNames).toContain('tab-2')
-  expect(classNames).toContain('tab-4')
-  expect(classNames).toContain('tab-github')
-  expect(classNames).toContain('tab-revert')
-  expect(classNames).toContain('tab-initial')
-
-  expect(classNames).not.toContain('-tab-1')
-  expect(classNames).not.toContain('-tab-2')
-  expect(classNames).not.toContain('-tab-4')
-  expect(classNames).not.toContain('-tab-github')
-
   expect(classNames).toContain('with-custom-spacing-custom')
   expect(classNames).not.toContain('with-custom-spacing-0')
   expect(classNames).not.toContain('with-custom-spacing-0.5')
@@ -583,12 +567,12 @@ test('Custom functional @utility', async () => {
   expect(classNames).toContain('-negative-1')
   expect(classNames).toContain('-negative-2')
   expect(classNames).toContain('-negative-4')
-  expect(classNames).toContain('-negative-github')
+  expect(classNames).toContain('-negative-a')
 
   expect(classNames).not.toContain('--negative-1')
   expect(classNames).not.toContain('--negative-2')
   expect(classNames).not.toContain('--negative-4')
-  expect(classNames).not.toContain('--negative-github')
+  expect(classNames).not.toContain('--negative-a')
 
   expect(classNames).toContain('example-xs')
   expect(classMap.get('example-xs')?.modifiers).toEqual(['normal', 'foo', 'bar'])