Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS filter support #3923

Merged
merged 17 commits into from
Apr 4, 2021
Merged

Add CSS filter support #3923

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e8ced93
Implement `filter` helper classes with all methods
Jun 4, 2020
781a1d8
Rename filter plugins/utilities, drop filter opacity, add drop shadow
adamwathan Apr 3, 2021
bfef939
Remove non-final default filter values
adamwathan Apr 3, 2021
9a66ec8
Working on default filter values, add basic JIT support
adamwathan Apr 3, 2021
1e608f7
Working on blur values
adamwathan Apr 3, 2021
ba8425a
New blur values (these are ~okay)
adamwathan Apr 4, 2021
27bd54d
Match drop-shadow values to box-shadows by eye as best as possible
adamwathan Apr 4, 2021
160c6b3
Update tests
adamwathan Apr 4, 2021
44af8a2
Fix kitchen sink test
adamwathan Apr 4, 2021
88a08d8
Add filter variants configuration
adamwathan Apr 4, 2021
7e4614d
Move drop-shadow to end of filters list
adamwathan Apr 4, 2021
6160017
Add invert variants configuration
adamwathan Apr 4, 2021
de01cef
Add backdrop-filter utilities
adamwathan Apr 4, 2021
979cceb
Update tests
adamwathan Apr 4, 2021
566d4c4
Transition filters by default
adamwathan Apr 4, 2021
c750ca0
Alphabetize new config keys
adamwathan Apr 4, 2021
f97a87a
Optimize filter plugins for JIT + add arbitrary value support
adamwathan Apr 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix kitchen sink test
  • Loading branch information
@adamwathan
adamwathan committed Apr 4, 2021
commit 44af8a218166d771f3978308306cbd3ea6915a29
8 changes: 4 additions & 4 deletions jit/tests/kitchen-sink.test.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,11 +314,11 @@ div {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.filter-none {
filter: none;
.magic-none {
magic: none;
}
.filter-grayscale {
filter: grayscale(100%);
.magic-tons {
magic: tons;
}
.custom-util {
background: #abcdef;
Expand Down
2 changes: 1 addition & 1 deletion jit/tests/kitchen-sink.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div class="md:dark:motion-safe:foo:active:custom-util"></div>
<div class="aspect-w-1 aspect-h-2"></div>
<div class="aspect-w-3 aspect-h-4"></div>
<div class="filter-none filter-grayscale"></div>
<div class="magic-none magic-tons"></div>
<div class="focus:font-normal"></div>
<div class="font-medium"></div>
<div class="bg-gradient-to-r from-foo"></div>
Expand Down
8 changes: 4 additions & 4 deletions jit/tests/kitchen-sink.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ test('it works', () => {
})
addUtilities(
{
'.filter-none': {
filter: 'none',
'.magic-none': {
magic: 'none',
},
'.filter-grayscale': {
filter: 'grayscale(100%)',
'.magic-tons': {
magic: 'tons',
},
},
['responsive', 'hover']
Expand Down