Validate that css values are actually parsable

src/lib/generateRules.js

@@ -248,19 +248,42 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
+
+function isValidPropName(name) {
+  return IS_VALID_PROPERTY_NAME.test(name)
+}
+
+function isParsableCssValue(property, value) {
+  try {
+    postcss.parse(`a{${property}:${value}}`).toResult()
+    return true
+  } catch (err) {
+    return false
+  }
+}
+
 function extractArbitraryProperty(classCandidate, context) {
   let [, property, value] = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/) ?? []
 
   if (value === undefined) {
     return null
   }
 
+  if (!isValidPropName(property)) {
+    return null
+  }
+
   if (!isValidArbitraryValue(value)) {
     return null
   }
 
   let normalized = normalize(value)
 
+  if (!isParsableCssValue(property, normalized)) {
+    return null
+  }
+
   return [
     [
       { sort: context.arbitraryPropertiesSort, layer: 'utilities' },

tests/arbitrary-properties.test.js

@@ -231,3 +231,45 @@ test('invalid class', () => {
     expect(result.css).toMatchFormattedCss(css``)
   })
 })
+
+test('invalid arbitrary property', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="[autoplay:\${autoplay}]"></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css``)
+  })
+})
+
+test('invalid arbitrary property 2', () => {
+  let config = {
+    content: [
+      {
+        raw: html`[0:02]`,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css``)
+  })
+})