feat: add various TW3 utility classes (#718)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
windicss · Feb 26, 2022 · d8a48e0 · d8a48e0
1 parent 67802fe
commit d8a48e0
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 27 deletions.
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -800,11 +800,11 @@ export class Processor {
             utility = utility.slice(5);
           break;
         case 'text':
-          if (['text-baseline', 'text-top', 'text-middle', 'text-bottom', 'text-text-top', 'text-text-bottom'].includes(utility)) {
+          if (['text-baseline', 'text-top', 'text-middle', 'text-bottom', 'text-text-top', 'text-text-bottom', 'text-sub', 'text-super'].includes(utility)) {
             utility = 'align-' + utility.slice(5);
           } else if (utility.startsWith('text-placeholder') || utility.startsWith('text-underline') || utility.startsWith('text-tab') || utility.startsWith('text-indent') || utility.startsWith('text-hyphens') || utility.startsWith('text-write')) {
             utility = utility.slice(5);
-          } else if (['text-underline', 'text-overline', 'text-line-through', 'text-no-underline', 'text-uppercase', 'text-lowercase', 'text-capitalize', 'text-normal-case', 'text-truncate', 'text-overflow-ellipsis', 'text-overflow-clip', 'text-break-normal', 'text-break-words', 'text-break-all'].includes(utility)) {
+          } else if (['text-underline', 'text-overline', 'text-line-through', 'text-no-underline', 'text-uppercase', 'text-lowercase', 'text-capitalize', 'text-normal-case', 'text-truncate', 'text-overflow-ellipsis', 'text-text-ellipsis', 'text-text-clip', 'text-break-normal', 'text-break-words', 'text-break-all'].includes(utility)) {
             utility = utility.slice(5);
           } else if (utility.startsWith('text-space')) {
             utility = 'white' + utility.slice(5);

diff --git a/src/lib/utilities/static.ts b/src/lib/utilities/static.ts
@@ -628,13 +628,22 @@ export const staticUtilities: StaticUtility = {
       'order': 2,
     },
   },
+  'overflow-clip': {
+    'utility': {
+      'overflow': 'clip',
+    },
+    'meta': {
+      'group': 'overflow',
+      'order': 3,
+    },
+  },
   'overflow-visible': {
     'utility': {
       'overflow': 'visible',
     },
     'meta': {
       'group': 'overflow',
-      'order': 3,
+      'order': 4,
     },
   },
   'overflow-scroll': {
@@ -643,7 +652,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 4,
+      'order': 5,
     },
   },
   'overflow-x-auto': {
@@ -652,7 +661,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 5,
+      'order': 6,
     },
   },
   'overflow-y-auto': {
@@ -661,7 +670,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 6,
+      'order': 7,
     },
   },
   'overflow-x-hidden': {
@@ -670,7 +679,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 7,
+      'order': 8,
     },
   },
   'overflow-y-hidden': {
@@ -679,7 +688,25 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 8,
+      'order': 9,
+    },
+  },
+  'overflow-x-clip': {
+    'utility': {
+      'overflow-x': 'clip',
+    },
+    'meta': {
+      'group': 'overflow',
+      'order': 10,
+    },
+  },
+  'overflow-y-clip': {
+    'utility': {
+      'overflow-y': 'clip',
+    },
+    'meta': {
+      'group': 'overflow',
+      'order': 11,
     },
   },
   'overflow-x-visible': {
@@ -688,7 +715,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 9,
+      'order': 12,
     },
   },
   'overflow-y-visible': {
@@ -697,7 +724,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 10,
+      'order': 13,
     },
   },
   'overflow-x-scroll': {
@@ -706,7 +733,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 11,
+      'order': 14,
     },
   },
   'overflow-y-scroll': {
@@ -715,7 +742,7 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'overflow',
-      'order': 12,
+      'order': 15,
     },
   },
 
@@ -1964,7 +1991,7 @@ export const staticUtilities: StaticUtility = {
       'order': 1,
     },
   },
