From e98559c3ff79ccc9b5b866c5351416dd58f2ebee Mon Sep 17 00:00:00 2001 From: "Akihiko Odaki (@fn_aki@pawoo.net)" Date: Fri, 2 Jun 2017 03:56:32 +0900 Subject: [PATCH] Resolve custom application stylesheet with Webpack (#3373) This implementation is a bit smaller and still has the following benefits: * No need of app/javascript/packs/custom.js For custom stylesheet, it typically has only "require('../styles/custom.scss')" and is redundant. * No need to extract vendor stylesheet to another asset Extracting vendor stylesheet could be forgotten by developers who do not use custom stylesheet. --- app/helpers/style_helper.rb | 17 ----------------- app/javascript/mastodon/main.js | 2 +- app/views/layouts/application.html.haml | 3 +-- config/webpack/shared.js | 14 +++++++++----- 4 files changed, 11 insertions(+), 25 deletions(-) delete mode 100644 app/helpers/style_helper.rb diff --git a/app/helpers/style_helper.rb b/app/helpers/style_helper.rb deleted file mode 100644 index b695f8f3ea..0000000000 --- a/app/helpers/style_helper.rb +++ /dev/null @@ -1,17 +0,0 @@ -# frozen_string_literal: true - -module StyleHelper - def stylesheet_for_layout - if asset_exist? 'custom.css' - 'custom' - else - 'application' - end - end - - def asset_exist?(path) - true if Webpacker::Manifest.lookup(path) - rescue Webpacker::FileLoader::NotFoundError - false - end -end diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js index 2031cad163..02e0f56f95 100644 --- a/app/javascript/mastodon/main.js +++ b/app/javascript/mastodon/main.js @@ -2,7 +2,7 @@ const perf = require('./performance'); // import default stylesheet with variables require('font-awesome/css/font-awesome.css'); -require('../styles/application.scss'); +require('mastodon-application-style'); function onDomContentLoaded(callback) { if (document.readyState !== 'loading') { diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index ab7c22385a..f991bc74f5 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -18,8 +18,7 @@ = ' - ' = title - = stylesheet_pack_tag 'common', media: 'all' - = stylesheet_pack_tag stylesheet_for_layout, media: 'all' + = stylesheet_pack_tag 'application', media: 'all' = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' = csrf_meta_tags diff --git a/config/webpack/shared.js b/config/webpack/shared.js index 1744353f7c..0f767fb473 100644 --- a/config/webpack/shared.js +++ b/config/webpack/shared.js @@ -3,6 +3,7 @@ /* eslint global-require: 0 */ /* eslint import/no-dynamic-require: 0 */ +const { existsSync } = require('fs'); const webpack = require('webpack'); const { basename, dirname, join, relative, resolve, sep } = require('path'); const { sync } = require('glob'); @@ -16,6 +17,9 @@ const extensionGlob = `**/*{${paths.extensions.join(',')}}*`; const packPaths = sync(join(paths.source, paths.entry, extensionGlob)); const entryPacks = [].concat(packPaths).concat(localePackPaths); +const customApplicationStyle = resolve(join(paths.source, 'styles/custom.scss')); +const originalApplicationStyle = resolve(join(paths.source, 'styles/application.scss')); + module.exports = { entry: entryPacks.reduce( (map, entry) => { @@ -48,17 +52,13 @@ module.exports = { name: 'common', minChunks: (module, count) => { const reactIntlPathRegexp = new RegExp(`node_modules\\${sep}react-intl`); + if (module.resource && reactIntlPathRegexp.test(module.resource)) { // skip react-intl because it's useless to put in the common chunk, // e.g. because "shared" modules between zh-TW and zh-CN will never // be loaded together return false; } - const fontAwesomePathRegexp = new RegExp(`node_modules\\${sep}font-awesome`); - if (module.resource && fontAwesomePathRegexp.test(module.resource)) { - // extract vendor css into common module - return true; - } return count >= 2; }, @@ -66,6 +66,10 @@ module.exports = { ], resolve: { + alias: { + 'mastodon-application-style': existsSync(customApplicationStyle) ? + customApplicationStyle : originalApplicationStyle, + }, extensions: paths.extensions, modules: [ resolve(paths.source),