feat: add variants to the cli as it's removed from the new config

src/cli/core/ClassnamesGenerator.ts

@@ -9,6 +9,7 @@ import {
 } from '../types/classes';
 import {TConfigTheme, TConfigDarkMode} from '../types/config';
 import {tailwindLabsPlugins} from '../lib/tailwindlabs-plugins';
+import {allVariants, regularClassGroupKeys} from './constants';
 
 /**
  * Responsible for generating the types from a parsed config by ConfigScanner.
@@ -381,27 +382,10 @@ export class ClassnamesGenerator {
   private pseudoClasses = (): string[] => {
     // Initialise a pseudoclasses variable with empty array value.
     const pseudoClasses: string[] = [];
-    // prettier-ignore
-    const allVariants = [
-      'responsive', 'motion-safe', 'motion-reduce', 'first', 'last', 'odd', 'even', 'visited', 'checked',
-      'group-hover', 'group-focus', 'focus-within', 'hover', 'focus', 'focus-visible', 'active', 'disabled',
-      // Exhaustive pseudo-classess
-      'only', 'first-of-type', 'last-of-type', 'only-of-type', 'target', 'default', 'indeterminate',
-      'placeholder-shown', 'autofill', 'required', 'valid', 'invalid', 'in-range', 'out-of-range',
-      // New peer-*, selection & marker variants and before/after
-      'peer-hover', 'peer-checked', 'peer-focus', 'selection', 'marker', 'before', 'after'
-    ];
-
-    // HACK: This block is just to make accessibility object align with other types object shape
-    const variantsConfig = Object.entries(
-      _.merge(this._configParser.getVariants(), {
-        screenReaders: this._configParser.getVariants().accessibility,
-      }),
-    );
 
     // For every key-value pair in the variants section in tailwind config...
     // eslint-disable-next-line prefer-const
-    for (let [regularClassGroupKey, pseudoClassesVariantsForKey] of variantsConfig) {
+    for (const regularClassGroupKey of regularClassGroupKeys) {
       // Find all matching names from the generated regular classes with the key of the variants config
       Object.keys(this._generatedRegularClassnames).map(key => {
         // If the current key is found to be a member of the generated regular classes group...
@@ -427,13 +411,11 @@ export class ClassnamesGenerator {
           generatedClassGroup.map(classname => {
             const isDarkModeEnabled = this._darkMode !== false;
 
-            // Enable all variants
-            pseudoClassesVariantsForKey = allVariants;
             // Add 'peer' utility classname. used with peer-* classnames
             pseudoClasses.push('peer');
 
             // Generate the classname of each variant...
-            pseudoClassesVariantsForKey.map(variant => {
+            allVariants.map(variant => {
               if (variant === 'responsive') {
                 // Get the breakpoints from config
                 const [breakpoints] = this._configParser.getThemeProperty('screens');
@@ -446,7 +428,7 @@ export class ClassnamesGenerator {
                   );
 
                   // Add stackable dark and responsive pseudoclasses if the key has both variants
-                  if (pseudoClassesVariantsForKey.includes('dark') && isDarkModeEnabled) {
+                  if (isDarkModeEnabled) {
                     pseudoClasses.push(
                       breakpointVariant +
                         this._separator +

src/cli/core/TailwindConfigParser.ts

@@ -1,11 +1,6 @@
 import _ from 'lodash';
 import {defaultTailwindConfig} from '../lib/defaultTailwindConfig';
-import {
-  TTailwindCSSConfig,
-  TConfigVariants,
-  TConfigDarkMode,
-  TConfigPlugins,
-} from '../types/config';
+import {TTailwindCSSConfig, TConfigDarkMode, TConfigPlugins} from '../types/config';
 import {TConfigTheme, TThemeItems} from '../types/config';
 /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return */
 
