Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #3329 - Fix duplicate CSS in production builds #3352

Merged
merged 6 commits into from
Jul 18, 2017
Merged

Fixes #3329 - Fix duplicate CSS in production builds #3352

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63b2a97
Fixes #3329 - Tweak webpack config to share CSS loaders for productio…
owenconti Jul 8, 2017
10aae17
Merge branch 'master' of github.com:swagger-api/swagger-ui into bug/3…
owenconti Jul 11, 2017
7000c20
Moved split-pane-mode.less file into a .scss file. Removed remaining …
owenconti Jul 12, 2017
87bb442
Add `main.scss` as an entry point for the dev build
owenconti Jul 12, 2017
b1605a0
Merge branch 'master' into bug/3329-duplicate-css
owenconti Jul 18, 2017
b1ab6b0
Merge branch 'master' into bug/3329-duplicate-css
shockey Jul 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 30 additions & 32 deletions make-webpack-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
var path = require('path')
var path = require("path")

var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var deepExtend = require('deep-extend')
const {gitDescribeSync} = require('git-describe');
var webpack = require("webpack")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var deepExtend = require("deep-extend")
const {gitDescribeSync} = require("git-describe")

var pkg = require('./package.json')
var pkg = require("./package.json")

let gitInfo

try {
gitInfo = gitDescribeSync(__dirname)
} catch(e) {
gitInfo = {
hash: 'noGit',
hash: "noGit",
dirty: false
}
}

var commonRules = [
{ test: /\.(js(x)?)(\?.*)?$/,
use: [{
loader: 'babel-loader',
loader: "babel-loader",
options: {
retainLines: true
}
}],
include: [ path.join(__dirname, 'src') ]
include: [ path.join(__dirname, "src") ]
},
{ test: /\.(txt|yaml)(\?.*)?$/,
loader: 'raw-loader' },
loader: "raw-loader" },
{ test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
loader: 'url-loader?limit=10000' },
loader: "url-loader?limit=10000" },
{ test: /\.(woff|woff2)(\?.*)?$/,
loader: 'url-loader?limit=100000' },
loader: "url-loader?limit=100000" },
{ test: /\.(ttf|eot)(\?.*)?$/,
loader: 'file-loader' }
loader: "file-loader" }
]

