Module: Proscenium::Phlex::CssModules

Extended by:
ActiveSupport::Concern
Defined in:
lib/proscenium/phlex/css_modules.rb

Instance Method Summary collapse

Instance Method Details

#after_template ⇒ Object 



26
27
28
29
30
31
32
33
 
# File 'lib/proscenium/phlex/css_modules.rb', line 26

def after_template
  self.class.resolved_css_module_paths ||= Concurrent::Set.new
  self.class.resolved_css_module_paths.each do |path|
    Proscenium::Importer.import path, sideloaded: true
  end

  super
end

#before_template ⇒ Object 



21
22
23
24
 
# File 'lib/proscenium/phlex/css_modules.rb', line 21

def before_template
  self.class.resolved_css_module_paths ||= Concurrent::Set.new
  super
end

#process_attributes(**attributes) ⇒ Object

Resolve and side load any CSS modules in the “class” attributes, where a CSS module is a class name beginning with a ‘@`. The class name is resolved to a CSS module name based on the file system path of the Phlex class, and any CSS file is side loaded.

For example, the following will side load the CSS module file at app/components/user/component.module.css, and add the CSS Module name ‘user_name` to the <div>.

# app/components/user/component.rb
class User::Component < Proscenium::Phlex
  def view_template
    div class: :@user_name do
      'Joel Moss'
    end
  end
end

Additionally, any class name containing a ‘/` is resolved as a CSS module path. Allowing you to use the same syntax as a CSS module, but without the need to manually import the CSS file.

For example, the following will side load the CSS module file at /lib/users.module.css, and add the CSS Module name ‘name` to the <div>.

class User::Component < Proscenium::Phlex
  def view_template
    div class: '/lib/users@name' do
      'Joel Moss'
    end
  end
end

Raises:

  • (Proscenium::CssModule::Resolver::NotFound) —

    If a CSS module file is not found for the Phlex class file path.



68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
# File 'lib/proscenium/phlex/css_modules.rb', line 68

def process_attributes(**attributes)
  if attributes.key?(:class) && (attributes[:class] = tokens(attributes[:class])).include?('@')
    names = attributes[:class].is_a?(Array) ? attributes[:class] : attributes[:class].split

    self.class.resolved_css_module_paths ||= Concurrent::Set.new

    attributes[:class] = cssm.class_names(*names).map do |name, path|
      self.class.resolved_css_module_paths << path if path
      name
    end
  end

  attributes
end