Add tests for legacy modifySelectors API

Author: adamwathan

tests/05-modify-selectors.test.css

@@ -0,0 +1,33 @@
+.markdown > p {
+  margin-top: 12px;
+}
+.font-bold {
+  font-weight: 700;
+}
+.foo .foo\:markdown > p {
+  margin-top: 12px;
+}
+.foo .foo\:font-bold {
+  font-weight: 700;
+}
+.foo .foo\:visited\:markdown:visited > p {
+  margin-top: 12px;
+}
+.foo .foo\:hover\:font-bold:hover {
+  font-weight: 700;
+}
+@media (min-width: 640px) {
+  .foo .sm\:foo\:font-bold {
+    font-weight: 700;
+  }
+}
+@media (min-width: 768px) {
+  .foo .md\:foo\:focus\:font-bold:focus {
+    font-weight: 700;
+  }
+}
+@media (min-width: 1024px) {
+  .foo .lg\:foo\:disabled\:markdown:disabled > p {
+    margin-top: 12px;
+  }
+}

tests/05-modify-selectors.test.html

@@ -0,0 +1,17 @@
+<div class="font-bold"></div>
+<div class="foo:font-bold"></div>
+<div class="foo:hover:font-bold"></div>
+<div class="sm:foo:font-bold"></div>
+<div class="md:foo:focus:font-bold"></div>
+<div class="markdown">
+  <p>Lorem ipsum dolor sit amet...</p>
+</div>
+<div class="foo:markdown">
+  <p>Lorem ipsum dolor sit amet...</p>
+</div>
+<div class="foo:visited:markdown">
+  <p>Lorem ipsum dolor sit amet...</p>
+</div>
+<div class="lg:foo:disabled:markdown">
+  <p>Lorem ipsum dolor sit amet...</p>
+</div>

tests/05-modify-selectors.test.js

@@ -0,0 +1,50 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+const selectorParser = require('postcss-selector-parser')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('modify selectors', () => {
+  let config = {
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './05-modify-selectors.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [
+      function ({ addVariant, e }) {
+        addVariant('foo', ({ modifySelectors, separator }) => {
+          modifySelectors(({ selector }) => {
+            return selectorParser((selectors) => {
+              selectors.walkClasses((classNode) => {
+                classNode.value = `foo${separator}${classNode.value}`
+                classNode.parent.insertBefore(classNode, selectorParser().astSync(`.foo `))
+              })
+            }).processSync(selector)
+          })
+        })
+      },
+    ],
+  }
+
+  let css = `
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .markdown > p {
+        margin-top: 12px;
+      }
+    }
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './05-modify-selectors.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})