proof of concept on how to have Phlex generate CSS classes

css_classes.rb

# frozen_string_literal: true

module Views
  module CssClasses
    extend ActiveSupport::Concern

    class CssHelper; end

    class_methods do
      def css_helper
        @css_helper ||= CssHelper.new
      end

      def css_class(nickname, &block)
        class_name = css_class_name(nickname)
        css_code = ".#{class_name} { #{block.call} }"
        CssClasses.register(class_name, css_code)
        css_helper.define_singleton_method(nickname) { class_name }
        class_name
      end

      def css_class_name(nickname)
        name = "#{self.name.parameterize}__#{nickname}"
        return "c-#{name}" if Rails.env.development?

        md5 = Digest::MD5.hexdigest(name)[0..3]
        "c-#{md5}"
      end
    end

    class << self
      def register(class_name, css_code)
        @css_classes ||= {}
        raise("name colission!") if @css_classes.key?(class_name)
        @css_classes[class_name] = css_code
      end

      def all_css
        return "" unless @css_classes
        @css_classes.values.join("\n")
      end
    end

    def css
      self.class.css_helper
    end
  end
end

phlex_css.patch

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
index 63a71b1..dc3140c 100644
--- a/app/assets/stylesheets/application.sass.scss
+++ b/app/assets/stylesheets/application.sass.scss
@@ -6,6 +6,7 @@
 @use "about.sass.scss";
 @use "guides.sass.scss";
 @use "videos.sass.scss";
+@use "phlex.sass.scss";
 @use "webfonts.scss";
 
 html, body, * {
diff --git a/app/assets/stylesheets/phlex.sass.scss b/app/assets/stylesheets/phlex.sass.scss
new file mode 100644
index 0000000..a6fc9d6
--- /dev/null
+++ b/app/assets/stylesheets/phlex.sass.scss
@@ -0,0 +1 @@
+.c-views-welcome-calendar__read_review { display: block; font-weight: bold; color: darkorange !important }
diff --git a/app/views/application_view.rb b/app/views/application_view.rb
index 7f7f28e..bcd0896 100644
--- a/app/views/application_view.rb
+++ b/app/views/application_view.rb
@@ -4,6 +4,7 @@ module Views
   class ApplicationView < Phlex::HTML
     include Phlex::Rails::Helpers::FormWith
     include Rails.application.routes.url_helpers
+    include CssClasses
 
     delegate :logged_in?, to: :helpers
     delegate :site, to: :helpers
diff --git a/app/views/css_classes.rb b/app/views/css_classes.rb
new file mode 100644
index 0000000..3178a01
--- /dev/null
+++ b/app/views/css_classes.rb
@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Views
+  module CssClasses
+    extend ActiveSupport::Concern
+
+    class CssHelper; end
+
+    class_methods do
+      def css_helper
+        @css_helper ||= CssHelper.new
+      end
+
+      def css_class(nickname, &block)
+        class_name = css_class_name(nickname)
+        css_code = ".#{class_name} { #{block.call} }"
+        CssClasses.register(class_name, css_code)
+        css_helper.define_singleton_method(nickname) { class_name }
+        class_name
+      end
+
+      def css_class_name(nickname)
+        name = "#{self.name.parameterize}__#{nickname}"
+        return "c-#{name}" if Rails.env.development?
+
+        md5 = Digest::MD5.hexdigest(name)[0..3]
+        "c-#{md5}"
+      end
+    end
+
+    class << self
+      def register(class_name, css_code)
+        @css_classes ||= {}
+        raise("name colission!") if @css_classes.key?(class_name)
+        @css_classes[class_name] = css_code
+      end
+
+      def all_css
+        return "" unless @css_classes
+        @css_classes.values.join("\n")
+      end
+    end
+
+    def css
+      self.class.css_helper
+    end
+  end
+end
diff --git a/app/views/welcome/calendar.rb b/app/views/welcome/calendar.rb
index 5eb286d..ef707c8 100644
--- a/app/views/welcome/calendar.rb
+++ b/app/views/welcome/calendar.rb
@@ -80,6 +80,10 @@ module Views
         }
       end
 
+      css_class(:read_review) do
+        "display: block; font-weight: bold; color: darkorange !important"
+      end
+
       def render_events(events)
         ul {
           events.each do |event|
@@ -90,7 +94,7 @@ module Views
               empty_space
 
               if event.review.present?
-                link_to("Read my review!", event.review, style: "display: block; font-weight: bold; color: darkorange")
+                link_to("Read my review!", event.review, class: css.read_review)
                 empty_space
               end
 
diff --git a/lib/tasks/css.rake b/lib/tasks/css.rake
new file mode 100644
index 0000000..9450728
--- /dev/null
+++ b/lib/tasks/css.rake
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+namespace :css do
+  task build_from_phlex: [:environment] do
+    # find all files in Rails.root/app/views and require them
+    Dir[Rails.root.join("app/views/**/*.rb")].each { |f| require f }
+
+    puts "🍰 rendering css from phlex"
+    File.write(Rails.root.join("app/assets/stylesheets/phlex.sass.scss"), Views::CssClasses.all_css + "\n")
+  end
+end
diff --git a/package.json b/package.json
index 709beee..af864ad 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "private": "true",
   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.png=file --public-path=assets --minify",
-    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --style=compressed",
+    "build:css": "rake css:build_from_phlex && sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --style=compressed",
     "build:postcss": "postcss ./app/assets/builds/application.css -o ./app/assets/builds/application.css --use autoprefixer"
   },
   "dependencies": {