From 4af90156a3db7b2787d6e68eafbc9be88c9b8c7a Mon Sep 17 00:00:00 2001 From: Michael Warner Date: Mon, 11 Oct 2021 15:06:57 -0400 Subject: [PATCH 1/3] utilities and tests in place for textDecorationColor and textDecorationOpacity --- src/corePlugins.js | 25 +++++++++++++++++++++++++ stubs/defaultConfig.stub.js | 2 ++ tests/arbitrary-values.test.css | 25 +++++++++++++++++++++++++ tests/arbitrary-values.test.html | 9 +++++++++ tests/basic-usage.test.css | 7 +++++++ tests/basic-usage.test.html | 4 +++- 6 files changed, 71 insertions(+), 1 deletion(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index b06dbeee6fa7..c04145f273bf 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1801,6 +1801,31 @@ export let corePlugins = { }) }, + textDecorationColor: ({ matchUtilities, theme, corePlugins }) => { + matchUtilities( + { + decoration: (value) => { + if (!corePlugins('textDecorationOpacity')) { + return { + 'text-decoration-color': toColorValue(value), + } + } + + return withAlphaVariable({ + color: value, + property: 'text-decoration-color', + variable: '--tw-decoration-opacity', + }) + }, + }, + { values: flattenColorPalette(theme('backgroundColor')), type: 'color' } + ) + }, + + textDecorationOpacity: createUtilityPlugin('textDecorationOpacity', [ + ['decoration-opacity', ['--tw-decoration-opacity']], + ]), + fontSmoothing: ({ addUtilities }) => { addUtilities({ '.antialiased': { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 2440623ed170..0818ddafa105 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -787,6 +787,8 @@ module.exports = { 2: '2', }, textColor: ({ theme }) => theme('colors'), + textDecorationColor: ({ theme }) => theme('colors'), + textDecorationOpacity: ({ theme }) => theme('opacity'), textIndent: ({ theme }) => ({ ...theme('spacing'), }), diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index edee01b8961d..2403c5e3ad3c 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -807,6 +807,31 @@ .text-opacity-\[var\(--value\)\] { --tw-text-opacity: var(--value); } +.decoration-\[black\] { + --tw-decoration-opacity: 1; + text-decoration-color: rgb(0 0 0 / var(--tw-decoration-opacity)); +} +.decoration-\[rgb\(123\2c 123\2c 123\)\] { + --tw-decoration-opacity: 1; + text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity)); +} +.decoration-\[rgb\(123\2c _123\2c _123\)\] { + --tw-decoration-opacity: 1; + text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity)); +} +.decoration-\[rgb\(123_123_123\)\] { + --tw-decoration-opacity: 1; + text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity)); +} +.decoration-\[color\:var\(--color\)\] { + text-decoration-color: var(--color); +} +.decoration-opacity-\[0\.8\] { + --tw-decoration-opacity: 0.8; +} +.decoration-opacity-\[var\(--value\)\] { + --tw-decoration-opacity: var(--value); +} .placeholder-\[var\(--placeholder\)\]::placeholder { color: var(--placeholder); } diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html index 461919d8f53f..5846a70919f3 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -297,6 +297,15 @@
+
+
+
+
+
+ +
+
+
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index b14a10774b36..5bf3ab6e854b 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -773,6 +773,13 @@ .underline { text-decoration: underline; } +.decoration-green-300 { + --tw-decoration-opacity: 1; + text-decoration-color: rgb(134 239 172 / var(--tw-decoration-opacity)); +} +.decoration-opacity-50 { + --tw-decoration-opacity: 0.5; +} .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 c40ca8a21353..895427a80f04 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -159,8 +159,10 @@
-
+
+
+
From 40ef5eabfb5501f0377901f8df03842f84268faa Mon Sep 17 00:00:00 2001 From: Michael Warner Date: Mon, 11 Oct 2021 15:34:37 -0400 Subject: [PATCH 2/3] change 'backgroundColor' to 'textDecorationColor' in corePlugin declaration for latter --- src/corePlugins.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index c04145f273bf..0261cd9c3bdc 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1818,7 +1818,7 @@ export let corePlugins = { }) }, }, - { values: flattenColorPalette(theme('backgroundColor')), type: 'color' } + { values: flattenColorPalette(theme('textDecorationColor')), type: 'color' } ) }, From cd1d66ed8fdc7546f68b3686c23ee217f9e6ccc6 Mon Sep 17 00:00:00 2001 From: Michael Warner Date: Tue, 12 Oct 2021 08:53:31 -0400 Subject: [PATCH 3/3] remove explicit textDecorationOpacity utility (the JIT slash syntax suffices) --- src/corePlugins.js | 20 +++----------------- stubs/defaultConfig.stub.js | 1 - tests/arbitrary-values.test.css | 19 ++++++------------- tests/arbitrary-values.test.html | 4 +--- tests/basic-usage.test.css | 8 ++------ tests/basic-usage.test.html | 3 +-- 6 files changed, 13 insertions(+), 42 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index 0261cd9c3bdc..3cb91990f53b 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1801,31 +1801,17 @@ export let corePlugins = { }) }, - textDecorationColor: ({ matchUtilities, theme, corePlugins }) => { + textDecorationColor: ({ matchUtilities, theme }) => { matchUtilities( { decoration: (value) => { - if (!corePlugins('textDecorationOpacity')) { - return { - 'text-decoration-color': toColorValue(value), - } - } - - return withAlphaVariable({ - color: value, - property: 'text-decoration-color', - variable: '--tw-decoration-opacity', - }) + return { 'text-decoration-color': toColorValue(value) } }, }, - { values: flattenColorPalette(theme('textDecorationColor')), type: 'color' } + { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] } ) }, - textDecorationOpacity: createUtilityPlugin('textDecorationOpacity', [ - ['decoration-opacity', ['--tw-decoration-opacity']], - ]), - fontSmoothing: ({ addUtilities }) => { addUtilities({ '.antialiased': { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 0818ddafa105..00257df22ff3 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -788,7 +788,6 @@ module.exports = { }, textColor: ({ theme }) => theme('colors'), textDecorationColor: ({ theme }) => theme('colors'), - textDecorationOpacity: ({ theme }) => theme('opacity'), textIndent: ({ theme }) => ({ ...theme('spacing'), }), diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 2403c5e3ad3c..ada975c32d1c 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -808,29 +808,22 @@ --tw-text-opacity: var(--value); } .decoration-\[black\] { - --tw-decoration-opacity: 1; - text-decoration-color: rgb(0 0 0 / var(--tw-decoration-opacity)); + text-decoration-color: black; } .decoration-\[rgb\(123\2c 123\2c 123\)\] { - --tw-decoration-opacity: 1; - text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity)); + text-decoration-color: rgb(123, 123, 123); } .decoration-\[rgb\(123\2c _123\2c _123\)\] { - --tw-decoration-opacity: 1; - text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity)); + text-decoration-color: rgb(123, 123, 123); } .decoration-\[rgb\(123_123_123\)\] { - --tw-decoration-opacity: 1; - text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity)); + text-decoration-color: rgb(123 123 123); } .decoration-\[color\:var\(--color\)\] { text-decoration-color: var(--color); } -.decoration-opacity-\[0\.8\] { - --tw-decoration-opacity: 0.8; -} -.decoration-opacity-\[var\(--value\)\] { - --tw-decoration-opacity: var(--value); +.decoration-\[var\(--color\)\] { + text-decoration-color: var(--color); } .placeholder-\[var\(--placeholder\)\]::placeholder { color: var(--placeholder); diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html index 5846a70919f3..d27f2c70d273 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -302,9 +302,7 @@
- -
-
+
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 5bf3ab6e854b..aeff4c30ab7e 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -773,12 +773,8 @@ .underline { text-decoration: underline; } -.decoration-green-300 { - --tw-decoration-opacity: 1; - text-decoration-color: rgb(134 239 172 / var(--tw-decoration-opacity)); -} -.decoration-opacity-50 { - --tw-decoration-opacity: 0.5; +.decoration-red-600 { + text-decoration-color: #dc2626; } .antialiased { -webkit-font-smoothing: antialiased; diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index 895427a80f04..5d580909cec2 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -161,8 +161,7 @@
-
-
+