From 95dd82b749b04de93b1308519c5330721e9449ec Mon Sep 17 00:00:00 2001
From: Oliver Williams <oliverwilliams345@gmail.com>
Date: Mon, 13 Dec 2021 21:09:14 +0000
Subject: [PATCH] use text-decoration-line instead of text-decoration (#6378)

* use text-decoration-line instead of text-decoration

* fix tests

Co-authored-by: Oliver Williams <oliver@Olivers-MacBook-Pro.local>
---
 src/corePlugins.js         | 8 ++++----
 tests/apply.test.js        | 6 +++---
 tests/basic-usage.test.css | 2 +-
 tests/raw-content.test.css | 2 +-
 tests/safelist.test.js     | 2 +-
 tests/variants.test.css    | 2 +-
 tests/variants.test.js     | 2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 073a36f37b82..31a959fd9f43 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1660,10 +1660,10 @@ 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' },
+      '.underline': { 'text-decoration-line': 'underline' },
+      '.overline': { 'text-decoration-line': 'overline' },
+      '.line-through': { 'text-decoration-line': 'line-through' },
+      '.no-underline': { 'text-decoration-line': 'none' },
     })
   },
 
diff --git a/tests/apply.test.js b/tests/apply.test.js
index 12e389937cef..b4932a702c40 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -303,7 +303,7 @@ test('@apply classes from outside a @layer', async () => {
       }
 
       .baz {
-        text-decoration: underline;
+        text-decoration-line: underline;
         --tw-text-opacity: 1;
         color: rgb(239 68 68 / var(--tw-text-opacity));
         font-weight: 700;
@@ -351,7 +351,7 @@ test('@applying classes from outside a @layer respects the source order', async
   await run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
       .baz {
-        text-decoration: none;
+        text-decoration-line: none;
       }
 
       .container {
@@ -396,7 +396,7 @@ test('@applying classes from outside a @layer respects the source order', async
       }
 
       .bar {
-        text-decoration: none;
+        text-decoration-line: none;
       }
     `)
   })
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 07b6bbe824bb..edbd4f98741c 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -805,7 +805,7 @@
   --tw-text-opacity: 0.1;
 }
 .underline {
-  text-decoration: underline;
+  text-decoration-line: underline;
 }
 .decoration-red-600 {
   text-decoration-color: #dc2626;
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index 2c2092e253f1..88b7ecc7ecb7 100644
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -552,7 +552,7 @@
   --tw-text-opacity: 0.1;
 }
 .underline {
-  text-decoration: underline;
+  text-decoration-line: underline;
 }
 .antialiased {
   -webkit-font-smoothing: antialiased;
diff --git a/tests/safelist.test.js b/tests/safelist.test.js
index 39b47e7acd79..5726274ad66d 100644
--- a/tests/safelist.test.js
+++ b/tests/safelist.test.js
@@ -40,7 +40,7 @@ it('should safelist strings', () => {
       }
 
       .hover\:underline:hover {
-        text-decoration: underline;
+        text-decoration-line: underline;
       }
     `)
   })
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 657d136e43d9..a45b42104b8e 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -123,7 +123,7 @@
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 .first-line\:underline::first-line {
-  text-decoration: underline;
+  text-decoration-line: underline;
 }
 .marker\:text-lg *::marker {
   font-size: 1.125rem;
diff --git a/tests/variants.test.js b/tests/variants.test.js
index 5f8951aee63f..16f3c566fda4 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -200,7 +200,7 @@ describe('custom advanced variants', () => {
         }
 
         .my-variant\:underline:where(.one, .two, .three) {
-          text-decoration: underline;
+          text-decoration-line: underline;
         }
       `)
     })