view_component-scoped_styles 0.4.1 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a23828ee0e2dafc7e52ccb67a8a319391af70a50777701d5090e66626d159c3
-  data.tar.gz: b5a87e35910c84ae1a95914af878506b6fdd3c155071fca950f2fa8d76b61a8c
+  metadata.gz: 6eabd4a24031f8acbe3e73fba03f5bd1d8263feee45a8836e827fe4ce3e2bcf3
+  data.tar.gz: 632ae34483c93fdadb82fac21ac8b0a409ff9ae6b07098ff080c5e32a935e8fc
 SHA512:
-  metadata.gz: 026faad956f24fd8638fa4834b3d428d9363ed9e9d5d43de724df68e189edc998cd268140a3094881fb51b77677c5cb1e627b1819bbd8d3d4dfa5d349a778604
-  data.tar.gz: d947bece5e61141621b4674c91b947afcb8782103af7938ca5b3a2f57208258dea9333af44e2c8d85b2b67e354bd0710bbd8c33eef47518b411776d7ec99e5de
+  metadata.gz: cdc5ed3dc3056702683c153d9399f4aa7f89e82806e3be2f5d079da8d0ba2ae6aaf06be57fa54d1fbcf7461cdf2579b54b04a006d06d0827a0ef17845c7ed450
+  data.tar.gz: 3c647e2d17bdbf084cd20abb5cf1da61cea6c097930bfb6374d4917680cbc3f71cb16db5912e9cdb91fe52a6f91a976a49b1b7b76b10dde53d7d19c125705ec3

data/README.md

