view_component-scoped_styles 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76cfb539bacc159bd6913d32e02fd65f4bdf694e94956fdb9187b68b951badbe
-  data.tar.gz: 6cd273fa833779ed196785c3318ffb79c3c55929c9637aa067d6d2e97a1bbb14
+  metadata.gz: cbe5f5accd78d4f725e75db0267dad949175cbe53ed68bb003dccc4745c294f4
+  data.tar.gz: 2f90b7dd291d0b5b3910a8c4e5e8be1e9c5000d8a69b07315582afac30abd2df
 SHA512:
-  metadata.gz: b7ebb5bd1bbba3ad26b14119f80d54623a0aae174956c178600c130106d23517053ab232b91ba4f516cebca07fb7c08581a34ad4cab83a6cce00c611957110a3
-  data.tar.gz: 0caa033226552ccf3ea15d7a6d8af1240449d37a68d1c18f2cb549882c46ee42145cf0f41434e28af4fe68fe242337c3f4b75af27ee93a917412f337e1c32a98
+  metadata.gz: 89c318654efd8e5dbba628f5aade499754d32588b35fee364c7e91a45bc3fb0ae2001c1e1b3fdd390ede8890f081d060ed221551e513ee021c5639aafc708b4b
+  data.tar.gz: 0d6adc27535b6ab7219935e78964b305cc13fd5b8590a82487b9dbc2d418deaddc15d0d870cd87bf8d1a4d62e96a993437909f4fe807d0a413dda3851a5eb05d

data/README.md

@@ -17,6 +17,7 @@ E.g. `.button` becomes `.button_a1b2c3d4`
     - [Referencing classes](#referencing-classes)
     - [Global classes](#global-classes)
     - [Using the scoped CSS](#using-the-scoped-css)
+    - [Multiple stylesheets](#multiple-stylesheets)
   - [Configuration](#configuration)
   - [Related projects](#related-projects)
   - [Development](#development)
@@ -317,7 +318,7 @@ Regenerate the bundled stylesheet after migrating. Scoped names are content-deri
 
 ### Using the 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)).
+Scoped CSS is compiled into `app/assets/stylesheets/components.scoped.css` by default. Components can select a different output bundle with `stylesheet`. The default stylesheet 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:
 
@@ -327,6 +328,38 @@ You should import this stylesheet within your app:
 @import url("./components.scoped.css");
 ```
 
+### Multiple stylesheets
+
+Set `stylesheet` before declaring a `styles` block to choose the component's output bundle. The gem appends `.scoped.css` to the name. This also works with sidecar CSS:
+
+```ruby
+class Admin::ButtonComponent < ViewComponent::Base
+  include ViewComponent::ScopedStyles
+
+  stylesheet "admin"
+
+  styles do
+    ".component { color: blue; }"
+  end
+end
+
+class Admin::CardComponent < ViewComponent::Base
+  include ViewComponent::ScopedStyles
+
+  stylesheet "admin"
+end
+```
+
+Both components compile into `app/assets/stylesheets/admin.scoped.css`. Any number of components can use the same bundle name. Components without a selection use `config.stylesheet_name`. Subclasses inherit their parent's selection and can override it.
+
+All output files use `config.assets_path` and, when configured, `config.components_layer`. Include each bundle where you need it:
+
+```erb
+<%= stylesheet_link_tag "admin.scoped", "data-turbo-track": "reload" %>
+```
+
+Cross-component class references still work across bundles. Load both bundles when both components' styles are needed. When moving an existing component between bundles, remove its marked CSS block from the old generated file, since registration updates the selected file only.
+
 ## Configuration
 
 Run the install generator in your Rails app:

data/lib/view_component/scoped_styles/concern.rb

@@ -23,6 +23,21 @@ module ViewComponent
     IGNORED_CSS_CLASSES = [].freeze
 
     class_methods do
+      # Selects an output bundle, written as <name>.scoped.css in assets_path.
+      # Subclasses inherit this choice unless they specify their own bundle.
+      def stylesheet(name = nil)
+        if name
+          @scoped_stylesheet = name.to_s
+          register_styles_if_rails_loaded
+        end
+
+        if defined?(@scoped_stylesheet)
+          @scoped_stylesheet
+        elsif superclass.respond_to?(:stylesheet)
+          superclass.stylesheet
+        end
+      end
+
       # Sets which CSS class is the root for +component_class+ (no argument).
       # Also triggers style registration in development when Rails is loaded
       # (registration also runs via the Railtie for all styled components).

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

@@ -9,6 +9,9 @@ module ViewComponent
         end
 
         def print!(component_class)
+          bundle = component_class.stylesheet
+          filename = bundle ? "#{bundle}.scoped.css" : config.stylesheet_name
+          @stylesheet_path = Rails.root.join(config.assets_path, filename)
           component_name = component_class.name
           component_class.instance_variable_get(:@component_id)
           styles = component_class.component_styles
@@ -29,6 +32,7 @@ module ViewComponent
 
         def update_stylesheet_with(component_name, styles)
           content = File.read(stylesheet_path)
+          content = content.sub(/\n\}\s*\z/, "\n") if config.components_layer
           updated_content = merge_styles_into(content, component_name, styles)
 
           write_atomically(updated_content)
@@ -91,11 +95,7 @@ module ViewComponent
           content
         end
 
-        def stylesheet_path
-          @stylesheet_path ||= begin
-            Rails.root.join(config.assets_path, config.stylesheet_name)
-          end
-        end
+        attr_reader :stylesheet_path
 
         def config
           @config ||= ViewComponent::ScopedStyles.configuration

data/lib/view_component/scoped_styles/version.rb

@@ -2,6 +2,6 @@
 
 module ViewComponent
   module ScopedStyles
-    VERSION = "0.7.0"
+    VERSION = "0.8.0"
   end
 end

metadata

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