view_component-scoped_styles 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43108a25040819bdeee257cd43228632e8de7822b24e96d675625208ff5f1544
-  data.tar.gz: 1023d48e94469ea2db73b971eb0c09440bdfb18167aea8abb461cb45e5bc6ed5
+  metadata.gz: 65712096bb4c02068da2dca36b66bad2d4dffc773234d42910dcadc5ef354a21
+  data.tar.gz: 12d6dc8afdc1b530a749810a3fb32b13545c6a3421dd8e21c7c8f85c76b1539d
 SHA512:
-  metadata.gz: e40669a1884ae189bc18edcf04cad923e210875078095d6fd7238b3dd9ff061172253f8c6dd86632ee207cd3e1ae108bf04d1dac1866daedd948c078e0a95e50
-  data.tar.gz: 6f67241201f8e8452e8eec7e316ff4a1259496347bc62f58dc6b2a7739557dc3df7f4e69ce75cc1041843dcd5d95d9a3cc40d590d7108c917f3850ae630e89e0
+  metadata.gz: 6c7b9ede8f02445070c51dbe34e935ff43e9cbc60c3594d270915454cb6e583b02748b21b1531209fdef17b99d5654815333997fb6d3bd9fe5f46336957899ba
+  data.tar.gz: 239fe37c5445b1aac40e589da187643a37c66d9b8cdf0f9ffbaae51049d8778bea1a86cab5fa38307a3022070140df2e39d393b76f266a97434cb2ecfbe6b106

data/README.md

