From 4f10113ff98f70367c349594a7995a3836e95519 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 31 Jan 2022 09:53:32 -0500
Subject: [PATCH 1/3] Use less hacky fix for urls detected as custom properties

---
 src/lib/generateRules.js | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index 559ab39acf9b..3f6e2a013ea6 100644
--- a/src/lib/generateRules.js
+++ b/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

From fa17a4b1aaa28310f2735b80aa23c419f670af97 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 31 Jan 2022 10:32:47 -0500
Subject: [PATCH 2/3] Add more test cases

---
 tests/arbitrary-properties.test.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js
index 094c43fd5d56..e3a4f02a5bce 100644
--- a/tests/arbitrary-properties.test.js
+++ b/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;
+      }
+    `)
   })
 })

From 5d7be8ed2ad9338a3365c3a285633366ba86d71b Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 7 Feb 2022 09:57:40 -0500
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03e1c846f02e..b14521253c84 100644
--- a/CHANGELOG.md
+++ b/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