From c5e6074d2378372a7c412254153f021f4a7c6e1b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 14 Feb 2022 15:03:51 -0500 Subject: [PATCH] Support arbitrary values + calc + theme with quotes --- src/lib/defaultExtractor.js | 2 ++ tests/arbitrary-values.test.js | 29 +++++++++++++++++++++++++++++ tests/default-extractor.test.js | 4 ++++ 3 files changed, 35 insertions(+) diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js index 8fdd80af31ba..fe720f86780f 100644 --- a/src/lib/defaultExtractor.js +++ b/src/lib/defaultExtractor.js @@ -8,6 +8,8 @@ const PATTERNS = [ /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")] /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')] /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")] + /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source, // h-[calc(100%-theme('spacing.1'))] + /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source, // h-[calc(100%-theme("spacing.1"))] /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']` /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]` /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source, // `[attr:value]` diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index da779bdf0be3..c8fbf352c58e 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -341,3 +341,32 @@ it('should be possible to read theme values in arbitrary values (with quotes)', `) }) }) + +it('should be possible to read theme values in arbitrary values (with quotes) when inside calc or similar functions', () => { + let config = { + content: [ + { + raw: html`
`, + }, + ], + theme: { + spacing: { + 0.5: 'calc(.5 * .25rem)', + 1: 'calc(1 * .25rem)', + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + .w-\[calc\(100\%-theme\(\'spacing\.1\'\)\)\] { + width: calc(100% - calc(1 * 0.25rem)); + } + .w-\[calc\(100\%-theme\(\'spacing\[0\.5\]\'\)\)\] { + width: calc(100% - calc(0.5 * 0.25rem)); + } + `) + }) +}) diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js index 9dcd62b07a98..35d06b0551d3 100644 --- a/tests/default-extractor.test.js +++ b/tests/default-extractor.test.js @@ -26,6 +26,8 @@ const input =
+
+