Skip to content

Instantly share code, notes, and snippets.

@eljojo
Last active June 18, 2023 23:41
Show Gist options
  • Save eljojo/2e6c479e3116748e5b50a451184572ca to your computer and use it in GitHub Desktop.
Save eljojo/2e6c479e3116748e5b50a451184572ca to your computer and use it in GitHub Desktop.
proof of concept on how to have Phlex generate CSS classes
# 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/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": {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment