view_component-scoped_styles 0.5.0 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6eabd4a24031f8acbe3e73fba03f5bd1d8263feee45a8836e827fe4ce3e2bcf3
-  data.tar.gz: 632ae34483c93fdadb82fac21ac8b0a409ff9ae6b07098ff080c5e32a935e8fc
+  metadata.gz: 206f58f9f063b3311d866937c80bcd1a1566621102ebf7135d2aa373f89d32e4
+  data.tar.gz: f0ac0545c6cb63d6dd6739e9e4356ee6b0ba465025e39920345724afa2ce396e
 SHA512:
-  metadata.gz: cdc5ed3dc3056702683c153d9399f4aa7f89e82806e3be2f5d079da8d0ba2ae6aaf06be57fa54d1fbcf7461cdf2579b54b04a006d06d0827a0ef17845c7ed450
-  data.tar.gz: 3c647e2d17bdbf084cd20abb5cf1da61cea6c097930bfb6374d4917680cbc3f71cb16db5912e9cdb91fe52a6f91a976a49b1b7b76b10dde53d7d19c125705ec3
+  metadata.gz: fae7281bb414c6329bd19c5a58a4c0b23e0ac2eb11f24262ac34e6bbe278b7542de58b186f8838030eb3db9b439b0d618a4db12f4691cbe62ffe6b3daefe25f0
+  data.tar.gz: 0ff154a44d59306b1e9c793656b45696fd91be6715036ee3eebd62c1bb3f8c1fb988130f4877afe72c9630783a70dd8d55cc8b7d2e27f522817746d9e520316c

data/README.md