@@ -19,7 +14,6 @@ export class TailwindConfigParser {
   private readonly _darkMode: TConfigDarkMode;
   private readonly _themeConfig: TConfigTheme;
   private _evaluatedTheme: TConfigTheme | null;
-  private readonly _variantsConfig: TConfigVariants;
   private readonly _pluginsConfig: TConfigPlugins;
 
   constructor(tailwindConfig: TTailwindCSSConfig, plugins: TConfigPlugins) {
@@ -31,9 +25,6 @@ export class TailwindConfigParser {
     this._separator = _.isEmpty(tailwindConfig.separator)
       ? ':'
       : (tailwindConfig.separator as string);
-    this._variantsConfig = _.isEmpty(tailwindConfig.variants)
-      ? defaultTailwindConfig.variants // Order does matter, defaultVariants will be overridden by themeVariants.
-      : {...defaultTailwindConfig.variants, ...tailwindConfig.variants};
     this._themeConfig = {...defaultTailwindConfig.theme, ...tailwindConfig.theme};
     this._evaluatedTheme = null;
     this._pluginsConfig = plugins;
@@ -120,32 +111,6 @@ export class TailwindConfigParser {
     return this._evaluatedTheme;
   };
 
-  /**
-   * Get config variants object
-   */
-  public getVariants = (): Omit<TConfigVariants, 'extend'> => {
-    // Get the `variants.extend` object
-    const variantsConfigExtend = this._variantsConfig?.extend;
-
-    // If the variants.extend exists...
-    if (!!variantsConfigExtend) {
-      // Return the result of merging the variants with extend
-      return _.mergeWith(
-        this._variantsConfig,
-        variantsConfigExtend,
-        (variantsValues, variantsExtendValues) => {
-          if (_.isArray(variantsValues)) {
-            return variantsValues.concat(variantsExtendValues);
-          }
-        },
-      );
-      // Otherwise...
-    } else {
-      // Return the variants
-      return this._variantsConfig;
-    }
-  };
-
   /**
    * Get the value (and key) of a supplied theme property.
    * @param themeProperty The theme property name

src/cli/core/constants.ts

@@ -0,0 +1,191 @@
+export const allVariants = [
+  'responsive',
+  'motion-safe',
+  'motion-reduce',
+  'first',
+  'last',
+  'odd',
+  'even',
+  'visited',
+  'checked',
+  'group-hover',
+  'group-focus',
+  'focus-within',
+  'hover',
+  'focus',
+  'focus-visible',
+  'active',
+  'disabled',
+  // Exhaustive pseudo-classess
+  'only',
+  'first-of-type',
+  'last-of-type',
+  'only-of-type',
+  'target',
+  'default',
+  'indeterminate',
+  'placeholder-shown',
+  'autofill',
+  'required',
+  'valid',
+  'invalid',
+  'in-range',
+  'out-of-range',
+  // New peer-*, selection & marker variants and before/after
+  'peer-hover',
+  'peer-checked',
+  'peer-focus',
+  'selection',
+  'marker',
+  'before',
+  'after',
+  // dark mode utility
+  'dark',
+];
+
+export const regularClassGroupKeys = [
+  // 'accessibility',
+  'screenReaders',
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+  'animation',
+  'appearance',
+  'backdropBlur',
+  'backdropBrightness',
+  'backdropContrast',
+  'backdropDropShadow',
+  'backdropFilter',
+  'backdropGrayscale',
+  'backdropHueRotate',
+  'backdropInvert',
+  'backdropSaturate',
+  'backdropSepia',
+  'backgroundAttachment',
+  'backgroundBlendMode',
+  'backgroundClip',
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundOpacity',
+  'backgroundPosition',
+  'backgroundRepeat',
+  'backgroundSize',
+  'backgroundOrigin',
+  'blur',
+  'borderCollapse',
+  'borderColor',
+  'borderOpacity',
+  'borderRadius',
+  'borderStyle',
+  'borderWidth',
+  'boxDecorationBreak',
+  'boxShadow',
+  'boxSizing',
+  'brightness',
+  'clear',
+  'container',
+  'contrast',
+  'cursor',
+  'display',
+  'divideColor',
+  'divideOpacity',
+  'divideStyle',
+  'divideWidth',
+  'dropShadow',
+  'fill',
+  'filter',
+  'flex',
+  'flexDirection',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'float',
+  'fontFamily',
+  'fontSize',
+  'fontSmoothing',
+  'fontStyle',
+  'fontVariantNumeric',
+  'fontWeight',
+  'gap',
+  'gradientColorStops',
+  'grayscale',
+  'gridAutoColumns',
+  'gridAutoFlow',
+  'gridAutoRows',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnStart',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowStart',
+  'gridTemplateColumns',
+  'gridTemplateRows',
+  'height',
+  'hueRotate',
+  'inset',
+  'invert',
+  'isolation',
+  'justifyContent',
+  'justifyItems',
+  'justifySelf',
+  'letterSpacing',
+  'lineHeight',
+  'listStylePosition',
+  'listStyleType',
+  'margin',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'mixBlendMode',
+  'objectFit',
+  'objectPosition',
+  'opacity',
+  'order',
+  'outline',
+  'overflow',
+  'overscrollBehavior',
+  'padding',
+  'placeContent',
+  'placeItems',
+  'placeSelf',
+  'placeholderColor',
+  'placeholderOpacity',
+  'pointerEvents',
+  'position',
+  'resize',
+  'ringColor',
+  'ringOffsetColor',
+  'ringOffsetWidth',
+  'ringOpacity',
+  'ringWidth',
+  'rotate',
+  'saturate',
+  'scale',
+  'sepia',
+  'skew',
+  'space',
+  'stroke',
+  'strokeWidth',
+  'tableLayout',
+  'textAlign',
+  'textColor',
+  'textDecoration',
+  'textOpacity',
+  'textOverflow',
+  'textTransform',
+  'transform',
+  'transformOrigin',
+  'transitionDelay',
+  'transitionDuration',
+  'transitionProperty',
+  'transitionTimingFunction',
+  'translate',
+  'userSelect',
+  'verticalAlign',
+  'visibility',
+  'whitespace',
+  'width',
+  'wordBreak',
+  'zIndex',
+];

src/cli/types/config.ts

@@ -1,3 +1,4 @@
+import {allVariants} from '../core/constants';
 import {defaultTailwindConfig} from '../lib/defaultTailwindConfig';
 
 export type TTailwindCSSConfig = Partial<
@@ -14,4 +15,4 @@ export type TConfigPlugins = Partial<Record<'pluginTypography' | 'pluginCustomFo
 
 export type TThemeItems = typeof defaultTailwindConfig.theme;
 
-type TVariantsItems = typeof defaultTailwindConfig.variants;
+type TVariantsItems = typeof allVariants;