Add remaining text-decoration utilities (#6004)

* Add `text-decoration-style` utilities

* Add remaining `text-decoration` utilities

* Add test for default underline offset

* Remove text-underline-position, don't rename underline utilities, remove DEFAULT values for decoration thickness and underline offset

* Add auto/from-font values, update tests

Co-authored-by: Adam Wathan <[email protected]>

Author: xiBread

src/corePlugins.js

@@ -1396,8 +1396,10 @@ export let corePlugins = {
 
   boxDecorationBreak: ({ addUtilities }) => {
     addUtilities({
-      '.decoration-slice': { 'box-decoration-break': 'slice' },
-      '.decoration-clone': { 'box-decoration-break': 'clone' },
+      '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
+      '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
+      '.box-decoration-slice': { 'box-decoration-break': 'slice' },
+      '.box-decoration-clone': { 'box-decoration-break': 'clone' },
     })
   },
 
@@ -1655,6 +1657,7 @@ export let corePlugins = {
   textDecoration: ({ addUtilities }) => {
     addUtilities({
       '.underline': { 'text-decoration': 'underline' },
+      '.overline': { 'text-decoration': 'overline' },
       '.line-through': { 'text-decoration': 'line-through' },
       '.no-underline': { 'text-decoration': 'none' },
     })
@@ -1671,6 +1674,28 @@ export let corePlugins = {
     )
   },
 
+  textDecorationStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.decoration-solid': { 'text-decoration-style': 'solid' },
+      '.decoration-double': { 'text-decoration-style': 'double' },
+      '.decoration-dotted': { 'text-decoration-style': 'dotted' },
+      '.decoration-dashed': { 'text-decoration-style': 'dashed' },
+      '.decoration-wavy': { 'text-decoration-style': 'wavy' },
+    })
+  },
+
+  textDecorationThickness: createUtilityPlugin(
+    'textDecorationThickness',
+    [['decoration', ['text-decoration-thickness']]],
+    { type: ['length', 'percentage'] }
+  ),
+
+  textUnderlineOffset: createUtilityPlugin(
+    'textUnderlineOffset',
+    [['underline-offset', ['text-underline-offset']]],
+    { type: ['length', 'percentage'] }
+  ),
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {

stubs/defaultConfig.stub.js

@@ -798,6 +798,23 @@ module.exports = {
     },
     textColor: ({ theme }) => theme('colors'),
     textDecorationColor: ({ theme }) => theme('colors'),
+    textDecorationThickness: {
+      auto: 'auto',
+      'from-font': 'from-font',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    textUnderlineOffset: {
+      auto: 'auto',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     textIndent: ({ theme }) => ({
       ...theme('spacing'),
     }),

tests/arbitrary-values.test.css

@@ -825,6 +825,12 @@
 .decoration-\[var\(--color\)\] {
   text-decoration-color: var(--color);
 }
+.decoration-\[length\:10px\] {
+  text-decoration-thickness: 10px;
+}
+.underline-offset-\[10px\] {
+  text-underline-offset: 10px;
+}
 .placeholder-\[var\(--placeholder\)\]::placeholder {
   color: var(--placeholder);
 }

tests/arbitrary-values.test.html

@@ -305,6 +305,10 @@
     <div class="decoration-[color:var(--color)]"></div>
     <div class="decoration-[var(--color)]"></div>
 
+    <div class="decoration-[length:10px]"></div>
+
+    <div class="underline-offset-[10px]"></div>
+
     <div class="placeholder-[var(--placeholder)]"></div>
 
     <div class="placeholder-opacity-[var(--placeholder-opacity)]"></div>

tests/basic-usage.test.css

@@ -662,6 +662,12 @@
 .decoration-clone {
   box-decoration-break: clone;
 }
+.box-decoration-slice {
+  box-decoration-break: slice;
+}
+.box-decoration-clone {
+  box-decoration-break: clone;
+}
 .bg-cover {
   background-size: cover;
 }
@@ -799,6 +805,21 @@
 .decoration-red-600 {
   text-decoration-color: #dc2626;
 }
+.decoration-solid {
+  text-decoration-style: solid;
+}
+.decoration-1 {
+  text-decoration-thickness: 1px;
+}
+.decoration-2 {
+  text-decoration-thickness: 2px;
+}
+.underline-offset-1 {
+  text-underline-offset: 1px;
+}
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

tests/basic-usage.test.html

@@ -34,6 +34,7 @@
     <div class="shadow shadow-md shadow-lg"></div>
     <div class="shadow-black shadow-red-500/25 shadow-blue-100/10"></div>
     <div class="decoration-clone decoration-slice"></div>
+    <div class="box-decoration-clone box-decoration-slice"></div>
     <div class="box-border"></div>
     <div class="clear-left"></div>
     <div class="container"></div>
@@ -160,7 +161,14 @@
     <div class="text-indigo-500"></div>
     <div class="text-opacity-10"></div>
     <div class="underline"></div>
+    <div class="decoration-underline"></div>
     <div class="decoration-red-600"></div>
+    <div class="decoration-solid"></div>
+    <div class="decoration-1"></div>
+    <div class="decoration-2"></div>
+    <div class="underline-offset-1"></div>
+    <div class="underline-offset-2"></div>
+    <div class="underline-right"></div>
     <div class="overflow-ellipsis truncate"></div>
     <div class="uppercase"></div>
     <div class="transform transform-gpu transform-none"></div>