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 



29
30
31
32
33
34
35
 
# File 'lib/proscenium/phlex/css_modules.rb', line 29

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

  super
end

#before_template ⇒ Object 



24
25
26
27
 
# File 'lib/proscenium/phlex/css_modules.rb', line 24

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.



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

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

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

    attributes[:class] = cssm.class_names(*names) do |_name, path|
      paths << path if path
    end
  end

  attributes
end

#tokens(*tokens, **conditional_tokens) ⇒ Object 



84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
# File 'lib/proscenium/phlex/css_modules.rb', line 84

def tokens(*tokens, **conditional_tokens)
  conditional_tokens.each do |condition, token|
    truthy = case condition
             when Symbol then send(condition)
             when Proc then condition.call
             else raise ArgumentError, 'The class condition must be a Symbol or a Proc.'
             end

    if truthy
      case token
      when Hash then __append_token__(tokens, token[:then])
      else __append_token__(tokens, token)
      end
    else
      case token
      when Hash then __append_token__(tokens, token[:else])
      end
    end
  end

  tokens = tokens.select(&:itself).join(' ')
  tokens.strip!
  tokens.gsub!(/\s+/, ' ')
  tokens
end