Combine tests

Author: adamwathan

src/index.test.css

@@ -340,6 +340,9 @@ div {
 .hover\:font-bold:hover {
   font-weight: 700;
 }
+.hover\:custom-util:hover {
+  background: #abcdef;
+}
 .focus\:font-normal:focus {
   font-weight: 400;
 }
@@ -363,6 +366,9 @@ div {
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
+.group:hover .group-hover\:custom-util {
+  background: #abcdef;
+}
 .group:active .group-active\:opacity-10 {
   opacity: 0.1;
 }
@@ -373,6 +379,9 @@ div {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
+  .motion-safe\:custom-util {
+    background: #abcdef;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .motion-reduce\:transition {
@@ -382,6 +391,15 @@ div {
     transition-duration: 150ms;
   }
 }
+.dark .dark\:custom-util {
+  background: #abcdef;
+}
+.foo\:custom-util {
+  background: #abcdef !important;
+}
+.foo\:hover\:custom-util:hover {
+  background: #abcdef !important;
+}
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;
@@ -433,6 +451,9 @@ div {
   .sm\:text-center {
     text-align: center;
   }
+  .sm\:custom-util {
+    background: #abcdef;
+  }
   @media (prefers-reduced-motion: no-preference) {
     .group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus {
       opacity: 0.1;
@@ -490,6 +511,11 @@ div {
       transition-duration: 150ms;
     }
   }
+  @media (prefers-reduced-motion: no-preference) {
+    .dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active {
+      background: #abcdef !important;
+    }
+  }
 }
 @media (min-width: 640px) {
   @media (min-width: 768px) {

src/index.test.html

@@ -14,6 +14,15 @@
     ></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="mt-6"></div>
+    <div class="custom-util"></div>
+    <div class="hover:custom-util"></div>
+    <div class="group-hover:custom-util"></div>
+    <div class="foo:custom-util"></div>
+    <div class="foo:hover:custom-util"></div>
+    <div class="sm:custom-util"></div>
+    <div class="dark:custom-util"></div>
+    <div class="motion-safe:custom-util"></div>
+    <div class="md:dark:motion-safe:foo:active:custom-util"></div>
     <div class="aspect-w-1 aspect-h-2"></div>
     <div class="aspect-w-3 aspect-h-4"></div>
     <div class="filter-none filter-grayscale"></div>

src/index.test.js

@@ -25,6 +25,20 @@ test('it works', () => {
     },
     plugins: [
       require('@tailwindcss/aspect-ratio'),
+      function ({ addVariant }) {
+        addVariant(
+          'foo',
+          ({ container }) => {
+            container.walkRules((rule) => {
+              rule.selector = `.foo\\:${rule.selector.slice(1)}`
+              rule.walkDecls((decl) => {
+                decl.important = true
+              })
+            })
+          },
+          { before: 'sm' }
+        )
+      },
       function ({ addUtilities, addBase, theme }) {
         addBase({
           h1: {
@@ -144,83 +158,6 @@ test('it works', () => {
   })
 })
 
-test('using postcss for everything wip', () => {
-  let config = {
-    darkMode: 'class',
-    purge: [path.resolve(__dirname, './index.test.adding-a-custom-variant.html')],
-    corePlugins: ['opacity'],
-    theme: {},
-    plugins: [
-      function ({ addVariant }) {
-        addVariant(
-          'foo',
-          ({ container }) => {
-            container.walkRules((rule) => {
-              rule.selector = `.foo\\:${rule.selector.slice(1)}`
-              rule.walkDecls((decl) => {
-                decl.important = true
-              })
-            })
-          },
-          { before: 'sm' }
-        )
-      },
-    ],
-  }
-
-  let css = `
-    @tailwind utilities;
-    @layer utilities {
-      .custom-util {
-        background: #abcdef;
-      }
-    }
-  `
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchCss(`
-      .opacity-50 {
-        opacity: 0.5;
-      }
-      .custom-util {
-        background: #abcdef;
-      }
-      .hover\\:custom-util:hover {
-        background: #abcdef;
-      }
-      .group:hover .group-hover\\:custom-util {
-        background: #abcdef;
-      }
-      @media (prefers-reduced-motion: no-preference) {
-        .motion-safe\\:custom-util {
-          background: #abcdef;
-        }
-      }
-      .dark .dark\\:custom-util {
-        background: #abcdef;
-      }
-      .foo\\:custom-util {
-        background: #abcdef !important;
-      }
-      .foo\\:hover\\:custom-util:hover {
-        background: #abcdef !important;
-      }
-      @media (min-width: 640px) {
-        .sm\\:custom-util {
-          background: #abcdef;
-        }
-      }
-      @media (min-width: 768px) {
-        @media (prefers-reduced-motion: no-preference) {
-          .dark .md\\:dark\\:motion-safe\\:foo\\:active\\:custom-util:active {
-            background: #abcdef !important;
-          }
-        }
-      }
-    `)
-  })
-})
-
 function format(input) {
   return prettier.format(input, {
     parser: 'css',

src/pluginUtils.js

@@ -1,5 +1,6 @@
 const selectorParser = require('postcss-selector-parser')
 const postcss = require('postcss')
+const { toRgba } = require('tailwindcss/lib/util/withAlphaVariable')
 
 function updateAllClasses(selectors, updateClass) {
   let parser = selectorParser((selectors) => {
@@ -46,31 +47,6 @@ function ruleIsEmpty([selector, rules]) {
   return Array.isArray(rules) && rules.length === 0
 }
 
-function transformRule(rule, transform) {
-  let [selector, rules] = rule
-
-  let transformed = transform(rule)
-
-  if (transformed === null) {
-    return null
-  }
-
-  let [transformedSelector, transformedRules] = transformed
-
-  let result = [
-    transformedSelector,
-    Array.isArray(transformedRules)
-      ? transformedRules.map((rule) => transformRule(rule, transform)).filter(Boolean)
-      : transformedRules,
-  ]
-
-  if (ruleIsEmpty(result)) {
-    return null
-  }
-
-  return result
-}
-
 function transformAllSelectors(transformSelector, wrap = null) {
   return ({ container }) => {
     container.walkRules((rule) => {
@@ -144,12 +120,9 @@ function asUnit(modifier, units, lookup = {}) {
   })
 }
 
-const { toRgba } = require('tailwindcss/lib/util/withAlphaVariable')
-
 module.exports = {
   updateAllClasses,
   updateLastClasses,
-  transformRule,
   transformAllSelectors,
   transformAllClasses,
   transformLastClasses,