Ensure the percentage data type is validated correctly (#8015)

* 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.

* update changelog

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
 

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 = [

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`<div class="bg-[top_right_50%]"></div>` }],
+    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%;
+      }
+    `)
+  })
+})