import { describe, it, expect } from 'vitest'
import { compileStyle } from '@vue/compiler-sfc'

describe('scoped nested @media regression', () => {
  it('adds nesting selector inside @media', () => {
    const { code } = compileStyle({
      source: `.foo {\n  background-color: red;\n  .bar {\n    color: blue;\n  }\n  @media only screen and (max-width: 800px) {\n    background-color: green;\n  }\n}`,
      filename: 'test.css',
      id: 'test',
      scoped: true,
    })
    const mediaPart = code.slice(code.indexOf('@media'))
    expect(mediaPart).toContain('data-v-test')
  })
})
