view_component_scoped_css 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ca24b914debb17569e059d451c0963f456c1431794e8f47d00267c2b2211f342
|
|
4
|
+
data.tar.gz: 04b5d64c71a8843a3137bfb5df321f4ea0db95a5584eb7ed562b95653f30809f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
-
|
|
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 '
|
|
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
|
|
21
|
+
$ gem install view_component_scoped_css
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
|
-
|
|
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
|
|
10
|
+
def self.render
|
|
11
11
|
return if css.empty?
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
css.values.join("\n").html_safe
|
|
14
14
|
end
|
|
15
15
|
|
|
16
16
|
def self.add(view_component)
|