From 09c41b7a4b1ad1119fbfe5031782e5573aecb292 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Fa=C5=82owski?=
 <10272880+przemkow@users.noreply.github.com>
Date: Thu, 22 Oct 2020 19:24:41 +0200
Subject: [PATCH] chore: update css module example to correctly handle <styles
 module> related options (#356)

Co-authored-by: Rahul Kadyan <hi@znck.me>
---
 examples/css-modules/rollup.config.js | 11 ++++-------
 examples/css-modules/src/App.vue      |  2 +-
 test/core.e2e.ts                      |  6 +++---
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/examples/css-modules/rollup.config.js b/examples/css-modules/rollup.config.js
index bfcfc03..5b4d9bd 100644
--- a/examples/css-modules/rollup.config.js
+++ b/examples/css-modules/rollup.config.js
@@ -15,16 +15,13 @@ const config = [
       // Resolve packages from `node_modules` e.g. `style-inject` module
       // used by `rollup-plugin-postcss` to inline CSS.
       NodeResolve(),
-      VuePlugin(),
-      // Process only `<style module>` blocks.
-      PostCSS({
-        modules: {
+      VuePlugin({
+        // PostCSS-modules options for <style module> compilation
+        cssModulesOptions: {
           generateScopedName: '[local]___[hash:base64:5]',
         },
-        include: /&module=.*\.css$/,
       }),
-      // Process all `<style>` blocks except `<style module>`.
-      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
+      PostCSS(),
     ],
     external(id) {
       return /^(vue)$/.test(id)
diff --git a/examples/css-modules/src/App.vue b/examples/css-modules/src/App.vue
index 6989cfc..397e3ab 100644
--- a/examples/css-modules/src/App.vue
+++ b/examples/css-modules/src/App.vue
@@ -18,6 +18,6 @@ export default {
 
 <style scoped>
 .green {
-  color: red;
+  color: green;
 }
 </style>
diff --git a/test/core.e2e.ts b/test/core.e2e.ts
index 3dad6ca..8b63f15 100644
--- a/test/core.e2e.ts
+++ b/test/core.e2e.ts
@@ -56,9 +56,9 @@ describe('css-modules', () => {
     expect(result.output[0].code).not.toEqual(
       expect.stringContaining('.red {\n  color: red;\n}')
     )
-    expect(result.output[0].code).toEqual(expect.stringContaining('._red_'))
+    expect(result.output[0].code).toEqual(expect.stringContaining('.red___'))
     expect(result.output[0].code).toEqual(
-      expect.stringContaining('{"red":"_red_')
+      expect.stringContaining('{"red":"red___')
     )
   })
 
@@ -67,7 +67,7 @@ describe('css-modules', () => {
       expect.stringContaining('.__scopeId = "data-v-')
     )
     expect(result.output[0].code).not.toEqual(
-      expect.stringContaining('.green {\n  color: red;\n}')
+      expect.stringContaining('.green {\n  color: green;\n}')
     )
     expect(result.output[0].code).toEqual(
       expect.stringContaining('.green[data-v-')