-  'overflow-ellipsis': {
+  'overflow-ellipsis': { // deprecated
     'utility': {
       '-o-text-overflow': 'ellipsis',
       'text-overflow': 'ellipsis',
@@ -1974,14 +2001,24 @@ export const staticUtilities: StaticUtility = {
       'order': 2,
     },
   },
-  'overflow-clip': {
+  'text-ellipsis': {
+    'utility': {
+      '-o-text-overflow': 'ellipsis',
+      'text-overflow': 'ellipsis',
+    },
+    'meta': {
+      'group': 'textOverflow',
+      'order': 3,
+    },
+  },
+  'text-clip': {
     'utility': {
       '-o-text-overflow': 'clip',
       'text-overflow': 'clip',
     },
     'meta': {
       'group': 'textOverflow',
-      'order': 3,
+      'order': 4,
     },
   },
 
@@ -2040,6 +2077,24 @@ export const staticUtilities: StaticUtility = {
       'order': 6,
     },
   },
+  'align-sub': {
+    'utility': {
+      'vertical-align': 'sub',
+    },
+    'meta': {
+      'group': 'verticalAlign',
+      'order': 7,
+    },
+  },
+  'align-super': {
+    'utility': {
+      'vertical-align': 'super',
+    },
+    'meta': {
+      'group': 'verticalAlign',
+      'order': 8,
+    },
+  },
 
   // https://windicss.org/utilities/typography.html#whitespace
   'whitespace-normal': {
@@ -2426,6 +2481,15 @@ export const staticUtilities: StaticUtility = {
       'order': 5,
     },
   },
+  'border-hidden': {
+    'utility': {
+      'border-style': 'hidden',
+    },
+    'meta': {
+      'group': 'borderStyle',
+      'order': 6,
+    },
+  },
 
   // https://windicss.org/utilities/behaviors.html#image-rendering
   'image-render-auto': {

diff --git a/src/utils/completions.ts b/src/utils/completions.ts
@@ -319,6 +319,10 @@ const utilities: { [key: string]: string[] } = {
     'border-b-${size}',
     'border-l-${int}',
     'border-l-${size}',
+    'border-x-${int}',
+    'border-x-${size}',
+    'border-y-${int}',
+    'border-y-${size}',
   ],
   borderColor: [
     'border-${color}',

diff --git a/test/assets/testClasses.ts b/test/assets/testClasses.ts
@@ -95,16 +95,16 @@ const classNames = [
   'capitalize',
   'normal-case',
   'truncate',
-  'overflow-ellipsis', 'overflow-clip',
-  'align-baseline', 'align-top', 'align-middle', 'align-bottom', 'align-text-top', 'align-text-bottom',
+  'overflow-ellipsis', 'text-ellipsis', 'text-clip',
+  'align-baseline', 'align-top', 'align-middle', 'align-bottom', 'align-text-top', 'align-text-bottom', 'align-sub', 'align-super',
   'whitespace-normal', 'whitespace-nowrap', 'whitespace-pre', 'whitespace-pre-line', 'whitespace-pre-wrap',
   'break-normal', 'break-words', 'break-all',
   'bg-fixed', 'bg-local', 'bg-scroll', 'bg-clip-border', 'bg-clip-padding', 'bg-clip-content', 'bg-clip-text', 'bg-transparent', 'bg-current', 'bg-black', 'bg-white', 'bg-hex-1c1c1e', 'bg-$test-variable', 'bg-opacity-0', 'bg-opacity-55', 'bg-opacity-$test-variable', 'bg-bottom', 'bg-center', 'bg-left', 'bg-left-bottom', 'bg-left-top', 'bg-right', 'bg-right-bottom', 'bg-right-top', 'bg-top', 'bg-repeat', 'bg-no-repeat', 'bg-repeat-x', 'bg-repeat-y', 'bg-repeat-round', 'bg-repeat-space', 'bg-auto', 'bg-cover', 'bg-contain', 'bg-none', 'bg-gradient-to-t', 'bg-gradient-to-tr', 'bg-gradient-to-r', 'bg-gradient-to-br', 'bg-gradient-to-b', 'bg-gradient-to-bl', 'bg-gradient-to-l', 'bg-gradient-to-tl',
   'from-transparent', 'from-current', 'from-black', 'from-white',
   'via-transparent', 'via-current', 'via-black', 'via-white',
   'to-transparent', 'to-current', 'to-black', 'to-white', 'to-hex-1c1c1e', 'to-$test-variable',
   'rounded-none', 'rounded-sm', 'rounded-4rem', 'rounded-t', 'rounded-3px', 'rounded-10xl', 'rounded-t-4px', 'rounded-$test-variable', 'rounded-t-$test-variable', 'rounded-tl-$test-variable',
-  'border-0', 'border-2', 'border-t-23', 'border-t-3px', 'border-l-4rem', 'border-width-$test-variable', 'border-t-width-$test-variable', 'border-l-width-$test-variable', 'border-transparent', 'border-current', 'border-black', 'border-white', 'border-hex-1c1c1e', 'border-$test-variable', 'border-opacity-0', 'border-opacity-66', 'border-opacity-$test-variable', 'border-solid', 'border-dashed', 'border-dotted', 'border-double', 'border-none',
+  'border-0', 'border-2', 'border-t-23', 'border-t-3px', 'border-l-4rem', 'border-width-$test-variable', 'border-t-width-$test-variable', 'border-l-width-$test-variable', 'border-transparent', 'border-current', 'border-black', 'border-white', 'border-hex-1c1c1e', 'border-$test-variable', 'border-opacity-0', 'border-opacity-66', 'border-opacity-$test-variable', 'border-solid', 'border-dashed', 'border-dotted', 'border-double', 'border-none', 'border-hidden',
   'divide-y-0', 'divide-y-reverse', 'divide-x-reverse', 'divide-x-321', 'divide-y-56', 'divide-x-$test-variable', 'divide-y-$test-variable', 'divide-transparent', 'divide-current', 'divide-black', 'divide-white', 'divide-hex-1c1c1e', 'divide-$test-variable', 'divide-opacity-0', 'divide-opacity-77', 'divide-opacity-$test-variable', 'divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none',
   'ring-0', 'ring-inset', 'ring-12', 'ring-32px', 'ring-4rem', 'ring-width-$test-variable', 'ring-transparent', 'ring-current', 'ring-black', 'ring-white', 'ring-rose-200', 'ring-fuchsia-500', 'ring-violet-300', 'ring-light-blue-400', 'ring-emerald-50', 'ring-amber-300', 'ring-warm-gray-500', 'ring-true-gray-600', 'ring-cool-gray-500', 'ring-blue-gray-300', 'ring-hex-1c1c1e', 'ring-$test-variable', 'ring-opacity-0', 'ring-opacity-88', 'ring-opacity-$test-variable', 'ring-offset-0', 'ring-offset-12rem', 'ring-offset-4px', 'ring-offset-width-$test-variable', 'ring-offset-transparent', 'ring-offset-current', 'ring-offset-black', 'ring-offset-white', 'ring-offset-gray-50', 'ring-offset-hex-1c1c1e', 'ring-offset-$test-variable',
   'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl', 'shadow-inner', 'shadow-none',

diff --git a/test/processor/__snapshots__/attributify.test.ts.yml b/test/processor/__snapshots__/attributify.test.ts.yml
@@ -855,6 +855,9 @@ Tools / with border utility / css / 0: |-
   [border~="none"] {
     border-style: none;
   }
+  [border~="hidden"] {
+    border-style: hidden;
+  }
   [border~="1"] {
     border-width: 1px;
   }
@@ -1727,6 +1730,9 @@ Tools / with overflow utility / css / 0: |-
   [overflow~="hidden"] {
     overflow: hidden;
   }
+  [overflow~="clip"] {
+    overflow: clip;
+  }
   [overflow~="visible"] {
     overflow: visible;
   }
@@ -1745,6 +1751,12 @@ Tools / with overflow utility / css / 0: |-
   [overflow~="y-hidden"] {
     overflow-y: hidden;
   }
+  [overflow~="x-clip"] {
+    overflow-x: clip;
+  }
+  [overflow~="y-clip"] {
+    overflow-y: clip;
+  }
   [overflow~="x-visible"] {
     overflow-x: visible;
   }
@@ -2309,7 +2321,11 @@ Tools / with text utility / css / 0: |-
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
   }
-  [text~="overflow-clip"] {
+  [text~="text-ellipsis"] {
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+  }
+  [text~="text-clip"] {
     -o-text-overflow: clip;
     text-overflow: clip;
   }
@@ -2447,6 +2463,12 @@ Tools / with text utility / css / 0: |-
   [text~="text-bottom"] {
     vertical-align: text-bottom;
   }
+  [text~="sub"] {
+    vertical-align: sub;
+  }
+  [text~="super"] {
+    vertical-align: super;
+  }
   [text~="space-normal"] {
     white-space: normal;
   }

diff --git a/test/processor/attributify.test.ts b/test/processor/attributify.test.ts
@@ -238,9 +238,9 @@ describe('Attributify Mode', () => {
   it('with overflow utility', () => {
     const result = processor.attributify({
       'overflow': [
-        'auto', 'hidden', 'visible', 'scroll', // overflow
-        'x-auto', 'x-hidden', 'x-visible', 'x-scroll', // overflow-x
-        'y-auto', 'y-hidden', 'y-visible', 'y-scroll', // overflow-y
+        'auto', 'hidden', 'clip', 'visible', 'scroll', // overflow
+        'x-auto', 'x-hidden', 'x-clip', 'x-visible', 'x-scroll', // overflow-x
+        'y-auto', 'y-hidden', 'y-clip', 'y-visible', 'y-scroll', // overflow-y
       ],
     });
     expect(result.ignored.length).toEqual(0);
@@ -389,7 +389,7 @@ describe('Attributify Mode', () => {
       'text': [
         'xs', 'sm', // font-size
         'left', 'center', 'right', 'justify', // text-align
-        'baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', // vertical-align
+        'baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', // vertical-align
         'red-500', // color
         'opacity-50', // opacity
         'hyphens-none', 'hyphens-manual', 'hyphens-auto', // hyphens
@@ -405,7 +405,7 @@ describe('Attributify Mode', () => {
         'stroke', 'stroke-none', 'stroke-sm', // text-stroke-width
         'stroke-blue-500', 'stroke-gray-500', // text-stroke-color
         'uppercase', 'lowercase', 'capitalize', 'normal-case', // text-transform
-        'truncate', 'overflow-ellipsis', 'overflow-clip', // text-overflow
+        'truncate', 'overflow-ellipsis', 'text-ellipsis', 'text-clip', // text-overflow
         'space-normal', 'space-nowrap', 'space-pre', 'space-pre-line', 'space-pre-wrap', // white-space
         'break-normal', 'break-words', 'break-all', // word-break
         'placeholder-gray-200', 'placeholder-opacity-80', // placeholder
@@ -490,7 +490,7 @@ describe('Attributify Mode', () => {
         '1', '2', 't-0', // border-width
         'gray-400', // border-color
         'opacity-50', // opacity
-        'solid', 'dashed', 'dotted', 'double', 'none', // border-style
+        'solid', 'dashed', 'dotted', 'double', 'none', 'hidden', // border-style
         'collapse', 'separate', // border-collapse
       ],
     });

diff --git a/test/processor/resolve.test.ts b/test/processor/resolve.test.ts
@@ -46,8 +46,9 @@ describe('Resolve Tests', () => {
   });
 
   it('resolve static utilities', () => {
-    expect(Object.keys(processor.resolveStaticUtilities(false)).length).toEqual(344);
-    expect(Object.keys(processor.resolveStaticUtilities(true)).length).toEqual(353);
+    expect(Object.keys(processor.resolveStaticUtilities(false)).length).toEqual(351);
+    expect(Object.keys(processor.resolveStaticUtilities(true)).length).toEqual(360);
+    expect(Object.keys(processor.resolveStaticUtilities(true)).length).toEqual(360);
   });
 
   it('resolve dynamic utilities', () => {

diff --git a/test/utils/__snapshots__/completions.test.ts.yml b/test/utils/__snapshots__/completions.test.ts.yml
@@ -3490,6 +3490,10 @@ Tools / completions / dynamic / 1: |-
     "border-b-${size}",
     "border-l-${int}",
     "border-l-${size}",
+    "border-x-${int}",
+    "border-x-${size}",
+    "border-y-${int}",
+    "border-y-${size}",
     "border-opacity-${int<=100}",
     "divide-y-${int}",
     "divide-x-${int}",