Remove usages of @import "…" theme(reference) in tests

Author: philipp-spiess

integrations/cli/index.test.ts

@@ -643,7 +643,7 @@ test(
         }
       `,
       'index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
 
         /* (1) */
         /* - Only './src' should be auto-scanned, not the current working directory */
@@ -774,7 +774,7 @@ test(
         }
       `,
       'project-a/src/index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
 
         /* Run auto-content detection in ../../project-b */
         @import 'tailwindcss/utilities' source('../../project-b');
@@ -1132,7 +1132,7 @@ test(
         }
       `,
       'index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
 
         /* (1) */
         /* - Only './src' should be auto-scanned, not the current working directory */

integrations/cli/standalone.test.ts

@@ -35,7 +35,7 @@ test(
         <div class="aspect-w-16"></div>
       `,
       'src/index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
 
         @plugin '@tailwindcss/forms';

integrations/postcss/index.test.ts

@@ -659,7 +659,7 @@ test(
         }
       `,
       'index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
 
         /* (1) */
         /* - Only './src' should be auto-scanned, not the current working directory */
@@ -799,7 +799,7 @@ test(
         }
       `,
       'project-a/src/index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
 
         /* Run auto-content detection in ../../project-b */
         @import 'tailwindcss/utilities' source('../../project-b');
@@ -1163,7 +1163,7 @@ test(
         }
       `,
       'index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
 
         /* (1) */
         /* - Only './src' should be auto-scanned, not the current working directory */

integrations/postcss/multi-root.test.ts

@@ -25,7 +25,7 @@ test(
         <div class="one:underline two:underline"></div>
       `,
       'src/shared.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
       `,
       'src/root1.css': css`

integrations/postcss/next.test.ts

@@ -51,7 +51,7 @@ test(
         }
       `,
       'app/globals.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
       `,
     },
@@ -122,7 +122,7 @@ describe.each(['turbo', 'webpack'])('%s', (bundler) => {
           }
         `,
         'app/globals.css': css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
         `,
       },

integrations/postcss/plugins.test.ts

@@ -26,7 +26,7 @@ test(
         <div className="ui-open:flex"></div>
       `,
       'src/index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
         @plugin '@headlessui/tailwindcss';
       `,
@@ -65,7 +65,7 @@ test(
         <div className="ui-open:flex"></div>
       `,
       'src/index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
         @plugin '@headlessui/tailwindcss';
       `,

integrations/vite/index.test.ts

@@ -62,7 +62,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
           }
         `,
         'project-a/src/index.css': css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
           @config '../tailwind.config.js';
           @source '../../project-b/src/**/*.html';
@@ -147,7 +147,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
           }
         `,
         'project-a/src/index.css': css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
           @config '../tailwind.config.js';
           @source '../../project-b/src/**/*.html';
@@ -291,7 +291,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
           }
         `,
         'project-a/src/index.css': css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
           @import './custom-theme.css';
           @config '../tailwind.config.js';

integrations/vite/multi-root.test.ts

@@ -43,7 +43,7 @@ test(
         </body>
       `,
       'src/shared.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
       `,
       'src/root1.css': css`
@@ -119,7 +119,7 @@ test(
         </body>
       `,
       'src/shared.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
       `,
       'src/root1.css': css`

integrations/vite/other-transforms.test.ts

@@ -47,7 +47,7 @@ function createSetup(transformer: 'postcss' | 'lightningcss') {
         </body>
       `,
       'src/index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
+        @reference 'tailwindcss/theme';
         @import 'tailwindcss/utilities';
 
         .foo {
@@ -111,7 +111,7 @@ describe.each(['postcss', 'lightningcss'] as const)('%s', (transformer) => {
       await fs.write(
         'src/index.css',
         css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
 
           .foo {
@@ -155,7 +155,7 @@ describe.each(['postcss', 'lightningcss'] as const)('%s', (transformer) => {
       await fs.write(
         'src/index.css',
         css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
 
           .foo {

integrations/vite/resolvers.test.ts

@@ -49,7 +49,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
           @plugin '#js-alias';
         `,
         'src/alias.css': css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
         `,
         'src/plugin.js': js`
@@ -117,7 +117,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
           @plugin '#js-alias';
         `,
         'src/alias.css': css`
-          @import 'tailwindcss/theme' theme(reference);
+          @reference 'tailwindcss/theme';
           @import 'tailwindcss/utilities';
         `,
         'src/plugin.js': js`

packages/@tailwindcss-postcss/src/index.test.ts

@@ -90,7 +90,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
 
   let result = await processor.process(
     css`
-      @import 'tailwindcss/theme.css' theme(reference);
+      @reference 'tailwindcss/theme.css';
       .foo {
         @apply text-red-500;
       }
@@ -99,7 +99,11 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".foo {
+    ":root, :host {
+      --color-red-500: oklch(.637 .237 25.331);
+    }
+
+    .foo {
       color: var(--color-red-500);
     }"
   `)