fix(placeholder): fix placeholder on focus

It was not generating placeholder pseudo elements when focus was also applied

Author: estevanmaito

__tests__/index.test.js

@@ -237,7 +237,36 @@ describe('plugin', () => {
         .text-gray-100 {
           color: #333333
         }
-        .theme-dark .dark\\:focus\\:text-gray-100:focus {
+        .theme-dark .dark\\:focus\\:text-gray-100\\:focus {
+          color: #333333
+        }
+      `)
+    })
+  })
+
+  it('should generate :focus placeholder variants', () => {
+    return generatePluginCss({
+      ...baseTestTheme,
+      variants: {
+        textColor: ['dark:focus'],
+        placeholderColor: ['focus', 'dark:focus'],
+      },
+      corePlugins: ['textColor', 'placeholderColor'],
+    }).then((css) => {
+      expect(css).toMatchCss(`
+        .text-gray-100 {
+          color: #333333
+        }
+        .theme-dark .dark\\:focus\\:text-gray-100\\:focus {
+          color: #333333
+        }
+        .placeholder-gray-100::placeholder {      
+          color: #333333
+        }
+        .focus\\:placeholder-gray-100:focus::placeholder {
+          color: #333333
+        }
+        .theme-dark .dark\\:focus\\:placeholder-gray-100\\:focus::placeholder {
           color: #333333
         }
       `)

src/index.js

@@ -79,8 +79,13 @@ module.exports = ({ addVariant, theme, e }) => {
     })
 
     addVariant(`${tv}:focus`, ({ modifySelectors, separator }) => {
-      modifySelectors(({ className }) => {
-        return `${root}.${e(`${tv}${separator}focus${separator}${className}`)}:focus`
+      modifySelectors(({ selector }) => {
+        return selectorParser((selectors) => {
+          selectors.walkClasses((sel) => {
+            sel.value = `${tv}${separator}focus${separator}${sel.value}:focus`
+            sel.parent.insertBefore(sel, selectorParser().astSync(root))
+          })
+        }).processSync(selector)
       })
     })