view_component_scoped_css 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 13e334a551bf85880f71fc0715acce086e2f21fc7285b589045bbf321fc70b05
4
- data.tar.gz: 27dc36fd76aaf20fb13669d19d0f467b9d292c46cb801f8f424bd83b74a75295
3
+ metadata.gz: ca24b914debb17569e059d451c0963f456c1431794e8f47d00267c2b2211f342
4
+ data.tar.gz: 04b5d64c71a8843a3137bfb5df321f4ea0db95a5584eb7ed562b95653f30809f
5
5
  SHA512:
6
- metadata.gz: 2b848bc1dcc7c63259b379920af745ed03982607fd531eb95cc36e3c98b3e5a7e246dde1b0596f7c008c115ce358e1cc7a587b94a622f7632a44cdaf2de5c972
7
- data.tar.gz: 4bffca78d07c0c7975caa3046e6c5bac62a135199e49145d30251691f1848bb06300bace1566206f095d0bf880eb878e8798b275b535b7dbd2ee2d0e16afd3ee
6
+ metadata.gz: 78144240a0d2f1a975015f5e3870b1a0b7c0807f2fe196d5bc7d23a408886549d8928864f9c6819c47f3c0d53f69d19b3295875f0f85d9cd1e8dca0eb211dca5
7
+ data.tar.gz: a79a5ded14cbf384942bcaa215b5f20373bb61dd66094f4ea0197a157baee0ad4f36aa21ad130d9dfe1f347fdd57c4797113b7ea06c8d03b0754a5fffe014644
data/README.md CHANGED
@@ -1,15 +1,15 @@
1
1
  # ViewComponentScopedCss
2
+ Provides per-component scoped scss for viewcomponent
2
3
 
3
- Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/view_component_in_css`. To experiment with that code, run `bin/console` for an interactive prompt.
4
+ By providing special prefixes as scss class names, you can describe closed styles for each component, so you don't have to worry about css design such as bem.
4
5
 
5
- TODO: Delete this and the text above, and describe your gem
6
6
 
7
7
  ## Installation
8
8
 
9
9
  Add this line to your application's Gemfile:
10
10
 
11
11
  ```ruby
12
- gem 'view_component_in_css'
12
+ gem 'view_component_scoped_css'
13
13
  ```
14
14
 
15
15
  And then execute:
@@ -18,11 +18,58 @@ And then execute:
18
18
 
19
19
  Or install it yourself as:
20
20
 
21
- $ gem install view_component_in_css
21
+ $ gem install view_component_scoped_css
22
22
 
23
23
  ## Usage
24
24
 
25
- TODO: Write usage instructions here
25
+ directory hier
26
+
27
+ - app/component/application_component.rb
28
+
29
+ ```rb
30
+ class ApplicationComponent < ViewComponent::Base
31
+ include ViewComponentScopedCss::Base
32
+ end
33
+ ```
34
+
35
+ - app/component/button/component.rb
36
+ ```rb
37
+ class Button::Component < ApplicationComponent
38
+ end
39
+ ```
40
+
41
+ - app/component/button/component.scss
42
+ ```scss
43
+ :module(component) {
44
+ color: white;
45
+ background: green;
46
+ }
47
+
48
+ ```
49
+
50
+ - app/component/button/component.erb
51
+ ```erb
52
+ <%= component_tag :button do %>
53
+ test
54
+ <% end %>
55
+ ```
56
+
57
+ - app/views/layouts/application.html.erb
58
+ ```erb
59
+ <!DOCTYPE html>
60
+ <html lang="ja">
61
+ <head>
62
+ <meta name="viewport" content="width=device-width,initial-scale=1">
63
+ <%= csrf_meta_tags %>
64
+ <%= csp_meta_tag %>
65
+ <%= yield :scoped_css_tags %>
66
+ </head>
67
+ <body>
68
+ <main><%= yield %></main>
69
+ <% provide(:scoped_css_tags, ViewComponentScopedCss.tags) %>
70
+ </body>
71
+ </html>
72
+ ```
26
73
 
27
74
  ## Development
28
75
 
@@ -7,10 +7,10 @@ module ViewComponentScopedCss
7
7
  class CurrentContext < ActiveSupport::CurrentAttributes
8
8
  attribute :css
9
9
 
10
- def self.render(view)
10
+ def self.render
11
11
  return if css.empty?
12
12
 
13
- view.safe_join(css.values)
13
+ css.values.join("\n").html_safe
14
14
  end
15
15
 
16
16
  def self.add(view_component)
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ViewComponentScopedCss
4
- VERSION = "0.1.0"
4
+ VERSION = "0.1.1"
5
5
  end
@@ -20,6 +20,10 @@ module ViewComponentScopedCss
20
20
  autoload :Tag
21
21
  autoload :Compiler
22
22
 
23
+ def self.tags
24
+ CurrentContext.render
25
+ end
26
+
23
27
  def self.configure
24
28
  yield config
25
29
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: view_component_scoped_css
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Masa (Aileron inc)