From 4009a4b2c5f3d7091c815966fbdddac6d71076d0 Mon Sep 17 00:00:00 2001 From: Marat Dreizin Date: Sat, 10 Aug 2019 22:54:03 +0300 Subject: [PATCH 1/3] fix(gatsby-plugin-postcss): Fix regression introduced by #10861 --- .../gatsby-plugin-postcss/src/gatsby-node.js | 34 +++++-------------- 1 file changed, 8 insertions(+), 26 deletions(-) diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index d28c29729655e..6d647355fd29f 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -3,22 +3,6 @@ import resolve from "./resolve" const CSS_PATTERN = /\.css$/ const MODULE_CSS_PATTERN = /\.module\.css$/ -const getOptions = pluginOptions => { - const options = { ...pluginOptions } - - delete options.plugins - - const postcssPlugins = options.postCssPlugins - - if (postcssPlugins) { - options.plugins = postcssPlugins - } - - delete options.postCssPlugins - - return options -} - const isCssRules = rule => rule.test && (rule.test.toString() === CSS_PATTERN.toString() || @@ -31,20 +15,18 @@ const findCssRules = config => exports.onCreateWebpackConfig = ( { actions, stage, loaders, getConfig }, - pluginOptions + { cssLoaderOptions = {}, postCssPlugins, ...postcssOptions } ) => { const isProduction = !stage.includes(`develop`) const isSSR = stage.includes(`html`) const config = getConfig() const cssRules = findCssRules(config) - const postcssOptions = getOptions(pluginOptions) - const generateCssLoaderOptions = options => - Object.assign( - { importLoaders: 1 }, - options, - pluginOptions.cssLoaderOptions || {} - ) + delete postcssOptions.plugins + + if (postCssPlugins) { + postcssOptions.plugins = postCssPlugins + } const postcssLoader = { loader: resolve(`postcss-loader`), @@ -54,12 +36,12 @@ exports.onCreateWebpackConfig = ( test: CSS_PATTERN, use: isSSR ? [loaders.null()] - : [loaders.css(generateCssLoaderOptions()), postcssLoader], + : [loaders.css({ ...cssLoaderOptions, importLoaders: 1 }), postcssLoader], } const postcssRuleModules = { test: MODULE_CSS_PATTERN, use: [ - loaders.css(generateCssLoaderOptions({ modules: true })), + loaders.css({ ...cssLoaderOptions, importLoaders: 1, modules: true }), postcssLoader, ], } From 6f6e954f414a5068f24045cbe025447d1c18a7af Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Wed, 14 Aug 2019 00:31:20 +0200 Subject: [PATCH 2/3] add some tests for scenario when cssLoaderOptions is used --- .../__snapshots__/gatsby-node.test.js.snap | 1002 ++++------------- .../src/__tests__/gatsby-node.test.js | 29 + 2 files changed, 234 insertions(+), 797 deletions(-) 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 7698b42bb67e8..d50b1fd682316 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 @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` +exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` [MockFunction] { "calls": Array [ Array [ @@ -12,12 +12,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "sourceMap": true, + "sourceMap": false, }, }, ], @@ -25,8 +24,13 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.css\\$/, "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "null-loader", + ], + }, + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -35,23 +39,17 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` }, ], }, - ], - }, - ], - }, - }, - ], - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "null-loader", + ], + }, Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -64,7 +62,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -73,22 +71,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` }, ], }, - ], - }, - ], - }, - }, - ], - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "miniCssExtract", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -100,15 +87,53 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.css\\$/, "use": Array [ - "null-loader", + "miniCssExtract", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "sourceMap": true, + }, + }, + ], + }, + Object { + "loaders": Array [ + "css-loader", + ], + "test": /\\\\\\.css\\$/, + }, + Object { + "loaders": Array [ + "css-loader", ], + "test": /\\\\\\.module\\\\\\.css\\$/, }, ], }, + Object { + "test": /\\\\\\.js/, + "use": Array [ + "babel-loader", + ], + }, ], }, }, ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` +[MockFunction] { + "calls": Array [ Array [ Object { "module": Object { @@ -145,18 +170,6 @@ exports[`gatsby-plugin-postcss Stage: build-html / No options 1`] = ` "type": "return", "value": undefined, }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, ], } `; @@ -300,65 +313,33 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` }, }, ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` +[MockFunction] { + "calls": Array [ Array [ Object { "module": Object { "rules": Array [ Object { "oneOf": Array [ - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "null-loader", - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "null-loader", - ], - }, Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], "sourceMap": false, }, }, @@ -368,13 +349,10 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], "sourceMap": false, }, }, @@ -384,14 +362,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -400,14 +375,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -436,6 +408,19 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` }, }, ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: build-javascript / No options 1`] = ` +[MockFunction] { + "calls": Array [ Array [ Object { "module": Object { @@ -445,13 +430,11 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ + "miniCssExtract", "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], "sourceMap": false, }, }, @@ -460,30 +443,41 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "test": /\\\\\\.css\\$/, "use": Array [ - "null-loader", - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "miniCssExtract", + "css-loader({\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], "sourceMap": false, }, }, ], }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "null-loader", - ], - }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ @@ -572,6 +566,19 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` }, }, ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: develop / Css options 1`] = ` +[MockFunction] { + "calls": Array [ Array [ Object { "module": Object { @@ -581,525 +588,12 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "miniCssExtract", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "null-loader", - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "null-loader", - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.css\\$/, - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.module\\\\\\.css\\$/, - }, - ], - }, - Object { - "test": /\\\\\\.js/, - "use": Array [ - "babel-loader", - ], - }, - ], - }, - }, - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], -} -`; - -exports[`gatsby-plugin-postcss Stage: build-javascript / No options 1`] = ` -[MockFunction] { - "calls": Array [ - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "sourceMap": true, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "sourceMap": true, - }, - }, - ], - }, - ], - }, - ], - }, - }, - ], - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "sourceMap": false, - }, - }, - ], - }, - ], - }, - ], - }, - }, - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], -} -`; - -exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` -[MockFunction] { - "calls": Array [ - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.css\\$/, - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.module\\\\\\.css\\$/, - }, - ], - }, - Object { - "test": /\\\\\\.js/, - "use": Array [ - "babel-loader", - ], - }, - ], - }, - }, - ], - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.css\\$/, - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.module\\\\\\.css\\$/, - }, - ], - }, - Object { - "test": /\\\\\\.js/, - "use": Array [ - "babel-loader", - ], - }, - ], - }, - }, - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, - ], -} -`; - -exports[`gatsby-plugin-postcss Stage: develop / No options 1`] = ` -[MockFunction] { - "calls": Array [ - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "sourceMap": true, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "sourceMap": true, - }, - }, - ], - }, - ], - }, - ], - }, - }, - ], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - ], -} -`; - -exports[`gatsby-plugin-postcss Stage: develop / PostCss options 1`] = ` -[MockFunction] { - "calls": Array [ - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -1108,14 +602,11 @@ exports[`gatsby-plugin-postcss Stage: develop / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -1154,7 +645,7 @@ exports[`gatsby-plugin-postcss Stage: develop / PostCss options 1`] = ` } `; -exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` +exports[`gatsby-plugin-postcss Stage: develop / No options 1`] = ` [MockFunction] { "calls": Array [ Array [ @@ -1195,6 +686,19 @@ exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` }, }, ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: develop / PostCss options 1`] = ` +[MockFunction] { + "calls": Array [ Array [ Object { "module": Object { @@ -1209,6 +713,9 @@ exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "plugins": Array [ + "autoprefixer", + ], "sourceMap": false, }, }, @@ -1222,43 +729,34 @@ exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { + "plugins": Array [ + "autoprefixer", + ], "sourceMap": false, }, }, ], }, - ], - }, - ], - }, - }, - ], - Array [ - Object { - "module": Object { - "rules": Array [ - Object { - "oneOf": Array [ Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "sourceMap": true, - }, - }, + "loaders": Array [ + "css-loader", ], + "test": /\\\\\\.css\\$/, }, Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "null-loader", + "loaders": Array [ + "css-loader", ], + "test": /\\\\\\.module\\\\\\.css\\$/, }, ], }, + Object { + "test": /\\\\\\.js/, + "use": Array [ + "babel-loader", + ], + }, ], }, }, @@ -1269,19 +767,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` "type": "return", "value": undefined, }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, ], } `; -exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` +exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` [MockFunction] { "calls": Array [ Array [ @@ -1293,14 +783,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -1315,13 +802,10 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], "sourceMap": false, }, }, @@ -1331,13 +815,10 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], "sourceMap": false, }, }, @@ -1347,14 +828,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -1363,14 +841,11 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -1399,6 +874,19 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` }, }, ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: develop-html / No options 1`] = ` +[MockFunction] { + "calls": Array [ Array [ Object { "module": Object { @@ -1412,10 +900,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` Object { "loader": "/resolved/path/postcss-loader", "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, + "sourceMap": true, }, }, ], @@ -1426,94 +911,25 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "null-loader", ], }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.module\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1,\\"modules\\":true})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "test": /\\\\\\.css\\$/, - "use": Array [ - "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", - Object { - "loader": "/resolved/path/postcss-loader", - "options": Object { - "plugins": Array [ - "autoprefixer", - ], - "sourceMap": false, - }, - }, - ], - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.css\\$/, - }, - Object { - "loaders": Array [ - "css-loader", - ], - "test": /\\\\\\.module\\\\\\.css\\$/, - }, - ], - }, - Object { - "test": /\\\\\\.js/, - "use": Array [ - "babel-loader", ], }, ], }, }, ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` +[MockFunction] { + "calls": Array [ Array [ Object { "module": Object { @@ -1635,14 +1051,6 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "type": "return", "value": undefined, }, - Object { - "type": "return", - "value": undefined, - }, - Object { - "type": "return", - "value": undefined, - }, ], } `; diff --git a/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js b/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js index f5effbc3875c2..512bb1cd66f43 100644 --- a/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js +++ b/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js @@ -19,6 +19,7 @@ describe(`gatsby-plugin-postcss`, () => { options: { "No options": {}, "PostCss options": { postCssPlugins: [`autoprefixer`], sourceMap: false }, + "Css options": { cssLoaderOptions: { camelCase: `true` } }, }, configs: { "No options": jest.fn().mockReturnValue({ @@ -53,13 +54,41 @@ describe(`gatsby-plugin-postcss`, () => { ], }, }), + "Css options": jest.fn().mockReturnValue({ + module: { + rules: [ + { + oneOf: [ + { + test: /\.css$/, + loaders: [`css-loader`], + }, + { + test: /\.module\.css$/, + loaders: [`css-loader`], + }, + ], + }, + { + test: /\.js/, + use: [`babel-loader`], + }, + ], + }, + }), }, actions: { "No options": actions.setWebpackConfig, "PostCss options": actions.replaceWebpackConfig, + "Css options": actions.replaceWebpackConfig, }, } + beforeEach(() => { + actions.setWebpackConfig.mockClear() + actions.replaceWebpackConfig.mockClear() + }) + tests.stages.forEach(stage => { for (const label in tests.options) { const options = tests.options[label] From 77fa30abdecc541d6e0570477135efb9e14dc908 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Wed, 14 Aug 2019 01:29:50 +0200 Subject: [PATCH 3/3] typo fix --- .../__snapshots__/gatsby-node.test.js.snap | 34 +++++++++---------- .../src/__tests__/gatsby-node.test.js | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) 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 d50b1fd682316..f75beb61ea388 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 @@ -12,7 +12,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -30,7 +30,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -49,7 +49,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -62,7 +62,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -75,7 +75,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -88,7 +88,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / Css options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -336,7 +336,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -349,7 +349,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -362,7 +362,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -375,7 +375,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / Css options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -589,7 +589,7 @@ exports[`gatsby-plugin-postcss Stage: develop / Css options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -602,7 +602,7 @@ exports[`gatsby-plugin-postcss Stage: develop / Css options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -783,7 +783,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -802,7 +802,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -815,7 +815,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -828,7 +828,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` "test": /\\\\\\.module\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1,\\"modules\\":true})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1,\\"modules\\":true})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -841,7 +841,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / Css options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"camelCase\\":\\"true\\",\\"importLoaders\\":1})", + "css-loader({\\"camelCase\\":true,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { diff --git a/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js b/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js index 512bb1cd66f43..27266c936866f 100644 --- a/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js +++ b/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js @@ -19,7 +19,7 @@ describe(`gatsby-plugin-postcss`, () => { options: { "No options": {}, "PostCss options": { postCssPlugins: [`autoprefixer`], sourceMap: false }, - "Css options": { cssLoaderOptions: { camelCase: `true` } }, + "Css options": { cssLoaderOptions: { camelCase: true } }, }, configs: { "No options": jest.fn().mockReturnValue({