feat: add new layout and typography utilities

src/cli/core/ClassnamesGenerator.ts

@@ -75,7 +75,7 @@ export class ClassnamesGenerator {
     return this._generatedRegularClassnames;
   };
 
-  private layout = (): Layout | Record<keyof Layout | 'content', string[]> => {
+  private layout = (): Layout => {
     return {
       ...nonConfigurableClassNames.layout,
       objectPosition: Object.keys(this._theme.objectPosition).map(x => 'object-' + x),
@@ -89,7 +89,8 @@ export class ClassnamesGenerator {
       zIndex: Object.keys(this._theme.zIndex).flatMap(zIndexValue =>
         zIndexValue.startsWith('-') ? `-z-${zIndexValue.substring(1)}` : `z-${zIndexValue}`,
       ),
-      content: Object.keys(this._theme.content).map(x => 'content-' + x),
+      aspectRatio: Object.keys(this._theme.aspectRatio).map(x => 'aspect-' + x),
+      columns: Object.keys(this._theme.columns).map(x => 'columns-' + x),
     };
   };
 
@@ -373,6 +374,15 @@ export class ClassnamesGenerator {
       placeholderOpacity: this.getGeneratedClassesWithOpacities().placeholderOpacities,
       textColor: this.generateClassesWithColors('textColor'),
       textOpacity: this.getGeneratedClassesWithOpacities().textOpacities,
+      content: Object.keys(this._theme.content).map(x => 'content-' + x),
+      textIndent: Object.keys(this._theme.textIndent).map(x => 'indent-' + x),
+      textDecorationColor: this.generateClassesWithColors('textDecorationColor'),
+      textDecorationThickness: Object.keys(this._theme.textDecorationThickness).map(
+        x => 'decoration-' + x,
+      ),
+      textUnderlineOffset: Object.keys(this._theme.textUnderlineOffset).map(
+        x => 'underline-offset-' + x,
+      ),
     };
   };
 
@@ -432,6 +442,7 @@ export class ClassnamesGenerator {
       .replace('Stops', '') // gradientStops -> gradient
       .replace('ringOffset', 'ring-offset')
       .replace('boxShadow', 'shadow')
+      .replace('textDecoration', 'decoration')
       .replace('background', 'bg');
 
     const classnamesWithColors = propertyKeys
@@ -527,7 +538,8 @@ type ClassesWithColors =
   | 'ringOffsetColor'
   | 'gradientColorStops'
   | 'boxShadowColor'
-  | 'outlineColor';
+  | 'outlineColor'
+  | 'textDecorationColor';
 
 type ClassesWithOpacities = {
   opacities: string[];

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

@@ -66,6 +66,33 @@ const position = ['static', 'fixed', 'absolute', 'relative', 'sticky'];
 
 const visibility = ['visible', 'invisible'];
 
+const breakBefore = [
+  'break-before-auto',
+  'break-before-avoid',
+  'break-before-all',
+  'break-before-avoid-page',
+  'break-before-page',
+  'break-before-left',
+  'break-before-right',
+  'break-before-column',
+];
+const breakInside = [
+  'break-inside-auto',
+  'break-inside-avoid',
+  'break-inside-avoid-page',
+  'break-inside-avoid-column',
+];
+const breakAfter = [
+  'break-after-auto',
+  'break-after-avoid',
+  'break-after-all',
+  'break-after-avoid-page',
+  'break-after-page',
+  'break-after-left',
+  'break-after-right',
+  'break-after-column',
+];
+
 export default {
   display,
   boxDecorationBreak,
@@ -79,4 +106,7 @@ export default {
   overscrollBehavior,
   position,
   visibility,
+  breakBefore,
+  breakInside,
+  breakAfter,
 };

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

@@ -31,6 +31,8 @@ const verticalAlign = [
   'align-bottom',
   'align-text-top',
   'align-text-bottom',
+  'align-sub',
+  'align-super',
 ];
 
 const whitespace = [
@@ -43,6 +45,14 @@ const whitespace = [
 
 const wordBreak = ['break-normal', 'break-words', 'break-all'];
 
+const textDecorationStyle = [
+  'decoration-solid',
+  'decoration-double',
+  'decoration-dotted',
+  'decoration-dashed',
+  'decoration-wavy',
+];
+
 export default {
   fontSmoothing,
   fontStyle,
@@ -55,4 +65,5 @@ export default {
   verticalAlign,
   whitespace,
   wordBreak,
+  textDecorationStyle,
 };

src/cli/types/classes.ts

@@ -154,7 +154,12 @@ type TLayoutCategoryItem =
   | 'position'
   | 'inset'
   | 'visibility'
-  | 'zIndex';
+  | 'zIndex'
+  | 'aspectRatio'
+  | 'columns'
+  | 'breakBefore'
+  | 'breakInside'
+  | 'breakAfter';
 
 type TSizingCategoryItem = 'width' | 'minWidth' | 'maxWidth' | 'height' | 'minHeight' | 'maxHeight';
 
@@ -193,4 +198,10 @@ type TTypographyCategoryItem =
   | 'textTransform'
   | 'verticalAlign'
   | 'whitespace'
-  | 'wordBreak';
+  | 'wordBreak'
+  | 'content'
+  | 'textIndent'
+  | 'textDecorationColor'
+  | 'textDecorationStyle'
+  | 'textDecorationThickness'
+  | 'textUnderlineOffset';