From cbece9253ed88f6fd1a779aa3c298aabcca8da7b Mon Sep 17 00:00:00 2001 From: Dan Abramov 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 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({ 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/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:.+}/); }); 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;