Update getCSSModuleLocalIdent to support Sass (#4391)

* Update getCSSModuleLocalIdent to support Sass

* Fix Sass/SCSS index module tests

Also make them more consistent with the non-index variants.

Author: arianon

packages/react-dev-utils/getCSSModuleLocalIdent.js

@@ -15,8 +15,10 @@ module.exports = function getLocalIdent(
   localName,
   options
 ) {
-  // Use the filename or folder name, based on some uses the index.js / index.module.css project style
-  const fileNameOrFolder = context.resourcePath.endsWith('index.module.css')
+  // Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
+  const fileNameOrFolder = context.resourcePath.match(
+    /index\.module\.(css|scss|sass)$/
+  )
     ? '[folder]'
     : '[name]';
   // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.

packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js

@@ -50,6 +50,11 @@ describe('Integration', () => {
       ).to.match(
         /.+scss-styles_scssModulesInclusion.+\{background:.+;color:.+}/
       );
+      expect(
+        doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '')
+      ).to.match(
+        /.+assets_scssModulesIndexInclusion.+\{background:.+;color:.+}/
+      );
     });
 
     it('sass inclusion', async () => {
@@ -68,6 +73,11 @@ describe('Integration', () => {
       ).to.match(
         /.+sass-styles_sassModulesInclusion.+\{background:.+;color:.+}/
       );
+      expect(
+        doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '')
+      ).to.match(
+        /.+assets_sassModulesIndexInclusion.+\{background:.+;color:.+}/
+      );
     });
 
     it('graphql files inclusion', async () => {

packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.js

@@ -7,7 +7,13 @@
 
 import React from 'react';
 import styles from './assets/sass-styles.module.sass';
+import indexStyles from './assets/index.module.sass';
 
 export default () => (
-  <p className={styles.sassModulesInclusion}>SASS Modules are working!</p>
+  <div>
+    <p className={styles.sassModulesInclusion}>SASS Modules are working!</p>
+    <p className={indexStyles.sassModulesIndexInclusion}>
+      SASS Modules with index are working!
+    </p>
+  </div>
 );

packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js

@@ -7,7 +7,13 @@
 
 import React from 'react';
 import styles from './assets/scss-styles.module.scss';
+import indexStyles from './assets/index.module.scss';
 
 export default () => (
-  <p className={styles.scssModulesInclusion}>SCSS Modules are working!</p>
+  <div>
+    <p className={styles.scssModulesInclusion}>SCSS Modules are working!</p>
+    <p className={indexStyles.scssModulesIndexInclusion}>
+      SCSS Modules with index are working!
+    </p>
+  </div>
 );

packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.sass

@@ -0,0 +1,4 @@
+.sassModulesIndexInclusion
+  background: darkblue
+  color: lightblue
+

packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.scss

@@ -0,0 +1,4 @@
+.scssModulesIndexInclusion {
+  background: darkblue;
+  color: lightblue;
+}