From 0e8a8273146a993b300500e30b2c5fc7e157bbd3 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Mon, 22 Aug 2022 23:16:12 +0700 Subject: [PATCH] chore: add media query for css module --- demo/__tests__/style.test.tsx | 2 +- demo/__tests__/transform.test.tsx | 2 +- demo/style.module.css | 6 ++++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/demo/__tests__/style.test.tsx b/demo/__tests__/style.test.tsx index 6ffc2c0c..309eb828 100644 --- a/demo/__tests__/style.test.tsx +++ b/demo/__tests__/style.test.tsx @@ -42,7 +42,7 @@ describe('Style', () => { // TODO: not implemented yet // Import expect(getDocumentHTML()).toContain( - `._cssModule_1gc0y_1 { + `._cssModule_1a0qn_1 { color: green; }`, ); diff --git a/demo/__tests__/transform.test.tsx b/demo/__tests__/transform.test.tsx index 736d78b1..c5c51a3c 100644 --- a/demo/__tests__/transform.test.tsx +++ b/demo/__tests__/transform.test.tsx @@ -7,7 +7,7 @@ describe('transform', () => { render(); // TODO: To refactor this test. It frequently need to be updated. expect(document.body.outerHTML).toMatchInlineSnapshot( - `"
\\"logo\\"
\\"logo2\\"

Hello Vite + React!

Styled by SCSS Modules

This text is styled by styled-components

This text is styled by global css which is not imported to App.tsx

This text is styled by CSS Modules

This text is styled by global configured SASS

This text is styled by imported SASS

This text is styled by Tailwind CSS

Styled by Emotion

Styled by Stiches

This text is styled by SASS from load paths

An animated element style using @use ~

An animated element style using import ~

Watch me fade in!

Edit App.tsx and save to test HMR updates.

Learn React | Vite Docs

"`, + `"
\\"logo\\"
\\"logo2\\"

Hello Vite + React!

Styled by SCSS Modules

This text is styled by styled-components

This text is styled by global css which is not imported to App.tsx

This text is styled by CSS Modules

This text is styled by global configured SASS

This text is styled by imported SASS

This text is styled by Tailwind CSS

Styled by Emotion

Styled by Stiches

This text is styled by SASS from load paths

An animated element style using @use ~

An animated element style using import ~

Watch me fade in!

Edit App.tsx and save to test HMR updates.

Learn React | Vite Docs

"`, ); }); }); diff --git a/demo/style.module.css b/demo/style.module.css index 08d3ccb6..101b777f 100644 --- a/demo/style.module.css +++ b/demo/style.module.css @@ -1,3 +1,9 @@ .cssModule { color: green; } + +@media (max-width: 400px) { + .cssModule { + color: red; + } +}