Skip to content

Commit

Permalink
Bundle Netlify CMS styles (gatsbyjs#3611)
Browse files Browse the repository at this point in the history
* define webpack loader.exclude with array for extensibility

* generate separate CSS bundle for Netlify CMS plugin
  • Loading branch information
erquhart authored and jastack committed Jan 24, 2018
1 parent abaaf42 commit 5ffdaf0
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 27 deletions.
80 changes: 58 additions & 22 deletions packages/gatsby-plugin-netlify-cms/src/gatsby-node.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,70 @@
const HtmlWebpackPlugin = require(`html-webpack-plugin`)
const HtmlWebpackIncludeAssetsPlugin = require(`html-webpack-include-assets-plugin`)
const ExtractTextPlugin = require(`extract-text-webpack-plugin`)

function plugins(stage) {
const commonPlugins = [
// Output /admin/index.html
new HtmlWebpackPlugin({
title: `Content Manager`,
filename: `admin/index.html`,
chunks: [`cms`],
}),

// Include the identity widget script in the html file
new HtmlWebpackIncludeAssetsPlugin({
assets: [`https://identity.netlify.com/v1/netlify-identity-widget.js`],
append: false,
publicPath: false,
}),
]

exports.modifyWebpackConfig = (
{ config, stage },
{ modulePath = `${__dirname}/cms.js` }
) => {
switch (stage) {
case `develop`:
return commonPlugins
case `build-javascript`:
return [...commonPlugins, new ExtractTextPlugin(`cms.css`)]
default:
return []
}
}

function module(config, stage) {
switch (stage) {
case `build-javascript`:
config.merge({
entry: {
cms: modulePath,
},
plugins: [
new HtmlWebpackPlugin({
title: `Content Manager`,
filename: `admin/index.html`,
chunks: [`cms`],
}),
new HtmlWebpackIncludeAssetsPlugin({
assets: [
`https://identity.netlify.com/v1/netlify-identity-widget.js`,
],
append: false,
publicPath: false,
}),
],
// Exclude Netlify CMS styles from Gatsby CSS bundle. This relies on
// Gatsby using webpack-configurator for webpack config extension, and
// also on the target loader key being named "css" in Gatsby's webpack
// config.
config.loader(`css`, {
exclude: [/\/node_modules\/netlify-cms\//],
})

// Exclusively extract Netlify CMS styles to /cms.css (filename configured
// above with plugin instantiation).
config.loader(`cms-css`, {
test: /\.css$/,
include: [/\/node_modules\/netlify-cms\//],
loader: ExtractTextPlugin.extract([`css`]),
})
return config
default:
return config
}
}

exports.modifyWebpackConfig = (
{ config, stage },
{ modulePath = `${__dirname}/cms.js` }
) => {
config.merge({
entry: {
cms: modulePath,
},
plugins: plugins(stage),
})

module(config, stage)

return config
}
10 changes: 5 additions & 5 deletions packages/gatsby/src/utils/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ module.exports = async (
// Common config for every env.
config.loader(`js`, {
test: /\.jsx?$/, // Accept either .js or .jsx files.
exclude: /(node_modules|bower_components)/,
exclude: [/(node_modules|bower_components)/],
loader: `babel`,
query: babelConfig,
})
Expand Down Expand Up @@ -409,7 +409,7 @@ module.exports = async (
case `develop`:
config.loader(`css`, {
test: /\.css$/,
exclude: /\.module\.css$/,
exclude: [/\.module\.css$/],
loaders: [`style`, `css`, `postcss`],
})

Expand All @@ -434,7 +434,7 @@ module.exports = async (
case `build-css`:
config.loader(`css`, {
test: /\.css$/,
exclude: /\.module\.css$/,
exclude: [/\.module\.css$/],
loader: ExtractTextPlugin.extract([`css?minimize`, `postcss`]),
})

Expand Down Expand Up @@ -464,7 +464,7 @@ module.exports = async (

config.loader(`css`, {
test: /\.css$/,
exclude: /\.module\.css$/,
exclude: [/\.module\.css$/],
loader: `null`,
})

Expand All @@ -489,7 +489,7 @@ module.exports = async (

config.loader(`css`, {
test: /\.css$/,
exclude: /\.module\.css$/,
exclude: [/\.module\.css$/],
// loader: `null`,
loader: ExtractTextPlugin.extract([`css`]),
})
Expand Down

0 comments on commit 5ffdaf0

Please sign in to comment.