@@ -1,4 +1,4 @@
-# ViewComponent::ScopedStyles
+# ViewComponent::ScopedStyles [![Gem Version](https://badge.fury.io/rb/view_component-scoped_styles.svg)](https://badge.fury.io/rb/view_component-scoped_styles)
 
 Scoped, colocated CSS for [ViewComponent](https://viewcomponent.org/).
 
@@ -8,13 +8,14 @@ E.g. `.button` becomes `.c-a1b2c3d4`
 
 ## Table of Contents
 
-- [ViewComponent::ScopedStyles](#viewcomponentscopedstyles)
+- [ViewComponent::ScopedStyles ](#viewcomponentscopedstyles-)
   - [Table of Contents](#table-of-contents)
   - [Installation](#installation)
   - [Usage](#usage)
     - [1. Using a sidecar stylesheet](#1-using-a-sidecar-stylesheet)
     - [2. Using a styles block in the component](#2-using-a-styles-block-in-the-component)
     - [Referencing classes](#referencing-classes)
+    - [Ignoring classes](#ignoring-classes)
     - [Using the scoped CSS](#using-the-scoped-css)
   - [Configuration](#configuration)
   - [Related projects](#related-projects)
@@ -160,6 +161,33 @@ end
 </div>
 ```
 
+### Ignoring classes
+
+Ignored classes are left unchanged in generated CSS:
+
+```ruby
+class ExampleComponent < ViewComponent::Base
+  include ViewComponent::ScopedStyles
+
+  ignored_css_classes "is-open", "active"
+
+  styles do
+    <<~CSS
+      .component { ... }
+      .is-open { ... }  # stays .is-open in components.scoped.css
+    CSS
+  end
+end
+```
+In your view, you can either reference the class directly:
+```erb
+<div class="<%= component_class %> is-open">
+```
+or via the `component_class` helper:
+```erb
+<div class="<%= component_class %> <%= component_class("is-open") %>">
+```
+
 ### Using the scoped CSS
 
 All scoped CSS will be compiled into `app/assets/stylesheets/components.scoped.css`.

data/lib/view_component/scoped_styles/concern.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "digest"
+
 module ViewComponent
   module ScopedStyles
     extend ActiveSupport::Concern
@@ -9,11 +11,12 @@ module ViewComponent
 
     # Default root class for +component_class+ when it matches a selector in the CSS.
     COMPONENT_CSS_CLASS = "component".freeze
+    IGNORED_CSS_CLASSES = [].freeze
 
     class_methods do
       # Sets which CSS class is the root for +component_class+ (no argument).
-      # Also triggers style registration when Rails is loaded (registration also
-      # runs via the Railtie for all styled components).
+      # Also triggers style registration in development when Rails is loaded
+      # (registration also runs via the Railtie for all styled components).
       #
       # All class selectors are rewritten to scoped names in +components.scoped.css+.
       # The primary class uses an id from the full stylesheet (e.g. +.icon+ → +.c-99d08d5a+);
@@ -26,7 +29,24 @@ module ViewComponent
       # @param name [String, nil] selector name without a leading dot (e.g. +"icon"+)
       def component_css_class(name = nil)
         if name
-          const_set(:COMPONENT_CSS_CLASS, name)
+          const_set(:COMPONENT_CSS_CLASS, name.to_s)
+          clear_component_style_cache
+        end
+        register_styles_if_rails_loaded
+      end
+
+      # Declares CSS class selectors that are not rewritten to scoped names.
+      #
+      # Ignored classes stay in +components.scoped.css+ as written (e.g. +.is-open+).
+      # +component_class("is-open")+ returns the original name.
+      #
+      # Clears cached generated styles when the list changes.
+      #
+      # @param classes [String, Symbol] selector names without a leading dot
+      def ignored_css_classes(*classes)
+        if classes.any?
+          names = classes.flatten.map { |css_class| css_class.to_s.delete_prefix(".") }
+          const_set(:IGNORED_CSS_CLASSES, names.freeze)
           clear_component_style_cache
         end
         register_styles_if_rails_loaded
@@ -40,8 +60,10 @@ module ViewComponent
         generate_component_styles
       end
 
-      # Writes this component's processed styles to the bundled or host stylesheet.
+      # Writes this component's processed styles to +components.scoped.css+.
+      # Only runs in development; production and test use the committed stylesheet.
       def register_styles
+        return unless register_styles_to_stylesheet?
         return unless @styles_block || has_stylesheet?
 
         Stylist.register(self)
@@ -66,18 +88,22 @@ module ViewComponent
       end
 
       def register_styles_if_rails_loaded
-        return unless defined?(Rails) && Rails.root
+        return unless register_styles_to_stylesheet?
         return unless defined?(Rails::Server) # only web server boot path
 
         register_styles
       end
 
+      def register_styles_to_stylesheet?
+        defined?(Rails::Application) && Rails.application && Rails.env.development?
+      end
+
       def generate_component_styles
         styles_content = generate_styles_content
         css_classes = extract_css_classes(styles_content)
         primary_class = primary_css_class(css_classes)
 
-        @component_id = generate_component_id(styles_content)
+        @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)
       end
@@ -97,28 +123,42 @@ module ViewComponent
 
       def build_component_class_map(styles_content, css_classes, primary_class)
         css_classes.index_with do |css_class|
-          if css_class == primary_class
-            @component_id
+          if ignored_css_class?(css_class)
+            css_class
           else
-            generate_scoped_class_id(styles_content, css_class)
+            generate_scoped_class_id(styles_content, css_class, primary_class)
           end
         end
       end
 
       def replace_css_classes(styles_content, class_map)
-        class_map.keys.sort_by(&:length).reverse.reduce(styles_content) do |content, css_class|
+        scoped_map = class_map.reject do |css_class, scoped|
+          css_class == scoped
+        end
+
+        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]}")
         end
       end
 
-      def generate_component_id(styles_content)
-        hash = Digest::MD5.hexdigest(styles_content)[0..7]
+      def component_id_for(primary_class, styles_content)
+        if ignored_css_class?(primary_class)
+          primary_class
+        else
+          generate_scoped_class_id(styles_content, primary_class, primary_class)
+        end
+      end
 
-        "c-#{hash}"
+      def ignored_css_class?(css_class)
+        self::IGNORED_CSS_CLASSES.include?(css_class)
       end
 
-      def generate_scoped_class_id(styles_content, css_class)
-        hash = Digest::MD5.hexdigest("#{styles_content}:#{css_class}")[0..7]
+      def generate_scoped_class_id(styles_content, css_class, primary_class)
+        is_primary = css_class == primary_class
+        input = is_primary ? styles_content : "#{styles_content}:#{css_class}"
+        hash = ::Digest::MD5.hexdigest(input)[0..7]
 
         "c-#{hash}"
       end

data/lib/view_component/scoped_styles/railtie.rb

@@ -1,16 +1,21 @@
 # frozen_string_literal: true
 
+require "active_support/core_ext/module/delegation"
 require "rails/railtie"
 
 module ViewComponent
   module ScopedStyles
     class Railtie < Rails::Railtie
       config.after_initialize do
+        next unless Rails.env.development?
+
         ViewComponent::ScopedStyles::Railtie.load_and_register_components
       end
 
-      if Rails.env.development?
-        config.to_prepare do
+      initializer "view_component.scoped_styles.reload" do |app|
+        next unless Rails.env.development?
+
+        app.config.to_prepare do
           ViewComponent::ScopedStyles::Railtie.register_components
         end
       end

data/lib/view_component/scoped_styles/version.rb

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

metadata

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