feat: add '.decoration-x' utility classes (#601)

windicss · Dec 15, 2021 · a6d8a5a · a6d8a5a
1 parent 6aa033c
commit a6d8a5a
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 18 deletions.
diff --git a/src/config/base.ts b/src/config/base.ts
@@ -7,6 +7,7 @@ import type { Config } from '../interfaces';
 export const defaultColors = {
   transparent: 'transparent',
   current: 'currentColor',
+  inherit: 'inherit',
   light: colors.light,
   dark: colors.dark,
   black: colors.black,
@@ -1076,6 +1077,15 @@ export const baseConfig: Config = {
       4: '4px',
       8: '8px',
     },
+    textDecorationThickness: {
+      'auto': 'auto',
+      'from-font': 'from-font',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     textIndent: {
       DEFAULT: '1.5rem',
       xs: '0.5rem',

diff --git a/src/config/order.ts b/src/config/order.ts
@@ -170,6 +170,7 @@ export enum pluginOrder {
   'textDecorationColor' = 8460,
   'textDecorationOpacity' = 8470,
   'textDecorationOffset' = 8480,
+  'textDecorationThickness' = 8490,
   'textDecoration' = 8500,
   'textIndent' = 8550,
   'textStrokeColor' = 8560,

diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -796,7 +796,7 @@ export class Processor {
             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-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-overflow-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/dynamic.ts b/src/lib/utilities/dynamic.ts
@@ -533,16 +533,28 @@ function letterSpacing(utility: Utility, { theme }: PluginUtils): Output {
 
 // https://windicss.org/utilities/typography.html#text-decoration
 function textDecoration(utility: Utility, { theme }: PluginUtils): Output {
-  // handle text decoration opacity
-  if (utility.raw.startsWith('underline-opacity')) {
-    return utility.handler
-      .handleStatic(theme('textDecorationOpacity'))
-      .handleNumber(0, 100, 'int', (number: number) => (number / 100).toString())
+  return (
+    // .decoration-{color}/{opacity}
+    utility.handler
+      .handleColor(theme('textDecorationColor'))
+      .handleOpacity(theme('textDecorationOpacity'))
+      .handleSquareBrackets(notNumberLead)
       .handleVariable()
-      .createProperty('--tw-line-opacity')
-      ?.updateMeta('utilities', 'textDecorationOpacity', pluginOrder.textDecorationOpacity, 1, true);
-  }
+      .createColorStyle(utility.class, ['-webkit-text-decoration-color', 'text-decoration-color'], '--tw-text-decoration-opacity')
+      ?.updateMeta('utilities', 'textDecorationColor', pluginOrder.textDecorationColor, 1, true)
+    // .decoration-{thickness}
+    || utility.handler
+      .handleStatic(theme('textDecorationThickness'))
+      .handleNumber(0, undefined, 'int', number => `${number}px`)
+      .handleSize()
+      .createProperty('text-decoration-thickness')
+      ?.updateMeta('utilities', 'textDecorationThickness', pluginOrder.textDecorationThickness, 1, true)
+  );
+}
 
+// https://windicss.org/utilities/typography.html#text-decoration
+function textUnderline(utility: Utility, { theme }: PluginUtils): Output {
+  // .underline-offset-{offset}
   if (utility.raw.startsWith('underline-offset')) {
     return utility.handler
       .handleStatic(theme('textDecorationOffset'))
@@ -551,7 +563,19 @@ function textDecoration(utility: Utility, { theme }: PluginUtils): Output {
       .createProperty('text-underline-offset')
       ?.updateMeta('utilities', 'textDecorationOffset', pluginOrder.textDecorationOffset, 1, true);
   }
-  // handle text decoration color or length
+
+  // .underline-opacity-{opacity} - This is a fallback for .decoration-{color}/{opacity}
+  if (utility.raw.startsWith('underline-opacity')) {
+    return utility.handler
+      .handleStatic(theme('textDecorationOpacity'))
+      .handleNumber(0, 100, 'int', (number: number) => (number / 100).toString())
+      .handleVariable()
+      .createProperty('--tw-line-opacity')
+      ?.updateMeta('utilities', 'textDecorationOpacity', pluginOrder.textDecorationOpacity, 1, true);
+  }
+
+  // .underline-{color} - This is a fallback for .decoration-{color} to avoid breaking changes
+  // .underline-{thickness} - This is a fallback for .decoration-{thickness} to avoid breaking changes
   return utility.handler
     .handleColor(theme('textDecorationColor'))
     .handleOpacity(theme('opacity'))
@@ -1572,7 +1596,8 @@ export const dynamicUtilities: DynamicUtility = {
   stroke: stroke,
   text: text,
   tracking: letterSpacing,
-  underline: textDecoration,
+  decoration: textDecoration,
+  underline: textUnderline,
   w: size,
   z: zIndex,
   gap: gap,

diff --git a/src/lib/utilities/static.ts b/src/lib/utilities/static.ts
@@ -1577,14 +1577,24 @@ export const staticUtilities: StaticUtility = {
       'order': 1,
     },
   },
+  'overline': {
+    'utility': {
+      '-webkit-text-decoration-line': 'overline',
+      'text-decoration-line': 'overline',
+    },
+    'meta': {
+      'group': 'textDecoration',
+      'order': 2,
+    },
+  },
   'line-through': {
     'utility': {
       '-webkit-text-decoration-line': 'line-through',
       'text-decoration-line': 'line-through',
     },
     'meta': {
       'group': 'textDecoration',
-      'order': 2,
+      'order': 3,
     },
   },
   'no-underline': {
@@ -1593,11 +1603,63 @@ export const staticUtilities: StaticUtility = {
     },
     'meta': {
       'group': 'textDecoration',
-      'order': 3,
+      'order': 4,
     },
   },
 
   // http://localhost:3001/utilities/typography.html#text-decoration-style
+  'decoration-solid': {
+    'utility': {
+      '-webkit-text-decoration-style': 'solid',
+      'text-decoration-style': 'solid',
+    },
+    'meta': {
+      'group': 'textDecorationStyle',
+      'order': 1,
+    },
+  },
+  'decoration-double': {
+    'utility': {
+      '-webkit-text-decoration-style': 'double',
+      'text-decoration-style': 'double',
+    },
+    'meta': {
+      'group': 'textDecorationStyle',
+      'order': 2,
+    },
+  },
+  'decoration-dotted': {
+    'utility': {
+      '-webkit-text-decoration-style': 'dotted',
+      'text-decoration-style': 'dotted',
+    },
+    'meta': {
+      'group': 'textDecorationStyle',
+      'order': 3,
+    },
+  },
+  'decoration-dashed': {
+    'utility': {
+      '-webkit-text-decoration-style': 'dashed',
+      'text-decoration-style': 'dashed',
+    },
+    'meta': {
+      'group': 'textDecorationStyle',
+      'order': 4,
+    },
+  },
+  'decoration-wavy': {
+    'utility': {
+      '-webkit-text-decoration-style': 'wavy',
+      'text-decoration-style': 'wavy',
+    },
+    'meta': {
+      'group': 'textDecorationStyle',
+      'order': 5,
+    },
+  },
+
+  // http://localhost:3001/utilities/typography.html#text-decoration-style - Fallback to .decoration-{style}
   'underline-solid': {
     'utility': {
       '-webkit-text-decoration-style': 'solid',
@@ -1638,6 +1700,16 @@ export const staticUtilities: StaticUtility = {
       'order': 4,
     },
   },
+  'underline-wavy': {
+    'utility': {
+      '-webkit-text-decoration-style': 'wavy',
+      'text-decoration-style': 'wavy',
+    },
+    'meta': {
+      'group': 'textDecorationStyle',
+      'order': 5,
+    },
+  },
 
   // https://windicss.org/utilities/typography.html#text-transform
   'uppercase': {

diff --git a/test/processor/__snapshots__/attributify.test.ts.yml b/test/processor/__snapshots__/attributify.test.ts.yml
@@ -963,6 +963,33 @@ Tools / with container utility / css / 0: |-
       max-width: 1536px;
     }
   }
+Tools / with decoration utility / css / 0: |-
+  [decoration~="solid"] {
+    -webkit-text-decoration-style: solid;
+    text-decoration-style: solid;
+  }
+  [decoration~="double"] {
+    -webkit-text-decoration-style: double;
+    text-decoration-style: double;
+  }
+  [decoration~="dotted"] {
+    -webkit-text-decoration-style: dotted;
+    text-decoration-style: dotted;
+  }
+  [decoration~="wavy"] {
+    -webkit-text-decoration-style: wavy;
+    text-decoration-style: wavy;
+  }
+  [decoration~="green-500"] {
+    --tw-text-decoration-opacity: 1;
+    -webkit-text-decoration-color: rgba(16, 185, 129, var(--tw-text-decoration-opacity));
+    text-decoration-color: rgba(16, 185, 129, var(--tw-text-decoration-opacity));
+  }
+  [decoration~="gray-500"] {
+    --tw-text-decoration-opacity: 1;
+    -webkit-text-decoration-color: rgba(107, 114, 128, var(--tw-text-decoration-opacity));
+    text-decoration-color: rgba(107, 114, 128, var(--tw-text-decoration-opacity));
+  }
 Tools / with display utility / css / 0: |-
   [display~="block"] {
     display: block;
@@ -2343,6 +2370,10 @@ Tools / with text utility / css / 0: |-
     -webkit-text-decoration-line: underline;
     text-decoration-line: underline;
   }
+  [text~="overline"] {
+    -webkit-text-decoration-line: overline;
+    text-decoration-line: overline;
+  }
   [text~="line-through"] {
     -webkit-text-decoration-line: line-through;
     text-decoration-line: line-through;
@@ -2702,6 +2733,10 @@ Tools / with underline utility / css / 0: |-
     -webkit-text-decoration-style: dotted;
     text-decoration-style: dotted;
   }
+  [underline~="wavy"] {
+    -webkit-text-decoration-style: wavy;
+    text-decoration-style: wavy;
+  }
   [underline~="auto"] {
     text-decoration-thickness: auto;
   }

diff --git a/test/processor/__snapshots__/resolve.test.ts.yml b/test/processor/__snapshots__/resolve.test.ts.yml
@@ -100,6 +100,7 @@ Tools / get corePlugins / list / 0: |-
     "textDecorationColor",
     "textDecorationOpacity",
     "textDecorationOffset",
+    "textDecorationThickness",
     "textDecoration",
     "textIndent",
     "textStrokeColor",
@@ -274,6 +275,7 @@ Tools / get corePlugins / list3 / 2: |-
     "textDecorationColor",
     "textDecorationOpacity",
     "textDecorationOffset",
+    "textDecorationThickness",
     "textDecoration",
     "textIndent",
     "textStrokeColor",
@@ -405,6 +407,7 @@ Tools / resolve dynamic utilities / with-plugins / 1: |-
     "stroke",
     "text",
     "tracking",
+    "decoration",
     "underline",
     "w",
     "z",
@@ -494,6 +497,7 @@ Tools / resolve dynamic utilities / without-plugins / 0: |-
     "stroke",
     "text",
     "tracking",
+    "decoration",
     "underline",
     "w",
     "z",

diff --git a/test/processor/__snapshots__/utilities.test.ts.yml b/test/processor/__snapshots__/utilities.test.ts.yml
@@ -1039,22 +1039,46 @@ Tools / tab size / css / 0: |-
     tab-size: 13px;
   }
 Tools / text decoration color & opacity & length & offset / css / 0: |-
+  .decoration-solid {
+    -webkit-text-decoration-style: solid;
+    text-decoration-style: solid;
+  }
   .underline-solid {
     -webkit-text-decoration-style: solid;
     text-decoration-style: solid;
   }
+  .decoration-double {
+    -webkit-text-decoration-style: double;
+    text-decoration-style: double;
+  }
   .underline-double {
     -webkit-text-decoration-style: double;
     text-decoration-style: double;
   }
+  .decoration-dotted {
+    -webkit-text-decoration-style: dotted;
+    text-decoration-style: dotted;
+  }
   .underline-dotted {
     -webkit-text-decoration-style: dotted;
     text-decoration-style: dotted;
   }
+  .decoration-dashed {
+    -webkit-text-decoration-style: dashed;
+    text-decoration-style: dashed;
+  }
   .underline-dashed {
     -webkit-text-decoration-style: dashed;
     text-decoration-style: dashed;
   }
+  .decoration-wavy {
+    -webkit-text-decoration-style: wavy;
+    text-decoration-style: wavy;
+  }
+  .underline-wavy {
+    -webkit-text-decoration-style: wavy;
+    text-decoration-style: wavy;
+  }
   .underline-2 {
     text-decoration-thickness: 2px;
   }
@@ -1076,6 +1100,20 @@ Tools / text decoration color & opacity & length & offset / css / 0: |-
     -webkit-text-decoration-color: transparent;
     text-decoration-color: transparent;
   }
+  .decoration-gray-200\/90 {
+    --tw-text-decoration-opacity: 0.9;
+    -webkit-text-decoration-color: rgba(229, 231, 235, var(--tw-text-decoration-opacity));
+    text-decoration-color: rgba(229, 231, 235, var(--tw-text-decoration-opacity));
+  }
+  .decoration-gray-200 {
+    --tw-text-decoration-opacity: 1;
+    -webkit-text-decoration-color: rgba(229, 231, 235, var(--tw-text-decoration-opacity));
+    text-decoration-color: rgba(229, 231, 235, var(--tw-text-decoration-opacity));
+  }
+  .decoration-transparent {
+    -webkit-text-decoration-color: transparent;
+    text-decoration-color: transparent;
+  }
   .underline-opacity-90 {
     --tw-line-opacity: 0.9;
   }
@@ -1088,10 +1126,26 @@ Tools / text decoration color & opacity & length & offset / css / 0: |-
   .underline-offset-3px {
     text-underline-offset: 3px;
   }
+  .decoration-2 {
+    text-decoration-thickness: 2px;
+  }
+  .decoration-3px {
+    text-decoration-thickness: 3px;
+  }
+  .decoration-1rem {
+    text-decoration-thickness: 1rem;
+  }
+  .decoration-auto {
+    text-decoration-thickness: auto;
+  }
   .underline {
     -webkit-text-decoration-line: underline;
     text-decoration-line: underline;
   }
+  .overline {
+    -webkit-text-decoration-line: overline;
+    text-decoration-line: overline;
+  }
   .line-through {
     -webkit-text-decoration-line: line-through;
     text-decoration-line: line-through;