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.
facebook · May 8, 2018 · e5e9f59 · e5e9f59
1 parent 7b2eae1
commit e5e9f59
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 4 deletions.
diff --git a/packages/react-dev-utils/getCSSModuleLocalIdent.js b/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.

diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/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 () => {

diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SassModulesInclusion.js b/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>
 );
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js b/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>
 );
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.sass b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.sass
@@ -0,0 +1,4 @@
+.sassModulesIndexInclusion
+  background: darkblue
+  color: lightblue
+
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.scss b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.scss
@@ -0,0 +1,4 @@
+.scssModulesIndexInclusion {
+  background: darkblue;
+  color: lightblue;
+}