From 7d50d4cc2fd389b027a5907d235984932e40686b Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 1 Apr 2022 12:18:47 +0200 Subject: [PATCH 1/2] ensure the `percentage` data type is validated correctly When checking for our data types, we have to make sure that each part is correct, this wasn't happening for the `percentage` data type, which meant that `top_right_50%` was a valid percentage value because it ended in `%` which is not correct. Because of this, the generated code was non-existent because we got a warning: The class `bg-[top_right_50%]` is ambiguous and matches multiple utilities. Use `bg-[length:top_right_50%]` for `background-size: top right 50%` Use `bg-[position:top_right_50%]` for `background-position: top right 50%` If this is content and not a class, replace it with `bg-[top_right_50%]` to silence this warning. But this is not correct because this can never be a valid background size due to the `top right` section. This fixes it by validating each part individually, and now we get generated css. --- src/util/dataTypes.js | 4 +++- tests/arbitrary-values.test.js | 22 ++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js index a5c502b424b7..a9a1c7b584e8 100644 --- a/src/util/dataTypes.js +++ b/src/util/dataTypes.js @@ -57,7 +57,9 @@ export function number(value) { } export function percentage(value) { - return /%$/g.test(value) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?%`).test(value)) + return value.split(UNDERSCORE).every((part) => { + return /%$/g.test(part) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?%`).test(part)) + }) } let lengthUnits = [ diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 55d78b49ebfc..ab643ed3159f 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -384,3 +384,25 @@ it('should not output unparsable arbitrary CSS values', () => { return expect(result.css).toMatchFormattedCss(``) }) }) + +// Issue: https://github.com/tailwindlabs/tailwindcss/issues/7997 +// `top_right_50%` was a valid percentage before introducing this change +it('should correctly validate each part when checking for `percentage` data types', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + plugins: [], + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .bg-\[top_right_50\%\] { + background-position: top right 50%; + } + `) + }) +}) From 7a6522f6fb83a3182098c41a28b9c333ea1d3a33 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 1 Apr 2022 12:22:41 +0200 Subject: [PATCH 2/2] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f254b95a8415..053f67963eab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow for custom properties in `rgb`, `rgba`, `hsl` and `hsla` colors ([#7933](https://github.com/tailwindlabs/tailwindcss/pull/7933)) - Remove autoprefixer as explicit peer-dependency to avoid invalid warnings in situations where it isn't actually needed ([#7949](https://github.com/tailwindlabs/tailwindcss/pull/7949)) - Types: allow for arbitrary theme values (for 3rd party plugins) ([#7926](https://github.com/tailwindlabs/tailwindcss/pull/7926)) +- Ensure the `percentage` data type is validated correctly ([#8015](https://github.com/tailwindlabs/tailwindcss/pull/8015)) ### Changed