fix: CSS Modules detection for preprocessors (vitejs#463)

jlewin · Jul 2, 2020 · a26d61b · a26d61b
1 parent b42c5ed
commit a26d61b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 3 deletions.
diff --git a/playground/css/TestCssModules.vue b/playground/css/TestCssModules.vue
@@ -6,13 +6,17 @@
   <div class="css-modules-import" :class="imported.turquoise">
     CSS modules import - this should be orange
   </div>
+  <div class="scss-modules-import" :class="importedScss.magenta">
+    SCSS modules import - this should be magenta
+  </div>
 </template>
 
 <script>
 import imported from './testCssModules.module.css'
+import importedScss from './testScssModules.module.scss';
 
 export default {
-  data: () => ({ imported })
+  data: () => ({ imported, importedScss })
 }
 </script>
 

diff --git a/playground/css/testScssModules.module.scss b/playground/css/testScssModules.module.scss
@@ -0,0 +1,4 @@
+.magenta {
+    color: rgb(255, 0, 255);
+  }
+
diff --git a/src/node/build/buildPluginCss.ts b/src/node/build/buildPluginCss.ts
@@ -8,7 +8,8 @@ import {
   compileCss,
   cssPreprocessLangRE,
   rewriteCssUrls,
-  isCSSRequest
+  isCSSRequest,
+  cssModuleRE
 } from '../utils/cssUtils'
 import {
   SFCStyleCompileResults,
@@ -60,7 +61,7 @@ export const createBuildCssPlugin = ({
                 source: css,
                 filename: id,
                 scoped: false,
-                modules: id.endsWith('.module.css'),
+                modules: cssModuleRE.test(id),
                 preprocessLang: id.replace(
                   cssPreprocessLangRE,
                   '$2'

diff --git a/src/node/utils/cssUtils.ts b/src/node/utils/cssUtils.ts
@@ -12,6 +12,7 @@ import {
 
 export const urlRE = /url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
 export const cssPreprocessLangRE = /(.+)\.(less|sass|scss|styl|stylus|postcss)$/
+export const cssModuleRE = /(.+)\.module\.(less|sass|scss|styl|stylus|postcss|css)$/
 
 export const isCSSRequest = (file: string) =>
   file.endsWith('.css') || cssPreprocessLangRE.test(file)

diff --git a/test/test.js b/test/test.js
@@ -435,6 +435,21 @@ describe('vite', () => {
       }
     })
 
+    test('import *.module.scss', async () => {
+      const el = await page.$('.scss-modules-import')
+      expect(await getComputedColor(el)).toBe('rgb(255, 0, 255)')
+      if (!isBuild) {
+        await updateFile('css/testScssModules.module.scss', (content) =>
+          content.replace('rgb(255, 0, 255)', 'rgb(0, 0, 2)')
+        )
+        // css module results in component reload so must use fresh selector
+        await expectByPolling(
+          () => getComputedColor('.scss-modules-import'),
+          'rgb(0, 0, 2)'
+        )
+      }
+    })
+
     test('pre-processors', async () => {
       expect(await getText('.pug')).toMatch('template lang="pug"')
       expect(await getComputedColor('.pug')).toBe('rgb(255, 0, 255)')