fix: allow parsing css from node_modules by default #631 (#632)

react-cosmos · Mar 28, 2018 · 0eff793 · 0eff793
1 parent 58bcd54
commit 0eff793
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/react-cosmos/src/server/__tests__/default-webpack-config/style-css-loader.js b/packages/react-cosmos/src/server/__tests__/default-webpack-config/style-css-loader.js
@@ -18,11 +18,21 @@ jest.mock('import-from', () => ({
   }
 }));
 
-it('includes style-loader + css-loader', () => {
+it('parses personal css with style-loader + css-loader', () => {
   const config = getDefaultWebpackConfig('/foo/path');
   expect(config.module.rules).toContainEqual({
     test: /\.css$/,
     loader: '/style/path!/css/path',
     exclude: /node_modules/
   });
 });
+
+it('parses 3rd party css with style-loader + css-loader', () => {
+  const config = getDefaultWebpackConfig('/foo/path');
+
+  expect(config.module.rules).toContainEqual({
+    test: /\.css$/,
+    loader: '/style/path!/css/path',
+    include: /node_modules/
+  });
+});
diff --git a/packages/react-cosmos/src/server/__tests__/default-webpack-config/style-loader.js b/packages/react-cosmos/src/server/__tests__/default-webpack-config/style-loader.js
@@ -17,11 +17,21 @@ jest.mock('import-from', () => ({
   }
 }));
 
-it('includes style-loader', () => {
+it('parses personal css with style-loader', () => {
   const config = getDefaultWebpackConfig('/foo/path');
   expect(config.module.rules).toContainEqual({
     test: /\.css$/,
     loader: '/style/path',
     exclude: /node_modules/
   });
 });
+
+it('parses 3rd party css with style-loader', () => {
+  const config = getDefaultWebpackConfig('/foo/path');
+
+  expect(config.module.rules).toContainEqual({
+    test: /\.css$/,
+    loader: '/style/path',
+    include: /node_modules/
+  });
+});
diff --git a/packages/react-cosmos/src/server/default-webpack-config.js b/packages/react-cosmos/src/server/default-webpack-config.js
@@ -29,6 +29,15 @@ export default function getDefaultWebpackConfig(rootPath) {
         : styleLoaderPath,
       exclude: /node_modules/
     });
+
+    // Preprocess 3rd party .css files located in node_modules
+    rules.push({
+      test: /\.css$/,
+      loader: cssLoaderPath
+        ? `${styleLoaderPath}!${cssLoaderPath}`
+        : styleLoaderPath,
+      include: /node_modules/
+    });
   }
 
   if (jsonLoaderPath) {