view_component_scoped_css 0.1.0 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +52 -5
- data/lib/view_component_scoped_css/base.rb +1 -5
- data/lib/view_component_scoped_css/current_context.rb +6 -5
- data/lib/view_component_scoped_css/hook.rb +3 -12
- data/lib/view_component_scoped_css/version.rb +1 -1
- data/lib/view_component_scoped_css.rb +4 -0
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 23e8691887ae2ae3f85d8f23f4ad92bc47f5723c6db6ac4f0f0fcb2c886c36ec
|
|
4
|
+
data.tar.gz: 25cc37a5ea2db946ea865e0a9bb4edfdc268c43ea44a7dad71396b698050ff4d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dbc31138ecca27da81a1b79ed256728d7dfe04599fe48d83fc502438bed81faf9a1cdef1f112b06a30336585d147f62863f3208e7a6c1eb3b109f66cc873956d
|
|
7
|
+
data.tar.gz: 28a614c7a7c3aea992de5db12cb4053dc4560ec47c1929319817efc0b060f26814f2028004097a4c0fbe34354a262e9e807d90ef8a45cffb5e14cb104b8dbd83
|
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
|
|
|
@@ -13,12 +13,8 @@ module ViewComponentScopedCss
|
|
|
13
13
|
end
|
|
14
14
|
|
|
15
15
|
class_methods do
|
|
16
|
-
def reload_component_css_tag
|
|
17
|
-
@component_css_tag = ViewComponentScopedCss::Tag.new(self).call
|
|
18
|
-
end
|
|
19
|
-
|
|
20
16
|
def component_css_tag
|
|
21
|
-
|
|
17
|
+
ViewComponentScopedCss::CurrentContext.add(self)
|
|
22
18
|
end
|
|
23
19
|
|
|
24
20
|
def component_identifier
|
|
@@ -7,17 +7,18 @@ 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
|
-
def self.add(
|
|
16
|
+
def self.add(view_component_class)
|
|
17
17
|
self.css ||= {}
|
|
18
|
-
self.css[
|
|
18
|
+
self.css[view_component_class.name] ||= ViewComponentScopedCss::Tag.new(view_component_class).call
|
|
19
|
+
self.css[view_component_class.name]
|
|
19
20
|
end
|
|
20
21
|
|
|
21
|
-
resets { self.css = {} }
|
|
22
|
+
resets { self.css = {} } if ViewComponentScopedCss.config.compile_cache
|
|
22
23
|
end
|
|
23
24
|
end
|
|
@@ -11,18 +11,9 @@ module ViewComponentScopedCss
|
|
|
11
11
|
define_callbacks :render
|
|
12
12
|
end
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
ViewComponentScopedCss::CurrentContext.add(self)
|
|
18
|
-
end
|
|
19
|
-
end
|
|
20
|
-
else
|
|
21
|
-
def before_render
|
|
22
|
-
run_callbacks :render do
|
|
23
|
-
self.class.reload_component_css_tag
|
|
24
|
-
ViewComponentScopedCss::CurrentContext.add(self)
|
|
25
|
-
end
|
|
14
|
+
def before_render
|
|
15
|
+
run_callbacks :render do
|
|
16
|
+
ViewComponentScopedCss::CurrentContext.add(self.class)
|
|
26
17
|
end
|
|
27
18
|
end
|
|
28
19
|
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: view_component_scoped_css
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Masa (Aileron inc)
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2022-
|
|
11
|
+
date: 2022-12-12 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: activesupport
|