From 761fe6f2a7b746a515aeec28b4c24449b4a7f0e6 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 29 Jun 2017 12:59:49 +0100
Subject: [PATCH] Fix external CSS imports (#2680)

* Fix external CSS imports

* Add external CSS import to integration test

* Fix assertion
---
 packages/react-scripts/config/webpack.config.dev.js         | 3 +++
 packages/react-scripts/config/webpack.config.prod.js        | 3 +++
 .../fixtures/kitchensink/.template.dependencies.json        | 1 +
 .../fixtures/kitchensink/integration/webpack.test.js        | 3 +++
 .../kitchensink/src/features/webpack/assets/style.css       | 6 ++++++
 5 files changed, 16 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 2e5026678..128527dc2 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -207,6 +207,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 6c1d0c4b4..61ccc77de 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -211,6 +211,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/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json
index 63ecaf90d..b8500f804 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/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index bda69cc61..e3845e79e 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:.+}/);
     });
 
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 c399d1aca..9502cfaa1 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;