tailwind_merge 0.7.0 → 0.7.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/.ruby-version +1 -0
- data/CHANGELOG.md +17 -0
- data/README.md +35 -12
- data/lib/tailwind_merge/validators.rb +1 -1
- data/lib/tailwind_merge/version.rb +1 -1
- metadata +5 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7447d7154d014a86a19be3f98b6ddefb312845fbb027a9a173da9ea9c6594e8c
|
4
|
+
data.tar.gz: d573c40fe6d30de2a42dcab8fcf79c1e5a535b6a3c1af2c26e9ee696f5f38530
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 42727802539a4e2dc123df65265a19523c727eb5b3303689bd0363769e17d6ad998c6b48df52e81bf94d8091867fa9d073eb02cb2b83b31442016bde8ad83385
|
7
|
+
data.tar.gz: f54fcd81cd7d1f58b1aa8e5d0b2b0273d973126ccf82f7913d3e72dafd092a146072585c058fe4303b75d7e0f580b1f866091d209d4a08bd9a924813d2354a8f
|
data/.ruby-version
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
3.2.1
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,22 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
## [v0.7.1.2](https://github.com/gjtorikian/tailwind_merge/tree/v0.7.1.2) (2023-06-02)
|
4
|
+
|
5
|
+
[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.7.1.1...v0.7.1.2)
|
6
|
+
|
7
|
+
## [v0.7.1.1](https://github.com/gjtorikian/tailwind_merge/tree/v0.7.1.1) (2023-06-02)
|
8
|
+
|
9
|
+
[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.7.1...v0.7.1.1)
|
10
|
+
|
11
|
+
## [v0.7.1](https://github.com/gjtorikian/tailwind_merge/tree/v0.7.1) (2023-06-02)
|
12
|
+
|
13
|
+
[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.7.0...v0.7.1)
|
14
|
+
|
15
|
+
**Merged pull requests:**
|
16
|
+
|
17
|
+
- Port updates [\#12](https://github.com/gjtorikian/tailwind_merge/pull/12) ([gjtorikian](https://github.com/gjtorikian))
|
18
|
+
- Add Ruby 3.2 to CI. Minor additional cleanup. [\#11](https://github.com/gjtorikian/tailwind_merge/pull/11) ([petergoldstein](https://github.com/petergoldstein))
|
19
|
+
|
3
20
|
## [v0.7.0](https://github.com/gjtorikian/tailwind_merge/tree/v0.7.0) (2023-04-03)
|
4
21
|
|
5
22
|
[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.6.0...v0.7.0)
|
data/README.md
CHANGED
@@ -23,7 +23,7 @@ TailwindMerge::Merger.new.merge("px-2 py-1 bg-red hover:bg-dark-red p-3 bg-[#B91
|
|
23
23
|
|
24
24
|
## What's it for?
|
25
25
|
|
26
|
-
If you use Tailwind with a component-based UI renderer (like [ViewComponent](https://viewcomponent.org) or [Ariadne](https://github.com/yettoapp/ariadne
|
26
|
+
If you use Tailwind with a component-based UI renderer (like [ViewComponent](https://viewcomponent.org) or [Ariadne](https://github.com/yettoapp/ariadne)), you're probably familiar with the situation that you want to change some styles of an existing component:
|
27
27
|
|
28
28
|
```html
|
29
29
|
<!-- app/components/confirm_email_component.html.erb -->
|
@@ -45,15 +45,13 @@ This is where `tailwind_merge` comes in:
|
|
45
45
|
# border rounded p-5
|
46
46
|
```
|
47
47
|
|
48
|
-
tailwind-merge overrides conflicting classes and keeps everything else untouched. In the case of the
|
48
|
+
tailwind-merge overrides conflicting classes and keeps everything else untouched. In the case of the implementation of `ConfirmEmailComponent`, the input now only renders the classes `border rounded p-5`.
|
49
49
|
|
50
50
|
## Features
|
51
51
|
|
52
|
-
###
|
52
|
+
### Merging behavior
|
53
53
|
|
54
|
-
|
55
|
-
- Expensive computations happen upfront so that `merge` calls without a cache hit stay fast.
|
56
|
-
- These computations are called lazily on the first call to `merge` to prevent it from impacting app startup performance if it isn't used initially.
|
54
|
+
`tailwind_merge` is designed to be predictable and intuitive. It follows a set of rules to determine which class "wins" when there are conflicts. Here is a brief overview of the conflict resolutions which `tailwind_merge` can do.
|
57
55
|
|
58
56
|
### Last conflicting class wins
|
59
57
|
|
@@ -84,6 +82,8 @@ tailwind-merge overrides conflicting classes and keeps everything else untouched
|
|
84
82
|
@merger.merge('hover:focus:p-2 focus:hover:p-4') # → 'focus:hover:p-4'
|
85
83
|
```
|
86
84
|
|
85
|
+
The order of standard modifiers does not matter for tailwind-merge.
|
86
|
+
|
87
87
|
### Supports arbitrary values
|
88
88
|
|
89
89
|
```ruby
|
@@ -101,7 +101,8 @@ tailwind-merge overrides conflicting classes and keeps everything else untouched
|
|
101
101
|
@merger.merge('[padding:1rem] p-8') # → '[padding:1rem] p-8'
|
102
102
|
```
|
103
103
|
|
104
|
-
|
104
|
+
> **Warning**
|
105
|
+
> Watch out for using arbitrary properties which could be expressed as Tailwind classes. `tailwind_merge` does not resolve conflicts between arbitrary properties and their matching Tailwind classes to keep the bundle size small.
|
105
106
|
|
106
107
|
### Supports arbitrary variants
|
107
108
|
|
@@ -113,7 +114,9 @@ Watch out when mixing arbitrary properties which could be expressed as Tailwind
|
|
113
114
|
@merger.merge('[&:focus]:ring focus:ring-4') # → '[&:focus]:ring focus:ring-4'
|
114
115
|
```
|
115
116
|
|
116
|
-
|
117
|
+
> **Warning**
|
118
|
+
> Similarly to arbitrary properties, `tailwind_merge` does not resolve conflicts between arbitrary variants and their matching predefined modifiers for bundle size reasons.
|
119
|
+
> The order of standard modifiers before and after an arbitrary variant in isolation (all modifiers before are one group, all modifiers after are another group) does not matter for `tailwind_merge`. However, it _does_ matter whether a standard modifier is before or after an arbitrary variant both for Tailwind CSS and `tailwind_merge` because the resulting CSS selectors are different.
|
117
120
|
|
118
121
|
### Supports important modifier
|
119
122
|
|
@@ -124,9 +127,9 @@ Similarly to arbitrary properties, `tailwind_merge` does not resolve conflicts b
|
|
124
127
|
|
125
128
|
## Supports postfix modifiers
|
126
129
|
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
+
```ts
|
131
|
+
twMerge("text-sm leading-6 text-lg/7"); // → 'text-lg/7'
|
132
|
+
```
|
130
133
|
|
131
134
|
### Preserves non-Tailwind classes
|
132
135
|
|
@@ -148,7 +151,7 @@ If you're using Tailwind CSS without any extra configs, you can use it right awa
|
|
148
151
|
merger = TailwindMerge::Merger.new
|
149
152
|
```
|
150
153
|
|
151
|
-
|
154
|
+
### Usage with custom Tailwind config
|
152
155
|
|
153
156
|
If you're using a custom Tailwind config, you may need to configure tailwind-merge as well to merge classes properly.
|
154
157
|
|
@@ -303,6 +306,22 @@ Here's a brief summary for each validator:
|
|
303
306
|
- `IS_ARBITRARY_SHADOW` checks whether class part is an arbitrary value which starts with the same pattern as a shadow value (`[0_35px_60px_-15px_rgba(0,0,0,0.3)]`), namely with two lengths separated by a underscore.
|
304
307
|
- `IS_ANY` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when it's certain there are no other class groups in a namespace.
|
305
308
|
|
309
|
+
## Performance
|
310
|
+
|
311
|
+
### Results are cached
|
312
|
+
|
313
|
+
Results are cached by default, so you don't need to worry about wasteful re-renders. The library uses a computationally lightweight [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores up to 500 different results by default. The cache is applied after all arguments are joined together to a single string. This means that if you call `merge` repeatedly with different arguments that result in the same string when joined, the cache will be hit.
|
314
|
+
|
315
|
+
The cache size can be modified or opted out of by setting the `cache_size` config variable.
|
316
|
+
|
317
|
+
### Data structures are reused between calls
|
318
|
+
|
319
|
+
Expensive computations happen upfront so that `merge` calls without a cache hit stay fast.
|
320
|
+
|
321
|
+
### Lazy initialization
|
322
|
+
|
323
|
+
The initial computations are called lazily on the first call to `merge` to prevent it from impacting startup performance if it isn't used initially.
|
324
|
+
|
306
325
|
## Contributing
|
307
326
|
|
308
327
|
Bug reports and pull requests are welcome on GitHub at https://github.com/gjtorikian/tailwind_merge.
|
@@ -310,3 +329,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/gjtori
|
|
310
329
|
## License
|
311
330
|
|
312
331
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
332
|
+
|
333
|
+
## Acknowledgements
|
334
|
+
|
335
|
+
This gem is pretty much just a port of https://github.com/dcastil/tailwind-merge. Thank them, not me!
|
@@ -27,7 +27,7 @@ module TailwindMerge
|
|
27
27
|
|
28
28
|
ARBITRARY_VALUE_REGEX = /^\[(?:([a-z-]+):)?(.+)\]$/i
|
29
29
|
FRACTION_REGEX = %r{^\d+/\d+$}
|
30
|
-
LENGTH_UNIT_REGEX = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))
|
30
|
+
LENGTH_UNIT_REGEX = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|^0$/
|
31
31
|
TSHIRT_UNIT_REGEX = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
|
32
32
|
# Shadow always begins with x and y offset separated by underscore
|
33
33
|
SHADOW_REGEX = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: tailwind_merge
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.7.
|
4
|
+
version: 0.7.1.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Garen J. Torikian
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-
|
11
|
+
date: 2023-06-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: lru_redux
|
@@ -24,6 +24,7 @@ dependencies:
|
|
24
24
|
- - "~>"
|
25
25
|
- !ruby/object:Gem::Version
|
26
26
|
version: '1.1'
|
27
|
+
force_ruby_platform: false
|
27
28
|
- !ruby/object:Gem::Dependency
|
28
29
|
name: minitest
|
29
30
|
requirement: !ruby/object:Gem::Requirement
|
@@ -60,6 +61,7 @@ extensions: []
|
|
60
61
|
extra_rdoc_files: []
|
61
62
|
files:
|
62
63
|
- ".rubocop.yml"
|
64
|
+
- ".ruby-version"
|
63
65
|
- CHANGELOG.md
|
64
66
|
- Gemfile
|
65
67
|
- LICENSE.txt
|
@@ -98,7 +100,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
98
100
|
- !ruby/object:Gem::Version
|
99
101
|
version: '0'
|
100
102
|
requirements: []
|
101
|
-
rubygems_version: 3.
|
103
|
+
rubygems_version: 3.4.13
|
102
104
|
signing_key:
|
103
105
|
specification_version: 4
|
104
106
|
summary: Utility function to efficiently merge Tailwind CSS classes without style
|