From 533f38278768ed60742510959e016b44fa6214ea Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 29 Jun 2017 11:39:10 +0100 Subject: [PATCH 1/3] Fix external CSS imports --- packages/react-scripts/config/webpack.config.dev.js | 3 +++ packages/react-scripts/config/webpack.config.prod.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 7536b13892c..987e7a3570c 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -219,6 +219,9 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index f31fd3ebf9f..1ba1307bb3e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -228,6 +228,9 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ From fbdfbf2feffa90289e57b736c8f0bfcd31225a25 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 29 Jun 2017 11:50:54 +0100 Subject: [PATCH 2/3] Add external CSS import to integration test --- .../fixtures/kitchensink/.template.dependencies.json | 1 + .../kitchensink/src/features/webpack/assets/style.css | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index 63ecaf90db8..b8500f804b1 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -6,6 +6,7 @@ "chai": "3.5.0", "jsdom": "9.8.3", "mocha": "3.2.0", + "normalize.css": "7.0.0", "prop-types": "15.5.6", "test-integrity": "1.0.0" } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css index c399d1acada..9502cfaa121 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css @@ -1,3 +1,9 @@ +/* + * Ensure CSS inclusion doesn't regress + * https://github.com/facebookincubator/create-react-app/issues/2677 + */ +@import '~normalize.css/normalize.css'; + #feature-css-inclusion { background: palevioletred; color: papayawhip; From c54b2de5216e3737d133f778e57c90f02e3dafa3 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 29 Jun 2017 12:18:54 +0100 Subject: [PATCH 3/3] Fix assertion --- .../fixtures/kitchensink/integration/webpack.test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index bda69cc61af..e3845e79e42 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -17,6 +17,9 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match(/html\{/); + expect( + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/); });