test(sfc): test @media and @supports query for scoped css

diff --git a/packages/compiler-sfc/__tests__/stylePluginScoped.spec.ts b/packages/compiler-sfc/__tests__/stylePluginScoped.spec.ts
index a618ef618eb59636b1decc4f5f068d1bac6239ef..ed24199a509f723b1f384e2d94eb75f24db79b01 100644 (file)
--- a/packages/compiler-sfc/__tests__/stylePluginScoped.spec.ts
+++ b/packages/compiler-sfc/__tests__/stylePluginScoped.spec.ts
@@ -91,6 +91,18 @@ describe('SFC scoped CSS', () => {
     )
   })
 
+  test('media query', () => {
+    expect(compile(`@media print { .foo { color: red }}`)).toMatch(
+      /@media print {\s+\.foo\[test\] \{ color: red/
+    )
+  })
+
+  test('supports query', () => {
+    expect(
+      compile(`@supports(display: grid) { .foo { display: grid }}`)
+    ).toMatch(/@supports\(display: grid\) {\s+\.foo\[test\] \{ display: grid/)
+  })
+
   test('scoped keyframes', () => {
     const style = compile(`
 .anim {