view_component-scoped_styles 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 65712096bb4c02068da2dca36b66bad2d4dffc773234d42910dcadc5ef354a21
-  data.tar.gz: 12d6dc8afdc1b530a749810a3fb32b13545c6a3421dd8e21c7c8f85c76b1539d
+  metadata.gz: 4518c4426e35b342ba212fb90ab4d5e4692d7427fdf5fdbe5ced923a71cc1e42
+  data.tar.gz: 601433c85c4aad6602831f8c53e662f73080d8bb40f9104f28fc8842411e0569
 SHA512:
-  metadata.gz: 6c7b9ede8f02445070c51dbe34e935ff43e9cbc60c3594d270915454cb6e583b02748b21b1531209fdef17b99d5654815333997fb6d3bd9fe5f46336957899ba
-  data.tar.gz: 239fe37c5445b1aac40e589da187643a37c66d9b8cdf0f9ffbaae51049d8778bea1a86cab5fa38307a3022070140df2e39d393b76f266a97434cb2ecfbe6b106
+  metadata.gz: 8e9a1ab80bf24d000347be17e22d19e684a1ec1f70a08cf95952618c20891b84b8c50d34ab3f08e595c622659d77f5aa423eb5f2f11ebe0213aefa9af75cd9dc
+  data.tar.gz: 3846bc856b99e9be1f416e6616e33e4f0fa9388ddd7a253c714bc56198218543a68e17d5872a3aa1dbe92993691adf4257068f4f6e512aede4015d6c6296bdf1

data/README.md

@@ -161,6 +161,22 @@ 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`:
+
+```ruby
+class ExampleComponent < ViewComponent::Base
+  include ViewComponent::ScopedStyles
+
+  css_class_prefix "vc-"
+
+  styles do
+    <<~CSS
+      .component { ... }  # becomes .vc-a1b2c3d4 in components.scoped.css
+    CSS
+  end
+end
+```
+
 ### Ignoring classes
 
 Ignored classes are left unchanged in generated CSS:
@@ -219,6 +235,9 @@ ViewComponent::ScopedStyles.configure do |config|
 
   # Optional @layer name for components.scoped.css (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-"
 end
 ```
 
@@ -226,6 +245,7 @@ end
 | --- | --- | --- |
 | `components_path` | `"app/components"` | Where ViewComponent classes live, relative to `Rails.root`. |
 | `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"`). |
 
 ## Related projects
 

data/lib/generators/view_component/scoped_styles/install_generator.rb

@@ -34,6 +34,10 @@ module ViewComponent
         def components_layer_value
           configuration_defaults.components_layer.inspect
         end
+
+        def css_class_prefix_value
+          configuration_defaults.css_class_prefix.inspect
+        end
       end
     end
   end

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

@@ -6,4 +6,7 @@ ViewComponent::ScopedStyles.configure do |config|
 
   # Optional @layer name for components.scoped.css (e.g. "components"). Default: nil.
   config.components_layer = <%= components_layer_value %>
+
+  # Prefix for scoped class names (e.g. "c-" produces "c-a1b2c3d4"). Default: "c-"
+  config.css_class_prefix = <%= css_class_prefix_value %>
 end

data/lib/view_component/scoped_styles/concern.rb

@@ -52,6 +52,21 @@ module ViewComponent
         register_styles_if_rails_loaded
       end
 
+      # Sets the prefix for scoped class names on this component (e.g. +"vc-"+ → +"vc-a1b2c3d4"+).
+      #
+      # Overrides {ViewComponent::ScopedStyles.configuration}.css_class_prefix for this component.
+      #
+      # Clears cached generated styles when +prefix+ changes.
+      #
+      # @param prefix [String, nil] prefix without a hash suffix (e.g. +"c-"+, +"vc-"+)
+      def css_class_prefix(prefix = nil)
+        if prefix
+          const_set(:CSS_CLASS_PREFIX, prefix.to_s)
+          clear_component_style_cache
+        end
+        register_styles_if_rails_loaded
+      end
+
       # Returns processed CSS with scoped class selectors, or +nil+ if none.
       def component_styles
         return @component_styles if defined?(@component_styles)
@@ -160,7 +175,15 @@ module ViewComponent
         input = is_primary ? styles_content : "#{styles_content}:#{css_class}"
         hash = ::Digest::MD5.hexdigest(input)[0..7]
 
-        "c-#{hash}"
+        "#{scoped_css_class_prefix}#{hash}"
+      end
+
+      def scoped_css_class_prefix
+        if const_defined?(:CSS_CLASS_PREFIX, false)
+          self::CSS_CLASS_PREFIX
+        else
+          ViewComponent::ScopedStyles.configuration.css_class_prefix
+        end
       end
 
       def clear_component_style_cache

data/lib/view_component/scoped_styles/configuration.rb

@@ -25,9 +25,15 @@ 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"+).
+      #
+      # @return [String] default: +"c-"+
+      attr_accessor :css_class_prefix
+
       def initialize
         @components_path = File.join("app", "components")
         @components_layer = nil
+        @css_class_prefix = "c-"
       end
     end
 

data/lib/view_component/scoped_styles/version.rb

@@ -2,6 +2,6 @@
 
 module ViewComponent
   module ScopedStyles
-    VERSION = "0.2.0"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: view_component-scoped_styles
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Chris Edwards