feat: support tailwindcss v3.1.0

package.json

@@ -72,7 +72,7 @@
     "@types/node": "^14.14.22",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",
-    "autoprefixer": "^10.2.3",
+    "autoprefixer": "^10.4.14",
     "dts-bundle": "^0.7.2",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
@@ -81,6 +81,7 @@
     "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
     "pascal-case": "^3.1.2",
+    "postcss": "^8.4.23",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.37.1",
@@ -92,7 +93,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "semver": "^7.3.2",
     "standard-version": "^9.1.0",
-    "tailwindcss": "3.0.1",
+    "tailwindcss": "3.1.8",
     "ts-jest": "~26.5.1",
     "typescript": "^4.3.4"
   }

scripts/updateDefaultConfig.js

@@ -1,5 +1,5 @@
 const fs = require('fs').promises;
-const colors = require('colors');
+const colors = require('@colors/colors');
 
 // updates 'defaultTailwindConfig' in src/cli/lib/defaultTailwindConfig.ts
 // with the latest config from tailwindcss. used in npm scripts

src/cli/core/ClassnamesGenerator.ts

@@ -160,7 +160,14 @@ export class ClassnamesGenerator {
   };
 
   private tables = (): Tables => {
-    return nonConfigurableClassNames.tables;
+    return {
+      ...nonConfigurableClassNames.tables,
+      borderSpacing: ['', '-x', '-y'].flatMap(side => {
+        return Object.keys(
+          _.isEmpty(this._theme.borderSpacing) ? this._theme.spacing : this._theme.borderSpacing,
+        ).map(value => `border-spacing${side}-${value}`);
+      }),
+    };
   };
 
   private effects = (): Effects => {

src/cli/core/FileContentGenerator.ts

@@ -155,6 +155,7 @@ export class FileContentGenerator {
       'export type TArg =\n' +
       '| null\n' +
       '| undefined\n' +
+      this.getDarkModeClassnameType() +
       '| TTailwindString\nIMPORTED_T_CUSTOM_CLASSES_ARG' +
       '\n' +
       'export type TTailwind = (...args: TArg[]) => TTailwindString\n' +
@@ -165,6 +166,21 @@ export class FileContentGenerator {
     );
   };
 
+  /**
+   * Get the dark mode config custom classname type
+   * @returns the name of the classname for dark mode
+   */
+  private getDarkModeClassnameType = (): string => {
+    const darkModeConfig = this._configParser.getDarkMode();
+    if (_.isArray(darkModeConfig) && darkModeConfig[0] === 'class') {
+      return `| '${darkModeConfig[1]}'\n`;
+    } else if (_.isString(darkModeConfig) && darkModeConfig === 'class') {
+      return `| 'dark'\n`;
+    } else {
+      return '';
+    }
+  };
+
   /**
    * Generates types group template for a utility classes group object.
    *

src/cli/core/TailwindConfigParser.ts

@@ -121,7 +121,8 @@ export class TailwindConfigParser {
 
     // get responsive variants
     const [mediaBreakpoints] = this.getThemeProperty('screens');
-    if (this.getDarkMode() == 'media' || this.getDarkMode() == 'class') mediaBreakpoints.push('dark');
+    if (this.getDarkMode() == 'media' || this.getDarkMode() == 'class')
+      mediaBreakpoints.push('dark');
 
     mediaBreakpoints.map((breakpoint: string) => {
       if (!variants.includes(breakpoint)) {

src/cli/core/constants/baseVariants.ts

@@ -17,6 +17,10 @@ export const baseVariants = [
   'focus-visible',
   'active',
   'disabled',
+  'enabled',
+  'backdrop',
+  'contrast-more',
+  'contrast-less',
   // Exhaustive pseudo-classess
   'only',
   'first-of-type',
@@ -27,6 +31,7 @@ export const baseVariants = [
   'indeterminate',
   'placeholder-shown',
   'autofill',
+  'optional',
   'required',
   'valid',
   'invalid',

src/cli/lib/defaultTailwindConfig.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
+/** @type {import('tailwindcss').Config} */
 export const defaultTailwindConfig = {
   content: [],
   presets: [],
@@ -197,6 +198,9 @@ export const defaultTailwindConfig = {
       '3xl': '1.5rem',
       full: '9999px',
     },
+    borderSpacing: ({theme}) => ({
+      ...theme('spacing'),
+    }),
     borderWidth: {
       DEFAULT: '1px',
       0: '0px',
@@ -720,7 +724,7 @@ export const defaultTailwindConfig = {
       8: '8px',
     },
     ringColor: ({theme}) => ({
-      DEFAULT: theme('colors.blue.500', '#3b82f6'),
+      DEFAULT: theme(`colors.blue.500`, '#3b82f6'),
       ...theme('colors'),
     }),
     ringOffsetColor: ({theme}) => theme('colors'),
@@ -857,8 +861,8 @@ export const defaultTailwindConfig = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'background-color, border-color, color, fill, stroke',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',

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

@@ -15,6 +15,7 @@ const mixBlendMode = [
   'mix-blend-saturation',
   'mix-blend-color',
   'mix-blend-luminosity',
+  'mix-blend-plus-lighter',
 ];
 
 const backgroundBlendMode = [

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

@@ -1,6 +1,7 @@
 const gridAutoFlow = [
   'grid-flow-row',
   'grid-flow-col',
+  'grid-flow-dense',
   'grid-flow-row-dense',
   'grid-flow-col-dense',
 ];

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

@@ -16,7 +16,14 @@ const fontVariantNumeric = [
 
 const listStylePosition = ['list-inside', 'list-outside'];
 
-const textAlign = ['text-left', 'text-center', 'text-right', 'text-justify'];
+const textAlign = [
+  'text-left',
+  'text-center',
+  'text-right',
+  'text-justify',
+  'text-start',
+  'text-end',
+];
 
 const textDecoration = ['underline', 'line-through', 'no-underline'];
 

src/cli/types/classes.ts

@@ -179,7 +179,7 @@ type TSpacingCategoryItem = 'padding' | 'margin' | 'space';
 
 type TSVGCategoryItem = 'fill' | 'stroke' | 'strokeWidth';
 
-type TTablesCategoryItem = 'borderCollapse' | 'tableLayout';
+type TTablesCategoryItem = 'borderCollapse' | 'tableLayout' | 'borderSpacing';
 
 type TTransformsCategoryItem = 'scale' | 'rotate' | 'translate' | 'skew' | 'transformOrigin';
 

src/cli/types/config.ts

@@ -5,7 +5,7 @@ export type TTailwindCSSConfig = Partial<
   typeof defaultTailwindConfig & Record<'separator' | 'prefix' | 'mode', string>
 >;
 
-export type TConfigDarkMode = false | 'media' | 'class';
+export type TConfigDarkMode = false | 'media' | 'class' | ['media' | 'class', string];
 
 export type TConfigTheme = TThemeItems & {extend?: TThemeItems};
 

src/index.ts

@@ -3715,7 +3715,114 @@ export type TBorderCollapse = 'border-collapse' | 'border-separate';
 
 export type TTableLayout = 'table-auto' | 'table-fixed';
 
-export type TTables = TBorderCollapse | TTableLayout;
+export type TBorderSpacing =
+  | 'border-spacing-0'
+  | 'border-spacing-1'
+  | 'border-spacing-2'
+  | 'border-spacing-3'
+  | 'border-spacing-4'
+  | 'border-spacing-5'
+  | 'border-spacing-6'
+  | 'border-spacing-7'
+  | 'border-spacing-8'
+  | 'border-spacing-9'
+  | 'border-spacing-10'
+  | 'border-spacing-11'
+  | 'border-spacing-12'
+  | 'border-spacing-14'
+  | 'border-spacing-16'
+  | 'border-spacing-20'
+  | 'border-spacing-24'
+  | 'border-spacing-28'
+  | 'border-spacing-32'
+  | 'border-spacing-36'
+  | 'border-spacing-40'
+  | 'border-spacing-44'
+  | 'border-spacing-48'
+  | 'border-spacing-52'
+  | 'border-spacing-56'
+  | 'border-spacing-60'
+  | 'border-spacing-64'
+  | 'border-spacing-72'
+  | 'border-spacing-80'
+  | 'border-spacing-96'
+  | 'border-spacing-px'
+  | 'border-spacing-0.5'
+  | 'border-spacing-1.5'
+  | 'border-spacing-2.5'
+  | 'border-spacing-3.5'
+  | 'border-spacing-x-0'
+  | 'border-spacing-x-1'
+  | 'border-spacing-x-2'
+  | 'border-spacing-x-3'
+  | 'border-spacing-x-4'
+  | 'border-spacing-x-5'
+  | 'border-spacing-x-6'
+  | 'border-spacing-x-7'
+  | 'border-spacing-x-8'
+  | 'border-spacing-x-9'
+  | 'border-spacing-x-10'
+  | 'border-spacing-x-11'
+  | 'border-spacing-x-12'
+  | 'border-spacing-x-14'
+  | 'border-spacing-x-16'
+  | 'border-spacing-x-20'
+  | 'border-spacing-x-24'
+  | 'border-spacing-x-28'
+  | 'border-spacing-x-32'
+  | 'border-spacing-x-36'
+  | 'border-spacing-x-40'
+  | 'border-spacing-x-44'
+  | 'border-spacing-x-48'
+  | 'border-spacing-x-52'
+  | 'border-spacing-x-56'
+  | 'border-spacing-x-60'
+  | 'border-spacing-x-64'
+  | 'border-spacing-x-72'
+  | 'border-spacing-x-80'
+  | 'border-spacing-x-96'
+  | 'border-spacing-x-px'
+  | 'border-spacing-x-0.5'
+  | 'border-spacing-x-1.5'
+  | 'border-spacing-x-2.5'
+  | 'border-spacing-x-3.5'
+  | 'border-spacing-y-0'
+  | 'border-spacing-y-1'
+  | 'border-spacing-y-2'
+  | 'border-spacing-y-3'
+  | 'border-spacing-y-4'
+  | 'border-spacing-y-5'
+  | 'border-spacing-y-6'
+  | 'border-spacing-y-7'
+  | 'border-spacing-y-8'
+  | 'border-spacing-y-9'
+  | 'border-spacing-y-10'
+  | 'border-spacing-y-11'
+  | 'border-spacing-y-12'
+  | 'border-spacing-y-14'
+  | 'border-spacing-y-16'
+  | 'border-spacing-y-20'
+  | 'border-spacing-y-24'
+  | 'border-spacing-y-28'
+  | 'border-spacing-y-32'
+  | 'border-spacing-y-36'
+  | 'border-spacing-y-40'
+  | 'border-spacing-y-44'
+  | 'border-spacing-y-48'
+  | 'border-spacing-y-52'
+  | 'border-spacing-y-56'
+  | 'border-spacing-y-60'
+  | 'border-spacing-y-64'
+  | 'border-spacing-y-72'
+  | 'border-spacing-y-80'
+  | 'border-spacing-y-96'
+  | 'border-spacing-y-px'
+  | 'border-spacing-y-0.5'
+  | 'border-spacing-y-1.5'
+  | 'border-spacing-y-2.5'
+  | 'border-spacing-y-3.5';
+
+export type TTables = TBorderCollapse | TTableLayout | TBorderSpacing;
 
 export type TMixBlendMode =
   | 'mix-blend-normal'
@@ -3733,7 +3840,8 @@ export type TMixBlendMode =
   | 'mix-blend-hue'
   | 'mix-blend-saturation'
   | 'mix-blend-color'
-  | 'mix-blend-luminosity';
+  | 'mix-blend-luminosity'
+  | 'mix-blend-plus-lighter';
 
 export type TBackgroundBlendMode =
   | 'bg-blend-normal'
@@ -4400,6 +4508,7 @@ export type TFlexBox =
 export type TGridAutoFlow =
   | 'grid-flow-row'
   | 'grid-flow-col'
+  | 'grid-flow-dense'
   | 'grid-flow-row-dense'
   | 'grid-flow-col-dense';
 
@@ -7171,7 +7280,13 @@ export type TFontVariantNumeric =
 
 export type TListStylePosition = 'list-inside' | 'list-outside';
 
-export type TTextAlign = 'text-left' | 'text-center' | 'text-right' | 'text-justify';
+export type TTextAlign =
+  | 'text-left'
+  | 'text-center'
+  | 'text-right'
+  | 'text-justify'
+  | 'text-start'
+  | 'text-end';
 
 export type TTextDecoration = 'underline' | 'line-through' | 'no-underline';
 
@@ -8077,6 +8192,10 @@ export type TPseudoClassVariants =
   | 'focus-visible:'
   | 'active:'
   | 'disabled:'
+  | 'enabled:'
+  | 'backdrop:'
+  | 'contrast-more:'
+  | 'contrast-less:'
   | 'only:'
   | 'first-of-type:'
   | 'last-of-type:'
@@ -8086,6 +8205,7 @@ export type TPseudoClassVariants =
   | 'indeterminate:'
   | 'placeholder-shown:'
   | 'autofill:'
+  | 'optional:'
   | 'required:'
   | 'valid:'
   | 'invalid:'
@@ -8178,6 +8298,7 @@ export const outlineColor: TUtilityFunction<TOutlineColor> = classnamesLib as an
 
 export const borderCollapse: TUtilityFunction<TBorderCollapse> = classnamesLib as any;
 export const tableLayout: TUtilityFunction<TTableLayout> = classnamesLib as any;
+export const borderSpacing: TUtilityFunction<TBorderSpacing> = classnamesLib as any;
 
 //////////// Effects Utility functions
 
@@ -8459,6 +8580,7 @@ export const TW = {
   outlineColor,
   borderCollapse,
   tableLayout,
+  borderSpacing,
   mixBlendMode,
   backgroundBlendMode,
   boxShadow,