use text-decoration-line instead of text-decoration (tailwindlabs#6378)

o-t-w · Oliver Williams · web-flow · commit 95dd82b749b0 · 2021-12-13T16:09:14.000-05:00
* use text-decoration-line instead of text-decoration

* fix tests

Co-authored-by: Oliver Williams &lt;oliver@Olivers-MacBook-Pro.local&gt;
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -200,7 +200,7 @@ describe('custom advanced variants', () => {
         }
 
         .my-variant\:underline:where(.one, .two, .three) {
-          text-decoration: underline;
+          text-decoration-line: underline;
         }
       `)
     })

Original file line number	Diff line number	Diff line change
`@@ -303,7 +303,7 @@ test('@apply classes from outside a @layer', async () => {`
`303`	`303`	`}`
`304`	`304`
`305`	`305`	`.baz {`
`306`		`- text-decoration: underline;`
	`306`	`+ text-decoration-line: underline;`
`307`	`307`	`--tw-text-opacity: 1;`
`308`	`308`	`color: rgb(239 68 68 / var(--tw-text-opacity));`
`309`	`309`	`font-weight: 700;`
`@@ -351,7 +351,7 @@ test('@applying classes from outside a @layer respects the source order', async`
`351`	`351`	`await run(input, config).then((result) => {`
`352`	`352`	return expect(result.css).toMatchFormattedCss(css`
`353`	`353`	`.baz {`
`354`		`- text-decoration: none;`
	`354`	`+ text-decoration-line: none;`
`355`	`355`	`}`
`356`	`356`
`357`	`357`	`.container {`
`@@ -396,7 +396,7 @@ test('@applying classes from outside a @layer respects the source order', async`
`396`	`396`	`}`
`397`	`397`
`398`	`398`	`.bar {`
`399`		`- text-decoration: none;`
	`399`	`+ text-decoration-line: none;`
`400`	`400`	`}`
`401`	`401`	`)
`402`	`402`	`})`
Original file line number	Diff line number	Diff line change
`@@ -805,7 +805,7 @@`
`805`	`805`	`--tw-text-opacity: 0.1;`
`806`	`806`	`}`
`807`	`807`	`.underline {`
`808`		`- text-decoration: underline;`
	`808`	`+ text-decoration-line: underline;`
`809`	`809`	`}`
`810`	`810`	`.decoration-red-600 {`
`811`	`811`	`text-decoration-color: #dc2626;`
Original file line number	Diff line number	Diff line change
`@@ -552,7 +552,7 @@`
`552`	`552`	`--tw-text-opacity: 0.1;`
`553`	`553`	`}`
`554`	`554`	`.underline {`
`555`		`- text-decoration: underline;`
	`555`	`+ text-decoration-line: underline;`
`556`	`556`	`}`
`557`	`557`	`.antialiased {`
`558`	`558`	`-webkit-font-smoothing: antialiased;`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ it('should safelist strings', () => {`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.hover\:underline:hover {`
`43`		`- text-decoration: underline;`
	`43`	`+ text-decoration-line: underline;`
`44`	`44`	`}`
`45`	`45`	`)
`46`	`46`	`})`
Original file line number	Diff line number	Diff line change
`@@ -123,7 +123,7 @@`
`123`	`123`	`background-color: rgb(253 224 71 / var(--tw-bg-opacity));`
`124`	`124`	`}`
`125`	`125`	`.first-line\:underline::first-line {`
`126`		`- text-decoration: underline;`
	`126`	`+ text-decoration-line: underline;`
`127`	`127`	`}`
`128`	`128`	`.marker\:text-lg *::marker {`
`129`	`129`	`font-size: 1.125rem;`
Original file line number	Diff line number	Diff line change
`@@ -200,7 +200,7 @@ describe('custom advanced variants', () => {`
`200`	`200`	`}`
`201`	`201`
`202`	`202`	`.my-variant\:underline:where(.one, .two, .three) {`
`203`		`- text-decoration: underline;`
	`203`	`+ text-decoration-line: underline;`
`204`	`204`	`}`
`205`	`205`	`)
`206`	`206`	`})`