commit: e98559c3ff79ccc9b5b866c5351416dd58f2ebee
parent: 2212dc4aaa6de729d2fe3e39b134b566935b11b7
Author: Akihiko Odaki (@fn_aki@pawoo.net) <akihiko.odaki.4i@stu.hosei.ac.jp>
Date: Fri, 2 Jun 2017 03:56:32 +0900
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.
Diffstat:
4 files changed, 11 insertions(+), 25 deletions(-)
diff --git a/app/helpers/style_helper.rb b/app/helpers/style_helper.rb
@@ -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
@@ -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
@@ -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
@@ -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),