Fix external CSS imports (facebook#2680)

* Fix external CSS imports * Add external CSS import to integration test * Fix assertion
wmonk · Aug 7, 2017 · 761fe6f · 761fe6f
1 parent a720aa0
commit 761fe6f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;