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