update tests for recursive @apply

Author: RobinMalfait

tests/10-apply.test.css

@@ -178,3 +178,90 @@
     font-weight: 400;
   }
 }
+.use-base-only-a {
+  font-weight: 700;
+}
+.use-dependant-only-b {
+  font-weight: 700;
+  font-weight: 400;
+}
+.btn {
+  border-radius: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 700;
+}
+.btn-blue {
+  border-radius: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 700;
+  --tw-bg-opacity: 1;
+  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+.btn-blue:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
+}
+.recursive-apply-a {
+  font-weight: 900;
+}
+@media (min-width: 640px) {
+  .recursive-apply-a {
+    font-weight: 100;
+  }
+}
+.recursive-apply-b {
+  font-weight: 900;
+}
+@media (min-width: 640px) {
+  .recursive-apply-b {
+    font-weight: 100;
+  }
+}
+.recursive-apply-b {
+  font-weight: 600;
+}
+@media (min-width: 768px) {
+  .recursive-apply-b {
+    font-weight: 200;
+  }
+}
+.recursive-apply-c {
+  font-weight: 900;
+}
+@media (min-width: 640px) {
+  .recursive-apply-c {
+    font-weight: 100;
+  }
+}
+.recursive-apply-c {
+  font-weight: 600;
+}
+@media (min-width: 768px) {
+  .recursive-apply-c {
+    font-weight: 200;
+  }
+}
+.recursive-apply-c {
+  font-weight: 700;
+}
+@media (min-width: 1024px) {
+  .recursive-apply-c {
+    font-weight: 300;
+  }
+}
+.use-with-other-properties-base {
+  color: green;
+  font-weight: 700;
+}
+.use-with-other-properties-component {
+  color: green;
+  font-weight: 700;
+}

tests/10-apply.test.html

@@ -23,5 +23,14 @@
     <div class="basic-nesting-parent">
       <div class="basic-nesting-child"></div>
     </div>
+    <div class="use-base-only-a"></div>
+    <div class="use-dependant-only-b"></div>
+    <div class="btn"></div>
+    <div class="btn-blue"></div>
+    <div class="recursive-apply-a"></div>
+    <div class="recursive-apply-b"></div>
+    <div class="recursive-apply-c"></div>
+    <div class="use-with-other-properties-base use-with-other-properties-component"></div>
+    <div class="a b"></div>
   </body>
 </html>

tests/10-apply.test.js

@@ -65,6 +65,40 @@ test('@apply', () => {
         @apply font-bold hover:font-normal;
       }
     }
+    .use-base-only-a {
+      @apply font-bold;
+    }
+    .use-base-only-b {
+      @apply use-base-only-a font-normal;
+    }
+    .use-dependant-only-a {
+      @apply font-bold;
+    }
+    .use-dependant-only-b {
+      @apply use-dependant-only-a font-normal;
+    }
+    .btn {
+      @apply font-bold py-2 px-4 rounded; 
+    }
+    .btn-blue {
+      @apply btn bg-blue-500 hover:bg-blue-700 text-white;
+    }
+    .recursive-apply-a {
+      @apply font-black sm:font-thin;
+    }
+    .recursive-apply-b {
+      @apply recursive-apply-a font-semibold md:font-extralight;
+    }
+    .recursive-apply-c {
+      @apply recursive-apply-b font-bold lg:font-light;
+    }
+    .use-with-other-properties-base {
+      color: green;
+      @apply font-bold;
+    }
+    .use-with-other-properties-component {
+      @apply use-with-other-properties-base;
+    }
   }
 
   @layer utilities {