feat: add CSS Filters classnames (#198)

src/cli/core/ClassnamesGenerator.ts

@@ -4,7 +4,7 @@ import {nonConfigurableClassNames} from '../lib/non-configurable';
 // prettier-ignore
 import {TAllClassnames, Backgrounds, Layout, Borders, Tables, Effects,
         Interactivity, TransitionsAndAnimations, Transforms, Accessibility, SVG,
-        FlexBox, Grid, Spacing, Sizing, Typography, TGeneratedClassnames} from '../types/classes';
+        FlexBox, Grid, Spacing, Sizing, Typography, TGeneratedClassnames, Filters} from '../types/classes';
 import {TConfigTheme, TConfigDarkMode} from '../types/config';
 import {tailwindLabsPlugins} from '../lib/tailwindlabs-plugins';
 
@@ -38,6 +38,7 @@ export class ClassnamesGenerator {
       Tables: this.tables(),
       Effects: this.effects(),
       TransitionsAndAnimations: this.transitionsAndAnimations(),
+      Filters: this.filters(),
       FlexBox: this.flexBox(),
       Grid: this.grid(),
       Spacing: this.spacing(),
@@ -226,6 +227,40 @@ export class ClassnamesGenerator {
     };
   };
 
+  private filters = (): Filters => {
+    return {
+      ...nonConfigurableClassNames.filters,
+      blur: Object.keys(this._theme.blur).map(x => 'blur-' + x),
+      brightness: Object.keys(this._theme.brightness).map(x => 'brightness-' + x),
+      contrast: Object.keys(this._theme.contrast).map(x => 'contrast-' + x),
+      dropShadow: Object.keys(this._theme.dropShadow).map(x => 'drop-shadow-' + x),
+      grayscale: Object.keys(this._theme.grayscale).map(x => 'grayscale-' + x),
+      hueRotate: Object.keys(this._theme.hueRotate).map(x => 'hue-rotate-' + x),
+      invert: Object.keys(this._theme.invert).map(x => 'invert-' + x),
+      saturate: Object.keys(this._theme.saturate).map(x => 'saturate-' + x),
+      sepia: Object.keys(this._theme.sepia).map(x => 'sepia-' + x),
+      backdropBlur: Object.keys(this._theme.backdropBlur).map(x => 'backdrop-blur-' + x),
+      backdropBrightness: Object.keys(this._theme.backdropBrightness).map(
+        x => 'backdrop-brightness-' + x,
+      ),
+      backdropContrast: Object.keys(this._theme.backdropContrast).map(
+        x => 'backdrop-contrast-' + x,
+      ),
+      backdropGrayscale: Object.keys(this._theme.backdropGrayscale).map(
+        x => 'backdrop-grayscale-' + x,
+      ),
+      backdropHueRotate: Object.keys(this._theme.backdropHueRotate).map(
+        x => 'backdrop-hue-rotate-' + x,
+      ),
+      backdropInvert: Object.keys(this._theme.backdropInvert).map(x => 'backdrop-invert-' + x),
+      backdropOpacity: Object.keys(this._theme.backdropOpacity).map(x => 'backdrop-opacity-' + x),
+      backdropSaturate: Object.keys(this._theme.backdropSaturate).map(
+        x => 'backdrop-saturate-' + x,
+      ),
+      backdropSepia: Object.keys(this._theme.backdropSepia).map(x => 'backdrop-sepia-' + x),
+    };
+  };
+
   private flexBox = (): FlexBox => {
     return {
       ...nonConfigurableClassNames.flexBox,

src/cli/lib/non-configurable/filters.ts

@@ -0,0 +1,7 @@
+const filter = ['filter', 'filter-none'];
+const backdropFilter = ['backdrop-filter', 'backdrop-filter-none'];
+
+export default {
+  filter,
+  backdropFilter,
+};

src/cli/lib/non-configurable/index.ts

@@ -2,6 +2,7 @@ import accessibility from './accessibility';
 import backgrounds from './backgrounds';
 import borders from './borders';
 import effects from './effects';
+import filters from './filters';
 import flexBox from './flexbox';
 import grid from './grid';
 import interactivity from './interactivity';
@@ -22,6 +23,7 @@ export const nonConfigurableClassNames = {
   backgrounds,
   borders,
   effects,
+  filters,
   flexBox,
   grid,
   interactivity,

src/cli/types/classes.ts

@@ -4,6 +4,7 @@ export type Accessibility = Record<TAccessibilityCategoryItem, string[]>;
 export type Backgrounds = Record<TBackgroundsCategoryItem, string[]>;
 export type Borders = Record<TBordersCategoryItem, string[]>;
 export type Effects = Record<TEffectsCategoryItem, string[]>;
+export type Filters = Record<TFiltersCategoryItem, string[]>;
 export type FlexBox = Record<TFlexBoxCategoryItem, string[]>;
 export type Grid = Record<TGridCategoryItem, string[]>;
 export type Interactivity = Record<TInteractivityCategoryItem, string[]>;
@@ -26,6 +27,7 @@ export type TAllClassnames = {
   Backgrounds: Backgrounds;
   Borders: Borders;
   Effects: Effects;
+  Filters: Filters;
   FlexBox: FlexBox;
   Grid: Grid;
   Interactivity: Interactivity;
@@ -72,6 +74,29 @@ type TBordersCategoryItem =
 
 type TEffectsCategoryItem = 'boxShadow' | 'opacity';
 
+type TFiltersCategoryItem =
+  | 'filter'
+  | 'backdropFilter'
+  | 'blur'
+  | 'brightness'
+  | 'contrast'
+  | 'dropShadow'
+  | 'grayscale'
+  | 'hueRotate'
+  | 'invert'
+  | 'saturate'
+  | 'sepia'
+  | 'backdropFilter'
+  | 'backdropBlur'
+  | 'backdropBrightness'
+  | 'backdropContrast'
+  | 'backdropGrayscale'
+  | 'backdropHueRotate'
+  | 'backdropInvert'
+  | 'backdropOpacity'
+  | 'backdropSaturate'
+  | 'backdropSepia';
+
 type TFlexBoxCategoryItem =
   | 'flexDirection'
   | 'flexWrap'