view_component_scoped_css 0.1.0 → 0.1.2
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 +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
|