module.exports = function(rules, options) {
Expand All @@ -54,13 +54,12 @@ module.exports = function(rules, options) {

if( specialOptions.separateStylesheets ) {
plugins.push(new ExtractTextPlugin({
filename: '[name].css' + (specialOptions.longTermCaching ? '?[contenthash]' : ''),
filename: "[name].css" + (specialOptions.longTermCaching ? "?[contenthash]" : ""),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One "downside" to my changes: swagger-ui-bundle.css and swagger-ui-standalone-preset.css files are now generated with the build. We could "fix" that by changing the [name].css to swagger-ui.css.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@owenconti, I'd like for that to be fixed before merging - in my mind, the dist folder contents are part of our public API surface, so we should avoid changing the file names if at all possible.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@owenconti and I had an out-of-band conversation, and settled on hardcoding swagger-ui.css.

allChunks: true
}))
}

if( specialOptions.minimize ) {

plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
Expand All @@ -78,12 +77,11 @@ module.exports = function(rules, options) {

plugins.push(
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: specialOptions.minimize ? JSON.stringify('production') : null,
WEBPACK_INLINE_STYLES: !Boolean(specialOptions.separateStylesheets)

"process.env": {
NODE_ENV: specialOptions.minimize ? JSON.stringify("production") : null,
WEBPACK_INLINE_STYLES: !specialOptions.separateStylesheets
},
'buildInfo': JSON.stringify({
"buildInfo": JSON.stringify({
PACKAGE_VERSION: (pkg.version),
GIT_COMMIT: gitInfo.hash,
GIT_DIRTY: gitInfo.dirty
Expand All @@ -92,47 +90,47 @@ module.exports = function(rules, options) {

delete options._special

var completeConfig = deepExtend({
var completeConfig = deepExtend({
entry: {},

output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[name].js'
path: path.join(__dirname, "dist"),
publicPath: "/",
filename: "[name].js",
chunkFilename: "[name].js"
},

target: 'web',
target: "web",

// yaml-js has a reference to `fs`, this is a workaround
node: {
fs: 'empty'
fs: "empty"
},

module: {
rules: commonRules.concat(rules),
},

resolveLoader: {
modules: [path.join(__dirname, 'node_modules')],
modules: [path.join(__dirname, "node_modules")],
},

externals: {
'buffertools': true // json-react-schema/deeper depends on buffertools, which fails.
"buffertools": true // json-react-schema/deeper depends on buffertools, which fails.
},

resolve: {
modules: [
path.join(__dirname, './src'),
'node_modules'
path.join(__dirname, "./src"),
"node_modules"
],
extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
alias: {
base: "getbase/src/less/base",
}
},

devtool: specialOptions.sourcemaps ? 'cheap-module-source-map' : null,
devtool: specialOptions.sourcemaps ? "cheap-module-source-map" : null,

plugins,

Expand Down
57 changes: 13 additions & 44 deletions webpack-dist-bundle.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,33 @@
var path = require('path')
var rules = [
const path = require("path")
const styleRules = require("./webpack.dist-style.config.js")

let rules = [
{ test: /\.(worker\.js)(\?.*)?$/,
use: [
{
loader: 'worker-loader',
loader: "worker-loader",
options: {
inline: true,
name: '[name].js'
}
},
{ loader: 'babel-loader' }
]
},
{ test: /\.(css)(\?.*)?$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{ test: /\.(scss)(\?.*)?$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{ loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
sourceMapContents: 'true'
name: "[name].js"
}
}
]
},
{ test: /\.(less)(\?.*)?$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
},
'less-loader'
{ loader: "babel-loader" }
]
}
]
rules = rules.concat(styleRules)

module.exports = require('./make-webpack-config.js')(rules, {
module.exports = require("./make-webpack-config.js")(rules, {
_special: {
separateStylesheets: false,
separateStylesheets: true,
minimize: true,
sourcemaps: true,
},

entry: {
'swagger-ui-bundle': [
'./src/polyfills',
'./src/core/index.js'
"swagger-ui-bundle": [
"./src/polyfills",
"./src/core/index.js"
]
},

Expand Down
56 changes: 12 additions & 44 deletions webpack-dist-standalone.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,33 @@
var path = require('path')
const path = require("path")
const styleRules = require("./webpack.dist-style.config.js")

var rules = [
let rules = [
{ test: /\.(worker\.js)(\?.*)?$/,
use: [
{
loader: 'worker-loader',
loader: "worker-loader",
options: {
inline: true,
name: '[name].js'
name: "[name].js"
}
},
{ loader: 'babel-loader' }
]
},
{ test: /\.(css)(\?.*)?$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{ test: /\.(scss)(\?.*)?$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{ loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
sourceMapContents: 'true'
}
}
]
},
{ test: /\.(less)(\?.*)?$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
},
'less-loader'
{ loader: "babel-loader" }
]
}
]
rules = rules.concat(styleRules)

module.exports = require('./make-webpack-config.js')(rules, {
module.exports = require("./make-webpack-config.js")(rules, {
_special: {
separateStylesheets: false,
separateStylesheets: true,
minimize: true,
sourcemaps: true,
},

entry: {
'swagger-ui-standalone-preset': [
'./src/polyfills',
'./src/standalone/index.js'
"swagger-ui-standalone-preset": [
"./src/polyfills",
"./src/standalone/index.js"
]
},

Expand Down
59 changes: 9 additions & 50 deletions webpack-dist.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,25 @@
var path = require('path')
var fs = require('fs')
const path = require("path")
const fs = require("fs")
const nodeModules = fs.readdirSync("node_modules").filter(function(x) { return x !== ".bin" })
var ExtractTextPlugin = require('extract-text-webpack-plugin')
const styleRules = require("./webpack.dist-style.config.js")

var rules = [
let rules = [
{ test: /\.(worker\.js)(\?.*)?$/,
use: [
{
loader: 'worker-loader',
loader: "worker-loader",
options: {
inline: true,
name: '[name].js'
name: "[name].js"
}
},
{ loader: 'babel-loader' }
{ loader: "babel-loader" }
]
},
{ test: /\.(css)(\?.*)?$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader'
]
})
},
{ test: /\.(scss)(\?.*)?$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { minimize: true }
},
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{ loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
sourceMapContents: 'true'
}
}
]
})
},
{ test: /\.(less)(\?.*)?$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader',
{
loader: 'postcss-loader',
},
'less-loader'
]
})
}
]
rules = rules.concat(styleRules)

module.exports = require('./make-webpack-config.js')(rules, {
module.exports = require("./make-webpack-config.js")(rules, {
_special: {
separateStylesheets: true,
minimize: true,
Expand Down
Loading