@@ -60,6 +60,21 @@ CSS can be written in two ways:
 
 Learn more about sidecar [here](https://viewcomponent.org/guide/generators.html#place-the-view-in-a-sidecar-directory).
 
+```bash
+bin/rails generate view_component:component Example title --sidecar
+```
+
+With automatic stylesheet generation enabled in `config/application.rb`, `config/ENVIRONMENT.rb`, or wherever you configure ViewComponent:
+
+```ruby
+# Ensure sidebar is enabled
+config.view_component.generate.sidecar = true
+# Then generate stylesheets via
+config.view_component.generate.stylesheet = true
+```
+
+`view_component:component` also creates the sidecar `.css` file, adds `include ViewComponent::ScopedStyles` to the component class, and sets `class="<%= component_class %>"` on the generated ERB template. You can pass `--no-stylesheet` to skip CSS generation for a single component.
+
 ```bash
 bin/rails generate view_component:component Example title --sidecar
 
@@ -68,10 +83,12 @@ bin/rails generate view_component:component Example title --sidecar
       create    test/components/example_component_test.rb
       invoke  erb
       create    app/components/example_component/example_component.html.erb
+      invoke  stylesheet
+      create    app/components/example_component/example_component.css
 
 ```
 
-Then add a matching stylesheet in the sidecar directory:
+Or add a matching stylesheet manually in the sidecar directory:
 
 ```css
 /* app/components/example_component/example_component.css */
@@ -161,6 +178,32 @@ end
 </div>
 ```
 
+You can also reference scoped classes from another component by passing the component class with `from:`:
+
+```erb
+<div class="<%= component_class(from: ButtonComponent) %>">
+  Button root class
+</div>
+
+<div class="<%= component_class("icon", from: ButtonComponent) %>">
+  Button icon class
+</div>
+```
+
+Inside sidecar stylesheets or `styles` blocks, use `:component(...)` as a compile-time reference to another component's scoped classes:
+
+```css
+.component:has(:component(ButtonComponent, icon)) {
+  padding-inline-end: 2rem;
+}
+
+:where(:component(CardComponent), :component(PanelComponent)) .title {
+  margin: 0;
+}
+```
+
+The first argument is the component constant, and the optional second argument is the class selector without a leading dot. When the class name is omitted, the referenced component's root class is used. `:component(...)` is replaced while scoped CSS is generated, so it can be used inside more complex selectors like `:where()`, `:is()`, `:not()`, and `:has()`.
+
 Scoped class names are prefixed by default using the class name (e.g. `.component` → `component_a1b2c3d4`). Set a global prefix in configuration, or override per component with `css_class_prefix`.
 
 The prefix is a template string. Use `{class_name}` for the CSS class being scoped and `{component_name}` for the component name (namespaces joined by `/`, with a trailing `Component` suffix removed):

data/lib/generators/view_component/scoped_styles/templates/view_component_scoped_styles.rb.tt

@@ -1,5 +1,11 @@
 # frozen_string_literal: true
 
+# Optional ViewComponent generator settings (in config/application.rb, config/ENVIRONMENT.rb, or wherever you configure ViewComponent):
+# Ensure sidebar is enabled
+# config.view_component.generate.sidecar = true
+# Then generate stylesheets via
+# config.view_component.generate.stylesheet = true
+
 ViewComponent::ScopedStyles.configure do |config|
   # Where ViewComponent classes live (relative to Rails.root). Default: "app/components"
   config.components_path = <%= components_path_expression %>

data/lib/generators/view_component/stylesheet/stylesheet_generator.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require "generators/view_component/abstract_generator"
+
+module ViewComponent
+  module Generators
+    class StylesheetGenerator < ::Rails::Generators::NamedBase
+      include ViewComponent::AbstractGenerator
+
+      source_root File.expand_path("templates", __dir__)
+      class_option :sidecar, type: :boolean, default: false
+      class_option :skip_suffix, type: :boolean, default: false
+
+      def create_stylesheet
+        template "component.css", stylesheet_destination
+      end
+
+      def inject_scoped_styles_module
+        return unless File.exist?(absolute_component_rb_path)
+
+        content = File.read(absolute_component_rb_path)
+        return if content.include?("ViewComponent::ScopedStyles")
+
+        class_name_pattern = component_class_name.split("::").last
+        match = content.match(/^(\s*)class #{Regexp.escape(class_name_pattern)}\b[^\n]*\n/)
+        return unless match
+
+        indent = "#{match[1]}  "
+        inject_into_file component_rb_path,
+          "#{indent}include ViewComponent::ScopedStyles\n",
+          after: match[0]
+      end
+
+      def update_view_template
+        return if options["inline"] || options["call"]
+
+        path = view_template_path
+        return unless File.exist?(File.join(destination_root, path))
+
+        gsub_file path, /<div/, '<div class="<%= component_class %>"', verbose: false
+      end
+
+      private
+
+      def absolute_component_rb_path
+        File.join(destination_root, component_rb_path)
+      end
+
+      def component_file_name
+        "#{file_name}#{"_component" unless options[:skip_suffix]}"
+      end
+
+      def component_class_name
+        "#{class_name}#{"Component" unless options[:skip_suffix]}"
+      end
+
+      def component_rb_path
+        File.join(component_path, class_path, "#{component_file_name}.rb")
+      end
+
+      def stylesheet_destination
+        if sidecar?
+          File.join(
+            component_path, class_path, component_file_name, "#{component_file_name}.css"
+          )
+        else
+          File.join(component_path, class_path, "#{component_file_name}.css")
+        end
+      end
+
+      def view_template_path
+        File.join(destination_directory, "#{destination_file_name}.html.erb")
+      end
+    end
+  end
+end

data/lib/generators/view_component/stylesheet/templates/component.css.tt

@@ -0,0 +1,3 @@
+.component {
+  /* TODO: add component styles */
+}

data/lib/view_component/scoped_styles/component_generator_hook.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require "generators/view_component/component/component_generator"
+
+module ViewComponent
+  module Generators
+    class ComponentGenerator
+      class_option :stylesheet, type: :boolean,
+        default: ViewComponent::Base.config.generate.stylesheet
+
+      hook_for :stylesheet, type: :boolean
+    end
+  end
+end

data/lib/view_component/scoped_styles/concern.rb

@@ -8,6 +8,15 @@ module ViewComponent
 
     CACHED_VARIABLES = %i[@component_styles @component_id @component_class_map].freeze
     CLASS_SELECTOR_PATTERN = /\.([a-zA-Z_][\w-]*)\b/
+    COMPONENT_REFERENCE_PATTERN = /
+      :component\(
+        \s*
+        (?<component_name>[A-Za-z_]\w*(?:::[A-Za-z_]\w*)*)
+        \s*
+        (?:,\s*(?<css_class>[a-zA-Z_][\w-]*)\s*)?
+      \)
+    /x
+    COMPONENT_RESOLUTION_STACK_KEY = :view_component_scoped_styles_component_resolution_stack
 
     # Default root class for +component_class+ when it matches a selector in the CSS.
     COMPONENT_CSS_CLASS = "component".freeze
@@ -115,13 +124,26 @@ module ViewComponent
       end
 
       def generate_component_styles
+        pushed = false
+
+        if component_resolution_stack.include?(self)
+          names = (component_resolution_stack + [self]).map { |component| component.name || component.inspect }
+          raise ArgumentError, "Circular scoped style component reference: #{names.join(" -> ")}"
+        end
+
+        component_resolution_stack.push(self)
+        pushed = true
         styles_content = generate_styles_content
         css_classes = extract_css_classes(styles_content)
         primary_class = primary_css_class(css_classes)
 
         @component_id = component_id_for(primary_class, styles_content)
         @component_class_map = build_component_class_map(styles_content, css_classes, primary_class)
-        @component_styles = replace_css_classes(styles_content, @component_class_map)
+        @component_styles = replace_component_references(
+          replace_css_classes(styles_content, @component_class_map)
+        )
+      ensure
+        component_resolution_stack.pop if pushed
       end
 
       def generate_styles_content
@@ -161,6 +183,17 @@ module ViewComponent
         end
       end
 
+      def replace_component_references(styles_content)
+        styles_content.gsub(COMPONENT_REFERENCE_PATTERN) do
+          component_name = Regexp.last_match[:component_name]
+          css_class = Regexp.last_match[:css_class]
+          component_class = resolve_component_reference(component_name)
+          scoped_class = scoped_component_class(component_class, css_class)
+
+          ".#{CssClassPrefix.escape_for_css_selector(scoped_class)}"
+        end
+      end
+
       def component_id_for(primary_class, styles_content)
         if ignored_css_class?(primary_class)
           primary_class
@@ -202,6 +235,36 @@ module ViewComponent
         end
       end
 
+      def resolve_component_reference(component_name)
+        component_name.to_s.split("::").inject(Object) do |namespace, constant_name|
+          namespace.const_get(constant_name)
+        end
+      rescue NameError
+        raise ArgumentError, "Unable to resolve scoped style component reference: #{component_name}"
+      end
+
+      def scoped_component_class(component_class, css_class = nil)
+        unless component_class.respond_to?(:component_styles)
+          raise ArgumentError, "#{component_class} does not include ViewComponent::ScopedStyles"
+        end
+
+        component_class.component_styles
+
+        if css_class
+          scoped = component_class.instance_variable_get(:@component_class_map)[css_class.to_s.delete_prefix(".")]
+
+          raise ArgumentError, "#{component_class.name || component_class} does not define .#{css_class}" unless scoped
+
+          scoped
+        else
+          component_class.instance_variable_get(:@component_id)
+        end
+      end
+
+      def component_resolution_stack
+        Thread.current[COMPONENT_RESOLUTION_STACK_KEY] ||= []
+      end
+
       def clear_component_style_cache
         CACHED_VARIABLES.each do |ivar|
           remove_instance_variable(ivar) if instance_variable_defined?(ivar)
@@ -215,28 +278,30 @@ module ViewComponent
     # appears in the CSS, otherwise the first class in the stylesheet).
     #
     # @param name [String, Symbol] CSS class without a leading dot (e.g. +"input-box"+)
-    def component_class(name = nil)
-      return nil unless component_has_styles? || component_has_stylesheet?
+    # @param from [Class] component class to read scoped CSS classes from
+    def component_class(name = nil, from: self.class)
+      return nil unless from.respond_to?(:component_styles)
+      return nil unless component_has_styles?(from) || component_has_stylesheet?(from)
 
-      self.class.component_styles
+      from.component_styles
 
       if name
-        class_map = self.class.instance_variable_get(:@component_class_map)
+        class_map = from.instance_variable_get(:@component_class_map)
         class_map[name.to_s.delete_prefix(".")]
       else
-        self.class.instance_variable_get(:@component_id)
+        from.instance_variable_get(:@component_id)
       end
     end
 
     private
 
-    def component_has_stylesheet?
-      self.class.has_stylesheet?
+    def component_has_stylesheet?(component_class = self.class)
+      component_class.has_stylesheet?
     end
 
-    def component_has_styles?
-      self.class.instance_variable_defined?(:@styles_block) &&
-        self.class.instance_variable_get(:@styles_block)
+    def component_has_styles?(component_class = self.class)
+      component_class.instance_variable_defined?(:@styles_block) &&
+        component_class.instance_variable_get(:@styles_block)
     end
   end
 end

data/lib/view_component/scoped_styles/railtie.rb

@@ -6,6 +6,10 @@ require "rails/railtie"
 module ViewComponent
   module ScopedStyles
     class Railtie < Rails::Railtie
+      generators do
+        require_relative "component_generator_hook"
+      end
+
       config.after_initialize do
         next unless Rails.env.development?
 

data/lib/view_component/scoped_styles/version.rb

@@ -2,6 +2,6 @@
 
 module ViewComponent
   module ScopedStyles
-    VERSION = "0.5.0"
+    VERSION = "0.6.1"
   end
 end

data/lib/view_component/scoped_styles.rb

@@ -4,6 +4,7 @@ require_relative "scoped_styles/version"
 require_relative "scoped_styles/configuration"
 require_relative "scoped_styles/css_class_prefix"
 require "active_support/concern"
+require "active_support/core_ext/enumerable"
 require_relative "scoped_styles/concern"
 require_relative "scoped_styles/stylist"
 require_relative "scoped_styles/railtie"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: view_component-scoped_styles
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.1
 platform: ruby
 authors:
 - Chris Edwards
@@ -112,7 +112,10 @@ files:
 - Rakefile
 - lib/generators/view_component/scoped_styles/install_generator.rb
 - lib/generators/view_component/scoped_styles/templates/view_component_scoped_styles.rb.tt
+- lib/generators/view_component/stylesheet/stylesheet_generator.rb
+- lib/generators/view_component/stylesheet/templates/component.css.tt
 - lib/view_component/scoped_styles.rb
+- lib/view_component/scoped_styles/component_generator_hook.rb
 - lib/view_component/scoped_styles/concern.rb
 - lib/view_component/scoped_styles/configuration.rb
 - lib/view_component/scoped_styles/css_class_prefix.rb
@@ -142,7 +145,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.3
+rubygems_version: 4.0.10
 specification_version: 4
 summary: Scoped, colocated CSS for ViewComponent components.
 test_files: []