Fix external CSS imports (#2680)

* Fix external CSS imports

* Add external CSS import to integration test

* Fix assertion

Author: gaearon

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({

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({

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"
   }

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:.+}/);
     });
 

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;