From 6b7091e022c7d77a479295299f689929e3545df3 Mon Sep 17 00:00:00 2001 From: Leonhardt Koepsell Date: Sat, 3 Feb 2018 10:07:25 -0600 Subject: [PATCH 1/3] Cleanup CSS Modules localIdentName (dev) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Simplify localIdentName by removing path à la: https://github.com/facebook/create-react-app/pull/2285#discussion_r162094193 --- packages/react-scripts/config/webpack.config.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 398b8bf53b7..5a14d75cbf5 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -269,7 +269,7 @@ module.exports = { options: { importLoaders: 1, modules: true, - localIdentName: '[path]__[name]___[local]', + localIdentName: '[name]-[local]', }, }, { From 8731e2e1ebb9847727ef518b8bb890ed97469ce6 Mon Sep 17 00:00:00 2001 From: Leonhardt Koepsell Date: Sat, 3 Feb 2018 10:10:16 -0600 Subject: [PATCH 2/3] Cleanup CSS Modules localIdentName (prod) Only use hashes for CSS Modules classes in production. When deterministic classes or IDs need to exist in production for testing or other automated tools additional static classes can be added, decoupled from styling classes. https://github.com/facebook/create-react-app/pull/2285#discussion_r165817143 --- packages/react-scripts/config/webpack.config.prod.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 7b73dd787cd..2c3d73eaf21 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -306,7 +306,7 @@ module.exports = { minimize: true, sourceMap: shouldUseSourceMap, modules: true, - localIdentName: '[path]__[name]___[local]', + localIdentName: '[hash:base64:5]', }, }, { From cafff9da7807ebe4d2071c035ca16e927c28784e Mon Sep 17 00:00:00 2001 From: Leonhardt Koepsell Date: Sat, 3 Feb 2018 11:40:23 -0600 Subject: [PATCH 3/3] Update webpack integration test for CSS Modules localIdentName changes --- .../fixtures/kitchensink/integration/webpack.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index bba497c49f3..90dbc46af89 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -26,9 +26,7 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') - ).to.match( - /.+__style-module___cssModulesInclusion+\{background:.+;color:.+}/ - ); + ).to.match(/\.style-module-cssModulesInclusion{background:.+;color:.+}/); }); it('graphql files inclusion', async () => {