From 567d981ee28188a78731b4c45aedaa60b22a03bd 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 7536b1389..987e7a357 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 f31fd3ebf..1ba1307bb 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 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;
--
GitLab