Skip to content

Commit debe718

Browse files
cossssmincossssmin
authored
Merge pull request #5 from maizzle/filters
2 parents 5dd4e5b + 8ce241b commit debe718

File tree

3 files changed

+707
-15
lines changed

3 files changed

+707
-15
lines changed

‎src/filters.js

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
const plugin = require('tailwindcss/plugin')
2+
3+
module.exports = {
4+
disabledFilterPlugins: {
5+
blur: false,
6+
brightness: false,
7+
contrast: false,
8+
dropShadow: false,
9+
grayscale: false,
10+
hueRotate: false,
11+
invert: false,
12+
saturate: false,
13+
sepia: false,
14+
backdropBlur: false,
15+
backdropBrightness: false,
16+
backdropContrast: false,
17+
backdropGrayscale: false,
18+
backdropHueRotate: false,
19+
backdropInvert: false,
20+
backdropOpacity: false,
21+
backdropSaturate: false,
22+
backdropSepia: false,
23+
},
24+
blur: plugin(function({ matchUtilities, theme }) {
25+
matchUtilities(
26+
{
27+
blur: (value) => ({
28+
filter: `blur(${value})`
29+
}),
30+
},
31+
{ values: theme('blur', ) }
32+
)
33+
}),
34+
brightness: plugin(function({ matchUtilities, theme }) {
35+
matchUtilities(
36+
{
37+
brightness: (value) => ({
38+
filter: `brightness(${value})`
39+
}),
40+
},
41+
{ values: theme('brightness') }
42+
)
43+
}),
44+
contrast: plugin(function({ matchUtilities, theme }) {
45+
matchUtilities(
46+
{
47+
contrast: (value) => ({
48+
filter: `contrast(${value})`
49+
}),
50+
},
51+
{ values: theme('contrast') }
52+
)
53+
}),
54+
dropShadow: plugin(function({ matchUtilities, theme }) {
55+
matchUtilities(
56+
{
57+
'drop-shadow': (value) => ({
58+
filter: Array.isArray(value)
59+
? value.map((v) => `drop-shadow(${v})`).join(' ')
60+
: `drop-shadow(${value})`
61+
}),
62+
},
63+
{ values: theme('dropShadow') }
64+
)
65+
}),
66+
grayscale: plugin(function({ matchUtilities, theme }) {
67+
matchUtilities(
68+
{
69+
grayscale: (value) => ({
70+
filter: `grayscale(${value})`
71+
}),
72+
},
73+
{ values: theme('grayscale') }
74+
)
75+
}),
76+
hueRotate: plugin(function({ matchUtilities, theme }) {
77+
matchUtilities(
78+
{
79+
'hue-rotate': (value) => ({
80+
filter: `hue-rotate(${value})`
81+
}),
82+
},
83+
{ values: theme('hueRotate'), supportsNegativeValues: true }
84+
)
85+
}),
86+
invert: plugin(function({ matchUtilities, theme }) {
87+
matchUtilities(
88+
{
89+
invert: (value) => ({
90+
filter: `invert(${value})`
91+
}),
92+
},
93+
{ values: theme('invert') }
94+
)
95+
}),
96+
saturate: plugin(function({ matchUtilities, theme }) {
97+
matchUtilities(
98+
{
99+
saturate: (value) => ({
100+
filter: `saturate(${value})`
101+
}),
102+
},
103+
{ values: theme('saturate') }
104+
)
105+
}),
106+
sepia: plugin(function({ matchUtilities, theme }) {
107+
matchUtilities(
108+
{
109+
sepia: (value) => ({
110+
filter: `sepia(${value})`
111+
}),
112+
},
113+
{ values: theme('sepia') }
114+
)
115+
}),
116+
backdropBlur: plugin(function({ matchUtilities, theme }) {
117+
matchUtilities(
118+
{
119+
'backdrop-blur': (value) => ({
120+
backdropFilter: `blur(${value})`
121+
}),
122+
},
123+
{ values: theme('backdropBlur') }
124+
)
125+
}),
126+
backdropBrightness: plugin(function({ matchUtilities, theme }) {
127+
matchUtilities(
128+
{
129+
'backdrop-brightness': (value) => ({
130+
backdropFilter: `brightness(${value})`
131+
}),
132+
},
133+
{ values: theme('backdropBrightness') }
134+
)
135+
}),
136+
backdropContrast: plugin(function({ matchUtilities, theme }) {
137+
matchUtilities(
138+
{
139+
'backdrop-contrast': (value) => ({
140+
backdropFilter: `contrast(${value})`
141+
}),
142+
},
143+
{ values: theme('backdropContrast') }
144+
)
145+
}),
146+
backdropGrayscale: plugin(function({ matchUtilities, theme }) {
147+
matchUtilities(
148+
{
149+
'backdrop-grayscale': (value) => ({
150+
backdropFilter: `grayscale(${value})`
151+
}),
152+
},
153+
{ values: theme('backdropGrayscale') }
154+
)
155+
}),
156+
backdropHueRotate: plugin(function({ matchUtilities, theme }) {
157+
matchUtilities(
158+
{
159+
'backdrop-hue-rotate': (value) => ({
160+
backdropFilter: `hue-rotate(${value})`
161+
}),
162+
},
163+
{ values: theme('backdropHueRotate'), supportsNegativeValues: true }
164+
)
165+
}),
166+
backdropInvert: plugin(function({ matchUtilities, theme }) {
167+
matchUtilities(
168+
{
169+
'backdrop-invert': (value) => ({
170+
backdropFilter: `invert(${value})`
171+
}),
172+
},
173+
{ values: theme('backdropInvert') }
174+
)
175+
}),
176+
backdropOpacity: plugin(function({ matchUtilities, theme }) {
177+
matchUtilities(
178+
{
179+
'backdrop-opacity': (value) => ({
180+
backdropFilter: `opacity(${value})`
181+
}),
182+
},
183+
{ values: theme('backdropOpacity') }
184+
)
185+
}),
186+
backdropSaturate: plugin(function({ matchUtilities, theme }) {
187+
matchUtilities(
188+
{
189+
'backdrop-saturate': (value) => ({
190+
backdropFilter: `saturate(${value})`
191+
}),
192+
},
193+
{ values: theme('backdropSaturate') }
194+
)
195+
}),
196+
backdropSepia: plugin(function({ matchUtilities, theme }) {
197+
matchUtilities(
198+
{
199+
'backdrop-sepia': (value) => ({
200+
backdropFilter: `sepia(${value})`
201+
}),
202+
},
203+
{ values: theme('backdropSepia') }
204+
)
205+
}),
206+
}

