add test #25

mertasan · Mar 22, 2022 · 2f1592e · 2f1592e
1 parent bfcb507
commit 2f1592e
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 0 deletions.
diff --git a/__tests__/issues.test.html b/__tests__/issues.test.html
@@ -0,0 +1,14 @@
+<html data-mode="dark" lang="en">
+<body>
+<div class="shadow-xs dark:shadow-xs"></div>
+<div class="shadow-sm dark:shadow-sm"></div>
+<div class="shadow-base dark:shadow-base"></div>
+<div class="shadow-md dark:shadow-md"></div>
+<div class="shadow-lg dark:shadow-lg"></div>
+<div class="shadow-xl dark:shadow-xl"></div>
+<div class="shadow-2xl dark:shadow-2xl"></div>
+<div class="shadow-outline dark:shadow-outline"></div>
+<div class="shadow-inner dark:shadow-inner"></div>
+<div class="shadow-none dark:shadow-none"></div>
+</body>
+</html>
diff --git a/__tests__/issues.test.js b/__tests__/issues.test.js
@@ -42,3 +42,75 @@ test('issue 23', async () => {
     "
   `)
 })
+
+test('issue 25', async () => {
+  const shadow = {
+    xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    base: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    outline: '0 0 0 3px rgba(var(--primary), 0.6)',
+    inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+    none: 'none',
+  }
+  expect(
+    await utils.diffOnly({
+      content: [utils.content()],
+      darkMode: 'class',
+      theme: {
+        variables: {
+          DEFAULT: {
+            shadow,
+          },
+        },
+
+        darkVariables: {
+          DEFAULT: {
+            shadow,
+          },
+        },
+      },
+
+      plugins: [
+        tailwindcssVariables({
+          darkToRoot: true,
+          darkSelector: '[data-mode="dark"]',
+          colorVariables: true,
+        }),
+      ],
+    })
+  ).toMatchInlineSnapshot(`
+    "
+
+      
+      + :root {
+      +   --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
+      +   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      +   --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
+      +   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      +   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      +   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      +   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      +   --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);
+      +   --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
+      +   --shadow-none: none
+      + }
+      + :root[data-mode='dark'] {
+      +   --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
+      +   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      +   --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
+      +   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      +   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      +   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      +   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      +   --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);
+      +   --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
+      +   --shadow-none: none
+      + }
+
+    "
+  `)
+})