Improve tests (tailwindlabs#5108)

* change specific selector to universal selector

This is the commit that we could "undo" in the future if we need it
again.

* simplify `relative-purge-paths` test

This test doesn't require the "reset" selector (whether it is super specific or universal)

Simplified it so that it tests the relative purge config and nothing else.

* added css tagged template literal helpers

This allows prettier to format the string as CSS. This improves formatting and will improve future diffs.

* drop tailwind headers in the sanity tests

Every time we bump the Tailwind version, the sanity tests fail, because
the current version is encoded in the fixture files.

This will ensure that all of the contents is still checked and the
header is skipped. The header will be tested against a regex to ensure
that it is still there.

This should be a small but nice QoL improvement, so that we don't have
to think about updating those tests whenever we fix bugs or land new
features.

Author: RobinMalfait

tests/jit/basic-usage.test.css

@@ -1,12 +1,6 @@
-.translate-x-5,
-.-translate-x-4,
-.translate-y-6,
-.-translate-x-3,
-.rotate-3,
-.skew-y-12,
-.skew-x-12,
-.scale-95,
-.transform {
+*,
+::before,
+::after {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -17,41 +11,18 @@
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
     rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.border,
-.border-2,
-.border-t,
-.border-b-4 {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-}
-.shadow,
-.shadow-md,
-.shadow-lg {
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
-}
-.ring,
-.ring-4 {
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgba(59, 130, 246, 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
-}
-.blur-md,
-.brightness-150,
-.contrast-50,
-.drop-shadow-md,
-.grayscale,
-.hue-rotate-60,
-.invert,
-.saturate-200,
-.sepia,
-.filter {
   --tw-blur: var(--tw-empty, /*!*/ /*!*/);
   --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
   --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
@@ -63,17 +34,6 @@
   --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
   --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
     var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-.backdrop-blur-lg,
-.backdrop-brightness-50,
-.backdrop-contrast-0,
-.backdrop-grayscale,
-.backdrop-hue-rotate-90,
-.backdrop-invert,
-.backdrop-opacity-75,
-.backdrop-saturate-150,
-.backdrop-sepia,
-.backdrop-filter {
   --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
   --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
   --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);

tests/jit/basic-usage.test.js

@@ -9,6 +9,10 @@ function run(input, config = {}) {
   })
 }
 
+function css(templates) {
+  return templates.join('')
+}
+
 test('basic usage', () => {
   let config = {
     mode: 'jit',
@@ -18,13 +22,13 @@ test('basic usage', () => {
     plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './basic-usage.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 

tests/jit/kitchen-sink.test.css

@@ -126,9 +126,9 @@
     }
   }
 }
-.scale-50,
-.transform,
-.hover\:scale-75 {
+*,
+::before,
+::after {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -139,16 +139,9 @@
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
     rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.shadow-sm,
-.shadow-md,
-.hover\:shadow-lg,
-.md\:shadow-sm {
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
-}
-.focus\:ring-2 {
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;

tests/jit/kitchen-sink.test.js

@@ -9,6 +9,10 @@ function run(input, config = {}) {
   })
 }
 
+function css(templates) {
+  return templates.join('')
+}
+
 test('it works', () => {
   let config = {
     darkMode: 'class',
@@ -71,100 +75,101 @@ test('it works', () => {
     ],
   }
 
-  let css = `
-  @layer utilities {
-    .custom-util {
-      background: #abcdef;
+  let input = css`
+    @layer utilities {
+      .custom-util {
+        background: #abcdef;
+      }
+      *,
+      ::before,
+      ::after {
+        margin: 10px;
+      }
     }
-    *,
-::before,
-::after {
-      margin: 10px;
+    @layer components {
+      .test-apply-font-variant {
+        @apply ordinal tabular-nums;
+      }
+      .custom-component {
+        background: #123456;
+      }
+      *,
+      ::before,
+      ::after {
+        padding: 5px;
+      }
+      .foo .bg-black {
+        appearance: none;
+      }
     }
-  }
-  @layer components {
-    .test-apply-font-variant {
-      @apply ordinal tabular-nums;
+    @layer base {
+      div {
+        background: #654321;
+      }
     }
-    .custom-component {
-      background: #123456;
+    .theme-test {
+      font-family: theme('fontFamily.sans');
+      color: theme('colors.blue.500');
     }
-    *,
-::before,
-::after {
-      padding: 5px;
+    @screen lg {
+      .screen-test {
+        color: purple;
+      }
     }
-    .foo .bg-black {
-      appearance: none;
+    .apply-1 {
+      @apply mt-6;
     }
-  }
-  @layer base {
-    div {
-      background: #654321;
+    .apply-2 {
+      @apply mt-6;
     }
-  }
-  .theme-test {
-    font-family: theme('fontFamily.sans');
-    color: theme('colors.blue.500');
-  }
-  @screen lg {
-    .screen-test {
-      color: purple;
+    .apply-test {
+      @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
     }
-  }
-  .apply-1 {
-    @apply mt-6;
-  }
-  .apply-2 {
-    @apply mt-6;
-  }
-  .apply-test {
-    @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
-  }
-  .apply-components {
-    @apply container mx-auto;
-  }
-  .drop-empty-rules {
-    @apply hover:font-bold;
-  }
-  .apply-group {
-    @apply group-hover:font-bold;
-  }
-  .apply-dark-mode {
-    @apply dark:font-bold;
-  }
-  .apply-with-existing:hover {
-    @apply font-normal sm:bg-green-500;
-  }
-  .multiple, .selectors {
-    @apply font-bold group-hover:font-normal;
-  }
-  .list {
-    @apply space-x-4;
-  }
-  .nested {
-    .example {
-      @apply font-bold hover:font-normal;
+    .apply-components {
+      @apply container mx-auto;
     }
-  }
-  .apply-order-a {
-    @apply m-5 mt-6;
-  }
-  .apply-order-b {
-    @apply mt-6 m-5;
-  }
-  .apply-dark-group-example-a {
-    @apply dark:group-hover:bg-green-500;
-  }
-  .crazy-example {
-    @apply sm:motion-safe:group-active:focus:opacity-10;
-  }
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
-`
+    .drop-empty-rules {
+      @apply hover:font-bold;
+    }
+    .apply-group {
+      @apply group-hover:font-bold;
+    }
+    .apply-dark-mode {
+      @apply dark:font-bold;
+    }
+    .apply-with-existing:hover {
+      @apply font-normal sm:bg-green-500;
+    }
+    .multiple,
+    .selectors {
+      @apply font-bold group-hover:font-normal;
+    }
+    .list {
+      @apply space-x-4;
+    }
+    .nested {
+      .example {
+        @apply font-bold hover:font-normal;
+      }
+    }
+    .apply-order-a {
+      @apply m-5 mt-6;
+    }
+    .apply-order-b {
+      @apply mt-6 m-5;
+    }
+    .apply-dark-group-example-a {
+      @apply dark:group-hover:bg-green-500;
+    }
+    .crazy-example {
+      @apply sm:motion-safe:group-active:focus:opacity-10;
+    }
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './kitchen-sink.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')