Use less hacky fix for urls detected as custom properties (#7275)

* Use less hacky fix for urls detected as custom properties

* Add more test cases

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix preflight border color fallback ([#7288](https://github.com/tailwindlabs/tailwindcss/pull/7288))
 - Correctly parse shadow lengths without a leading zero ([#7289](https://github.com/tailwindlabs/tailwindcss/pull/7289))
 - Don't crash when scanning extremely long class candidates ([#7331](https://github.com/tailwindlabs/tailwindcss/pull/7331))
+- Use less hacky fix for urls detected as custom properties ([#7275](https://github.com/tailwindlabs/tailwindcss/pull/7275))
 
 ## [3.0.18] - 2022-01-28
 

src/lib/generateRules.js

@@ -262,11 +262,37 @@ function parseRules(rule, cache, options = {}) {
 const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
 
 function isValidPropName(name) {
-  // TODO: properly fix this!
-  return IS_VALID_PROPERTY_NAME.test(name) && !name.startsWith('http')
+  return IS_VALID_PROPERTY_NAME.test(name)
+}
+
+/**
+ * @param {string} declaration
+ * @returns {boolean}
+ */
+function looksLikeUri(declaration) {
+  // Quick bailout for obvious non-urls
+  // This doesn't support schemes that don't use a leading // but that's unlikely to be a problem
+  if (!declaration.includes('://')) {
+    return false
+  }
+
+  try {
+    const url = new URL(declaration)
+    return url.scheme !== '' && url.host !== ''
+  } catch (err) {
+    // Definitely not a valid url
+    return false
+  }
 }
 
 function isParsableCssValue(property, value) {
+  // We don't want to to treat [https://example.com] as a custom property
+  // Even though, according to the CSS grammar, it's a totally valid CSS declaration
+  // So we short-circuit here by checking if the custom property looks like a url
+  if (looksLikeUri(`${property}:${value}`)) {
+    return false
+  }
+
   try {
     postcss.parse(`a{${property}:${value}}`).toResult()
     return true

tests/arbitrary-properties.test.js

@@ -352,13 +352,27 @@ it('should not generate invalid CSS', () => {
   let config = {
     content: [
       {
-        raw: html`<div class="[https://en.wikipedia.org/wiki]"></div>`,
+        raw: html`
+          <div class="[https://en.wikipedia.org/wiki]"></div>
+          <div class="[http://example.org]"></div>
+          <div class="[http://example]"></div>
+          <div class="[ftp://example]"></div>
+          <div class="[stillworks:/example]"></div>
+        `,
+
+        // NOTE: In this case `stillworks:/example` being generated is not ideal
+        // but it at least doesn't produce invalid CSS when run through prettier
+        // So we can let it through since it is technically valid
       },
     ],
     corePlugins: { preflight: false },
   }
 
   return run('@tailwind utilities', config).then((result) => {
-    return expect(result.css).toMatchFormattedCss(css``)
+    return expect(result.css).toMatchFormattedCss(css`
+      .\[stillworks\:\/example\] {
+        stillworks: /example;
+      }
+    `)
   })
 })