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.

diff --git a/app/helpers/style_helper.rb b/app/helpers/style_helper.rb
deleted file mode 100644 (file)
index b695f8f..0000000
--- 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 2031cad16384069d09ba6b5a1ec2eb7d3b77376e..02e0f56f957f95c57a8a04dbe1ee86017e430f02 100644 (file)
--- 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 ab7c22385a38b8618cf0a9fee06667ddce95f545..f991bc74f5778a99d24ca3949d81bbf3bda7846a 100755 (executable)
--- 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 1744353f7cfa5d6828acff4022d812c49df63612..0f767fb473b677a2974239b1ad26e899e1ef3be1 100644 (file)
--- 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),