fix: [#30] Reverse imported order of CSS files

joelmoss · Jul 1, 2024 · b2e5ed8 · b2e5ed8
1 parent c1dd35d
commit b2e5ed8
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 5 deletions.
diff --git a/fixtures/dummy/app/views/layouts/basic_layout.css b/fixtures/dummy/app/views/layouts/basic_layout.css
diff --git a/fixtures/dummy/app/views/layouts/basic_layout.rb b/fixtures/dummy/app/views/layouts/basic_layout.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class BasicLayout < ApplicationView
+end
diff --git a/fixtures/dummy/app/views/phlex/include_assets_view.rb b/fixtures/dummy/app/views/phlex/include_assets_view.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Phlex::IncludeAssetsView < Proscenium::Phlex
+class Phlex::IncludeAssetsView < BasicLayout
   sideload_assets true
 
   def view_template

diff --git a/lib/proscenium/importer.rb b/lib/proscenium/importer.rb
@@ -61,19 +61,36 @@ def import(filepath = nil, resolve: nil, **options)
       #
       # @param filepath [Pathname] Absolute file system path of the Ruby file to sideload.
       def sideload(filepath, **options)
+        return if !Proscenium.config.side_load || (options[:js] == false && options[:css] == false)
+
+        sideload_js(filepath, **options) unless options[:js] == false
+        sideload_css(filepath, **options) unless options[:css] == false
+      end
+
+      def sideload_js(filepath, **options)
         return unless Proscenium.config.side_load
 
         filepath = Rails.root.join(filepath) unless filepath.is_a?(Pathname)
         filepath = filepath.sub_ext('')
 
-        import_if_exists = lambda do |x|
+        JS_EXTENSIONS.find do |x|
           if (fp = filepath.sub_ext(x)).exist?
             import(Resolver.resolve(fp.to_s), sideloaded: true, **options)
           end
         end
+      end
 
-        JS_EXTENSIONS.find(&import_if_exists) unless options[:js] == false
-        CSS_EXTENSIONS.find(&import_if_exists) unless options[:css] == false
+      def sideload_css(filepath, **options)
+        return unless Proscenium.config.side_load
+
+        filepath = Rails.root.join(filepath) unless filepath.is_a?(Pathname)
+        filepath = filepath.sub_ext('')
+
+        CSS_EXTENSIONS.find do |x|
+          if (fp = filepath.sub_ext(x)).exist?
+            import(Resolver.resolve(fp.to_s), sideloaded: true, **options)
+          end
+        end
       end
 
       def each_stylesheet(delete: false)

diff --git a/lib/proscenium/side_load.rb b/lib/proscenium/side_load.rb
@@ -127,16 +127,28 @@ def sideload_inheritance_chain(obj, options)
           options[k] = obj.instance_eval(&options[k]) if options[k].is_a?(Proc)
         end
 
+        css_imports = []
+
         klass = obj.class
         while klass.respond_to?(:source_path) && klass.source_path && !klass.abstract_class
           if klass.respond_to?(:sideload)
             klass.sideload options
-          else
+          elsif options[:css] == false
             Importer.sideload klass.source_path, **options
+          else
+            Importer.sideload_js klass.source_path, **options
+            css_imports << klass.source_path
           end
 
           klass = klass.superclass
         end
+
+        # The reason why we sideload CSS after JS is because the order of CSS is important.
+        # Basically, the layout should be loaded before the view so that CSS cascading works i9n the
+        # right direction.
+        css_imports.reverse_each do |it|
+          Importer.sideload_css it, **options
+        end
       end
     end
   end

diff --git a/test/proscenium/phlex/asset_inclusions.rb b/test/proscenium/phlex/asset_inclusions.rb
@@ -19,6 +19,7 @@ def before
 
         expect(page.html).to include(
           '<head>' \
+          '<link rel="stylesheet" href="/assets/app/views/layouts/basic_layout$A2EXB3Y7$.css" data-original-href="/app/views/layouts/basic_layout.css">' \
           '<link rel="stylesheet" href="/assets/app/views/phlex/include_assets_view$GM5I2TBO$.css" data-original-href="/app/views/phlex/include_assets_view.css">' \
           '<script src="/assets/app/views/phlex/include_assets_view$D4LI7E5U$.js"></script>' \
           '</head>'