Fix #2922 - Load stylesheet from "custom.css" entrypoint when present (#3332)

* Fix #2922 - Load stylesheet from "custom.css" entrypoint when present

This is pretty much the same way it worked as before, albeit with
having to create app/javascript/packs/custom.js with
require('../styles/custom.scss') (or whatever you want really), which
will be a blank slate for you to import whatever you want

* Remove old assets directory

* Extract font-awesome into common.css and always load it

diff --git a/app/assets/stylesheets/.gitkeep b/app/assets/stylesheets/.gitkeep
deleted file mode 100644 (file)
index e69de29..0000000

diff --git a/app/helpers/style_helper.rb b/app/helpers/style_helper.rb
new file mode 100644 (file)
index 0000000..b695f8f
--- /dev/null
+++ b/app/helpers/style_helper.rb
@@ -0,0 +1,17 @@
+# 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 44148fa92cb957d15f1e870db8113f51226b2eeb..2031cad16384069d09ba6b5a1ec2eb7d3b77376e 100644 (file)
--- a/app/javascript/mastodon/main.js
+++ b/app/javascript/mastodon/main.js
@@ -1,8 +1,5 @@
 const perf = require('./performance');
 
-// allow override variables here
-require.context('../../assets/stylesheets/', false, /variables.*\.scss$/);
-
 // import default stylesheet with variables
 require('font-awesome/css/font-awesome.css');
 require('../styles/application.scss');
@@ -23,9 +20,6 @@ function main() {
 
   require.context('../images/', true);
 
-  // import customization styles
-  require.context('../../assets/stylesheets/', false, /custom.*\.scss$/);
-
   onDomContentLoaded(() => {
     const mountNode = document.getElementById('mastodon');
     const props = JSON.parse(mountNode.getAttribute('data-props'));

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index f991bc74f5778a99d24ca3949d81bbf3bda7846a..ab7c22385a38b8618cf0a9fee06667ddce95f545 100755 (executable)
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -18,7 +18,8 @@
         = ' - '
       = title
 
-    = stylesheet_pack_tag 'application', media: 'all'
+    = stylesheet_pack_tag 'common', media: 'all'
+    = stylesheet_pack_tag stylesheet_for_layout, 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 1d75e2af21695a45a89598437b3e23d6dee4de75..12e05dec216856df3cdc01c7207a407bcb6e0023 100644 (file)
--- a/config/webpack/shared.js
+++ b/config/webpack/shared.js
@@ -53,6 +53,12 @@ module.exports = {
           // be loaded together
           return false;
         }
+
+        if (module.resource && /node_modules\/font-awesome/.test(module.resource)) {
+          // extract vendor css into common module
+          return true;
+        }
+
         return count >= 2;
       },
     }),