Skip to content

Commit

Permalink
Support arbitrary values + calc + theme with quotes
Browse files Browse the repository at this point in the history
  • Loading branch information
thecrypticace committed Feb 14, 2022
1 parent f116f9f commit c5e6074
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/lib/defaultExtractor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]`
Expand Down
29 changes: 29 additions & 0 deletions tests/arbitrary-values.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`<div
class="w-[calc(100%-theme('spacing.1'))] w-[calc(100%-theme('spacing[0.5]'))]"
></div>`,
},
],
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));
}
`)
})
})
4 changes: 4 additions & 0 deletions tests/default-extractor.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ const input =
<div class="hover:font-bold"></div>
<div class="content-['>']"></div>
<div class="[--y:theme(colors.blue.500)]">
<div class="w-[calc(100%-theme('spacing.1'))]">
<div class='w-[calc(100%-theme("spacing.2"))]'>
<script>
let classes01 = ["text-[10px]"]
Expand Down Expand Up @@ -90,6 +92,8 @@ const includes = [
`hover:test`,
`overflow-scroll`,
`[--y:theme(colors.blue.500)]`,
`w-[calc(100%-theme('spacing.1'))]`,
`w-[calc(100%-theme("spacing.2"))]`,
]

const excludes = [
Expand Down

0 comments on commit c5e6074

Please sign in to comment.