Use SASS to build CSS

.github/workflows/release.yml

@@ -48,10 +48,14 @@ jobs:
       run: |
         bundle exec gem bump better_errors --version ${{ steps.get_version.outputs.version }} --no-commit
 
+    - name: Compile CSS
+      run: |
+        bundle exec rake style:build
+
     - name: Build gem
       run: gem build better_errors.gemspec
 
-    - name: Upload gem to Release
+    - name: Add gem to GitHub Release
       uses: actions/upload-release-asset@v1
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -9,3 +9,7 @@
 
 /gemfiles/*.gemfile.lock
 /gemfiles/.bundle
+
+
+# No CSS is committed. In development, the SCSS is used. The CSS is compiled when building a gem release.
+*.css

Rakefile

@@ -1,5 +1,6 @@
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
+require "better_errors/error_page_style"
 
 RSpec::Core::RakeTask.new(:test)
 task :default => :test
@@ -36,3 +37,18 @@ namespace :test do
     with_each_gemfile { sh "bundle exec rspec" rescue nil }
   end
 end
+
+namespace :style do
+  desc "Build main.css from the SASS sources"
+  task :build do
+    css = BetterErrors::ErrorPageStyle.compiled_style(true)
+    File.open(File.expand_path("lib/better_errors/templates/main.css", File.dirname(__FILE__)), "w") do |f|
+      f.write(css)
+    end
+  end
+
+  desc "Remove main.css so that the SASS sources will be used directly"
+  task :develop do
+    File.unlink File.expand_path("lib/better_errors/templates/main.css", File.dirname(__FILE__))
+  end
+end

better_errors.gemspec

@@ -12,9 +12,9 @@ Gem::Specification.new do |s|
   s.homepage      = "https://github.com/BetterErrors/better_errors"
   s.license       = "MIT"
 
-  s.files         = `git ls-files -z`.split("\x0").reject do |f|
-    f.match(%r{^((test|spec|features|feature-screenshots)/|Rakefile)})
-  end
+  s.files         = `git ls-files -z`.split("\x0").reject { |f|
+    f.match(%r{^((test|spec|features|feature-screenshots)/|Rakefile)|\.scss$})
+  } + %w[lib/better_errors/templates/main.css]
 
   s.require_paths = ["lib"]
 
@@ -25,6 +25,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency "rspec-html-matchers"
   s.add_development_dependency "rspec-its"
   s.add_development_dependency "yard"
+  s.add_development_dependency "sassc"
   # kramdown 2.1 requires Ruby 2.3+
   s.add_development_dependency "kramdown", (RUBY_VERSION < '2.3' ? '< 2.0.0' : '> 2.0.0')
   # simplecov and coveralls must not be included here. See the Gemfiles instead.

lib/better_errors/error_page.rb

@@ -1,6 +1,7 @@
 require "cgi"
 require "json"
 require "securerandom"
+require "better_errors/error_page_style"
 
 module BetterErrors
   # @private

lib/better_errors/error_page_style.rb

@@ -0,0 +1,30 @@
+require "sassc"
+
+module BetterErrors
+  # @private
+  module ErrorPageStyle
+    def self.compiled_style(for_deployment = false)
+      style_dir = File.expand_path("style", File.dirname(__FILE__))
+      style_file = "#{style_dir}/main.scss"
+
+      engine = SassC::Engine.new(
+        File.read(style_file),
+        filename: style_file,
+        style: for_deployment ? :compressed : :expanded,
+        line_comments: !for_deployment,
+        load_paths: [style_dir],
+      )
+      engine.render
+    end
+
+    def self.style_tag
+      style_file = File.expand_path("templates/main.css", File.dirname(__FILE__))
+      css = if File.exist?(style_file)
+        File.open(style_file).read
+      else
+        compiled_style(false)
+      end
+      "<style type='text/css'>\n#{css}\n</style>"
+    end
+  end
+end