Fixing a bug where @import CSS files were not put through the autoprefixer

Author: weaverryan

fixtures/css/imports_autoprefixer.css

@@ -0,0 +1 @@
+@import "autoprefixer_test.css";

lib/loaders/css.js

@@ -18,17 +18,24 @@ const loaderFeatures = require('../loader-features');
  */
 module.exports = {
     getLoaders(webpackConfig, skipPostCssLoader) {
+        const usePostCssLoader = webpackConfig.usePostCssLoader && !skipPostCssLoader;
+
         const cssLoaders = [
             {
                 loader: 'css-loader',
                 options: {
                     minimize: webpackConfig.isProduction(),
-                    sourceMap: webpackConfig.useSourceMaps
+                    sourceMap: webpackConfig.useSourceMaps,
+                    // when using @import, how many loaders *before* css-loader should
+                    // be applied to those imports? This defaults to 0. When postcss-loader
+                    // is used, we set it to 1, so that postcss-loader is applied
+                    // to @import resources.
+                    importLoaders: usePostCssLoader ? 1 : 0
                 }
             },
         ];
 
-        if (webpackConfig.usePostCssLoader && !skipPostCssLoader) {
+        if (usePostCssLoader) {
             loaderFeatures.ensureLoaderPackagesExist('postcss');
 
             cssLoaders.push({

test/functional.js

@@ -483,7 +483,9 @@ module.exports = {
 
             const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
             config.setPublicPath('/build');
-            config.addStyleEntry('styles', ['./css/autoprefixer_test.css']);
+            // load a file that @import's another file, so that we can
+            // test that @import resources are parsed through postcss
+            config.addStyleEntry('styles', ['./css/imports_autoprefixer.css']);
             config.enablePostCssLoader();
 
             testSetup.runWebpack(config, (webpackAssert) => {