Skip to content

Commit a6c8e87

Browse files
muhammadsammymuhammadsammy
authored
feat: add mix-blend-mode and background-blend-mode utilities (#200)
* feat: add `mix-blend-mode` and `background-blend-mode` utilities Fixes #195 * chore: update src/index.ts with `yarn generate`
1 parent 84a8c48 commit a6c8e87

File tree

3 files changed

+240
-3
lines changed

3 files changed

+240
-3
lines changed

‎src/cli/lib/non-configurable/effects.ts

+42-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,42 @@
1-
export default {};
1+
const mixBlendMode = [
2+
'mix-blend-normal',
3+
'mix-blend-multiply',
4+
'mix-blend-screen',
5+
'mix-blend-overlay',
6+
'mix-blend-darken',
7+
'mix-blend-lighten',
8+
'mix-blend-color-dodge',
9+
'mix-blend-color-burn',
10+
'mix-blend-hard-light',
11+
'mix-blend-soft-light',
12+
'mix-blend-difference',
13+
'mix-blend-exclusion',
14+
'mix-blend-hue',
15+
'mix-blend-saturation',
16+
'mix-blend-color',
17+
'mix-blend-luminosity',
18+
];
19+
20+
const backgroundBlendMode = [
21+
'bg-blend-normal',
22+
'bg-blend-multiply',
23+
'bg-blend-screen',
24+
'bg-blend-overlay',
25+
'bg-blend-darken',
26+
'bg-blend-lighten',
27+
'bg-blend-color-dodge',
28+
'bg-blend-color-burn',
29+
'bg-blend-hard-light',
30+
'bg-blend-soft-light',
31+
'bg-blend-difference',
32+
'bg-blend-exclusion',
33+
'bg-blend-hue',
34+
'bg-blend-saturation',
35+
'bg-blend-color',
36+
'bg-blend-luminosity',
37+
];
38+
39+
export default {
40+
mixBlendMode,
41+
backgroundBlendMode,
42+
};

‎src/cli/types/classes.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ type TBordersCategoryItem =
7272
| 'ringOffsetWidth'
7373
| 'ringWidth';
7474

75-
type TEffectsCategoryItem = 'boxShadow' | 'opacity';
75+
type TEffectsCategoryItem = 'boxShadow' | 'opacity' | 'mixBlendMode' | 'backgroundBlendMode';
7676

7777
type TFiltersCategoryItem =
7878
| 'filter'

‎src/index.ts

+197-1
Original file line numberDiff line numberDiff line change
@@ -976,6 +976,42 @@ export type TTableLayout = 'table-auto' | 'table-fixed';
976976

977977
export type TTables = TBorderCollapse | TTableLayout;
978978

979+
export type TMixBlendMode =
980+
| 'mix-blend-normal'
981+
| 'mix-blend-multiply'
982+
| 'mix-blend-screen'
983+
| 'mix-blend-overlay'
984+
| 'mix-blend-darken'
985+
| 'mix-blend-lighten'
986+
| 'mix-blend-color-dodge'
987+
| 'mix-blend-color-burn'
988+
| 'mix-blend-hard-light'
989+
| 'mix-blend-soft-light'
990+
| 'mix-blend-difference'
991+
| 'mix-blend-exclusion'
992+
| 'mix-blend-hue'
993+
| 'mix-blend-saturation'
994+
| 'mix-blend-color'
995+
| 'mix-blend-luminosity';
996+
997+
export type TBackgroundBlendMode =
998+
| 'bg-blend-normal'
999+
| 'bg-blend-multiply'
1000+
| 'bg-blend-screen'
1001+
| 'bg-blend-overlay'
1002+
| 'bg-blend-darken'
1003+
| 'bg-blend-lighten'
1004+
| 'bg-blend-color-dodge'
1005+
| 'bg-blend-color-burn'
1006+
| 'bg-blend-hard-light'
1007+
| 'bg-blend-soft-light'
1008+
| 'bg-blend-difference'
1009+
| 'bg-blend-exclusion'
1010+
| 'bg-blend-hue'
1011+
| 'bg-blend-saturation'
1012+
| 'bg-blend-color'
1013+
| 'bg-blend-luminosity';
1014+
9791015
export type TBoxShadow =
9801016
| 'shadow-sm'
9811017
| 'shadow'
@@ -1003,7 +1039,7 @@ export type TOpacity =
10031039
| 'opacity-95'
10041040
| 'opacity-100';
10051041

1006-
export type TEffects = TBoxShadow | TOpacity;
1042+
export type TEffects = TMixBlendMode | TBackgroundBlendMode | TBoxShadow | TOpacity;
10071043

10081044
export type TTransitionProperty =
10091045
| 'transition-none'
@@ -4325,6 +4361,86 @@ export type TPseudoClasses =
43254361
| 'lg:bg-scroll'
43264362
| 'xl:bg-scroll'
43274363
| '2xl:bg-scroll'
4364+
| 'sm:bg-blend-normal'
4365+
| 'md:bg-blend-normal'
4366+
| 'lg:bg-blend-normal'
4367+
| 'xl:bg-blend-normal'
4368+
| '2xl:bg-blend-normal'
4369+
| 'sm:bg-blend-multiply'
4370+
| 'md:bg-blend-multiply'
4371+
| 'lg:bg-blend-multiply'
4372+
| 'xl:bg-blend-multiply'
4373+
| '2xl:bg-blend-multiply'
4374+
| 'sm:bg-blend-screen'
4375+
| 'md:bg-blend-screen'
4376+
| 'lg:bg-blend-screen'
4377+
| 'xl:bg-blend-screen'
4378+
| '2xl:bg-blend-screen'
4379+
| 'sm:bg-blend-overlay'
4380+
| 'md:bg-blend-overlay'
4381+
| 'lg:bg-blend-overlay'
4382+
| 'xl:bg-blend-overlay'
4383+
| '2xl:bg-blend-overlay'
4384+
| 'sm:bg-blend-darken'
4385+
| 'md:bg-blend-darken'
4386+
| 'lg:bg-blend-darken'
4387+
| 'xl:bg-blend-darken'
4388+
| '2xl:bg-blend-darken'
4389+
| 'sm:bg-blend-lighten'
4390+
| 'md:bg-blend-lighten'
4391+
| 'lg:bg-blend-lighten'
4392+
| 'xl:bg-blend-lighten'
4393+
| '2xl:bg-blend-lighten'
4394+
| 'sm:bg-blend-color-dodge'
4395+
| 'md:bg-blend-color-dodge'
4396+
| 'lg:bg-blend-color-dodge'
4397+
| 'xl:bg-blend-color-dodge'
4398+
| '2xl:bg-blend-color-dodge'
4399+
| 'sm:bg-blend-color-burn'
4400+
| 'md:bg-blend-color-burn'
4401+
| 'lg:bg-blend-color-burn'
4402+
| 'xl:bg-blend-color-burn'
4403+
| '2xl:bg-blend-color-burn'
4404+
| 'sm:bg-blend-hard-light'
4405+
| 'md:bg-blend-hard-light'
4406+
| 'lg:bg-blend-hard-light'
4407+
| 'xl:bg-blend-hard-light'
4408+
| '2xl:bg-blend-hard-light'
4409+
| 'sm:bg-blend-soft-light'
4410+
| 'md:bg-blend-soft-light'
4411+
| 'lg:bg-blend-soft-light'
4412+
| 'xl:bg-blend-soft-light'
4413+
| '2xl:bg-blend-soft-light'
4414+
| 'sm:bg-blend-difference'
4415+
| 'md:bg-blend-difference'
4416+
| 'lg:bg-blend-difference'
4417+
| 'xl:bg-blend-difference'
4418+
| '2xl:bg-blend-difference'
4419+
| 'sm:bg-blend-exclusion'
4420+
| 'md:bg-blend-exclusion'
4421+
| 'lg:bg-blend-exclusion'
4422+
| 'xl:bg-blend-exclusion'
4423+
| '2xl:bg-blend-exclusion'
4424+
| 'sm:bg-blend-hue'
4425+
| 'md:bg-blend-hue'
4426+
| 'lg:bg-blend-hue'
4427+
| 'xl:bg-blend-hue'
4428+
| '2xl:bg-blend-hue'
4429+
| 'sm:bg-blend-saturation'
4430+
| 'md:bg-blend-saturation'
4431+
| 'lg:bg-blend-saturation'
4432+
| 'xl:bg-blend-saturation'
4433+
| '2xl:bg-blend-saturation'
4434+
| 'sm:bg-blend-color'
4435+
| 'md:bg-blend-color'
4436+
| 'lg:bg-blend-color'
4437+
| 'xl:bg-blend-color'
4438+
| '2xl:bg-blend-color'
4439+
| 'sm:bg-blend-luminosity'
4440+
| 'md:bg-blend-luminosity'
4441+
| 'lg:bg-blend-luminosity'
4442+
| 'xl:bg-blend-luminosity'
4443+
| '2xl:bg-blend-luminosity'
43284444
| 'sm:bg-clip-border'
43294445
| 'md:bg-clip-border'
43304446
| 'lg:bg-clip-border'
@@ -17184,6 +17300,86 @@ export type TPseudoClasses =
1718417300
| 'lg:min-w-max'
1718517301
| 'xl:min-w-max'
1718617302
| '2xl:min-w-max'
17303+
| 'sm:mix-blend-normal'
17304+
| 'md:mix-blend-normal'
17305+
| 'lg:mix-blend-normal'
17306+
| 'xl:mix-blend-normal'
17307+
| '2xl:mix-blend-normal'
17308+
| 'sm:mix-blend-multiply'
17309+
| 'md:mix-blend-multiply'
17310+
| 'lg:mix-blend-multiply'
17311+
| 'xl:mix-blend-multiply'
17312+
| '2xl:mix-blend-multiply'
17313+
| 'sm:mix-blend-screen'
17314+
| 'md:mix-blend-screen'
17315+
| 'lg:mix-blend-screen'
17316+
| 'xl:mix-blend-screen'
17317+
| '2xl:mix-blend-screen'
17318+
| 'sm:mix-blend-overlay'
17319+
| 'md:mix-blend-overlay'
17320+
| 'lg:mix-blend-overlay'
17321+
| 'xl:mix-blend-overlay'
17322+
| '2xl:mix-blend-overlay'
17323+
| 'sm:mix-blend-darken'
17324+
| 'md:mix-blend-darken'
17325+
| 'lg:mix-blend-darken'
17326+
| 'xl:mix-blend-darken'
17327+
| '2xl:mix-blend-darken'
17328+
| 'sm:mix-blend-lighten'
17329+
| 'md:mix-blend-lighten'
17330+
| 'lg:mix-blend-lighten'
17331+
| 'xl:mix-blend-lighten'
17332+
| '2xl:mix-blend-lighten'
17333+
| 'sm:mix-blend-color-dodge'
17334+
| 'md:mix-blend-color-dodge'
17335+
| 'lg:mix-blend-color-dodge'
17336+
| 'xl:mix-blend-color-dodge'
17337+
| '2xl:mix-blend-color-dodge'
17338+
| 'sm:mix-blend-color-burn'
17339+
| 'md:mix-blend-color-burn'
17340+
| 'lg:mix-blend-color-burn'
17341+
| 'xl:mix-blend-color-burn'
17342+
| '2xl:mix-blend-color-burn'
17343+
| 'sm:mix-blend-hard-light'
17344+
| 'md:mix-blend-hard-light'
17345+
| 'lg:mix-blend-hard-light'
17346+
| 'xl:mix-blend-hard-light'
17347+
| '2xl:mix-blend-hard-light'
17348+
| 'sm:mix-blend-soft-light'
17349+
| 'md:mix-blend-soft-light'
17350+
| 'lg:mix-blend-soft-light'
17351+
| 'xl:mix-blend-soft-light'
17352+
| '2xl:mix-blend-soft-light'
17353+
| 'sm:mix-blend-difference'
17354+
| 'md:mix-blend-difference'
17355+
| 'lg:mix-blend-difference'
17356+
| 'xl:mix-blend-difference'
17357+
| '2xl:mix-blend-difference'
17358+
| 'sm:mix-blend-exclusion'
17359+
| 'md:mix-blend-exclusion'
17360+
| 'lg:mix-blend-exclusion'
17361+
| 'xl:mix-blend-exclusion'
17362+
| '2xl:mix-blend-exclusion'
17363+
| 'sm:mix-blend-hue'
17364+
| 'md:mix-blend-hue'
17365+
| 'lg:mix-blend-hue'
17366+
| 'xl:mix-blend-hue'
17367+
| '2xl:mix-blend-hue'
17368+
| 'sm:mix-blend-saturation'
17369+
| 'md:mix-blend-saturation'
17370+
| 'lg:mix-blend-saturation'
17371+
| 'xl:mix-blend-saturation'
17372+
| '2xl:mix-blend-saturation'
17373+
| 'sm:mix-blend-color'
17374+
| 'md:mix-blend-color'
17375+
| 'lg:mix-blend-color'
17376+
| 'xl:mix-blend-color'
17377+
| '2xl:mix-blend-color'
17378+
| 'sm:mix-blend-luminosity'
17379+
| 'md:mix-blend-luminosity'
17380+
| 'lg:mix-blend-luminosity'
17381+
| 'xl:mix-blend-luminosity'
17382+
| '2xl:mix-blend-luminosity'
1718717383
| 'sm:object-contain'
1718817384
| 'md:object-contain'
1718917385
| 'lg:object-contain'

0 commit comments

Comments
 (0)