diff --git a/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap index 321e1f1d064ed..f691ab88a314c 100644 --- a/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-plugin-less/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -12,7 +12,7 @@ exports[`gatsby-plugin-less Stage: build-html / Less options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -61,7 +61,7 @@ exports[`gatsby-plugin-less Stage: build-html / Less options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -109,7 +109,7 @@ exports[`gatsby-plugin-less Stage: build-html / Loader options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -154,7 +154,7 @@ exports[`gatsby-plugin-less Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -198,7 +198,7 @@ exports[`gatsby-plugin-less Stage: build-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/less-loader", @@ -242,7 +242,51 @@ exports[`gatsby-plugin-less Stage: build-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"camelCase\\":false,\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", + "postcss({})", + Object { + "loader": "/resolved/path/less-loader", + "options": Object { + "lessOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.less\\$/, + "use": Array [ + "null", + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-less Stage: build-html / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.less\\$/, + "use": Array [ + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -287,7 +331,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / Less options #1 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -306,7 +350,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / Less options #1 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -350,7 +394,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / Less options #2 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -368,7 +412,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / Less options #2 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -411,7 +455,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / Loader options #1 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -426,7 +470,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / Loader options #1 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -466,7 +510,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -480,7 +524,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -519,7 +563,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / PostCss plugins 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/less-loader", @@ -533,7 +577,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / PostCss plugins 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/less-loader", @@ -572,7 +616,60 @@ exports[`gatsby-plugin-less Stage: build-javascript / css-loader options 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"camelCase\\":false,\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", + "postcss({})", + Object { + "loader": "/resolved/path/less-loader", + "options": Object { + "lessOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.less\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})", + "postcss({})", + Object { + "loader": "/resolved/path/less-loader", + "options": Object { + "lessOptions": Object {}, + }, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-less Stage: build-javascript / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.less\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -586,7 +683,7 @@ exports[`gatsby-plugin-less Stage: build-javascript / css-loader options 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"camelCase\\":false,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -625,7 +722,7 @@ exports[`gatsby-plugin-less Stage: develop / Less options #1 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -644,7 +741,7 @@ exports[`gatsby-plugin-less Stage: develop / Less options #1 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -688,7 +785,7 @@ exports[`gatsby-plugin-less Stage: develop / Less options #2 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -706,7 +803,7 @@ exports[`gatsby-plugin-less Stage: develop / Less options #2 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -749,7 +846,7 @@ exports[`gatsby-plugin-less Stage: develop / Loader options #1 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -764,7 +861,7 @@ exports[`gatsby-plugin-less Stage: develop / Loader options #1 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -804,7 +901,7 @@ exports[`gatsby-plugin-less Stage: develop / No options 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -818,7 +915,7 @@ exports[`gatsby-plugin-less Stage: develop / No options 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -857,7 +954,7 @@ exports[`gatsby-plugin-less Stage: develop / PostCss plugins 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/less-loader", @@ -871,7 +968,7 @@ exports[`gatsby-plugin-less Stage: develop / PostCss plugins 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/less-loader", @@ -910,7 +1007,7 @@ exports[`gatsby-plugin-less Stage: develop / css-loader options 1`] = ` "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"camelCase\\":false,\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -924,7 +1021,60 @@ exports[`gatsby-plugin-less Stage: develop / css-loader options 1`] = ` "test": /\\\\\\.less\\$/, "use": Array [ "miniCssExtract", - "css({\\"camelCase\\":false,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})", + "postcss({})", + Object { + "loader": "/resolved/path/less-loader", + "options": Object { + "lessOptions": Object {}, + }, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-less Stage: develop / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.less\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", + "postcss({})", + Object { + "loader": "/resolved/path/less-loader", + "options": Object { + "lessOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.less\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -962,7 +1112,7 @@ exports[`gatsby-plugin-less Stage: develop-html / Less options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -1011,7 +1161,7 @@ exports[`gatsby-plugin-less Stage: develop-html / Less options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -1059,7 +1209,7 @@ exports[`gatsby-plugin-less Stage: develop-html / Loader options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -1104,7 +1254,7 @@ exports[`gatsby-plugin-less Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/less-loader", @@ -1148,7 +1298,7 @@ exports[`gatsby-plugin-less Stage: develop-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/less-loader", @@ -1192,7 +1342,51 @@ exports[`gatsby-plugin-less Stage: develop-html / css-loader options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.less\\$/, "use": Array [ - "css({\\"camelCase\\":false,\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":true})", + "postcss({})", + Object { + "loader": "/resolved/path/less-loader", + "options": Object { + "lessOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.less\\$/, + "use": Array [ + "null", + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-less Stage: develop-html / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.less\\$/, + "use": Array [ + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", "postcss({})", Object { "loader": "/resolved/path/less-loader", diff --git a/packages/gatsby-plugin-less/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-less/src/__tests__/gatsby-node.js index 196a6ee3fbbab..59eb41db91c23 100644 --- a/packages/gatsby-plugin-less/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-less/src/__tests__/gatsby-node.js @@ -49,6 +49,14 @@ describe(`gatsby-plugin-less`, () => { camelCase: false, }, }, + "css-loader use commonjs": { + cssLoaderOptions: { + esModule: false, + modules: { + namedExport: false, + }, + }, + }, }, } diff --git a/packages/gatsby-plugin-less/src/gatsby-node.js b/packages/gatsby-plugin-less/src/gatsby-node.js index fe09faaceec73..0845a60649f21 100644 --- a/packages/gatsby-plugin-less/src/gatsby-node.js +++ b/packages/gatsby-plugin-less/src/gatsby-node.js @@ -23,7 +23,11 @@ exports.onCreateWebpackConfig = ( ? [loaders.null()] : [ loaders.miniCssExtract(), - loaders.css({ ...cssLoaderOptions, importLoaders: 2 }), + loaders.css({ + importLoaders: 2, + ...cssLoaderOptions, + modules: false, + }), loaders.postcss({ plugins: postCssPlugins }), lessLoader, ], @@ -31,8 +35,17 @@ exports.onCreateWebpackConfig = ( const lessRuleModules = { test: /\.module\.less$/, use: [ - !isSSR && loaders.miniCssExtract({ modules: true }), - loaders.css({ ...cssLoaderOptions, modules: true, importLoaders: 2 }), + !isSSR && + loaders.miniCssExtract({ + modules: { + namedExport: cssLoaderOptions.modules?.namedExport ?? true, + }, + }), + loaders.css({ + importLoaders: 2, + ...cssLoaderOptions, + modules: cssLoaderOptions.modules ?? true, + }), loaders.postcss({ plugins: postCssPlugins }), lessLoader, ].filter(Boolean), diff --git a/packages/gatsby-plugin-postcss/README.md b/packages/gatsby-plugin-postcss/README.md index 94aebc95fda4e..b9bcba4df336b 100644 --- a/packages/gatsby-plugin-postcss/README.md +++ b/packages/gatsby-plugin-postcss/README.md @@ -1,6 +1,6 @@ # gatsby-plugin-postcss -Gatsby plugin to handle PostCSS. +Provides drop-in support for PostCSS ## Install @@ -11,13 +11,28 @@ Gatsby plugin to handle PostCSS. 1. Include the plugin in your `gatsby-config.js` file. 2. Write your stylesheets using PostCSS (`.css` files) and require or import them as normal. -```javascript -// in gatsby-config.js -plugins: [`gatsby-plugin-postcss`], +```javascript:title=gatsby-config.js +plugins: [`gatsby-plugin-postcss`] ``` If you need to pass options to PostCSS use the plugins options; see [`postcss-loader`](https://github.com/postcss/postcss-loader) for all available options. +If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader). +**Note:** Gatsby is using `css-loader@^5.0.0`. + +```javascript:title=gatsby-config.js +plugins: [ + { + resolve: `gatsby-plugin-postcss`, + options: { + cssLoaderOptions: { + camelCase: false, + }, + }, + }, +] +``` + ### With CSS Modules Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.css` -> `app.module.css`. @@ -27,8 +42,7 @@ Any file with the `module` extension will use CSS modules. CSS modules are impor If you would prefer to add additional postprocessing to your PostCSS output you can specify plugins in the plugin options: -```javascript -// in gatsby-config.js +```javascript:title=gatsby-config.js plugins: [ { resolve: `gatsby-plugin-postcss`, @@ -41,8 +55,7 @@ plugins: [ Alternatively, you can use `postcss.config.js` to specify your particular PostCSS configuration: -```javascript -// in postcss.config.js +```javascript:title=postcss.config.js const postcssPresetEnv = require(`postcss-preset-env`) module.exports = () => ({ @@ -58,8 +71,7 @@ If you need to override the default options passed into [`css-loader`](https://g In this example `css-loader` is configured to output classnames as is, instead of converting them to camel case. Named exports must be disabled for this to work, and so you have to import CSS using `import styles from './file.css` instead of `import * as styles from './file.module.css'` -```javascript -// in gatsby-config.js +```javascript:title=gatsby-config.js plugins: [ { resolve: `gatsby-plugin-postcss`, diff --git a/packages/gatsby-plugin-postcss/src/__tests__/.eslintrc b/packages/gatsby-plugin-postcss/src/__tests__/.eslintrc deleted file mode 100644 index 55f121d152d4f..0000000000000 --- a/packages/gatsby-plugin-postcss/src/__tests__/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "env": { - "jest": true - } -} 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.js.snap similarity index 69% rename from packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap rename to packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.js.snap index ca037758a3bab..a65eabba2b3ed 100644 --- a/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.test.js.snap +++ b/packages/gatsby-plugin-postcss/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -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,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -88,7 +88,138 @@ 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,\\"modules\\":false})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + 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 / Css options commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "null-loader", + ], + }, + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "null-loader", + ], + }, + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":false,\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":false,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -251,7 +382,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -287,7 +418,7 @@ exports[`gatsby-plugin-postcss Stage: build-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -361,7 +492,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,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -387,7 +518,102 @@ 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,\\"modules\\":false})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + 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-javascript / Css options commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":false,\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":false,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -456,7 +682,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -512,7 +738,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -548,7 +774,7 @@ exports[`gatsby-plugin-postcss Stage: build-javascript / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -622,7 +848,76 @@ 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,\\"modules\\":false})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + 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 / Css options commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":false,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -691,7 +986,7 @@ exports[`gatsby-plugin-postcss Stage: develop / No options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -747,7 +1042,7 @@ exports[`gatsby-plugin-postcss Stage: develop / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -839,7 +1134,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,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -865,7 +1160,120 @@ 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,\\"modules\\":false})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + 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 / Css options commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "null-loader", + ], + }, + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":false,\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.module\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + Object { + "loader": "/resolved/path/postcss-loader", + "options": Object { + "postcssOptions": Object {}, + }, + }, + ], + }, + Object { + "test": /\\\\\\.css\\$/, + "use": Array [ + "miniCssExtract", + "css-loader({\\"esModule\\":false,\\"modules\\":false,\\"importLoaders\\":1})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -1005,7 +1413,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", Object { "loader": "/resolved/path/postcss-loader", "options": Object { @@ -1041,7 +1449,7 @@ exports[`gatsby-plugin-postcss Stage: develop-html / PostCss options 1`] = ` "test": /\\\\\\.css\\$/, "use": Array [ "miniCssExtract", - "css-loader({\\"importLoaders\\":1})", + "css-loader({\\"importLoaders\\":1,\\"modules\\":false})", 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.js similarity index 77% rename from packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js rename to packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.js index 27266c936866f..1d6ea67d1c0f9 100644 --- a/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.test.js +++ b/packages/gatsby-plugin-postcss/src/__tests__/gatsby-node.js @@ -20,6 +20,14 @@ describe(`gatsby-plugin-postcss`, () => { "No options": {}, "PostCss options": { postCssPlugins: [`autoprefixer`], sourceMap: false }, "Css options": { cssLoaderOptions: { camelCase: true } }, + "Css options commonjs": { + cssLoaderOptions: { + esModule: false, + modules: { + namedExport: false, + }, + }, + }, }, configs: { "No options": jest.fn().mockReturnValue({ @@ -76,11 +84,34 @@ describe(`gatsby-plugin-postcss`, () => { ], }, }), + "Css options commonjs": 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, + "Css options commonjs": actions.replaceWebpackConfig, }, } diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index 6a2cfd2d0cffa..98ef0bfbb7a58 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -40,15 +40,28 @@ exports.onCreateWebpackConfig = ( ? [loaders.null()] : [ loaders.miniCssExtract(), - loaders.css({ ...cssLoaderOptions, importLoaders: 1 }), + loaders.css({ + ...cssLoaderOptions, + importLoaders: 1, + modules: false, + }), postcssLoader, ], } const postcssRuleModules = { test: MODULE_CSS_PATTERN, use: [ - !isSSR && loaders.miniCssExtract({ modules: true }), - loaders.css({ ...cssLoaderOptions, importLoaders: 1, modules: true }), + !isSSR && + loaders.miniCssExtract({ + modules: { + namedExport: cssLoaderOptions.modules?.namedExport ?? true, + }, + }), + loaders.css({ + ...cssLoaderOptions, + importLoaders: 1, + modules: cssLoaderOptions.modules ?? true, + }), postcssLoader, ].filter(Boolean), } diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md index eccfd99534296..83ad3d828bc8d 100644 --- a/packages/gatsby-plugin-sass/README.md +++ b/packages/gatsby-plugin-sass/README.md @@ -48,7 +48,7 @@ plugins: [ ] ``` -If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader): +If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader). **Note:** Gatsby is using `css-loader@^5.0.0`. ```javascript:title=gatsby-config.js @@ -85,7 +85,7 @@ plugins: [ ### Sass Precision -Sass defaults to [10 digits of precision](https://github.com/sass/sass/pull/2297). If you want some other level of precision (e.g. if you use Bootstrap), you may configure it as follows: +`sass` intentionally doesn't have support for setting a custom `precision`. `node-sass` defaults to [5 digits of precision](https://github.com/sass/node-sass#precision). If you want some other level of precision (e.g. if you use Bootstrap), you may configure it as follows: #### Bootstrap 4 @@ -96,6 +96,7 @@ plugins: [ { resolve: `gatsby-plugin-sass`, options: { + implementation: require("node-sass"), postCssPlugins: [somePostCssPlugin()], sassOptions: { precision: 6, @@ -114,6 +115,7 @@ plugins: [ { resolve: `gatsby-plugin-sass`, options: { + implementation: require("node-sass"), postCssPlugins: [somePostCssPlugin()], sassOptions: { precision: 8, diff --git a/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap index 14857ffe8e6aa..41deb873c2b55 100644 --- a/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-plugin-sass/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -218,6 +218,58 @@ exports[`gatsby-plugin-sass Stage: build-html / css-loader options 1`] = ` } `; +exports[`gatsby-plugin-sass Stage: build-html / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", + "postcss({})", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + Object { + "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "null", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + exports[`gatsby-plugin-sass Stage: build-html / sass rule modules test options 1`] = ` [MockFunction] { "calls": Array [ @@ -350,7 +402,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -405,7 +457,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / PostCss plugins 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -465,7 +517,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / Sass options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -525,7 +577,62 @@ exports[`gatsby-plugin-sass Stage: build-javascript / css-loader options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"camelCase\\":false})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})", + "postcss({})", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-sass Stage: build-javascript / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", + "postcss({})", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + Object { + "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -580,7 +687,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule modules test opt "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -635,7 +742,7 @@ exports[`gatsby-plugin-sass Stage: build-javascript / sass rule test options 1`] "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -690,7 +797,7 @@ exports[`gatsby-plugin-sass Stage: develop / No options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -745,7 +852,7 @@ exports[`gatsby-plugin-sass Stage: develop / PostCss plugins 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -805,7 +912,7 @@ exports[`gatsby-plugin-sass Stage: develop / Sass options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -865,7 +972,62 @@ exports[`gatsby-plugin-sass Stage: develop / css-loader options 1`] = ` "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2,\\"camelCase\\":false})", + "css({\\"importLoaders\\":2,\\"camelCase\\":false,\\"modules\\":false})", + "postcss({})", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + +exports[`gatsby-plugin-sass Stage: develop / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", + "postcss({})", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + Object { + "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -920,7 +1082,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule modules test options 1`] "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -975,7 +1137,7 @@ exports[`gatsby-plugin-sass Stage: develop / sass rule test options 1`] = ` "test": /\\\\\\.global\\\\\\.s\\(a\\|c\\)ss\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/node_modules/sass-loader/dist/cjs.js", @@ -1220,6 +1382,58 @@ exports[`gatsby-plugin-sass Stage: develop-html / css-loader options 1`] = ` } `; +exports[`gatsby-plugin-sass Stage: develop-html / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false}})", + "postcss({})", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + Object { + "test": /\\\\\\.s\\(a\\|c\\)ss\\$/, + "use": Array [ + "null", + Object { + "loader": "/node_modules/sass-loader/dist/cjs.js", + "options": Object { + "sassOptions": Object {}, + "sourceMap": undefined, + }, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + exports[`gatsby-plugin-sass Stage: develop-html / sass rule modules test options 1`] = ` [MockFunction] { "calls": Array [ diff --git a/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js index a8fe761859433..373fa2b35bb02 100644 --- a/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js @@ -45,16 +45,26 @@ describe(`gatsby-plugin-sass`, () => { "sass rule modules test options": { sassRuleModulesTest: /\.global\.s(a|c)ss$/, }, + "css-loader use commonjs": { + cssLoaderOptions: { + esModule: false, + modules: { + namedExport: false, + }, + }, + }, }, } tests.stages.forEach(stage => { for (const label in tests.options) { - const options = tests.options[label] - it(`Stage: ${stage} / ${label}`, () => { - onCreateWebpackConfig({ actions, loaders, stage }, options) - expect(actions.setWebpackConfig).toMatchSnapshot() - }) + if (tests.options[label]) { + const options = tests.options[label] + it(`Stage: ${stage} / ${label}`, () => { + onCreateWebpackConfig({ actions, loaders, stage }, options) + expect(actions.setWebpackConfig).toMatchSnapshot() + }) + } } }) }) diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js index 19c91a989ae9b..dc8bd2f05be7b 100644 --- a/packages/gatsby-plugin-sass/src/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/gatsby-node.js @@ -32,15 +32,29 @@ exports.onCreateWebpackConfig = ( ? [loaders.null()] : [ loaders.miniCssExtract(), - loaders.css({ importLoaders: 2, ...cssLoaderOptions }), + loaders.css({ + importLoaders: 2, + ...cssLoaderOptions, + modules: false, + }), loaders.postcss({ plugins: postCssPlugins }), ], } + const sassRuleModules = { test: sassRuleModulesTest || /\.module\.s(a|c)ss$/, use: [ - !isSSR && loaders.miniCssExtract({ modules: true }), - loaders.css({ importLoaders: 2, ...cssLoaderOptions, modules: true }), + !isSSR && + loaders.miniCssExtract({ + modules: { + namedExport: cssLoaderOptions.modules?.namedExport ?? true, + }, + }), + loaders.css({ + importLoaders: 2, + ...cssLoaderOptions, + modules: cssLoaderOptions.modules ?? true, + }), loaders.postcss({ plugins: postCssPlugins }), ].filter(Boolean), } diff --git a/packages/gatsby-plugin-stylus/README.md b/packages/gatsby-plugin-stylus/README.md index 55d0819f7d182..e735664b19b91 100644 --- a/packages/gatsby-plugin-stylus/README.md +++ b/packages/gatsby-plugin-stylus/README.md @@ -1,6 +1,6 @@ # gatsby-plugin-stylus -Provides drop-in support for Stylus with or without CSS Modules +Provides drop-in support for Stylus ## Install @@ -11,13 +11,26 @@ Provides drop-in support for Stylus with or without CSS Modules 1. Include the plugin in your `gatsby-config.js` file. 2. Write your stylesheets in Stylus (`.styl` files) and require/import them -### Without CSS Modules - -```javascript -// in gatsby-config.js +```javascript:title=gatsby-config.js plugins: [`gatsby-plugin-stylus`] ``` +If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader). +**Note:** Gatsby is using `css-loader@^5.0.0`. + +```javascript:title=gatsby-config.js +plugins: [ + { + resolve: `gatsby-plugin-stylus`, + options: { + cssLoaderOptions: { + camelCase: false, + }, + }, + }, +] +``` + ### With CSS Modules Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.styl` -> `app.module.styl`. @@ -29,14 +42,13 @@ This plugin has the same API as [stylus-loader](https://github.com/shama/stylus-loader#stylus-plugins), which means you can add stylus plugins with `use`: -```javascript -// in gatsby-config.js +```javascript:title=gatsby-config.js const rupture = require("rupture") module.exports = { plugins: [ { - resolve: "gatsby-plugin-stylus", + resolve: `gatsby-plugin-stylus`, options: { use: [rupture()], }, @@ -52,8 +64,7 @@ and common cross-browser flexbox bugs. Normally you don't need to think about it you'd prefer to add additional postprocessing to your Stylus output you can specify plugins in the plugin options -```javascript -// in gatsby-config.js +```javascript:title=gatsby-config.js plugins: [ { resolve: `gatsby-plugin-stylus`, diff --git a/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap index 41579eba10bf0..6c6842a53537b 100644 --- a/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-plugin-stylus/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -12,7 +12,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -54,7 +54,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/stylus-loader", @@ -96,7 +96,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / Stylus options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -142,7 +142,7 @@ exports[`gatsby-plugin-stylus Stage: build-html / Stylus options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -180,6 +180,48 @@ exports[`gatsby-plugin-stylus Stage: build-html / Stylus options #2 1`] = ` } `; +exports[`gatsby-plugin-stylus Stage: build-html / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.styl\\$/, + "use": Array [ + "css({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + "postcss({})", + Object { + "loader": "/resolved/path/stylus-loader", + "options": Object {}, + }, + ], + }, + Object { + "test": /\\\\\\.styl\\$/, + "use": Array [ + "null", + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + exports[`gatsby-plugin-stylus Stage: build-javascript / No options 1`] = ` [MockFunction] { "calls": Array [ @@ -193,7 +235,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -205,7 +247,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / No options 1`] = ` "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -242,7 +284,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / PostCss plugins 1`] = ` "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/stylus-loader", @@ -254,7 +296,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / PostCss plugins 1`] = ` "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/stylus-loader", @@ -291,7 +333,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / Stylus options #1 1`] = "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -307,7 +349,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / Stylus options #1 1`] = "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -348,7 +390,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / Stylus options #2 1`] = "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -368,7 +410,7 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / Stylus options #2 1`] = "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -400,6 +442,55 @@ exports[`gatsby-plugin-stylus Stage: build-javascript / Stylus options #2 1`] = } `; +exports[`gatsby-plugin-stylus Stage: build-javascript / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.styl\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + "postcss({})", + Object { + "loader": "/resolved/path/stylus-loader", + "options": Object {}, + }, + ], + }, + Object { + "test": /\\\\\\.styl\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":false})", + "postcss({})", + Object { + "loader": "/resolved/path/stylus-loader", + "options": Object {}, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + exports[`gatsby-plugin-stylus Stage: develop / No options 1`] = ` [MockFunction] { "calls": Array [ @@ -413,7 +504,7 @@ exports[`gatsby-plugin-stylus Stage: develop / No options 1`] = ` "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -425,7 +516,7 @@ exports[`gatsby-plugin-stylus Stage: develop / No options 1`] = ` "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -462,7 +553,7 @@ exports[`gatsby-plugin-stylus Stage: develop / PostCss plugins 1`] = ` "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/stylus-loader", @@ -474,7 +565,7 @@ exports[`gatsby-plugin-stylus Stage: develop / PostCss plugins 1`] = ` "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/stylus-loader", @@ -511,7 +602,7 @@ exports[`gatsby-plugin-stylus Stage: develop / Stylus options #1 1`] = ` "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -527,7 +618,7 @@ exports[`gatsby-plugin-stylus Stage: develop / Stylus options #1 1`] = ` "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -568,7 +659,7 @@ exports[`gatsby-plugin-stylus Stage: develop / Stylus options #2 1`] = ` "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -588,7 +679,7 @@ exports[`gatsby-plugin-stylus Stage: develop / Stylus options #2 1`] = ` "test": /\\\\\\.styl\\$/, "use": Array [ "miniCssExtract", - "css({\\"importLoaders\\":2})", + "css({\\"importLoaders\\":2,\\"modules\\":false})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -620,6 +711,55 @@ exports[`gatsby-plugin-stylus Stage: develop / Stylus options #2 1`] = ` } `; +exports[`gatsby-plugin-stylus Stage: develop / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.styl\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + "postcss({})", + Object { + "loader": "/resolved/path/stylus-loader", + "options": Object {}, + }, + ], + }, + Object { + "test": /\\\\\\.styl\\$/, + "use": Array [ + "miniCssExtract", + "css({\\"importLoaders\\":2,\\"esModule\\":false,\\"modules\\":false})", + "postcss({})", + Object { + "loader": "/resolved/path/stylus-loader", + "options": Object {}, + }, + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; + exports[`gatsby-plugin-stylus Stage: develop-html / No options 1`] = ` [MockFunction] { "calls": Array [ @@ -632,7 +772,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / No options 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -674,7 +814,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / PostCss plugins 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({\\"plugins\\":[\\"test1\\"]})", Object { "loader": "/resolved/path/stylus-loader", @@ -716,7 +856,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / Stylus options #1 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -762,7 +902,7 @@ exports[`gatsby-plugin-stylus Stage: develop-html / Stylus options #2 1`] = ` Object { "test": /\\\\\\.module\\\\\\.styl\\$/, "use": Array [ - "css({\\"modules\\":true,\\"importLoaders\\":2})", + "css({\\"importLoaders\\":1,\\"modules\\":true})", "postcss({})", Object { "loader": "/resolved/path/stylus-loader", @@ -799,3 +939,45 @@ exports[`gatsby-plugin-stylus Stage: develop-html / Stylus options #2 1`] = ` ], } `; + +exports[`gatsby-plugin-stylus Stage: develop-html / css-loader use commonjs 1`] = ` +[MockFunction] { + "calls": Array [ + Array [ + Object { + "module": Object { + "rules": Array [ + Object { + "oneOf": Array [ + Object { + "test": /\\\\\\.module\\\\\\.styl\\$/, + "use": Array [ + "css({\\"esModule\\":false,\\"modules\\":{\\"namedExport\\":false},\\"importLoaders\\":1})", + "postcss({})", + Object { + "loader": "/resolved/path/stylus-loader", + "options": Object {}, + }, + ], + }, + Object { + "test": /\\\\\\.styl\\$/, + "use": Array [ + "null", + ], + }, + ], + }, + ], + }, + }, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], +} +`; diff --git a/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js index 85bf0060104b9..bcdf02d7dbfba 100644 --- a/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-stylus/src/__tests__/gatsby-node.js @@ -35,6 +35,14 @@ describe(`gatsby-plugin-stylus`, () => { "PostCss plugins": { postCssPlugins: [`test1`], }, + "css-loader use commonjs": { + cssLoaderOptions: { + esModule: false, + modules: { + namedExport: false, + }, + }, + }, }, } diff --git a/packages/gatsby-plugin-stylus/src/gatsby-node.js b/packages/gatsby-plugin-stylus/src/gatsby-node.js index e56ee7e732210..2a8e9425c17f0 100644 --- a/packages/gatsby-plugin-stylus/src/gatsby-node.js +++ b/packages/gatsby-plugin-stylus/src/gatsby-node.js @@ -24,7 +24,7 @@ const resolve = require(`./resolve`) exports.onCreateWebpackConfig = ( { actions, stage, loaders }, - { postCssPlugins, ...stylusOptions } + { cssLoaderOptions = {}, postCssPlugins, ...stylusOptions } ) => { const isSSR = [`develop-html`, `build-html`].includes(stage) const { setWebpackConfig } = actions @@ -42,7 +42,11 @@ exports.onCreateWebpackConfig = ( ? [loaders.null()] : [ loaders.miniCssExtract(), - loaders.css({ importLoaders: 2 }), + loaders.css({ + importLoaders: 2, + ...cssLoaderOptions, + modules: false, + }), loaders.postcss({ plugins: postCssPlugins }), stylusLoader, ], @@ -51,8 +55,17 @@ exports.onCreateWebpackConfig = ( const stylusRuleModules = { test: /\.module\.styl$/, use: [ - !isSSR && loaders.miniCssExtract({ modules: true }), - loaders.css({ modules: true, importLoaders: 2 }), + !isSSR && + loaders.miniCssExtract({ + modules: { + namedExport: cssLoaderOptions.modules?.namedExport ?? true, + }, + }), + loaders.css({ + ...cssLoaderOptions, + importLoaders: 1, + modules: cssLoaderOptions.modules ?? true, + }), loaders.postcss({ plugins: postCssPlugins }), stylusLoader, ].filter(Boolean),