From 45c1421761d495c73e63d7886e2065e4fe858cb0 Mon Sep 17 00:00:00 2001 From: arianon Date: Tue, 1 May 2018 16:38:49 -0400 Subject: [PATCH 1/2] Update getCSSModuleLocalIdent to support Sass --- packages/react-dev-utils/getCSSModuleLocalIdent.js | 6 ++++-- .../fixtures/kitchensink/integration/webpack.test.js | 10 ++++++++++ .../src/features/webpack/SassModulesInclusion.js | 8 +++++++- .../src/features/webpack/ScssModulesInclusion.js | 8 +++++++- .../src/features/webpack/assets/index.module.sass | 4 ++++ .../src/features/webpack/assets/index.module.scss | 4 ++++ 6 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.sass create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.scss diff --git a/packages/react-dev-utils/getCSSModuleLocalIdent.js b/packages/react-dev-utils/getCSSModuleLocalIdent.js index d1cd22a4e05..504bb1581e1 100644 --- 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 index dc10c9a1b08..7044d06ff64 100644 --- 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')[0].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')[0].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 index dd832eaea32..7f9837a7981 100644 --- 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 () => ( -

SASS Modules are working!

+
+

SASS Modules are working!

+

+ SASS Modules with index are working! +

+
); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ScssModulesInclusion.js index ef0e2bf4c3c..cd12dce3b21 100644 --- 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 () => ( -

SCSS Modules are working!

+
+

SCSS Modules are working!

+

+ SCSS Modules with index are working! +

+
); 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 new file mode 100644 index 00000000000..01468de4444 --- /dev/null +++ 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 new file mode 100644 index 00000000000..28db83ad4fc --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/index.module.scss @@ -0,0 +1,4 @@ +.scssModulesIndexInclusion { + background: darkblue; + color: lightblue; +} From 952fcbb91e906d70ecb0abd5fa280cb3dc0c0868 Mon Sep 17 00:00:00 2001 From: arianon Date: Tue, 1 May 2018 17:32:01 -0400 Subject: [PATCH 2/2] Fix Sass/SCSS index module tests Also make them more consistent with the non-index variants. --- .../fixtures/kitchensink/integration/webpack.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index 7044d06ff64..c8dd07f0922 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -51,9 +51,9 @@ describe('Integration', () => { /.+scss-styles_scssModulesInclusion.+\{background:.+;color:.+}/ ); expect( - doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match( - /.+assets_scssModulesIndexInclusion__.+\{background:.+;color:.+}/ + /.+assets_scssModulesIndexInclusion.+\{background:.+;color:.+}/ ); }); @@ -74,9 +74,9 @@ describe('Integration', () => { /.+sass-styles_sassModulesInclusion.+\{background:.+;color:.+}/ ); expect( - doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match( - /.+assets_sassModulesIndexInclusion__.+\{background:.+;color:.+}/ + /.+assets_sassModulesIndexInclusion.+\{background:.+;color:.+}/ ); });