‎src/index.js

+34
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
const plugin = require('tailwindcss/plugin')
22

3+
const {
4+
disabledFilterPlugins,
5+
...filterPlugins
6+
} = require('./filters')
7+
38
/** @type {import('tailwindcss').Config} */
49
module.exports = {
510
theme: {
@@ -71,6 +76,27 @@ module.exports = {
7176
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
7277
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)',
7378
},
79+
dropShadow: {
80+
sm: '0 1px 1px rgba(0, 0, 0, 0.05)',
81+
DEFAULT: [
82+
'0 1px 2px rgba(0, 0, 0, 0.1)',
83+
'0 1px 1px rgba(0, 0, 0, 0.06)',
84+
],
85+
md: [
86+
'0 4px 3px rgba(0, 0, 0, 0.07)',
87+
'0 2px 2px rgba(0, 0, 0, 0.06)',
88+
],
89+
lg: [
90+
'0 10px 8px rgba(0, 0, 0, 0.04)',
91+
'0 4px 3px rgba(0, 0, 0, 0.1)',
92+
],
93+
xl: [
94+
'0 20px 13px rgba(0, 0, 0, 0.03)',
95+
'0 8px 5px rgba(0, 0, 0, 0.08)',
96+
],
97+
'2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
98+
none: '0 0 #000',
99+
},
74100
fontFamily: {
75101
sans: ['ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
76102
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
@@ -123,6 +149,7 @@ module.exports = {
123149
}),
124150
},
125151
},
152+
// We disable all core plugins that we redefine
126153
corePlugins: {
127154
preflight: false,
128155
backgroundOpacity: false,
@@ -131,11 +158,18 @@ module.exports = {
131158
placeholderOpacity: false,
132159
textOpacity: false,
133160
textDecoration: false,
161+
...disabledFilterPlugins,
134162
},
135163
plugins: [
164+
// Filters
165+
...Object.values(filterPlugins),
166+
// MSO utilities
136167
require('tailwindcss-mso'),
168+
// Email-safe box-shadow utilities
137169
require('tailwindcss-box-shadow'),
170+
// Email client targeting variants
138171
require('tailwindcss-email-variants'),
172+
// Text decoration utilities
139173
plugin(function({ addUtilities }) {
140174
addUtilities({
141175
'.underline': { 'text-decoration': 'underline' },

0 commit comments

Comments
 (0)