Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fallback to non variant matches when no matching variant exists
Svelte’s dynamic class syntax looks like this:
<h1 class:text-blue-500={shouldBeBlue}></h1>

We were picking up `class:text-blue-500` as a variant. However `class` is not a registered variant. In this case we were discarding the already matched rules for text-blue-500. In this case we want to match them anyway.
  • Loading branch information
thecrypticace committed Mar 28, 2021
commit 3e3c101afb04329f972e9ce80adb6f4f534c15ca
2 changes: 1 addition & 1 deletion src/lib/generateRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ function applyVariant(variant, matches, context) {
return result
}

return []
return matches
}

function parseRules(rule, cache, options = {}) {
Expand Down
4 changes: 4 additions & 0 deletions tests/variants.test.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity));
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
Expand Down
3 changes: 3 additions & 0 deletions tests/variants.test.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,8 @@
<div class="lg:dark:shadow-md"></div>
<div class="xl:dark:disabledshadow-md"></div>
<div class="2xl:dark:motion-safe:focus-within:shadow-md"></div>

<!-- Things that look like variants but are not -->
<h1 class:text-blue-500={shouldBeBlue}></h1>
</body>
</html>