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`
muhammadsammy · Apr 9, 2021 · a6c8e87 · a6c8e87
1 parent 84a8c48
commit a6c8e87
Show file tree

Hide file tree

Showing 3 changed files with 240 additions and 3 deletions.
diff --git a/src/cli/lib/non-configurable/effects.ts b/src/cli/lib/non-configurable/effects.ts
@@ -1 +1,42 @@
-export default {};
+const mixBlendMode = [
+  'mix-blend-normal',
+  'mix-blend-multiply',
+  'mix-blend-screen',
+  'mix-blend-overlay',
+  'mix-blend-darken',
+  'mix-blend-lighten',
+  'mix-blend-color-dodge',
+  'mix-blend-color-burn',
+  'mix-blend-hard-light',
+  'mix-blend-soft-light',
+  'mix-blend-difference',
+  'mix-blend-exclusion',
+  'mix-blend-hue',
+  'mix-blend-saturation',
+  'mix-blend-color',
+  'mix-blend-luminosity',
+];
+
+const backgroundBlendMode = [
+  'bg-blend-normal',
+  'bg-blend-multiply',
+  'bg-blend-screen',
+  'bg-blend-overlay',
+  'bg-blend-darken',
+  'bg-blend-lighten',
+  'bg-blend-color-dodge',
+  'bg-blend-color-burn',
+  'bg-blend-hard-light',
+  'bg-blend-soft-light',
+  'bg-blend-difference',
+  'bg-blend-exclusion',
+  'bg-blend-hue',
+  'bg-blend-saturation',
+  'bg-blend-color',
+  'bg-blend-luminosity',
+];
+
+export default {
+  mixBlendMode,
+  backgroundBlendMode,
+};
diff --git a/src/cli/types/classes.ts b/src/cli/types/classes.ts
@@ -72,7 +72,7 @@ type TBordersCategoryItem =
   | 'ringOffsetWidth'
   | 'ringWidth';
 
-type TEffectsCategoryItem = 'boxShadow' | 'opacity';
+type TEffectsCategoryItem = 'boxShadow' | 'opacity' | 'mixBlendMode' | 'backgroundBlendMode';
 
 type TFiltersCategoryItem =
   | 'filter'

diff --git a/src/index.ts b/src/index.ts
@@ -976,6 +976,42 @@ export type TTableLayout = 'table-auto' | 'table-fixed';
 
 export type TTables = TBorderCollapse | TTableLayout;
 
+export type TMixBlendMode =
+  | 'mix-blend-normal'
+  | 'mix-blend-multiply'
+  | 'mix-blend-screen'
+  | 'mix-blend-overlay'
+  | 'mix-blend-darken'
+  | 'mix-blend-lighten'
+  | 'mix-blend-color-dodge'
+  | 'mix-blend-color-burn'
+  | 'mix-blend-hard-light'
+  | 'mix-blend-soft-light'
+  | 'mix-blend-difference'
+  | 'mix-blend-exclusion'
+  | 'mix-blend-hue'
+  | 'mix-blend-saturation'
+  | 'mix-blend-color'
+  | 'mix-blend-luminosity';
+
+export type TBackgroundBlendMode =
+  | 'bg-blend-normal'
+  | 'bg-blend-multiply'
+  | 'bg-blend-screen'
+  | 'bg-blend-overlay'
+  | 'bg-blend-darken'
+  | 'bg-blend-lighten'
+  | 'bg-blend-color-dodge'
+  | 'bg-blend-color-burn'
+  | 'bg-blend-hard-light'
+  | 'bg-blend-soft-light'
+  | 'bg-blend-difference'
+  | 'bg-blend-exclusion'
+  | 'bg-blend-hue'
+  | 'bg-blend-saturation'
+  | 'bg-blend-color'
+  | 'bg-blend-luminosity';
+
 export type TBoxShadow =
   | 'shadow-sm'
   | 'shadow'
@@ -1003,7 +1039,7 @@ export type TOpacity =
   | 'opacity-95'
   | 'opacity-100';
 
-export type TEffects = TBoxShadow | TOpacity;
+export type TEffects = TMixBlendMode | TBackgroundBlendMode | TBoxShadow | TOpacity;
 
 export type TTransitionProperty =
   | 'transition-none'
@@ -4325,6 +4361,86 @@ export type TPseudoClasses =
   | 'lg:bg-scroll'
   | 'xl:bg-scroll'
   | '2xl:bg-scroll'
+  | 'sm:bg-blend-normal'
+  | 'md:bg-blend-normal'
+  | 'lg:bg-blend-normal'
+  | 'xl:bg-blend-normal'
+  | '2xl:bg-blend-normal'
+  | 'sm:bg-blend-multiply'
+  | 'md:bg-blend-multiply'
+  | 'lg:bg-blend-multiply'
+  | 'xl:bg-blend-multiply'
+  | '2xl:bg-blend-multiply'
+  | 'sm:bg-blend-screen'
+  | 'md:bg-blend-screen'
+  | 'lg:bg-blend-screen'
+  | 'xl:bg-blend-screen'
+  | '2xl:bg-blend-screen'
+  | 'sm:bg-blend-overlay'
+  | 'md:bg-blend-overlay'
+  | 'lg:bg-blend-overlay'
+  | 'xl:bg-blend-overlay'
+  | '2xl:bg-blend-overlay'
+  | 'sm:bg-blend-darken'
+  | 'md:bg-blend-darken'
+  | 'lg:bg-blend-darken'
+  | 'xl:bg-blend-darken'
+  | '2xl:bg-blend-darken'
+  | 'sm:bg-blend-lighten'
+  | 'md:bg-blend-lighten'
+  | 'lg:bg-blend-lighten'
+  | 'xl:bg-blend-lighten'
+  | '2xl:bg-blend-lighten'
+  | 'sm:bg-blend-color-dodge'
+  | 'md:bg-blend-color-dodge'
+  | 'lg:bg-blend-color-dodge'
+  | 'xl:bg-blend-color-dodge'
+  | '2xl:bg-blend-color-dodge'
+  | 'sm:bg-blend-color-burn'
+  | 'md:bg-blend-color-burn'
+  | 'lg:bg-blend-color-burn'
+  | 'xl:bg-blend-color-burn'
+  | '2xl:bg-blend-color-burn'
+  | 'sm:bg-blend-hard-light'
+  | 'md:bg-blend-hard-light'
+  | 'lg:bg-blend-hard-light'
+  | 'xl:bg-blend-hard-light'
+  | '2xl:bg-blend-hard-light'
+  | 'sm:bg-blend-soft-light'
+  | 'md:bg-blend-soft-light'
+  | 'lg:bg-blend-soft-light'
+  | 'xl:bg-blend-soft-light'
+  | '2xl:bg-blend-soft-light'
+  | 'sm:bg-blend-difference'
+  | 'md:bg-blend-difference'
+  | 'lg:bg-blend-difference'
+  | 'xl:bg-blend-difference'
+  | '2xl:bg-blend-difference'
+  | 'sm:bg-blend-exclusion'
+  | 'md:bg-blend-exclusion'
+  | 'lg:bg-blend-exclusion'
+  | 'xl:bg-blend-exclusion'
+  | '2xl:bg-blend-exclusion'
+  | 'sm:bg-blend-hue'
+  | 'md:bg-blend-hue'
+  | 'lg:bg-blend-hue'
+  | 'xl:bg-blend-hue'
+  | '2xl:bg-blend-hue'
+  | 'sm:bg-blend-saturation'
+  | 'md:bg-blend-saturation'
+  | 'lg:bg-blend-saturation'
+  | 'xl:bg-blend-saturation'
+  | '2xl:bg-blend-saturation'
+  | 'sm:bg-blend-color'
+  | 'md:bg-blend-color'
+  | 'lg:bg-blend-color'
+  | 'xl:bg-blend-color'
+  | '2xl:bg-blend-color'
+  | 'sm:bg-blend-luminosity'
+  | 'md:bg-blend-luminosity'
+  | 'lg:bg-blend-luminosity'
+  | 'xl:bg-blend-luminosity'
+  | '2xl:bg-blend-luminosity'
   | 'sm:bg-clip-border'
   | 'md:bg-clip-border'
   | 'lg:bg-clip-border'
@@ -17184,6 +17300,86 @@ export type TPseudoClasses =
   | 'lg:min-w-max'
   | 'xl:min-w-max'
   | '2xl:min-w-max'
+  | 'sm:mix-blend-normal'
+  | 'md:mix-blend-normal'
+  | 'lg:mix-blend-normal'
+  | 'xl:mix-blend-normal'
+  | '2xl:mix-blend-normal'
+  | 'sm:mix-blend-multiply'
+  | 'md:mix-blend-multiply'
+  | 'lg:mix-blend-multiply'
+  | 'xl:mix-blend-multiply'
+  | '2xl:mix-blend-multiply'
+  | 'sm:mix-blend-screen'
+  | 'md:mix-blend-screen'
+  | 'lg:mix-blend-screen'
+  | 'xl:mix-blend-screen'
+  | '2xl:mix-blend-screen'
+  | 'sm:mix-blend-overlay'
+  | 'md:mix-blend-overlay'
+  | 'lg:mix-blend-overlay'
+  | 'xl:mix-blend-overlay'
+  | '2xl:mix-blend-overlay'
+  | 'sm:mix-blend-darken'
+  | 'md:mix-blend-darken'
+  | 'lg:mix-blend-darken'
+  | 'xl:mix-blend-darken'
+  | '2xl:mix-blend-darken'
+  | 'sm:mix-blend-lighten'
+  | 'md:mix-blend-lighten'
+  | 'lg:mix-blend-lighten'
+  | 'xl:mix-blend-lighten'
+  | '2xl:mix-blend-lighten'
+  | 'sm:mix-blend-color-dodge'
+  | 'md:mix-blend-color-dodge'
+  | 'lg:mix-blend-color-dodge'
+  | 'xl:mix-blend-color-dodge'
+  | '2xl:mix-blend-color-dodge'
+  | 'sm:mix-blend-color-burn'
+  | 'md:mix-blend-color-burn'
+  | 'lg:mix-blend-color-burn'
+  | 'xl:mix-blend-color-burn'
+  | '2xl:mix-blend-color-burn'
+  | 'sm:mix-blend-hard-light'
+  | 'md:mix-blend-hard-light'
+  | 'lg:mix-blend-hard-light'
+  | 'xl:mix-blend-hard-light'
+  | '2xl:mix-blend-hard-light'
+  | 'sm:mix-blend-soft-light'
+  | 'md:mix-blend-soft-light'
+  | 'lg:mix-blend-soft-light'
+  | 'xl:mix-blend-soft-light'
+  | '2xl:mix-blend-soft-light'
+  | 'sm:mix-blend-difference'
+  | 'md:mix-blend-difference'
+  | 'lg:mix-blend-difference'
+  | 'xl:mix-blend-difference'
+  | '2xl:mix-blend-difference'
+  | 'sm:mix-blend-exclusion'
+  | 'md:mix-blend-exclusion'
+  | 'lg:mix-blend-exclusion'
+  | 'xl:mix-blend-exclusion'
+  | '2xl:mix-blend-exclusion'
+  | 'sm:mix-blend-hue'
+  | 'md:mix-blend-hue'
+  | 'lg:mix-blend-hue'
+  | 'xl:mix-blend-hue'
+  | '2xl:mix-blend-hue'
+  | 'sm:mix-blend-saturation'
+  | 'md:mix-blend-saturation'
+  | 'lg:mix-blend-saturation'
+  | 'xl:mix-blend-saturation'
+  | '2xl:mix-blend-saturation'
+  | 'sm:mix-blend-color'
+  | 'md:mix-blend-color'
+  | 'lg:mix-blend-color'
+  | 'xl:mix-blend-color'
+  | '2xl:mix-blend-color'
+  | 'sm:mix-blend-luminosity'
+  | 'md:mix-blend-luminosity'
+  | 'lg:mix-blend-luminosity'
+  | 'xl:mix-blend-luminosity'
+  | '2xl:mix-blend-luminosity'
   | 'sm:object-contain'
   | 'md:object-contain'
   | 'lg:object-contain'