From d8a48e036ed656ee24c549e16d01f31978ce7000 Mon Sep 17 00:00:00 2001 From: satyrn Date: Fri, 25 Feb 2022 22:29:33 -0800 Subject: [PATCH] feat: add various TW3 utility classes (#718) Co-authored-by: Anthony Fu --- src/lib/index.ts | 4 +- src/lib/utilities/static.ts | 90 ++++++++++++++++--- src/utils/completions.ts | 4 + test/assets/testClasses.ts | 6 +- .../__snapshots__/attributify.test.ts.yml | 24 ++++- test/processor/attributify.test.ts | 12 +-- test/processor/resolve.test.ts | 5 +- .../__snapshots__/completions.test.ts.yml | 4 + 8 files changed, 122 insertions(+), 27 deletions(-) diff --git a/src/lib/index.ts b/src/lib/index.ts index 6a77db68..a381af30 100644 --- 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 index 44cc6366..92c32b28 100644 --- 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 index 9159863e..cc1c86e1 100644 --- 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 index c6b7c73f..92d7145c 100644 --- a/test/assets/testClasses.ts +++ b/test/assets/testClasses.ts @@ -95,8 +95,8 @@ 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', @@ -104,7 +104,7 @@ const classNames = [ '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 index cdf4dbc6..53a29236 100644 --- 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 index ab05358a..c1d196e5 100644 --- 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 index 6bf2d63e..2f9dd1cd 100644 --- 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 index 13ca7ef4..b711dddb 100644 --- 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}",