From aadedca538b32cbe73b1a4c992fa33b46285add2 Mon Sep 17 00:00:00 2001
From: Rahim <rahim.alwer@gmail.com>
Date: Wed, 24 Jun 2026 13:38:03 -0700
Subject: [PATCH] test(compiler): cover token var hoisting

---
 packages/compiler/src/tailwind/tests/output-modes.test.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/compiler/src/tailwind/tests/output-modes.test.ts b/packages/compiler/src/tailwind/tests/output-modes.test.ts
index 0d664ca0..a726c3f5 100644
--- a/packages/compiler/src/tailwind/tests/output-modes.test.ts
+++ b/packages/compiler/src/tailwind/tests/output-modes.test.ts
@@ -20,6 +20,7 @@ import { cn } from '@videojs/utils/style';
 export const styles = {
   controls: cn(
     'flex flex-wrap',
+    '[--media-popover-side-offset:0.5rem]',
     'pointer-fine:transition-[scale,filter,opacity]',
     'motion-reduce:[--media-controls-transition-duration:50ms]',
     'contrast-more:[--media-surface-background-color:oklch(0_0_0)]',
@@ -53,7 +54,7 @@ import { styles } from './tokens';
 
 export function Fixture() {
   return (
-    <FixtureRoot className="container p-4 [--media-popover-side-offset:0.5rem] [--media-controls-transition-duration:100ms] [color:var(--media-color-primary,oklch(1_0_0))] [&_video]:block [&:fullscreen]:[--media-border-radius:0]">
+    <FixtureRoot className="container p-4 [--media-controls-transition-duration:100ms] [color:var(--media-color-primary,oklch(1_0_0))] [&_video]:block [&:fullscreen]:[--media-border-radius:0]">
       <Controls className={styles.controls}>
         <Button className={styles.button}>
           <Icon className={styles.icon} />
@@ -92,8 +93,8 @@ describe('tailwind output modes', () => {
     expect(result.code).not.toContain('styles.');
     expect(result.code).toMatchInlineSnapshot(`
       "export function Fixture() {
-          return (<FixtureRoot className="container p-4 [--media-popover-side-offset:0.5rem] [--media-controls-transition-duration:100ms] [color:var(--media-color-primary,oklch(1_0_0))] [&_video]:block [&:fullscreen]:[--media-border-radius:0]">
-            <Controls className="flex flex-wrap pointer-fine:transition-[scale,filter,opacity] motion-reduce:[--media-controls-transition-duration:50ms] contrast-more:[--media-surface-background-color:oklch(0_0_0)] [@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)] @2xl/media-root:flex-nowrap">
+          return (<FixtureRoot className="container p-4 [--media-controls-transition-duration:100ms] [color:var(--media-color-primary,oklch(1_0_0))] [&_video]:block [&:fullscreen]:[--media-border-radius:0]">
+            <Controls className="flex flex-wrap [--media-popover-side-offset:0.5rem] pointer-fine:transition-[scale,filter,opacity] motion-reduce:[--media-controls-transition-duration:50ms] contrast-more:[--media-surface-background-color:oklch(0_0_0)] [@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)] @2xl/media-root:flex-nowrap">
               <Button className="group flex items-center disabled:opacity-50 data-[availability=unsupported]:hidden aria-expanded:bg-current/10 focus-visible:outline-current">
                 <Icon className="hidden opacity-0 group-data-paused:block group-data-paused:opacity-100 group-not-data-paused:opacity-0"/>
               </Button>