Quick fix for incorrect arbitrary properties when using URLs (#7252)

* quick fix for incorrect arbitrary properties

Turns out that using links like [https://example.com] causes arbitrary
properties to generate invalid css.
This is a very dirty quick fix for this specific case, so we have to fix
this properly!

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) ([#7232](https://github.com/tailwindlabs/tailwindcss/pull/7232))
+- Quick fix for incorrect arbitrary properties when using URLs ([#7252](https://github.com/tailwindlabs/tailwindcss/pull/7252))
 
 ## [3.0.17] - 2022-01-26
 

src/lib/generateRules.js

@@ -262,7 +262,8 @@ function parseRules(rule, cache, options = {}) {
 const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
 
 function isValidPropName(name) {
-  return IS_VALID_PROPERTY_NAME.test(name)
+  // TODO: properly fix this!
+  return IS_VALID_PROPERTY_NAME.test(name) && !name.startsWith('http')
 }
 
 function isParsableCssValue(property, value) {

tests/arbitrary-properties.test.js

@@ -347,3 +347,18 @@ it('should be possible to read theme values in arbitrary properties (with quotes
     `)
   })
 })
+
+it('should not generate invalid CSS', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="[https://en.wikipedia.org/wiki]"></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css``)
+  })
+})