fix sass and less variants of css modules in build-html stage (#5340)

gatsbyjs · May 9, 2018 · 19d5439 · 19d5439
1 parent 8ff3cfb
commit 19d5439
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 66 deletions.
diff --git a/packages/gatsby-plugin-less/src/gatsby-node.js b/packages/gatsby-plugin-less/src/gatsby-node.js
@@ -6,6 +6,7 @@ exports.onCreateWebpackConfig = (
 ) => {
  const { setWebpackConfig } = actions
  const PRODUCTION = stage !== `develop`
+ const isSSR = stage.includes(`html`)
 
  const lessLoader = {
  loader: resolve(`less-loader`),
@@ -17,12 +18,14 @@ exports.onCreateWebpackConfig = (
 
  const lessRule = {
  test: /\.less$/,
- use: [
- loaders.miniCssExtract(),
- loaders.css({ importLoaders: 1 }),
- loaders.postcss({ plugins: postCssPlugins }),
- lessLoader,
- ],
+ use: isSSR
+ ? [loaders.null()]
+ : [
+ loaders.miniCssExtract(),
+ loaders.css({ importLoaders: 1 }),
+ loaders.postcss({ plugins: postCssPlugins }),
+ lessLoader,
+ ],
  }
  const lessRuleModules = {
  test: /\.module\.less$/,
@@ -33,38 +36,17 @@ exports.onCreateWebpackConfig = (
  lessLoader,
  ],
  }
- const lessRuleModulesSSR = {
- test: /\.module\.less$/,
- use: [
- loaders.css({ modules: true, importLoaders: 1 }),
- loaders.postcss({ plugins: postCssPlugins }),
- lessLoader,
- ],
- }
 
  let configRules = []
 
  switch (stage) {
  case `develop`:
  case `build-javascript`:
- configRules = configRules.concat([
- {
- oneOf: [lessRuleModules, lessRule],
- },
- ])
- break
-
  case `build-html`:
  case `develop-html`:
  configRules = configRules.concat([
  {
- oneOf: [
- lessRuleModulesSSR,
- {
- ...lessRule,
- use: [loaders.null()],
- },
- ],
+ oneOf: [lessRuleModules, lessRule],
  },
  ])
  break

diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js
@@ -6,6 +6,7 @@ exports.onCreateWebpackConfig = (
 ) => {
  const { setWebpackConfig } = actions
  const PRODUCTION = stage !== `develop`
+ const isSSR = stage.includes(`html`)
 
  const sassLoader = {
  loader: resolve(`sass-loader`),
@@ -17,12 +18,14 @@ exports.onCreateWebpackConfig = (
 
  const sassRule = {
  test: /\.s(a|c)ss$/,
- use: [
- loaders.miniCssExtract(),
- loaders.css({ importLoaders: 1 }),
- loaders.postcss({ plugins: postCssPlugins }),
- sassLoader,
- ],
+ use: isSSR
+ ? [loaders.null()]
+ : [
+ loaders.miniCssExtract(),
+ loaders.css({ importLoaders: 1 }),
+ loaders.postcss({ plugins: postCssPlugins }),
+ sassLoader,
+ ],
  }
  const sassRuleModules = {
  test: /\.module\.s(a|c)ss$/,
@@ -33,38 +36,17 @@ exports.onCreateWebpackConfig = (
  sassLoader,
  ],
  }
- const sassRuleModulesSSR = {
- test: /\.module\.s(a|c)ss$/,
- use: [
- loaders.css({ modules: true, importLoaders: 1 }),
- loaders.postcss({ plugins: postCssPlugins }),
- sassLoader,
- ],
- }
 
  let configRules = []
 
  switch (stage) {
  case `develop`:
  case `build-javascript`:
- configRules = configRules.concat([
- {
- oneOf: [sassRuleModules, sassRule],
- },
- ])
- break
-
  case `build-html`:
  case `develop-html`:
  configRules = configRules.concat([
  {
- oneOf: [
- sassRuleModulesSSR,
- {
- ...sassRule,
- use: [loaders.null()],
- },
- ],
+ oneOf: [sassRuleModules, sassRule],
  },
  ])
  break

diff --git a/packages/gatsby/src/utils/webpack-extract-css-modules-map.js b/packages/gatsby/src/utils/webpack-extract-css-modules-map.js
@@ -0,0 +1,19 @@
+const Module = require(`module`)
+const loaderUtils = require(`loader-utils`)
+const path = require(`path`)
+
+module.exports = function(content) {
+ const [filename] = loaderUtils
+ .getRemainingRequest(this)
+ .split(`!`)
+ .slice(-1)
+
+ const dir = path.dirname(filename)
+
+ var m = new Module(filename, this)
+ m.filename = filename
+ m.paths = Module._nodeModulePaths(dir)
+ m._compile(content, filename)
+
+ return `module.exports = ${JSON.stringify(m.exports.locals)}`
+}
diff --git a/packages/gatsby/src/utils/webpack-utils.js b/packages/gatsby/src/utils/webpack-utils.js
@@ -181,7 +181,9 @@ module.exports = async ({
  options,
  // use MiniCssExtractPlugin only on production builds
  loader: PRODUCTION
- ? MiniCssExtractPlugin.loader
+ ? stage === `build-html`
+ ? require.resolve(`./webpack-extract-css-modules-map`)
+ : MiniCssExtractPlugin.loader
  : require.resolve(`style-loader`),
  }
  },

diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
@@ -150,20 +150,15 @@ module.exports = async (
  __PREFIX_PATHS__: program.prefixPaths,
  __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
  }),
-
- plugins.extractText(
- stage === `develop`
- ? {
- filename: `[name].css`,
- chunkFilename: `[name].css`,
- }
- : {}
- ),
  ]
 
  switch (stage) {
  case `develop`:
  configPlugins = configPlugins.concat([
+ plugins.extractText({
+ filename: `[name].css`,
+ chunkFilename: `[name].css`,
+ }),
  plugins.hotModuleReplacement(),
  plugins.noEmitOnErrors(),
 
@@ -184,6 +179,7 @@ module.exports = async (
  break
  case `build-javascript`: {
  configPlugins = configPlugins.concat([
+ plugins.extractText(),
  // Minify Javascript.
  plugins.uglify({
  uglifyOptions: {