chore: update css module example to correctly handle <styles module> …

…related options (#356) Co-authored-by: Rahul Kadyan <[email protected]>
vuejs · Oct 22, 2020 · 09c41b7 · 09c41b7
1 parent ce25256
commit 09c41b7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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-')