From 9267cb48fe97400d4d193ea2f6ec415b81514860 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 28 Mar 2023 12:14:33 +0200 Subject: [PATCH 1/3] add dedicated color stop position tests --- tests/plugins/gradientColorStops.test.js | 73 ++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index 52ab30d19ae9..fea23666d491 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -127,4 +127,77 @@ crosscheck(({ stable, oxide }) => { `) }) }) + + test('gradient color stop position', () => { + let config = { + content: [ + { + raw: html` +
+
+
+
+
+
+ `, + }, + ], + theme: {}, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); + } + .from-red-500 { + --tw-gradient-from: #ef4444 var(--tw-gradient-from-position); + --tw-gradient-from-position: ; + --tw-gradient-to: #ef444400 var(--tw-gradient-from-position); + --tw-gradient-to-position: ; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + } + .from-10 { + --tw-gradient-from-position: 10%; + } + .from-50 { + --tw-gradient-from-position: 50%; + } + .from-\[14\%\] { + --tw-gradient-from-position: 14%; + } + .via-pink-500 { + --tw-gradient-via-position: ; + --tw-gradient-to: #ec489900 var(--tw-gradient-to-position); + --tw-gradient-to-position: ; + --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), + var(--tw-gradient-to); + } + .via-10 { + --tw-gradient-via-position: 10%; + } + .via-75 { + --tw-gradient-via-position: 75%; + } + .via-\[14\%\] { + --tw-gradient-via-position: 14%; + } + .to-violet-400 { + --tw-gradient-to: #a78bfa var(--tw-gradient-to-position); + --tw-gradient-to-position: ; + } + .to-10 { + --tw-gradient-to-position: 10%; + } + .to-80 { + --tw-gradient-to-position: 80%; + } + .to-\[14\%\] { + --tw-gradient-to-position: 14%; + } + `) + }) + }) }) From 316a549e60d4c5e0c6ad3d48093d90f81ea61903 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 28 Mar 2023 15:17:18 +0200 Subject: [PATCH 2/3] use `%` sign in the name of the uility --- oxide/crates/core/src/parser.rs | 25 +++++++++----- stubs/config.full.js | 42 ++++++++++++------------ tests/plugins/gradientColorStops.test.js | 37 ++++++++------------- 3 files changed, 52 insertions(+), 52 deletions(-) diff --git a/oxide/crates/core/src/parser.rs b/oxide/crates/core/src/parser.rs index 4bba1f947583..16831afffd41 100644 --- a/oxide/crates/core/src/parser.rs +++ b/oxide/crates/core/src/parser.rs @@ -43,14 +43,14 @@ impl<'a> Extractor<'a> { #[cfg(test)] pub fn unique_ord(input: &'a [u8], opts: ExtractorOptions) -> Vec<&'a [u8]> { - // This is an inefficient way to get an ordered, unique - // list as a Vec but it is only meant for testing. - let mut candidates = Self::all(input, opts); - let mut unique_list = FxHashSet::default(); - unique_list.reserve(candidates.len()); - candidates.retain(|c| unique_list.insert(*c)); + // This is an inefficient way to get an ordered, unique + // list as a Vec but it is only meant for testing. + let mut candidates = Self::all(input, opts); + let mut unique_list = FxHashSet::default(); + unique_list.reserve(candidates.len()); + candidates.retain(|c| unique_list.insert(*c)); - candidates + candidates } } @@ -319,7 +319,16 @@ impl<'a> Extractor<'a> { // Allowed characters in the candidate itself // None of these can come after a closing bracket `]` - b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'-' | b'_' | b'(' | b')' | b'!' | b'@' + b'a'..=b'z' + | b'A'..=b'Z' + | b'0'..=b'9' + | b'-' + | b'_' + | b'(' + | b')' + | b'!' + | b'@' + | b'%' if prev != b']' => { /* TODO: The `b'@'` is necessary for custom separators like _@, maybe we can handle this in a better way... */ diff --git a/stubs/config.full.js b/stubs/config.full.js index 55cc28f34222..c32ccd3a0ea2 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -356,27 +356,27 @@ module.exports = { gap: ({ theme }) => theme('spacing'), gradientColorStops: ({ theme }) => theme('colors'), gradientColorStopPositions: { - 0: '0%', - 5: '5%', - 10: '10%', - 15: '15%', - 20: '20%', - 25: '25%', - 30: '30%', - 35: '35%', - 40: '40%', - 45: '45%', - 50: '50%', - 55: '55%', - 60: '60%', - 65: '65%', - 70: '70%', - 75: '75%', - 80: '80%', - 85: '85%', - 90: '90%', - 95: '95%', - 100: '100%', + '0%': '0%', + '5%': '5%', + '10%': '10%', + '15%': '15%', + '20%': '20%', + '25%': '25%', + '30%': '30%', + '35%': '35%', + '40%': '40%', + '45%': '45%', + '50%': '50%', + '55%': '55%', + '60%': '60%', + '65%': '65%', + '70%': '70%', + '75%': '75%', + '80%': '80%', + '85%': '85%', + '90%': '90%', + '95%': '95%', + '100%': '100%', }, grayscale: { 0: '0', diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index fea23666d491..c16605e65133 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -137,9 +137,9 @@ crosscheck(({ stable, oxide }) => {
-
-
-
+
+
+
`, }, @@ -159,14 +159,11 @@ crosscheck(({ stable, oxide }) => { --tw-gradient-to-position: ; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - .from-10 { + .from-10\% { --tw-gradient-from-position: 10%; } - .from-50 { - --tw-gradient-from-position: 50%; - } - .from-\[14\%\] { - --tw-gradient-from-position: 14%; + .from-\[11\%\] { + --tw-gradient-from-position: 11%; } .via-pink-500 { --tw-gradient-via-position: ; @@ -175,27 +172,21 @@ crosscheck(({ stable, oxide }) => { --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to); } - .via-10 { - --tw-gradient-via-position: 10%; - } - .via-75 { - --tw-gradient-via-position: 75%; + .via-20\% { + --tw-gradient-via-position: 20%; } - .via-\[14\%\] { - --tw-gradient-via-position: 14%; + .via-\[12\%\] { + --tw-gradient-via-position: 12%; } .to-violet-400 { --tw-gradient-to: #a78bfa var(--tw-gradient-to-position); --tw-gradient-to-position: ; } - .to-10 { - --tw-gradient-to-position: 10%; - } - .to-80 { - --tw-gradient-to-position: 80%; + .to-30\% { + --tw-gradient-to-position: 30%; } - .to-\[14\%\] { - --tw-gradient-to-position: 14%; + .to-\[13\%\] { + --tw-gradient-to-position: 13%; } `) }) From d608e1a0773d86ac896b2195fa7c0832c76f8cae Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 28 Mar 2023 13:21:34 +0200 Subject: [PATCH 3/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 97686836753e..62ad77ea8c03 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `content-normal` and `content-stretch` utilities ([#10645](https://github.com/tailwindlabs/tailwindcss/pull/10645)) - Add `whitespace-break-spaces` utility ([#10729](https://github.com/tailwindlabs/tailwindcss/pull/10729)) - Add support for configuring default `font-variation-settings` for a `font-family` ([#10034](https://github.com/tailwindlabs/tailwindcss/pull/10034), [#10515](https://github.com/tailwindlabs/tailwindcss/pull/10515)) +- Add gradient color stop position utilities ([#10886](https://github.com/tailwindlabs/tailwindcss/pull/10886)) ### Fixed