From 0915b7e71efb8eb112588945a6e8b4dd1528ffdf Mon Sep 17 00:00:00 2001 From: Oscar Lee-Vermeren Date: Tue, 2 Nov 2021 20:32:47 -0400 Subject: [PATCH 1/5] Add `text-decoration-style` utilities --- src/corePlugins.js | 22 ++++++++++++++++------ tests/basic-usage.test.css | 3 +++ tests/basic-usage.test.html | 1 + 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index 4e8c2a3c0a4a..982707beeaae 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,16 +1,16 @@ import fs from 'fs' import * as path from 'path' import postcss from 'postcss' -import createUtilityPlugin from './util/createUtilityPlugin' +import { version as tailwindVersion } from '../package.json' import buildMediaQuery from './util/buildMediaQuery' -import parseAnimationValue from './util/parseAnimationValue' +import createUtilityPlugin from './util/createUtilityPlugin' import flattenColorPalette from './util/flattenColorPalette' -import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable' -import toColorValue from './util/toColorValue' import isPlainObject from './util/isPlainObject' -import transformThemeValue from './util/transformThemeValue' -import { version as tailwindVersion } from '../package.json' import log from './util/log' +import parseAnimationValue from './util/parseAnimationValue' +import toColorValue from './util/toColorValue' +import transformThemeValue from './util/transformThemeValue' +import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable' export let variantPlugins = { pseudoElementVariants: ({ addVariant }) => { @@ -1645,6 +1645,16 @@ 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' }, + }) + }, + fontSmoothing: ({ addUtilities }) => { addUtilities({ '.antialiased': { diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index a1b78fc5f8b3..74651382351f 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -774,6 +774,9 @@ .decoration-red-600 { text-decoration-color: #dc2626; } +.decoration-solid { + text-decoration-style: solid; +} .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index 61d22dcf5d71..46f01540812a 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -162,6 +162,7 @@
+
From a67d33692e9ea97847cf5270ce8de45a4781ae8d Mon Sep 17 00:00:00 2001 From: Oscar Lee-Vermeren Date: Sun, 7 Nov 2021 16:50:18 -0500 Subject: [PATCH 2/5] Add remaining `text-decoration` utilities --- src/corePlugins.js | 49 +++++++++++++++++++++++++------- stubs/defaultConfig.stub.js | 14 +++++++++ tests/arbitrary-values.test.css | 6 ++++ tests/arbitrary-values.test.html | 4 +++ tests/basic-usage.test.css | 21 ++++++++++++++ tests/basic-usage.test.html | 6 ++++ 6 files changed, 89 insertions(+), 11 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index 982707beeaae..fe05192f148e 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,16 +1,16 @@ import fs from 'fs' import * as path from 'path' import postcss from 'postcss' -import { version as tailwindVersion } from '../package.json' -import buildMediaQuery from './util/buildMediaQuery' import createUtilityPlugin from './util/createUtilityPlugin' -import flattenColorPalette from './util/flattenColorPalette' -import isPlainObject from './util/isPlainObject' -import log from './util/log' +import buildMediaQuery from './util/buildMediaQuery' import parseAnimationValue from './util/parseAnimationValue' +import flattenColorPalette from './util/flattenColorPalette' +import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable' import toColorValue from './util/toColorValue' +import isPlainObject from './util/isPlainObject' import transformThemeValue from './util/transformThemeValue' -import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable' +import { version as tailwindVersion } from '../package.json' +import log from './util/log' export let variantPlugins = { pseudoElementVariants: ({ addVariant }) => { @@ -1370,8 +1370,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' }, }) }, @@ -1628,9 +1630,13 @@ export let corePlugins = { textDecoration: ({ addUtilities }) => { addUtilities({ - '.underline': { 'text-decoration': 'underline' }, - '.line-through': { 'text-decoration': 'line-through' }, - '.no-underline': { 'text-decoration': 'none' }, + '.underline': { 'text-decoration': 'underline' }, // Deprecated + '.line-through': { 'text-decoration': 'line-through' }, // Deprecated + '.no-underline': { 'text-decoration': 'none' }, // Deprecated + '.decoration-underline': { 'text-decoration': 'underline' }, + '.decoration-overline': { 'text-decoration': 'overline' }, + '.decoration-line-through': { 'text-decoration': 'line-through' }, + '.decoration-none': { 'text-decoration': 'none' }, }) }, @@ -1655,6 +1661,27 @@ export let corePlugins = { }) }, + textDecorationThickness: createUtilityPlugin( + 'textDecorationThickness', + [['decoration', ['text-decoration-thickness']]], + { type: ['length', 'percentage'] } + ), + + textUnderlineOffset: createUtilityPlugin( + 'textUnderlineOffset', + [['underline-offset', ['text-underline-offset']]], + { type: ['length', 'percentage'] } + ), + + textUnderlinePosition: ({ addUtilities }) => { + addUtilities({ + '.underline-auto': { 'text-underline-position': 'auto' }, + '.underline-under': { 'text-underline-position': 'under' }, + '.underline-right': { 'text-underline-position': 'right' }, + '.underline-left': { 'text-underline-position': 'left' }, + }) + }, + fontSmoothing: ({ addUtilities }) => { addUtilities({ '.antialiased': { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index fb86c38e95f8..c73ac379a954 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -798,6 +798,20 @@ module.exports = { }, textColor: ({ theme }) => theme('colors'), textDecorationColor: ({ theme }) => theme('colors'), + textDecorationThickness: { + DEFAULT: '1px', + 0: '0px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + textUnderlineOffset: { + DEFAULT: '1px', + 0: '0px', + 2: '2px', + 4: '4px', + 8: '8px', + }, textIndent: ({ theme }) => ({ ...theme('spacing'), }), diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 8267ef0f2549..50b798dc9b8d 100644 --- a/tests/arbitrary-values.test.css +++ b/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); } diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html index 75b42c813883..9d2c4294808f 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -305,6 +305,10 @@
+
+ +
+
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 74651382351f..259069fb9af2 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -637,6 +637,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; } @@ -771,12 +777,27 @@ .underline { text-decoration: underline; } +.decoration-underline { + text-decoration: underline; +} .decoration-red-600 { text-decoration-color: #dc2626; } .decoration-solid { text-decoration-style: solid; } +.decoration { + text-decoration-thickness: 1px; +} +.decoration-2 { + text-decoration-thickness: 2px; +} +.underline-offset-2 { + text-underline-offset: 2px; +} +.underline-right { + text-underline-position: right; +} .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index 46f01540812a..f4d17c1c27ba 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -34,6 +34,7 @@
+
@@ -161,8 +162,13 @@
+
+
+
+
+
From b769a4938d10679a0c270b889ae9eef0436bad07 Mon Sep 17 00:00:00 2001 From: Oscar Lee-Vermeren Date: Sun, 7 Nov 2021 17:03:39 -0500 Subject: [PATCH 3/5] Add test for default underline offset --- tests/basic-usage.test.css | 3 +++ tests/basic-usage.test.html | 1 + 2 files changed, 4 insertions(+) diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 259069fb9af2..99ba4ddd86e0 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -792,6 +792,9 @@ .decoration-2 { text-decoration-thickness: 2px; } +.underline-offset { + text-underline-offset: 1px; +} .underline-offset-2 { text-underline-offset: 2px; } diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index f4d17c1c27ba..98ee269c1284 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -167,6 +167,7 @@
+
From 666d01550c23a79459daf00c581e12d7a8ccc39b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 23 Nov 2021 16:01:16 -0500 Subject: [PATCH 4/5] Remove text-underline-position, don't rename underline utilities, remove DEFAULT values for decoration thickness and underline offset --- src/corePlugins.js | 20 ++++---------------- stubs/defaultConfig.stub.js | 4 ++-- 2 files changed, 6 insertions(+), 18 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index d9e3efdb9005..1da6b0e19e35 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1656,13 +1656,10 @@ export let corePlugins = { textDecoration: ({ addUtilities }) => { addUtilities({ - '.underline': { 'text-decoration': 'underline' }, // Deprecated - '.line-through': { 'text-decoration': 'line-through' }, // Deprecated - '.no-underline': { 'text-decoration': 'none' }, // Deprecated - '.decoration-underline': { 'text-decoration': 'underline' }, - '.decoration-overline': { 'text-decoration': 'overline' }, - '.decoration-line-through': { 'text-decoration': 'line-through' }, - '.decoration-none': { 'text-decoration': 'none' }, + '.underline': { 'text-decoration': 'underline' }, + '.overline': { 'text-decoration': 'overline' }, + '.line-through': { 'text-decoration': 'line-through' }, + '.no-underline': { 'text-decoration': 'none' }, }) }, @@ -1699,15 +1696,6 @@ export let corePlugins = { { type: ['length', 'percentage'] } ), - textUnderlinePosition: ({ addUtilities }) => { - addUtilities({ - '.underline-auto': { 'text-underline-position': 'auto' }, - '.underline-under': { 'text-underline-position': 'under' }, - '.underline-right': { 'text-underline-position': 'right' }, - '.underline-left': { 'text-underline-position': 'left' }, - }) - }, - fontSmoothing: ({ addUtilities }) => { addUtilities({ '.antialiased': { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index e3028345f37b..71389fb3bae7 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -799,15 +799,15 @@ module.exports = { textColor: ({ theme }) => theme('colors'), textDecorationColor: ({ theme }) => theme('colors'), textDecorationThickness: { - DEFAULT: '1px', 0: '0px', + 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, textUnderlineOffset: { - DEFAULT: '1px', 0: '0px', + 1: '1px', 2: '2px', 4: '4px', 8: '8px', From fd25d95a018d3f1525eb57ba7c263d73cae00d86 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 24 Nov 2021 11:58:20 -0500 Subject: [PATCH 5/5] Add auto/from-font values, update tests --- stubs/defaultConfig.stub.js | 3 +++ tests/basic-usage.test.css | 10 ++-------- tests/basic-usage.test.html | 11 ++++++----- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 71389fb3bae7..2bcb58f58e15 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -799,6 +799,8 @@ module.exports = { textColor: ({ theme }) => theme('colors'), textDecorationColor: ({ theme }) => theme('colors'), textDecorationThickness: { + auto: 'auto', + 'from-font': 'from-font', 0: '0px', 1: '1px', 2: '2px', @@ -806,6 +808,7 @@ module.exports = { 8: '8px', }, textUnderlineOffset: { + auto: 'auto', 0: '0px', 1: '1px', 2: '2px', diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 404c55992d36..08000d8dee8e 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -802,30 +802,24 @@ .underline { text-decoration: underline; } -.decoration-underline { - text-decoration: underline; -} .decoration-red-600 { text-decoration-color: #dc2626; } .decoration-solid { text-decoration-style: solid; } -.decoration { +.decoration-1 { text-decoration-thickness: 1px; } .decoration-2 { text-decoration-thickness: 2px; } -.underline-offset { +.underline-offset-1 { text-underline-offset: 1px; } .underline-offset-2 { text-underline-offset: 2px; } -.underline-right { - text-underline-position: right; -} .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index 034ff0ab0496..aabf1b64728e 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -34,6 +34,7 @@
+
@@ -163,11 +164,11 @@
-
-
-
-
-
+
+
+
+
+