view_component-scoped_styles 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 65712096bb4c02068da2dca36b66bad2d4dffc773234d42910dcadc5ef354a21
-  data.tar.gz: 12d6dc8afdc1b530a749810a3fb32b13545c6a3421dd8e21c7c8f85c76b1539d
+  metadata.gz: c2f015fce0d3e52a95641a3a394e7d348c90db92e29b0d023f7a26990806a544
+  data.tar.gz: a856272767f5b7d5a882d6e8576bb0fe5195d94cacc3b11220f718cbdfa9123c
 SHA512:
-  metadata.gz: 6c7b9ede8f02445070c51dbe34e935ff43e9cbc60c3594d270915454cb6e583b02748b21b1531209fdef17b99d5654815333997fb6d3bd9fe5f46336957899ba
-  data.tar.gz: 239fe37c5445b1aac40e589da187643a37c66d9b8cdf0f9ffbaae51049d8778bea1a86cab5fa38307a3022070140df2e39d393b76f266a97434cb2ecfbe6b106
+  metadata.gz: b2bb1e1106aa4fdb8c0d44df137c60d21680c050f9a9a9eef0f9b64bb6c05509f6a4f40bc40f9708806833d7a7d757317299417b64c7fb4834bbd8b98d725a32
+  data.tar.gz: 9f78813f81df45c463411cb5f3b1079b84c8f3745fbc870fd84e8512e1692eb71f98523a526bff2ad55964c26f2d190eccb57cbfc38d6ffea2da7a337d0a3620

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:
@@ -190,7 +206,7 @@ or via the `component_class` helper:
 
 ### Using the scoped CSS
 
-All scoped CSS will be compiled into `app/assets/stylesheets/components.scoped.css`.
+All scoped CSS will be compiled into a single bundled stylesheet. By default that is `app/assets/stylesheets/components.scoped.css`; both the directory and filename are configurable (see [Configuration](#configuration)).
 
 You should import this stylesheet within your app:
 
@@ -217,15 +233,27 @@ ViewComponent::ScopedStyles.configure do |config|
   # Where ViewComponent classes live (relative to Rails.root). Default: "app/components"
   config.components_path = File.join("app", "components")
 
-  # Optional @layer name for components.scoped.css (e.g. "components"). Default: nil.
+  # Where the bundled scoped stylesheet is written (relative to Rails.root). Default: "app/assets/stylesheets"
+  config.assets_path = File.join("app", "assets", "stylesheets")
+
+  # Filename of the bundled scoped stylesheet. Default: "components.scoped.css"
+  config.stylesheet_name = "components.scoped.css"
+
+  # 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-"
 end
 ```
 
 | Option | Default | Description |
 | --- | --- | --- |
 | `components_path` | `"app/components"` | Where ViewComponent classes live, relative to `Rails.root`. |
+| `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"`). |
 
 ## Related projects
 

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

@@ -27,13 +27,29 @@ module ViewComponent
         end
 
         def components_path_expression
-          segments = Pathname(configuration_defaults.components_path).each_filename.to_a
-          "File.join(#{segments.map { |segment| %("#{segment}") }.join(", ")})"
+          path_expression_for(configuration_defaults.components_path)
+        end
+
+        def assets_path_expression
+          path_expression_for(configuration_defaults.assets_path)
+        end
+
+        def stylesheet_name_value
+          configuration_defaults.stylesheet_name.inspect
         end
 
         def components_layer_value
           configuration_defaults.components_layer.inspect
         end
+
+        def css_class_prefix_value
+          configuration_defaults.css_class_prefix.inspect
+        end
+
+        def path_expression_for(path)
+          segments = Pathname(path).each_filename.to_a
+          "File.join(#{segments.map { |segment| %("#{segment}") }.join(", ")})"
+        end
       end
     end
   end

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

@@ -4,6 +4,15 @@ ViewComponent::ScopedStyles.configure do |config|
   # Where ViewComponent classes live (relative to Rails.root). Default: "app/components"
   config.components_path = <%= components_path_expression %>
 
-  # Optional @layer name for components.scoped.css (e.g. "components"). Default: nil.
+  # Where the bundled scoped stylesheet is written (relative to Rails.root). Default: "app/assets/stylesheets"
+  config.assets_path = <%= assets_path_expression %>
+
+  # Filename of the bundled scoped stylesheet. Default: "components.scoped.css"
+  config.stylesheet_name = <%= stylesheet_name_value %>
+
+  # 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-"
+  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

@@ -8,6 +8,8 @@ module ViewComponent
     #
     #   ViewComponent::ScopedStyles.configure do |config|
     #     config.components_path = File.join("app", "view_components")
+    #     config.assets_path = File.join("app", "assets", "stylesheets")
+    #     config.stylesheet_name = "components.scoped.css"
     #     config.components_layer = "components"
     #   end
     class Configuration
@@ -16,8 +18,17 @@ module ViewComponent
       # @return [String] default: +"app/components"+
       attr_accessor :components_path
 
-      # Optional CSS cascade layer name for generated styles in
-      # +app/assets/stylesheets/components.scoped.css+.
+      # Directory where the bundled scoped stylesheet is written, relative to {Rails.root}.
+      #
+      # @return [String] default: +"app/assets/stylesheets"+
+      attr_accessor :assets_path
+
+      # Filename of the bundled scoped stylesheet within {assets_path}.
+      #
+      # @return [String] default: +"components.scoped.css"+
+      attr_accessor :stylesheet_name
+
+      # Optional CSS cascade layer name for the bundled scoped stylesheet.
       #
       # When set, the bundled stylesheet is wrapped in +@layer <name> { ... }+ so
       # you can control specificity relative to other layers in your app.
@@ -25,9 +36,17 @@ 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")
+        @assets_path = File.join("app", "assets", "stylesheets")
+        @stylesheet_name = "components.scoped.css"
         @components_layer = nil
+        @css_class_prefix = "c-"
       end
     end
 

data/lib/view_component/scoped_styles/stylist/writer.rb

@@ -48,7 +48,7 @@ module ViewComponent
         end
 
         def write_atomically(content)
-          if ViewComponent::ScopedStyles.configuration.components_layer
+          if config.components_layer
             content = content.rstrip + "\n}\n"
           end
 
@@ -84,7 +84,7 @@ module ViewComponent
         def initial_content
           content = "/* Generated by ViewComponent::ScopedStyles - Do not edit manually */\n"
 
-          if (layer = ViewComponent::ScopedStyles.configuration.components_layer)
+          if (layer = config.components_layer)
             content += "@layer #{layer} {\n"
           end
 
@@ -92,7 +92,13 @@ module ViewComponent
         end
 
         def stylesheet_path
-          @stylesheet_path ||= Rails.root.join("app/assets/stylesheets/components.scoped.css")
+          @stylesheet_path ||= begin
+            Rails.root.join(config.assets_path, config.stylesheet_name)
+          end
+        end
+
+        def config
+          @config ||= ViewComponent::ScopedStyles.configuration
         end
       end
     end

data/lib/view_component/scoped_styles/version.rb

@@ -2,6 +2,6 @@
 
 module ViewComponent
   module ScopedStyles
-    VERSION = "0.2.0"
+    VERSION = "0.4.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.4.0
 platform: ruby
 authors:
 - Chris Edwards