view_component-scoped_styles 0.7.0 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76cfb539bacc159bd6913d32e02fd65f4bdf694e94956fdb9187b68b951badbe
-  data.tar.gz: 6cd273fa833779ed196785c3318ffb79c3c55929c9637aa067d6d2e97a1bbb14
+  metadata.gz: 7a5b9375fce9459d0ff5176843540baf0af45fc19c75771f9e55a23bd400f0ad
+  data.tar.gz: b153dd8c88aabf25dbfdbcb1a74584f35a7c58a57b1394de77fad68765f16b18
 SHA512:
-  metadata.gz: b7ebb5bd1bbba3ad26b14119f80d54623a0aae174956c178600c130106d23517053ab232b91ba4f516cebca07fb7c08581a34ad4cab83a6cce00c611957110a3
-  data.tar.gz: 0caa033226552ccf3ea15d7a6d8af1240449d37a68d1c18f2cb549882c46ee42145cf0f41434e28af4fe68fe242337c3f4b75af27ee93a917412f337e1c32a98
+  metadata.gz: b43ff7e5452e2cddfe8e40dcabcffe184dcab1ca0d8a43bc037689b6c3b742440a3eba4805ad17727304b1e5404739638d13c45f45eed4e965bf10861a3ed2c4
+  data.tar.gz: c53b57921b99b62b247f080087152056dcefc9529dbe00b5c213fa5ce8511baadcd906739991fba0c72b4d96e23f2733dce637ec3084134c6e0e4112c22a50d4

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,13 +9,19 @@ 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
 
-          ensure_stylesheet_exists!
-
-          update_stylesheet_with(component_name, styles)
+          FileUtils.mkdir_p(File.dirname(stylesheet_path))
+          File.open("#{stylesheet_path}.lock", "a") do |lock|
+            lock.flock(File::LOCK_EX)
+            ensure_stylesheet_exists!
+            update_stylesheet_with(component_name, styles)
+          end
         end
 
         private
@@ -23,12 +29,12 @@ module ViewComponent
         def ensure_stylesheet_exists!
           return if File.exist?(stylesheet_path)
 
-          FileUtils.mkdir_p(File.dirname(stylesheet_path))
           File.write(stylesheet_path, initial_content)
         end
 
         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 +97,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.1"
   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.1
 platform: ruby
 authors:
 - Chris Edwards