feat: add backdrop variant

tw-in-js · Oct 3, 2022 · f0e532f · f0e532f
1 parent cd694ce
commit f0e532f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/unlucky-clocks-attend.md b/.changeset/unlucky-clocks-attend.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind': patch
+---
+
+add `backdrop` variant
diff --git a/packages/preset-tailwind/src/rules.test.json b/packages/preset-tailwind/src/rules.test.json
@@ -2037,5 +2037,9 @@
   "[@media_screen{@media(hover:hover)}]:underline": "@media screen{@media(hover:hover){.\\[\\@media_screen\\{\\@media\\(hover\\:hover\\)\\}\\]\\:underline{text-decoration-line:underline}}}",
   "[@media_screen{@media(hover:hover){&:hover}}]:underline": "@media screen{@media(hover:hover){.\\[\\@media_screen\\{\\@media\\(hover\\:hover\\)\\{\\&\\:hover\\}\\}\\]\\:underline:hover{text-decoration-line:underline}}}",
   "[&[data-open]]:underline": ".\\[\\&\\[data-open\\]\\]\\:underline[data-open]{text-decoration-line:underline}",
-  "[&[data-foo][data-bar]:not([data-baz])]:underline": ".\\[\\&\\[data-foo\\]\\[data-bar\\]\\:not\\(\\[data-baz\\]\\)\\]\\:underline[data-foo][data-bar]:not([data-baz]){text-decoration-line:underline}"
+  "[&[data-foo][data-bar]:not([data-baz])]:underline": ".\\[\\&\\[data-foo\\]\\[data-bar\\]\\:not\\(\\[data-baz\\]\\)\\]\\:underline[data-foo][data-bar]:not([data-baz]){text-decoration-line:underline}",
+  "backdrop:shadow-md": [
+    "*,::before,::after,::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}",
+    ".backdrop\\:shadow-md::backdrop{--tw-shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}"
+  ]
 }
diff --git a/packages/preset-tailwind/src/variants.ts b/packages/preset-tailwind/src/variants.ts
@@ -20,6 +20,7 @@ const variants: Variant<TailwindTheme>[] = [
   ['selection', '& *::selection,&::selection'],
   ['file', '&::file-selector-button'],
   ['placeholder', '&::placeholder'],
+  ['backdrop', '&::backdrop'],
 
   ['first', '&:first-child'],
   ['last', '&:last-child'],