diff --git a/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap b/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap index f75beb61ea388..a2803bd43a604 100644 --- a/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap +++ b/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap @@ -16,6 +16,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -34,6 +35,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -53,6 +55,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -66,6 +69,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -79,6 +83,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -92,6 +97,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -147,6 +153,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -190,9 +197,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -211,9 +220,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -233,9 +244,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -249,9 +262,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -265,9 +280,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -281,9 +298,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -340,6 +359,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -353,6 +373,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -366,6 +387,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -379,6 +401,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -435,6 +458,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -448,6 +472,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -486,9 +511,11 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -502,9 +529,11 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -518,9 +547,11 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -534,9 +565,11 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -593,6 +626,7 @@ exports[`gatsby-plugin-postcss Stage: develop / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -606,6 +640,7 @@ exports[`gatsby-plugin-postcss Stage: develop / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -662,6 +697,7 @@ exports[`gatsby-plugin-postcss Stage: develop / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -675,6 +711,7 @@ exports[`gatsby-plugin-postcss Stage: develop / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -713,9 +750,11 @@ exports[`gatsby-plugin-postcss Stage: develop / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -729,9 +768,11 @@ exports[`gatsby-plugin-postcss Stage: develop / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -787,6 +828,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -806,6 +848,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -819,6 +862,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": false, }, }, @@ -832,6 +876,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -845,6 +890,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -900,6 +946,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "postcssOptions": Object {}, "sourceMap": true, }, }, @@ -943,9 +990,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -965,9 +1014,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -981,9 +1032,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -997,9 +1050,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, @@ -1013,9 +1068,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], + "postcssOptions": Object { + "plugins": Array [ + "autoprefixer", + ], + }, "sourceMap": false, }, }, diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index 6d647355fd29f..057912d9bf73e 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -15,22 +15,25 @@ const findCssRules = config => exports.onCreateWebpackConfig = ( { actions, stage, loaders, getConfig }, - { cssLoaderOptions = {}, postCssPlugins, ...postcssOptions } + { cssLoaderOptions = {}, postCssPlugins, ...postcssLoaderOptions } ) => { const isProduction = !stage.includes(`develop`) const isSSR = stage.includes(`html`) const config = getConfig() const cssRules = findCssRules(config) - delete postcssOptions.plugins + if (!postcssLoaderOptions.postcssOptions) { + postcssLoaderOptions.postcssOptions = {} + } + delete postcssLoaderOptions.postcssOptions.plugins if (postCssPlugins) { - postcssOptions.plugins = postCssPlugins + postcssLoaderOptions.postcssOptions.plugins = postCssPlugins } const postcssLoader = { loader: resolve(`postcss-loader`), - options: { sourceMap: !isProduction, ...postcssOptions }, + options: { sourceMap: !isProduction, ...postcssLoaderOptions }, } const postcssRule = { test: CSS_PATTERN,