Ensure the percentage data type is validated correctly

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%;
+      }
+    `)
+  })
+})