From 728218b9d99f6f5cd2a1daeaa4e334c042887fab Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 28 Jan 2022 20:41:01 +0100 Subject: [PATCH 1/2] 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! --- src/lib/generateRules.js | 3 ++- tests/arbitrary-properties.test.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index 7eb80fdc671d..6b86515412f6 100644 --- a/src/lib/generateRules.js +++ b/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) { diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index e97ea7c84cfb..094c43fd5d56 100644 --- a/tests/arbitrary-properties.test.js +++ b/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`
`, + }, + ], + corePlugins: { preflight: false }, + } + + return run('@tailwind utilities', config).then((result) => { + return expect(result.css).toMatchFormattedCss(css``) + }) +}) From d3e932dcb659a4c7f6b39304197b671d15a8fd0f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 28 Jan 2022 20:42:33 +0100 Subject: [PATCH 2/2] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index df8a9e36e858..51acb59b113f 100644 --- a/CHANGELOG.md +++ b/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