@@ -4,7 +4,7 @@ Scoped, colocated CSS for [ViewComponent](https://viewcomponent.org/).
 
 Avoids collisions by rewriting class selectors to stable, content-derived names.
 
-E.g. `.button` becomes `.c-a1b2c3d4`
+E.g. `.button` becomes `.button_a1b2c3d4`
 
 ## Table of Contents
 
@@ -161,22 +161,50 @@ end
 </div>
 ```
 
-Scoped class names are prefixed by default (e.g. `c-a1b2c3d4`). Set a global prefix in configuration, or override per component with `css_class_prefix`:
+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):
+
+```ruby
+ViewComponent::ScopedStyles.configure do |config|
+  config.css_class_prefix = "{class_name}_"  # default
+end
+```
 
 ```ruby
 class ExampleComponent < ViewComponent::Base
   include ViewComponent::ScopedStyles
 
-  css_class_prefix "vc-"
+  css_class_prefix "vc-{class_name}_"
+
+  styles do
+    <<~CSS
+      .component { ... }  # becomes .vc-component_a1b2c3d4 in components.scoped.css
+    CSS
+  end
+end
+```
+
+Namespaced components can include the component name in the prefix:
+
+```ruby
+class Admin::UserCardComponent < ViewComponent::Base
+  include ViewComponent::ScopedStyles
+
+  css_class_prefix "{component_name}_{class_name}_"
 
   styles do
     <<~CSS
-      .component { ... }  # becomes .vc-a1b2c3d4 in components.scoped.css
+      .component { ... }
+      # Admin/UserCardComponent_component_a1b2c3d4 in templates;
+      # Admin\/UserCardComponent_component_a1b2c3d4 in components.scoped.css
     CSS
   end
 end
 ```
 
+**Upgrading from 0.4.x:** set `config.css_class_prefix = "c-"` (and per-component overrides) to keep the previous `c-a1b2c3d4` class names without updating templates.
+
 ### Ignoring classes
 
 Ignored classes are left unchanged in generated CSS:
@@ -242,8 +270,8 @@ ViewComponent::ScopedStyles.configure do |config|
   # Optional @layer name for the bundled scoped stylesheet (e.g. "components"). Default: nil.
   config.components_layer = nil
 
-  # Prefix for scoped class names (e.g. "c-" produces "c-a1b2c3d4"). Default: "c-"
-  config.css_class_prefix = "c-"
+  # Prefix for scoped class names. Supports {component_name} and {class_name}. Default: "{class_name}_"
+  config.css_class_prefix = "{class_name}_"
 end
 ```
 
@@ -253,7 +281,7 @@ end
 | `assets_path` | `"app/assets/stylesheets"` | Directory where the bundled scoped stylesheet is written, relative to `Rails.root`. |
 | `stylesheet_name` | `"components.scoped.css"` | Filename of the bundled scoped stylesheet within `assets_path`. |
 | `components_layer` | `nil` | When set, wraps generated CSS in `@layer <name> { ... }` for cascade control. |
-| `css_class_prefix` | `"c-"` | Prefix prepended to scoped class names (e.g. `"vc-"` → `"vc-a1b2c3d4"`). |
+| `css_class_prefix` | `"{class_name}_"` | Prefix template for scoped class names. Supports `{class_name}` and `{component_name}` (namespaces joined by `/`, `Component` suffix stripped; e.g. `.component` → `component_a1b2c3d4`). Use `"c-"` to match 0.4.x behavior. |
 
 ## Related projects
 

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

@@ -13,6 +13,6 @@ ViewComponent::ScopedStyles.configure do |config|
   # Optional @layer name for the bundled scoped stylesheet (e.g. "components"). Default: nil.
   config.components_layer = <%= components_layer_value %>
 
-  # Prefix for scoped class names (e.g. "c-" produces "c-a1b2c3d4"). Default: "c-"
+  # Prefix for scoped class names. Supports {component_name} and {class_name} variables. Default: "{class_name}_"
   config.css_class_prefix = <%= css_class_prefix_value %>
 end

data/lib/view_component/scoped_styles/concern.rb

@@ -52,13 +52,14 @@ module ViewComponent
         register_styles_if_rails_loaded
       end
 
-      # Sets the prefix for scoped class names on this component (e.g. +"vc-"+ → +"vc-a1b2c3d4"+).
+      # Sets the prefix template for scoped class names on this component.
       #
       # Overrides {ViewComponent::ScopedStyles.configuration}.css_class_prefix for this component.
+      # Supports +{component_name}+ and +{class_name}+ template variables.
       #
       # Clears cached generated styles when +prefix+ changes.
       #
-      # @param prefix [String, nil] prefix without a hash suffix (e.g. +"c-"+, +"vc-"+)
+      # @param prefix [String, nil] prefix template without a hash suffix (e.g. +"{class_name}_"+)
       def css_class_prefix(prefix = nil)
         if prefix
           const_set(:CSS_CLASS_PREFIX, prefix.to_s)
@@ -154,7 +155,9 @@ module ViewComponent
         sorted_classes = scoped_map.keys.sort_by(&:length).reverse
 
         sorted_classes.reduce(styles_content) do |content, css_class|
-          content.gsub(/\.#{Regexp.escape(css_class)}\b/, ".#{class_map[css_class]}")
+          scoped = class_map[css_class]
+          escaped = CssClassPrefix.escape_for_css_selector(scoped)
+          content.gsub(/\.#{Regexp.escape(css_class)}\b/, ".#{escaped}")
         end
       end
 
@@ -175,7 +178,20 @@ module ViewComponent
         input = is_primary ? styles_content : "#{styles_content}:#{css_class}"
         hash = ::Digest::MD5.hexdigest(input)[0..7]
 
-        "#{scoped_css_class_prefix}#{hash}"
+        prefix = CssClassPrefix.interpolate(
+          scoped_css_class_prefix,
+          component_name: scoped_component_name,
+          class_name: css_class
+        )
+        "#{prefix}#{hash}"
+      end
+
+      def scoped_component_name
+        return "" unless name
+
+        parts = name.split("::")
+        parts[-1] = parts[-1].delete_suffix("Component")
+        parts.join("/")
       end
 
       def scoped_css_class_prefix

data/lib/view_component/scoped_styles/configuration.rb

@@ -36,9 +36,20 @@ module ViewComponent
       # @return [String, nil] default: +nil+ (no layer wrapper)
       attr_accessor :components_layer
 
-      # Prefix prepended to scoped class names (e.g. +"c-"+ → +"c-a1b2c3d4"+).
+      # Prefix prepended to scoped class names.
       #
-      # @return [String] default: +"c-"+
+      # Supports template variables:
+      #
+      # * +{component_name}+ — component name with namespaces joined by +/+,
+      #   and a trailing +Component+ suffix removed
+      # * +{class_name}+ — the CSS class being scoped
+      #
+      # Example: +"{class_name}_"+ with +.component+ → +"component_a1b2c3d4"+.
+      #
+      # To maintain compatibility with versions < 0.5.0 and avoid rewriting
+      # existing stylesheets, set this to +"c-"+.
+      #
+      # @return [String] default: +"{class_name}_"+
       attr_accessor :css_class_prefix
 
       def initialize
@@ -46,7 +57,7 @@ module ViewComponent
         @assets_path = File.join("app", "assets", "stylesheets")
         @stylesheet_name = "components.scoped.css"
         @components_layer = nil
-        @css_class_prefix = "c-"
+        @css_class_prefix = "{class_name}_"
       end
     end
 

data/lib/view_component/scoped_styles/css_class_prefix.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module ScopedStyles
+    # Interpolates +css_class_prefix+ template variables and escapes scoped class
+    # names for use in compiled CSS selectors.
+    class CssClassPrefix
+      VARIABLES = %w[component_name class_name].freeze
+      VARIABLE_PATTERN = /\{(#{VARIABLES.join("|")})\}/
+
+      class << self
+        # Replaces +{component_name}+ and +{class_name}+ in +template+.
+        #
+        # @param template [String] prefix template (e.g. +"{class_name}_"+)
+        # @param component_name [String] component name with namespaces joined by +/+,
+        #   and a trailing +Component+ suffix removed
+        # @param class_name [String] CSS class being scoped
+        # @return [String]
+        def interpolate(template, component_name:, class_name:)
+          template.gsub(VARIABLE_PATTERN) do
+            case ::Regexp.last_match(1)
+            when "component_name" then component_name
+            when "class_name" then class_name
+            end
+          end
+        end
+
+        # Escapes characters that are invalid in unescaped CSS class selectors.
+        #
+        # @param class_name [String]
+        # @return [String]
+        def escape_for_css_selector(class_name)
+          class_name.gsub("/", '\/')
+        end
+      end
+    end
+  end
+end

data/lib/view_component/scoped_styles/version.rb

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

data/lib/view_component/scoped_styles.rb

@@ -2,6 +2,7 @@
 
 require_relative "scoped_styles/version"
 require_relative "scoped_styles/configuration"
+require_relative "scoped_styles/css_class_prefix"
 require "active_support/concern"
 require_relative "scoped_styles/concern"
 require_relative "scoped_styles/stylist"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: view_component-scoped_styles
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.5.0
 platform: ruby
 authors:
 - Chris Edwards
@@ -115,6 +115,7 @@ files:
 - lib/view_component/scoped_styles.rb
 - lib/view_component/scoped_styles/concern.rb
 - lib/view_component/scoped_styles/configuration.rb
+- lib/view_component/scoped_styles/css_class_prefix.rb
 - lib/view_component/scoped_styles/railtie.rb
 - lib/view_component/scoped_styles/stylist.rb
 - lib/view_component/scoped_styles/stylist/writer.rb