Module: Proscenium::Phlex::CssModules

Includes:
CssModule
Included in:
Proscenium::Phlex
Defined in:
lib/proscenium/phlex/css_modules.rb

Defined Under Namespace

Modules: ClassMethods

Class Method Summary collapse

Instance Method Summary collapse

Methods included from CssModule

#class_names, #css_module

Class Method Details

.included(base) ⇒ Object 



7
8
9
10
 
# File 'lib/proscenium/phlex/css_modules.rb', line 7

def self.included(base)
  base.extend CssModule::Path
  base.extend ClassMethods
end

Instance Method Details

#after_template ⇒ Object 



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

def after_template
  self.class.resolved_css_module_paths.each do |path|
    Proscenium::Importer.import path
  end

  super
end

#before_template ⇒ Object 



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

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.



66
67
68
69
70
71
72
73
74
75
76
77
 
# File 'lib/proscenium/phlex/css_modules.rb', line 66

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

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

  attributes
end